/* ============================================================================
   HEADER — zoals staging.grastotaal.nl (gt-01, gt-02, gt-06, gt-11), 22 okt 2026
   Overschrijft de header-regels in style.css sectie 6. Bron van de maten:
   grastotaal-huisstijl-v2.0.css sectie 5 en grastotaal-eigen-css secties
   12, 17b/c, 21, 25c/f/h, 27a, 30b/c (zie ontwerp-analyse/header-menu.md).

   Opbouw
   1. Topbalk (alleen desktop)
   2. Witte regel: logo, hoofdmenu, pilknop (desktop) + plakken bij scrollen
   3. Uitklapmenu's als witte kaarten (desktop)
   4. Mobiel en tablet (tot en met 1024 px): logo + menuknop, groen paneel
   5. Mobiele contactbalk onderin
   6. Minder beweging

   Waarom het menu in IBM Plex Sans staat en niet in Sora (zoals Grastotaal):
   het woordmerk "loonbedrijfvankleef.nl" is op 44 px hoog 400 px breed (dat van
   Grastotaal 293 px) en er zijn zes menu-items in plaats van vijf. In Sora
   passen logo, menu en knop op 1280 px niet op één regel (gemeten: 1201 px
   nodig, 1160 px beschikbaar); in IBM Plex Sans 600 / 15 px wel (1140 px).
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. TOPBALK — diepgroen, 50 px, wit 14 px / 500. Links telefoon en e-mail,
      rechts de doelgroepen. Onder 1025 px geen topbalk (zoals Grastotaal).
   ------------------------------------------------------------------------- */
.gt-topbalk { display: none; }

@media (min-width: 1025px) {
  .gt-topbalk {
    display: block;
    background: var(--gt-groen-diep);
    color: var(--gt-wit);
    font-family: var(--gt-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }
  .gt-topbalk .gt-topbalk__inhoud {
    max-width: var(--gt-breedte);
    margin: 0 auto;
    padding: 0 20px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 24px;
  }
  .gt-topbalk .gt-topbalk__contact { display: flex; align-items: center; gap: 28px; }
  .gt-topbalk .gt-topbalk__lijst { list-style: none; margin: 0 -10px 0 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0; }
  .gt-topbalk a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    color: var(--gt-wit);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--gt-overgang);
  }
  .gt-topbalk .gt-topbalk__lijst a { padding: 0 10px; }
  .gt-topbalk a:hover,
  .gt-topbalk a:focus-visible { color: var(--gt-groen-opdonker); text-decoration: none; }   /* 4,8:1 op diepgroen */
  .gt-topbalk a:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 2px; }
  .gt-topbalk .gt-topbalk__icoon { width: 14px; height: 14px; flex: none; }
}


/* ----------------------------------------------------------------------------
   2. WITTE REGEL — logo links, menu en pilknop rechts; 80 px hoog,
      plakkend 70 px (klasse .gt-plakt via het script in inc/header.php)
   ------------------------------------------------------------------------- */
.site-header { background: var(--gt-wit); box-shadow: var(--gt-schaduw); }
.lvk-logo { display: flex; align-items: center; }
.lvk-logo a { display: block; line-height: 0; }
.lvk-logo svg { display: block; width: auto; }

