/* ============================================================
   Bamboe stijl, maatwerk CSS voor YOOtheme Pro child theme
   ------------------------------------------------------------
   Wordt automatisch geladen door YOOtheme Pro vanuit
   templates/yootheme_bamboe/css/custom.css

   Kleuren en lettertypes zet je in de Style customizer (zie README).
   Dit bestand regelt alleen de dingen die de customizer niet kan:
   het bamboe watermerk en de tab-label met groen balkje.
   Pas alles centraal aan via de variabelen hieronder.
   ============================================================ */

:root{
  --bamboe-ink:#333333;          /* antraciet, teksten */
  --bamboe-lime:#BACD11;         /* bamboe lime, accenten */
  --bamboe-paper:#ffffff;        /* papier, tekstvlakken */
  --bamboe-greige:#E9E4D7;       /* greige achtergrond */
  --bamboe-watermark-opacity:.55;/* zachtheid van het watermerk, 0 tot 1 */
  --bamboe-bar:5px;              /* dikte groen balkje */
}


/* ------------------------------------------------------------
   2. Tab-label, reminder van de gekozen navigatie
   ------------------------------------------------------------
   Gebruik in de builder een Headline of Text element met de
   sectienaam en geef het de class:
     bamboe-tab                -> niet geselecteerd, SemiBold
     bamboe-tab bamboe-tab--current -> huidige pagina, Bold + balkje
   Op een gewone pagina gebruik je de current variant.
*/
.bamboe-tab{
  display:inline-block;
  background:var(--bamboe-paper);
  color:var(--bamboe-ink);
  font-family:"Montserrat",sans-serif;
  font-weight:600;                 /* SemiBold */
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1;
  padding:14px 30px 12px;
  border-radius:6px;
  box-shadow:0 6px 22px rgba(44,62,80,.08);
  position:relative;
}
.bamboe-tab--current{
  font-weight:700;                 /* Bold */
}
.bamboe-tab--current::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:var(--bamboe-bar);
  background:var(--bamboe-lime);
  border-radius:6px 6px 0 0;
}

/* ------------------------------------------------------------
   3. Groen balkje bovenop een paneel of kaart
   ------------------------------------------------------------
   Geef een YOOtheme panel of card de class bamboe-bar-top voor
   het lime balkje aan de bovenkant (zoals bij de prijskaarten).
*/
.bamboe-bar-top{position:relative;}
.bamboe-bar-top::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:var(--bamboe-bar);
  background:var(--bamboe-lime);
}

/* ------------------------------------------------------------
   4. Kleine helpers voor typografie en accenten
   ------------------------------------------------------------ */
.bamboe-black{font-weight:900;}      /* Montserrat Black */
.bamboe-semibold{font-weight:600;}   /* Montserrat SemiBold */
.bamboe-regular{font-weight:400;}    /* Montserrat Regular */
.bamboe-accent{color:var(--bamboe-lime);}
.bamboe-ink{color:var(--bamboe-ink);}



/* ------------------------------------------------------------
   Tip: wil je het watermerk juist op een enkele sectie in
   plaats van de hele pagina? Verwijder dan blok 1 en geef de
   gewenste sectie deze class:

   .bamboe-watermark{position:relative;}
   .bamboe-watermark::before{
     content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
     background:url(../images/bamboe-watermark.svg) repeat;
     background-size:300px 300px;opacity:var(--bamboe-watermark-opacity);
   }
   .bamboe-watermark > *{position:relative;z-index:1;}
   ------------------------------------------------------------ */