/* -------------------------------------------------------
   Green Party Help Centre – quick makeover stylesheet
   One file, easy to tweak later. Everything is grouped in
   rough sections so you can jump right in and change stuff.
--------------------------------------------------------*/

/* 1. Pull in our font (Manrope) ---------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* 2. Colour tokens – the exact hex codes you sent ---------------------*/
:root{
  /* Core greens */
  --gp-green:            #00a85a; /* Fair Green – main buttons/links */
  --gp-green-dark:       #00643b; /* Forest Green – dark accents */
  --gp-green-light:      #28aa1e; /* Strong Green – hover / focus */
  --gp-green-apple:      #6ab023;
  --gp-green-lime:       #97d700;
  --gp-green-highlight:  #27e663;

  /* Supporting palette */
  --gp-midnight:   #001f4e;
  --gp-teal:       #00606a;
  --gp-turquoise:  #00a499;
  --gp-sky:        #41b6e6;
  --gp-violet:     #410076;
  --gp-purple:     #824ee4;
  --gp-red:        #df1317;
  --gp-morello:    #bc0c29;
  --gp-pink:       #e83e6a;
  --gp-blush:      #ff8a8c;
  --gp-peach:      #ffc399;
  --gp-yellow:     #fae100;
  --gp-orange:     #ff5b0f;
  --gp-brown:      #713400;
  --gp-dark-grey:  #333333;
  --gp-mid-grey:   #999999;
  --gp-black:      #231f20;
  --gp-white:      #ffffff;

  /* UI odds‑and‑ends */
  --gp-grey-100:   #f5f5f5; /* soft card bgs */
  --gp-text:       var(--gp-dark-grey);
  --gp-radius:     4px;     /* rounded‑corner size */
  --gp-font:       'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

/* 3. Basic type rules --------------------------------------------------*/
body{
  font-family: var(--gp-font);
  color: var(--gp-text);
  line-height: 1.55;
}
h1,h2,h3,h4{
  color: var(--gp-green-dark);
  font-weight: 700; /* Manrope runs light – bump it a bit */
  letter-spacing: -0.015em;
}

/* 4. Links & buttons ---------------------------------------------------*/
a{
  color: var(--gp-green);
  text-decoration: none;
}
a:hover,
a:focus{
  color: var(--gp-green-dark);
  text-decoration: underline;
}

/* System buttons + any <a class="button"> you drop into articles */
.Button,
.btn,
.ArticleLayout__main a.button{
  background: var(--gp-green);
  color: #fff !important;
  border-radius: var(--gp-radius);
  padding: 0.65em 1.3em;
  font-weight: 600;
  transition: background 0.15s ease;
}
.Button:hover,
.btn:hover{
  background: var(--gp-green-dark);
}

/* 5. Header & footer tint ---------------------------------------------*/
/* Top bar goes dark‑green, footer mid‑green – just like main site */
.Header,
.kbHeader{background: var(--gp-green-dark);} /* header strip */
.Header a,
.kbHeader a{color:#fff;}

.Footer{background: var(--gp-green);color:#fff;}
.Footer a{color:#fff;}
.Footer a:hover{color: var(--gp-green-light);}

/* 6. Article width – makes articles wider than default theme settings */
@media (min-width: 1024px){
  .articleDetail .Layout__twoColumn{
    max-width: 1600px !important; /* was 870px in Elegant – plenty of breathing room */
    width: 100% !important;      /* still lets it shrink on smaller screens */
    margin: 0 auto;              /* centre the column */
  }
}

/* 7. Cards on KB landing page -----------------------------------------*/
.ArticleCard{
  border-top: 4px solid var(--gp-green); /* little brand stripe */
  box-shadow: none;                      /* flatten drop‑shadow */
  border-radius: var(--gp-radius);
  background: var(--gp-grey-100);
}

/* 8. Optional hero tint – pale wash behind the big banner -------------*/
.kbLanding .Banner{
  background: #e6f4ec; /* 8% white‑mixed brand green */
  padding: 4rem 0;
}

/* 9. Handy utility tweaks ---------------------------------------------*/
img{max-width:100%;height:auto;} /* responsive images */
.inputBox{border-radius:var(--gp-radius);border:1px solid #ccc;}
.articleDetail .RightContainer{display:none;} /* hide side bar we don’t use */

/* Add a little green bar in front of each H2 inside articles */
.articleDetail h2:before{background:var(--gp-green);} 

/* 10. Tabs – give the “unused” ones a splash of Fair Green -----------*/
/*
   Zoho adds .zd_hc_active to the current tab.  We colour the *other*
   spans bright green with white text, then flip the colours for the
   active tab so it stands out as "pressed in".
*/
.zd_hc_tab_title{
  background: var(--gp-green);           /* Fair Green */
  color: var(--gp-white) !important;     /* force white text */
  padding: 0.5em 1em;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0; /* round top edges */
  display: inline-block;
  margin-right: 0.25em;                  /* breathing space between tabs */
  transition: background 0.15s ease;
}

/* active tab – invert colours so it looks on top */
.zd_hc_tab_title.zd_hc_active{
  background: var(--gp-white);
  color: var(--gp-green-dark) !important;
  position: relative;
  z-index: 2; /* sits above neighbour borders if any */
}

/* hover tweak on inactive tabs – deepen the green a touch */
.zd_hc_tab_title:not(.zd_hc_active):hover{
  background: var(--gp-green-light);
}