/* Crocky - navigatie, taalknop en menu. Gedeeld door alle pagina's. */
:root{--corner-control:52px;--corner-offset:10px;--logo-side-reserve:148px;--corner-logo-max:210px;
      /* halve breedte van de contentkolom (afbeeldingen/blokken zijn max 900px) */
      --content-half:450px;}
.logo{width:min(var(--corner-logo-max),calc(100vw - var(--logo-side-reserve)))!important;max-width:none!important;}
@media(max-width:340px){:root{--corner-control:48px;--logo-side-reserve:136px;}}

#crockyLang{position:absolute;top:var(--corner-offset);left:max(var(--corner-offset),calc(50% - var(--content-half)));z-index:99998;font-family:Arial,Helvetica,sans-serif;}
#crockyMenu{position:fixed;top:var(--corner-offset);right:max(var(--corner-offset),calc(50% - var(--content-half)));z-index:99998;font-family:Arial,Helvetica,sans-serif;}

#crockyLang button,#crockyMenu button{position:relative;display:flex;align-items:center;justify-content:center;width:var(--corner-control);height:var(--corner-control);padding:0;background:var(--green);border:2px solid #fff;border-radius:14px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.28);color:#fff;line-height:1;}

/* Taalknop: vlag gecentreerd, pijltje rechtsonder als hint dat er keuze is */
#crockyLang .flag{width:28px;height:18px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
#crockyLangCode{display:none;}
#crockyLangBtn .caret{position:absolute;right:4px;bottom:2px;color:#fff;font-size:14px;line-height:1;transition:transform .15s ease;}
#crockyLangBtn[aria-expanded="true"] .caret{transform:rotate(180deg);}

/* Hamburger als getekende balkjes i.p.v. het ☰-teken: dat glyph hangt in Arial
   te hoog in de regel en staat daardoor nooit echt gecentreerd in het blokje.
   Staat het menu open, dan worden de balkjes een kruisje. */
#crockyMenuBtn>span:first-child{
  position:relative;font-size:0;line-height:0;color:transparent;
  display:block;width:26px;height:19px;
  background:
    linear-gradient(#fff,#fff) left top/100% 3.5px no-repeat,
    linear-gradient(#fff,#fff) left center/100% 3.5px no-repeat,
    linear-gradient(#fff,#fff) left bottom/100% 3.5px no-repeat;
}
#crockyMenuBtn>span:not(:first-child){display:none;}
#crockyMenuBtn[aria-expanded="true"]>span:first-child{background:none;}
#crockyMenuBtn[aria-expanded="true"]>span:first-child::before,
#crockyMenuBtn[aria-expanded="true"]>span:first-child::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:3.5px;background:#fff;border-radius:2px;
}
#crockyMenuBtn[aria-expanded="true"]>span:first-child::before{transform:translateY(-50%) rotate(45deg);}
#crockyMenuBtn[aria-expanded="true"]>span:first-child::after{transform:translateY(-50%) rotate(-45deg);}

/* Uitklapmenu's: grotere, goed leesbare tekst, verticaal en horizontaal gecentreerd */
#crockyLangMenu,#crockyMenuDropdown{margin-top:8px;background:var(--green);border:2px solid #fff;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.25);overflow:hidden;}
#crockyLangMenu{width:min(240px,calc(100vw - 20px));}
#crockyMenuDropdown{width:min(320px,calc(100vw - 20px));}
#crockyLangMenu a,#crockyMenuDropdown a{
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:14px 16px;
  gap:10px;
  color:#fff;text-decoration:none;font-weight:900;
  font-size:18px;line-height:1.25;
  text-align:center;white-space:normal;text-wrap:balance;
  border-top:1px solid rgba(255,255,255,.28);
}
#crockyLangMenu a:first-child,#crockyMenuDropdown a:first-child{border-top:none;}
#crockyLangMenu .flag{width:30px;height:20px;flex:0 0 auto;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
#crockyLangMenu .flag svg{display:block;width:100%;height:100%;}
#crockyLangMenu a:hover,#crockyMenuDropdown a:hover{background:#116b2e;}
/* De pagina of taal waar je nu bent: geel met een dikke gele streep eronder */
#crockyLangMenu a.active,#crockyMenuDropdown a.active{
  background:transparent;
  color:var(--yellow);
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:3px;
  text-underline-offset:6px;
}
#crockyLangMenu a.active:hover,#crockyMenuDropdown a.active:hover{background:#116b2e;}
#crockyLang button:focus-visible,#crockyMenu button:focus-visible,#crockyLangMenu a:focus-visible,#crockyMenuDropdown a:focus-visible{outline:3px solid var(--cta);outline-offset:3px;}

/* Terugvalkleuren: als een CSS-variabele ontbreekt blijven de knoppen zichtbaar */
#crockyLang button,#crockyMenu button{background:var(--green,#188038);border-color:#fff;}
#crockyLangMenu,#crockyMenuDropdown{position:absolute;top:100%;display:none;background:var(--green,#188038);}
#crockyLangMenu{left:0;}
#crockyMenuDropdown{right:0;}