@media (min-width: 1025px) {
  /* Plakken: alleen de witte regel; de topbalk scrolt weg (gt-02) */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow var(--gt-overgang);
  }
  .admin-bar .site-header { top: 32px; }   /* WordPress-adminbalk voor ingelogde gebruikers */
  .site-header.gt-plakt {
    box-shadow: 0 1px 3px rgba(23, 26, 21, 0.12), var(--gt-schaduw);
    margin-bottom: 10px;   /* 80 -> 70 px zonder dat de pagina eronder verspringt */
  }
  /* Ankers en focus niet onder de plakkende regel (Grastotaal 30c, WCAG 2.4.11) */
  html { scroll-padding-top: 84px; }
  html:has(> body.admin-bar) { scroll-padding-top: 116px; }

  .site-header .inside-header {
    padding: 0 20px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .site-header .lvk-logo { flex: 0 0 auto; margin-right: 16px; }
  /* Logo 44 px hoog (merkboek); tussen 1025 en 1240 px schaalt het mee
     van 32 naar 44 px, zodat menu en knop altijd op dezelfde regel passen. */
  .site-header .lvk-logo svg { height: clamp(32px, calc(5.581vw - 25.21px), 44px); }

  #site-navigation { margin-left: auto; background: transparent; }
  #site-navigation .inside-navigation { padding: 0; max-width: none; flex-wrap: nowrap; }

  /* Hoofditems: donkere tekst 600, diepgroen bij hover en actief (Grastotaal 12) */
  #site-navigation .main-nav > ul > li > a {
    font-family: var(--gt-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 80px;
    padding: 0 8px;
    color: var(--gt-tekst);
    white-space: nowrap;
    transition: color var(--gt-overgang);
  }
  .site-header.gt-plakt #site-navigation .main-nav > ul > li > a { line-height: 70px; }
  #site-navigation .main-nav > ul > li > a:hover,
  #site-navigation .main-nav > ul > li.sfHover > a,
  #site-navigation .main-nav > ul > li[class*="current-menu-"] > a,
  #site-navigation .main-nav > ul > li[class*="current_page_"] > a { color: var(--gt-groen-diep); }
  #site-navigation .main-nav > ul > li > a:focus-visible { outline-offset: -6px; }

  /* Kleine pijltjes (Grastotaal: fa-angle-down 13 px, 8 px ernaast) */
  #site-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 0; }
  #site-navigation .main-nav > ul > li > a > .dropdown-menu-toggle {
    padding: 0 8px 0 5px;
    font-size: 12px;
    height: auto;
    vertical-align: top;   /* anders wordt de regel 80,5 px hoog */
  }
  #site-navigation .main-nav > ul > li > a > .dropdown-menu-toggle .gp-icon svg { width: 0.64em; top: 0.1em; }
  /* Focusring van het pijltje in de huisstijl (anders die van de browser) */
  #site-navigation .dropdown-menu-toggle:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; border-radius: var(--gt-radius-klein); }

  /* Groene pilknop "Offerte aanvragen" (Grastotaal 12 + 17b): 44 px, 15 px / 600 */
  #site-navigation .menu-bar-items { margin-left: 0; }
  #site-navigation .menu-bar-item.gt-menu-offerte { display: flex; align-items: center; margin-left: 8px; }
  #site-navigation .menu-bar-item.gt-menu-offerte > a.gt-knop {
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    font-family: var(--gt-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--gt-wit);
    background: var(--gt-groen-diep);
    border-radius: var(--gt-radius-knop);
    box-shadow: none;
    transform: none;
  }
  #site-navigation .menu-bar-item.gt-menu-offerte > a.gt-knop:hover,
  #site-navigation .menu-bar-item.gt-menu-offerte:hover > a.gt-knop,
  #site-navigation .menu-bar-item.gt-menu-offerte > a.gt-knop:focus-visible {
    color: var(--gt-wit);
    background: var(--gt-groen-diep-hv);
    box-shadow: none;
    transform: none;
  }
}

/* Vanaf 1240 px de maten van Grastotaal: 15 px, ruimere items, logo 44 px */
@media (min-width: 1240px) {
  #site-navigation .main-nav > ul > li > a { font-size: 15px; padding: 0 10px; }
  #site-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 0; }
  #site-navigation .main-nav > ul > li > a > .dropdown-menu-toggle { padding: 0 10px 0 6px; font-size: 13px; }
  #site-navigation .menu-bar-item.gt-menu-offerte { margin-left: 10px; }
  #site-navigation .menu-bar-item.gt-menu-offerte > a.gt-knop { font-size: 15px; padding: 0 22px; }
}


/* ----------------------------------------------------------------------------
   3. UITKLAPMENU'S — witte kaart, afronding 12 px, schaduw, 8 px binnenruimte;
      items 15 px / 600, hover zandwit met diepgroene tekst (Grastotaal 12, 17c)
      Openen: klik of Enter (GeneratePress) en met de muis ook bij hover,
      zoals Grastotaal. Esc sluit (script in inc/header.php).
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #site-navigation .main-nav ul ul {
    background: var(--gt-wit);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px -6px rgba(23, 26, 21, 0.18);
    padding: 8px;
    width: max-content;
    min-width: 225px;
    max-width: 320px;
  }
  #site-navigation .main-nav ul ul li a {
    font-family: var(--gt-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--gt-tekst);
    background: transparent;
    white-space: normal;
  }
  #site-navigation .main-nav ul ul li a:hover,
  #site-navigation .main-nav ul ul li a:focus-visible,
  #site-navigation .main-nav ul ul li[class*="current-menu-"] > a,
  #site-navigation .main-nav ul ul li[class*="current_page_"] > a {
    background: var(--gt-zandwit);
    color: var(--gt-groen-diep);
  }
  #site-navigation .main-nav ul ul li a:focus-visible { outline-offset: -3px; }

  /* Dicht */
  #site-navigation:not(.toggled) .main-nav ul ul {
    display: block;
    visibility: hidden;
    opacity: 0;
    left: -99999px;
    height: auto;
    overflow: visible;
    pointer-events: none;
  }
  /* Open na klik of Enter */
  #site-navigation:not(.toggled) .main-nav ul li.sfHover > ul,
  #site-navigation:not(.toggled) .main-nav ul ul.toggled-on {
    visibility: visible;
    opacity: 1;
    left: auto;
    pointer-events: auto;
  }
}

/* Met een muis ook open bij hover; steeds maar één kaart tegelijk */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #site-navigation:not(.toggled) .main-nav > ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
    left: auto;
    pointer-events: auto;
  }
  #site-navigation:not(.toggled) .main-nav > ul:has(> li:hover) > li:not(:hover) > ul,
  #site-navigation.gt-esc:not(.toggled) .main-nav > ul > li:hover > ul:not(.toggled-on) {
    visibility: hidden;
    opacity: 0;
    left: -99999px;
    pointer-events: none;
  }
}


/* ----------------------------------------------------------------------------
   4. MOBIEL EN TABLET (tot en met 1024 px, gt-11)
      Eén regel van 70 px: logo links (30 px hoog), menuknop rechts met een
      dunne lijn ervoor. Het menu klapt uit als diepgroen paneel met witte tekst.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header .inside-header {
    display: flex;          /* GeneratePress maakt de kop op mobiel geen flexrij; zonder dit valt de menuknop onder het logo */
    padding: 0;
    min-height: 70px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
  }
  .site-header .lvk-logo { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 116px); margin: 0 12px 0 20px; }   /* 70 px knop + marges: knop blijft op dezelfde regel */
  .site-header .lvk-logo svg { height: 30px; max-width: 100%; }   /* op 320 px schaalt het woordmerk mee */

  /* Menuknop: diepgroen hamburgericoon, 70 x 70 px tikvlak */
  #mobile-menu-control-wrapper { margin-left: auto; align-self: stretch; }
  #mobile-menu-control-wrapper .menu-toggle,
  #mobile-menu-control-wrapper .menu-toggle:hover,
  #mobile-menu-control-wrapper .menu-toggle:focus {
    background: transparent;
    color: var(--gt-groen-diep);
  }
  #mobile-menu-control-wrapper .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    min-height: 70px;
    height: 100%;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--gt-lijn);
    border-radius: 0;
    font-size: 26px;
    line-height: 1;
  }
  #mobile-menu-control-wrapper .menu-toggle .gp-icon svg { top: 0; }
  #mobile-menu-control-wrapper .menu-toggle:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: -5px; border-radius: var(--gt-radius-klein); }

  /* Het paneel: volle breedte onder de regel, diepgroen */
  .site-header #site-navigation.main-navigation.toggled {
    flex-basis: 100%;
    margin: 0;
    background: var(--gt-groen-diep);
  }
  #site-navigation.toggled .inside-navigation { padding: 4px 0 0; max-width: none; }
  #site-navigation.toggled .main-nav > ul { background: transparent; border-radius: 0; padding: 0; }
  #site-navigation.toggled .main-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  #site-navigation.toggled .main-nav ul li a {
    font-family: var(--gt-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 20px;
    color: var(--gt-wit);
    background: transparent;
  }
  #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a { padding-right: 20px; }
  #site-navigation.toggled .main-nav ul li a .dropdown-menu-toggle { float: right; padding: 0 0 0 16px; font-size: 16px; }
  /* Tikvlak van het pijltje: tot de rechterrand en over de hele regelhoogte
     (60 x 46 px in plaats van 32 x 22), zonder dat het menu verschuift. Bij
     Over ons en Contact is het pijltje de enige weg naar het submenu (WCAG 2.5.8). */
  #site-navigation.toggled .main-nav ul li a .dropdown-menu-toggle { padding: 12px 20px 12px 24px; margin: -12px -20px -12px 0; }
  #site-navigation.toggled .dropdown-menu-toggle:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: -4px; border-radius: var(--gt-radius-klein); }
  #site-navigation.toggled .main-nav ul ul {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  #site-navigation.toggled .main-nav ul ul li a {
    font-size: 15px;
    padding: 10px 20px 10px 36px;
    color: rgba(255, 255, 255, 0.85);   /* 5,1:1 op diepgroen */
  }
  #site-navigation.toggled .main-nav ul li a:hover,
  #site-navigation.toggled .main-nav ul li a:focus-visible,
  #site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
  #site-navigation.toggled .main-nav ul li[class*="current_page_"] > a {
    color: var(--gt-groen-opdonker);   /* 4,8:1; nooit heldergroen op diepgroen */
    background: transparent;
  }
  #site-navigation.toggled .main-nav ul li a:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: -4px; }

  /* Onderaan het paneel de offerteknop over de volle breedte: wit op groen */
  .site-header #site-navigation.main-navigation.toggled .inside-navigation > .menu-bar-items {
    display: flex;
    order: 4;
    flex-basis: 100%;
    margin: 0;
    padding: 16px 20px 20px;
  }
  #site-navigation.toggled .menu-bar-item.gt-menu-offerte { display: flex; width: 100%; margin: 0; }
  #site-navigation.toggled .menu-bar-item.gt-menu-offerte > a.gt-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gt-groen-diep);
    background: var(--gt-wit);
    border-radius: var(--gt-radius-knop);
    box-shadow: none;
    transform: none;
  }
  #site-navigation.toggled .menu-bar-item.gt-menu-offerte > a.gt-knop:hover,
  #site-navigation.toggled .menu-bar-item.gt-menu-offerte:hover > a.gt-knop {
    color: var(--gt-tekst);
    background: var(--gt-groen-helder);
  }
  #site-navigation.toggled .menu-bar-item.gt-menu-offerte > a.gt-knop:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 2px; }

  /* Boven de offerteknop de doelgroepen uit de topbalk (inc/header.php), als
     gewone links: de topbalk zelf is er op telefoon en tablet niet. */
  .site-header #site-navigation.main-navigation.toggled .inside-navigation > .menu-bar-items { flex-wrap: wrap; }
  #site-navigation.toggled .inside-navigation > .menu-bar-items > .gt-menu-doelgroepen { display: block; flex: 1 1 100%; margin: -4px 0 12px; }
  .gt-menu-doelgroepen ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
  .gt-menu-doelgroepen li { margin: 0; }
  #site-navigation .gt-menu-doelgroepen a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font-family: var(--gt-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);   /* 5,1:1 op diepgroen */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 3px;
  }
  #site-navigation .gt-menu-doelgroepen a:hover,
  #site-navigation .gt-menu-doelgroepen a:focus-visible,
  #site-navigation .gt-menu-doelgroepen a[aria-current] { color: var(--gt-groen-opdonker); text-decoration-color: currentColor; }
  #site-navigation .gt-menu-doelgroepen a:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 2px; border-radius: var(--gt-radius-klein); }
}
/* Alleen in het open mobiele menu (hierboven); op desktop staat dit in de topbalk */
.gt-menu-doelgroepen { display: none; }


/* ----------------------------------------------------------------------------
   5. MOBIELE CONTACTBALK — vaste witte balk onderin met twee pillen van 48 px:
      "Bellen" (wit met groene rand) en "Offerte aanvragen" (diepgroen).
      Grastotaal 27a; hier tot en met 1024 px, omdat de topbalk met het
      telefoonnummer daar ook weg is.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .gt-mobielbalk {
    z-index: 9990;   /* boven het open menupaneel (z-index 100), onder de WordPress-adminbalk */
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--gt-wit);
    box-shadow: 0 -2px 10px rgba(23, 26, 21, 0.12);
  }
  .gt-mobielbalk .gt-mobielbalk__knop {
    flex: 1 1 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 2px solid var(--gt-groen-diep);
    border-radius: var(--gt-radius-knop);
    font-family: var(--gt-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    color: var(--gt-groen-diep);
    background: var(--gt-wit);
  }
  .gt-mobielbalk .gt-mobielbalk__knop--primair { color: var(--gt-wit); background: var(--gt-groen-diep); }
  .gt-mobielbalk .gt-mobielbalk__knop--primair:hover { background: var(--gt-groen-diep-hv); border-color: var(--gt-groen-diep-hv); }
  .gt-mobielbalk .gt-mobielbalk__knop:focus-visible { outline: 3px solid var(--gt-rood); outline-offset: 2px; }

  /* Ruimte onder de pagina alleen waar de balk staat (niet op /offerte/) */
  body:has(> .gt-mobielbalk) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .site-footer):not(:has(> .gt-mobielbalk)) { padding-bottom: 0; }   /* niet in de blokeditor */

  /* Zolang de focus in een formulier staat (veld, link of verstuurknop), staat de
     balk uit: een veld kan er dan niet achter verdwijnen (contact, vacature; vanaf 0.3.5,
     samen met het scrollen in inc/header.php). Weg gaat hij meteen, terug pas na
     0,3 s: wie de verstuurknop aantikt, raakt dan niet per ongeluk de balk die
     onder de vinger terugkomt. De ruimte onder de pagina blijft, dus niets verspringt. */
  .gt-mobielbalk { transition: visibility 0s linear 0.3s; }
  body:has(#content form:focus-within) > .gt-mobielbalk { visibility: hidden; transition-delay: 0s; }
}
/* Tablet (768-1024 px): twee knoppen van hoogstens 280 px in het midden, in
   plaats van twee brede balken over het hele scherm. Tot en met 767 px over
   de volle breedte, zoals Grastotaal. */
@media (min-width: 768px) and (max-width: 1024px) {
  .gt-mobielbalk { justify-content: center; }
  .gt-mobielbalk .gt-mobielbalk__knop { flex: 0 1 280px; }
}


/* ----------------------------------------------------------------------------
   6. MINDER BEWEGING — geen overgangen in kop, menu en knoppen
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .gt-topbalk a,
  #site-navigation a,
  #site-navigation .main-nav ul ul,
  #mobile-menu-control-wrapper .menu-toggle,
  .gt-mobielbalk a {
    transition: none !important;
    animation: none !important;
  }
  #site-navigation .gt-menu-offerte > a.gt-knop:hover { transform: none; }
}