/*!
 * KOOS — header
 *
 * Vervangt de oude megamenu-header. Twee balken: een smalle witte topbalk
 * met telefoonnummer en secundair menu, daaronder de blauwe hoofdbalk met
 * logo, navigatie en twee actieknoppen.
 *
 * Kleuren komen uit de tokens in koos-base.css.
 */

.koos-header {
    position: relative;
    z-index: 100;
}

/*
 * Zelfde breedte als .siteinner, zodat logo en knoppen recht boven de
 * contentkolom staan. De maat komt uit --koos-siteinner in koos-base.css;
 * de 32px padding hieronder is gelijk aan die van .siteinner.
 */
.koos-header__inner {
    max-width: var(--koos-siteinner, 1200px);
    margin: 0 auto;
    padding-left: var(--koos-siteinner-padding, 20px);
    padding-right: var(--koos-siteinner-padding, 20px);
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ==================================================================
   Topbalk
   ================================================================== */

.koos-topbar {
    /* Mist, niet wit: in het ontwerp ligt de topbalk als apart vlak boven de blauwe balk. */
    background-color: var(--koos-mist);
    font-size: 11px;
    line-height: 18px;
}

.koos-topbar a,
.koos-topbar__lijst a {
    font-weight: 500;
}

/*
 * De telefoonregel links, het menu en het zoekveld als groep rechts. Met
 * space-between zou het zoekveld als derde onderdeel helemaal tegen de
 * rechterrand komen te staan, los van het menu.
 */
.koos-topbar .koos-header__inner {
    justify-content: flex-end;
    min-height: 40px;
}

.koos-topbar__contact {
    /* auto rechts: duwt het menu en het zoekveld als groep naar rechts. */
    margin: 0 auto 0 0;
    font-family: var(--koos-font-kop);
    font-weight: 700;
    color: var(--koos-blauw);
    white-space: nowrap;
}

.koos-topbar__contact a {
    color: var(--koos-blauw);
    text-decoration: none;
}

.koos-topbar__contact a:hover {
    text-decoration: underline;
}

.koos-topbar__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /*
     * Niet afbreken naar een tweede regel. Onder 901px staat deze lijst in
     * het uitklappaneel; zie "Breekpunten".
     */
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 22px;
}

.koos-topbar__lijst a {
    color: var(--koos-blauw);
    text-decoration: none;
}

.koos-topbar__lijst a:hover,
.koos-topbar__lijst .current-menu-item > a {
    text-decoration: underline;
}

/* ==================================================================
   Zoeken in de topbalk
   ================================================================== */

/*
 * Het veld staat rechts in de topbalk. Zonder JS staat het altijd open; met
 * JS zie je eerst alleen de knop "Zoeken". Typen stuurt nooit door: dat doet
 * pas Enter of de knop.
 *
 * Het ingeklapte veld hangt aan de klasse koos-js op <html>. Die zet een
 * regeltje script bovenin header.php, nog voor de eerste weergave; zo staat
 * het veld niet eerst even open tot koos-header.js geladen is. :where()
 * houdt de specificiteit gelijk aan die van .koos-zoek alleen.
 */
.koos-zoek {
    display: flex;
    align-items: center;
    gap: 6px;
    /* De topbalk zet zelf al ruimte tussen zijn onderdelen. */
    margin-left: 0;
}

/*
 * De schakelaar is in het prototype gewoon de laatste link van de topbalk:
 * 11/18 Medium in KOOS-blauw met het loepje ervoor en 4px ertussen. Hij mag
 * dus niet groter zijn dan de links ernaast.
 */
.koos-zoek__schakelaar,
.koos-zoek__knop,
.koos-zoek__sluiten {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--koos-blauw);
    font-family: inherit;
    font-weight: 500;
    font-size: 11px;
    line-height: 18px;
    cursor: pointer;
}

/* Het loepje schaalt mee met de tekst in plaats van een vaste 15px. */
.koos-zoek .koos-loep {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

.koos-zoek__schakelaar:hover .koos-zoek__label,
.koos-zoek__schakelaar:focus-visible .koos-zoek__label {
    text-decoration: underline;
}

/*
 * Het geopende veld is een compacte pil die binnen de topbalk van 40px past:
 * 28 hoog, radius 30 en een rand in blauw-tint, net als de formuliervelden.
 * De vulling is #F4F5F4, de invulkleur uit het design system.
 */
.koos-zoek input.koos-zoek__invoer {
    width: 200px;
    max-width: 100%;
    height: 28px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    line-height: 26px;
    color: var(--koos-tekst);
    background-color: var(--koos-invulveld);
    transition: border-color var(--koos-transitie),
                background-color var(--koos-transitie);
}

.koos-zoek input.koos-zoek__invoer::placeholder {
    color: var(--koos-placeholder);
}

.koos-zoek input.koos-zoek__invoer:hover {
    border-color: var(--koos-blauw);
}

.koos-zoek input.koos-zoek__invoer:focus {
    border-color: var(--koos-blauw);
    background-color: var(--koos-wit);
}

.koos-zoek input.koos-zoek__invoer:focus-visible {
    outline: 2px solid var(--koos-blauw);
    outline-offset: 2px;
}

/*
 * De verstuurknop naast het veld is een rond blauw knopje met alleen het
 * loepje erin; het label staat er voor schermlezers bij.
 */
.koos-zoek__knop {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background-color: var(--koos-blauw);
    color: var(--koos-wit);
    transition: background-color var(--koos-transitie);
}

.koos-zoek__knop:hover,
.koos-zoek__knop:focus-visible {
    background-color: var(--koos-blauw-donker);
}

.koos-zoek__knop .koos-loep {
    width: 13px;
    height: 13px;
}

/*
 * Het kruisje is geen vlak maar alleen het teken, zodat de verstuurknop de
 * enige gevulde knop in de rij blijft. Op een aanraakscherm groeit het
 * klikvlak naar 44x44 zonder dat het beeld verandert (WCAG 2.5.8).
 */
.koos-zoek__sluiten {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    /* Zelfde blauw als de knop "Zoeken" ernaast, niet de grijze bodytekst. */
    color: var(--koos-blauw);
}

.koos-zoek__sluiten:hover,
.koos-zoek__sluiten:focus-visible {
    background-color: var(--koos-blauw-tint);
}

.koos-header__acties .koos-zoek__sluiten:hover,
.koos-header__acties .koos-zoek__sluiten:focus-visible {
    background-color: rgba(255, 255, 255, 0.2);
}

@media (pointer: coarse) {

    .koos-zoek__sluiten {
        position: relative;
    }

    .koos-zoek__sluiten::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* ------------------------------------------------------------------
   In- en uitklappen
   ------------------------------------------------------------------
   Dit ging eerder met display: none <-> block. Dat kan de browser niet
   animeren, dus het veld stond er ineens en de topbalk sprong mee. Nu
   blijven alle onderdelen in de flexrij staan en bewegen breedte en
   dekking: het veld schuift onder de loep vandaan en het knopje groeit
   erachteraan. Alleen de schakelaar en het veld wisselen van plek, dus
   de balk zelf blijft even breed.

   visibility schakelt pas om als de beweging klaar is. Zo staat een dicht
   veld niet in de tabvolgorde, terwijl het wel uit beeld kan animeren.
   ------------------------------------------------------------------ */

/* Zonder JS blijft het veld gewoon open; dan is er niets om te schakelen. */
.koos-zoek__schakelaar,
.koos-zoek__sluiten {
    display: none;
}

:where(.koos-js) .koos-zoek .koos-zoek__sluiten {
    display: inline-flex;
}

:where(.koos-js) .koos-zoek .koos-zoek__schakelaar {
    display: inline-flex;
    /* Zonder dit breekt "Zoeken" af terwijl de knop smaller wordt. */
    overflow: hidden;
    white-space: nowrap;
    max-width: 80px;
    transition: max-width var(--koos-transitie),
                opacity 0.15s ease,
                transform var(--koos-transitie);
}

:where(.koos-js) .koos-zoek.is-open .koos-zoek__schakelaar {
    max-width: 0;
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    visibility: hidden;
    transition: max-width var(--koos-transitie),
                opacity 0.12s ease,
                transform var(--koos-transitie),
                visibility 0s linear var(--koos-transitie-duur);
}

/* --- Het veld zelf --- */

:where(.koos-js) .koos-zoek input.koos-zoek__invoer {
    display: block;
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-color: transparent;
    visibility: hidden;
    pointer-events: none;
    transition: width var(--koos-transitie),
                padding var(--koos-transitie),
                opacity var(--koos-transitie),
                border-color var(--koos-transitie),
                background-color var(--koos-transitie),
                visibility 0s linear var(--koos-transitie-duur);
}

:where(.koos-js) .koos-zoek.is-open input.koos-zoek__invoer {
    width: 200px;
    padding-left: 14px;
    padding-right: 14px;
    opacity: 1;
    border-color: var(--koos-blauw-tint);
    visibility: visible;
    pointer-events: auto;
    /* Open mag visibility meteen om: het veld krijgt direct focus. */
    transition: width var(--koos-transitie),
                padding var(--koos-transitie),
                opacity var(--koos-transitie),
                border-color var(--koos-transitie),
                background-color var(--koos-transitie);
}

/* --- Het ronde verstuurknopje --- */

:where(.koos-js) .koos-zoek .koos-zoek__knop {
    display: inline-flex;
    flex-basis: 0;
    width: 0;
    opacity: 0;
    transform: scale(0.6);
    visibility: hidden;
    pointer-events: none;
    transition: flex-basis var(--koos-transitie),
                width var(--koos-transitie),
                opacity var(--koos-transitie),
                transform var(--koos-transitie),
                background-color var(--koos-transitie),
                visibility 0s linear var(--koos-transitie-duur);
}

:where(.koos-js) .koos-zoek .koos-zoek__sluiten {
    flex-basis: 0;
    width: 0;
    opacity: 0;
    transform: scale(0.6);
    visibility: hidden;
    pointer-events: none;
    transition: flex-basis var(--koos-transitie),
                width var(--koos-transitie),
                opacity var(--koos-transitie),
                transform var(--koos-transitie),
                background-color var(--koos-transitie),
                visibility 0s linear var(--koos-transitie-duur);
}

:where(.koos-js) .koos-zoek.is-open .koos-zoek__sluiten {
    flex-basis: 22px;
    width: 22px;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: flex-basis var(--koos-transitie) 0.1s,
                width var(--koos-transitie) 0.1s,
                opacity var(--koos-transitie) 0.1s,
                transform var(--koos-transitie) 0.1s,
                background-color var(--koos-transitie);
}

:where(.koos-js) .koos-zoek.is-open .koos-zoek__knop {
    flex-basis: 28px;
    width: 28px;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    /*
     * Het knopje komt een tikje na het veld op gang, zodat het eruitziet
     * alsof het erachteraan naar buiten wordt geduwd.
     */
    transition: flex-basis var(--koos-transitie) 0.06s,
                width var(--koos-transitie) 0.06s,
                opacity var(--koos-transitie) 0.06s,
                transform var(--koos-transitie) 0.06s,
                background-color var(--koos-transitie);
}

/*
 * Wie beweging heeft uitgezet, krijgt de oude schakelaar terug: alles staat
 * er meteen, zonder tussenstappen.
 */
@media (prefers-reduced-motion: reduce) {

    :where(.koos-js) .koos-zoek .koos-zoek__schakelaar,
    :where(.koos-js) .koos-zoek input.koos-zoek__invoer,
    :where(.koos-js) .koos-zoek .koos-zoek__knop,
    :where(.koos-js) .koos-zoek .koos-zoek__sluiten,
    :where(.koos-js) .koos-zoek.is-open .koos-zoek__schakelaar,
    :where(.koos-js) .koos-zoek.is-open input.koos-zoek__invoer,
    :where(.koos-js) .koos-zoek.is-open .koos-zoek__knop,
    :where(.koos-js) .koos-zoek.is-open .koos-zoek__sluiten {
        transition: none;
        transform: none;
    }
}

/* ==================================================================
   Hoofdbalk
   ================================================================== */

.koos-header__balk {
    background-color: var(--koos-blauw);
}

.koos-header__balk .koos-header__inner {
    /* 40 topbalk + 88 hoofdbalk = 128, de hoogte uit het ontwerp. */
    min-height: 88px;
    /*
     * Logo, menu en knoppen moeten samen in de 1162px van de contentkolom
     * passen. Met 40/32/30 kwam dat op 1180px uit en viel het menu over twee
     * regels. Deze drie gaten samen scheelt 28px en laat 10px speling over.
     */
    gap: 32px;
}

/*
 * line-height 0: anders reserveert de regel rond het logo extra hoogte en
 * staat het beeldmerk niet precies in het midden van de balk van 88px.
 */
.koos-header__logo {
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
}

.koos-header__logo a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.koos-header__logo img,
.koos-header__logo svg {
    display: block;
}

/*
 * max-height en niet height: een liggend logo houdt zo zijn eigen verhouding
 * en een vierkant logo wordt niet uitgerekt. width: auto overrulet de
 * width/height die WordPress zelf op de <img> zet.
 */
.koos-header__logo img,
.koos-header__logo .custom-logo {
    display: block;
    max-height: 44px;
    width: auto;
    height: auto;
}

/* Terugval zolang er geen logo is ingesteld. */
.koos-header__sitenaam {
    font-family: var(--koos-font-kop);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--koos-wit);
    text-transform: uppercase;
}

/*
 * Navigatie en knoppen zitten samen in __uitklap, zodat ze op mobiel
 * als één paneel open- en dichtklappen.
 */
.koos-header__uitklap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 1;
}

.koos-header__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Krap gehouden: met de pijltjes erbij past het menu anders niet op één regel. */
    gap: 16px;
}

.koos-header__lijst a {
    color: var(--koos-wit);
    font-family: var(--koos-font-kop);
    /* Hoofdmenu is in het prototype 13px Bold, niet 15px Semi-Bold. */
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding: 4px 0;
}

.koos-header__lijst a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--koos-wit);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--koos-transitie);
}

/*
 * De globale a:hover uit koos-base.css maakt links donkerblauw. Op de blauwe
 * balk moet de tekst wit blijven; alleen de onderstreping eronder reageert.
 */
.koos-header__balk .koos-header__lijst > li > a:hover,
.koos-header__balk .koos-header__lijst > li > a:focus,
.koos-header__balk .koos-header__lijst > li > a:focus-visible,
.koos-header__balk .koos-header__lijst .current-menu-item > a,
.koos-header__uitklap .koos-header__lijst > li > a:hover,
.koos-header__uitklap .koos-header__lijst > li > a:focus {
    color: var(--koos-wit);
}

.koos-header__lijst a:hover::after,
.koos-header__lijst .current-menu-item > a::after,
.koos-header__lijst .current_page_item > a::after {
    transform: scaleX(1);
}

.koos-header__knoppen {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/*
 * De knoppen in de header zijn compacter dan elders op de site. De kolom is
 * altijd 1162px breed, dus alles moet daarbinnen passen: logo, menu (met de
 * pijltjes van de uitklapmenu's) en deze twee knoppen.
 */
.koos-header__knoppen .koos-knop {
    /* In het ontwerp zijn de headerknoppen de sm-variant: 40 hoog, 13px. */
    height: 40px;
    padding: 0 24px;
    font-size: 13px;
    white-space: nowrap;
}

/* ==================================================================
   Mobiele schakelaar
   ================================================================== */

.koos-header__toggle {
    display: none;
    /*
     * Geen margin-left: auto. Het knoppenblok (.koos-header__acties) heeft die
     * al; met twee automatische marges wordt de vrije ruimte over allebei
     * verdeeld en blijft de knop halverwege de balk hangen in plaats van rechts.
     */
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--koos-radius-klein);
}

.koos-header__streep {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--koos-wit);
    transition: transform var(--koos-transitie), opacity var(--koos-transitie);
}

/* Open: bovenste en onderste streep vormen een kruis. */
.koos-header__toggle[aria-expanded="true"] .koos-header__streep:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.koos-header__toggle[aria-expanded="true"] .koos-header__streep:nth-child(2) {
    opacity: 0;
}

.koos-header__toggle[aria-expanded="true"] .koos-header__streep:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==================================================================
   Uitklapmenu in het hoofdmenu
   ================================================================== */

/*
 * Een menu-item met onderliggende items krijgt een paneel eronder. Het opent
 * alleen met het pijltje ernaast.
 */
.koos-header__lijst .menu-item-has-children {
    position: relative;
}

.koos-header__lijst .sub-menu {
    list-style: none;
    margin: 0;
    /* 14px, zodat het eerste en laatste item ruim binnen de ronding vallen. */
    padding: 14px 0;
    position: absolute;
    /*
     * Geen gat tussen het menu-item en het paneel: anders valt de hover weg
     * zodra de muis ertussen komt en klapt het paneel dicht.
     */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background-color: var(--koos-wit);
    border: 1px solid var(--koos-lijn);
    border-radius: var(--koos-radius-klein);
    box-shadow: var(--koos-schaduw-hoog);
    /*
     * De hoekafronding is 30px, terwijl de hoverachtergrond van een item de
     * volle breedte beslaat en maar 10px onder de rand begint. Zonder deze
     * regel stak die rechthoek door de ronding heen; nu volgt hij de vorm
     * van het paneel.
     */
    overflow: hidden;
    display: none;
    z-index: 30;
}

/*
 * Open na een klik op het pijltje (js/koos-header.js zet dan .is-open), en
 * op desktop ook bij hover (zie "Breekpunten"). Geen focus-within: met focus-within bleef het paneel open
 * zolang de pijlknop focus had, ook na een tweede klik om te sluiten.
 * Toetsenbordgebruikers openen het met Enter of spatie op dezelfde knop.
 */
.koos-header__lijst .menu-item-has-children.is-open > .sub-menu {
    display: block;
}

/*
 * Het uitklappaneel staat niet in de prototypes, dus is het opgebouwd uit de
 * tokens van het design system: 14/18 Medium in KOOS-blauw, zoals de links in
 * de footerkolommen, met de blauwe tint als hoverkleur.
 */
.koos-header__lijst .sub-menu a {
    display: block;
    padding: 10px 22px;
    color: var(--koos-blauw);
    font-family: var(--koos-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.koos-header__lijst .sub-menu a:hover,
.koos-header__lijst .sub-menu a:focus-visible,
.koos-header__lijst .sub-menu .current-menu-item > a {
    color: var(--koos-blauw);
    background-color: var(--koos-tint-blauw);
}

/* De onderstreping-animatie hoort bij de balk, niet bij het paneel. */
.koos-header__lijst .sub-menu a::after {
    content: none;
}

/*
 * Het pijltje naast een menu-item met een uitklapmenu.
 *
 * De SVG tekent met currentColor. De knop staat naast de <a>, niet erin, dus
 * hij erfde niet het wit van de link maar de grijze bodykleur. Vandaar hier
 * een expliciete kleur per context: wit op de blauwe balk en in het mobiele
 * paneel, navy in het witte uitklappaneel zoals het design system voorschrijft.
 */
.koos-header__submenu-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 2px;
    margin-left: 2px;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.koos-header__submenu-knop svg {
    transition: transform var(--koos-transitie);
}

/*
 * Op een aanraakscherm is de pijl de enige manier om het paneel te openen,
 * dus die moet groot genoeg zijn om te raken: 44x44 (WCAG 2.5.8). In de
 * blauwe balk op desktop blijft hij klein, anders past het menu niet meer
 * op een regel.
 */
@media (pointer: coarse) {

    .koos-header__submenu-knop {
        min-width: 44px;
        min-height: 44px;
    }
}

.koos-header__uitklap .koos-header__submenu-knop {
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
}

.koos-header__balk .koos-header__submenu-knop,
.koos-header__uitklap .koos-header__submenu-knop {
    color: var(--koos-wit);
}

.koos-header__lijst .sub-menu .koos-header__submenu-knop {
    color: var(--koos-navy);
}

.menu-item-has-children.is-open > .koos-header__submenu-knop svg {
    transform: rotate(180deg);
}

/* ==================================================================
   Opbouw van de balk
   ================================================================== */

/* Wat waar staat per schermbreedte: zie "Breekpunten" onderaan. */
.koos-header__balk {
    position: relative;
}

.koos-header__balk .koos-header__inner,
.koos-header__nav,
.koos-header__lijst {
    flex-wrap: nowrap;
}

.koos-header__nav {
    min-width: 0;
}

/*
 * De menu-items houden hun eigen breedte: niet krimpen en niet afbreken. Zo
 * valt het pijltje van een uitklapmenu nooit onder de tekst.
 */
.koos-header__lijst > li {
    flex-shrink: 0;
    white-space: nowrap;
}

.koos-header__lijst > li > a {
    white-space: nowrap;
}

/* In het paneel is er ruimte zat; daar mag een lange titel wel afbreken. */
.koos-header__lijst--paneel > li {
    white-space: normal;
}

/* Logo, zoeken en knoppen krimpen niet mee; die verhuizen in plaats daarvan. */
.koos-header__logo,
.koos-header__acties,
.koos-header__toggle {
    flex-shrink: 0;
}

/* Zoeken en de knoppen, rechts in de balk. */
.koos-header__acties {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/*
 * Het tweede zoekveld hoort bij de balk en is alleen in beeld als de topbalk
 * weg is; zie "Breekpunten".
 */
.koos-header__acties .koos-zoek {
    display: none;
}

/* In de blauwe balk is de tekst van het zoekveld wit. */
.koos-header__acties .koos-zoek__schakelaar,
.koos-header__acties .koos-zoek__knop,
.koos-header__acties .koos-zoek__sluiten {
    color: var(--koos-wit);
}

/*
 * Open zoekveld in de balk: een eigen regel over de volle breedte eronder.
 * Naast de knoppen en het menu is er geen plek voor een invoerveld.
 */
.koos-header__acties .koos-zoek.is-open .koos-zoek__invoer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 14px 20px;
    font-size: 16px;
    z-index: 40;
}

.koos-header__acties .koos-zoek.is-open .koos-zoek__knop {
    display: none;
}

/*
 * In de blauwe balk valt het veld als een eigen regel naar beneden in plaats
 * van uit te schuiven; daar is naast het menu geen ruimte voor een pil. Het
 * rolt van onder de balk vandaan, zodat het bij de balk lijkt te horen.
 */
.koos-header__acties .koos-zoek__invoer {
    transform: translateY(-8px);
    transition: opacity var(--koos-transitie),
                transform var(--koos-transitie),
                visibility 0s linear var(--koos-transitie-duur);
}

.koos-header__acties .koos-zoek.is-open .koos-zoek__invoer {
    transform: none;
    transition: opacity var(--koos-transitie),
                transform var(--koos-transitie);
}

@media (prefers-reduced-motion: reduce) {

    .koos-header__acties .koos-zoek__invoer,
    .koos-header__acties .koos-zoek.is-open .koos-zoek__invoer {
        transform: none;
        transition: none;
    }
}

/* ==================================================================
   Uitklappaneel
   ================================================================== */

/*
 * Dichtgeklapt met display: none in plaats van hoogte 0, zodat de links niet
 * met tab bereikbaar zijn terwijl het paneel dicht is.
 */
.koos-header__uitklap {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--koos-blauw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 24px;
    box-shadow: var(--koos-schaduw-hoog);
    z-index: 35;
}

.koos-header__uitklap.is-open {
    display: flex;
}

/* Leeg paneelonderdeel neemt geen ruimte in. */
.koos-header__lijst--paneel:empty,
.koos-header__knoppen--paneel:empty {
    display: none;
}

.koos-header__lijst--paneel {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.koos-header__lijst--paneel > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.koos-header__lijst--paneel a {
    padding: 14px 0;
    display: block;
    font-size: 16px;
}

/* De onderstreping-animatie past niet bij een gestapeld menu. */
.koos-header__lijst--paneel a::after {
    display: none;
}

/*
 * In het paneel geen zwevend uitklapmenu: het onderliggende menu staat
 * ingesprongen onder zijn item en klapt open met het pijltje.
 */
.koos-header__lijst--paneel .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.koos-header__lijst--paneel .menu-item-has-children > a {
    flex: 1;
}

.koos-header__lijst--paneel .sub-menu {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
}

.koos-header__lijst--paneel .sub-menu li {
    border-bottom: 0;
}

.koos-header__lijst--paneel .sub-menu a {
    color: var(--koos-wit);
    padding: 10px 0;
    white-space: normal;
}

/*
 * Ook de kleur terugzetten: op de blauwe balk zou het blauw van de
 * desktopregel onleesbaar zijn.
 */
.koos-header__lijst--paneel .sub-menu a:hover,
.koos-header__lijst--paneel .sub-menu .current-menu-item > a {
    background: none;
    color: var(--koos-wit);
    text-decoration: underline;
}

.koos-header__lijst--paneel .koos-header__submenu-knop {
    padding: 14px 4px;
    color: var(--koos-wit);
}

.koos-header__knoppen--paneel {
    flex-direction: column;
    align-items: stretch;
    /* Bovenaan het paneel, boven de menu-items. */
    margin: 12px 0 8px;
    gap: 10px;
}

.koos-header__knoppen--paneel .koos-knop {
    width: 100%;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
}

/* ==================================================================
   Responsive
   ================================================================== */

/*
 * Zelfde binnenmarge als .siteinner in basic.css: 32px, en vanaf 768px 16px.
 */
@media (max-width: 768px) {

    .koos-header__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 620px) {

    .koos-header__acties {
        gap: 8px;
    }

    .koos-header__acties .koos-knop {
        padding: 10px 12px;
        font-size: 13px;
        /* Anders breekt "Mijn kind inschrijven" over twee regels. */
        white-space: nowrap;
    }

    .koos-header__logo img,
    .koos-header__logo .custom-logo {
        max-height: 32px;
    }

    /* Alleen het loepje; het woord "Zoeken" kost hier te veel ruimte. */
    .koos-header__acties .koos-zoek__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .koos-header__sitenaam {
        font-size: 26px;
    }
}



/* ==================================================================
   Sticky header
   ------------------------------------------------------------------
   De briefing zet de header niet vast, maar noemt sticky expliciet als
   optie. De hele header blijft staan: de topbalk met telefoonnummer,
   de tweede navigatie en het zoekveld, en daaronder de blauwe balk.

   Geen schaduw: het design system gebruikt die nergens. In plaats
   daarvan een haarlijn in blauw-tint, zodat de balk zich losmaakt van
   de content eronder zonder dat het opvalt.
   ================================================================== */

/*
 * Sticky op de blauwe balk alleen werkt niet: een sticky element kan nooit
 * verder plakken dan de hoogte van zijn ouder, en de header is maar 128px
 * hoog. Daarom plakt de hele header, op 0.
 */
.koos-header {
    position: sticky;
    top: 0;
    /* Boven de mascottes (z-index 5) en de sectiebanden. */
    z-index: 40;
}

/*
 * Ankerlinks mogen niet onder de header verdwijnen.
 *
 * --koos-header-hoogte staat in koos-base.css op 128 (40 topbalk + 88 balk)
 * als vaste waarde voor het geval JavaScript niet draait. koos-header.js
 * schrijft de gemeten hoogte erin: die verschilt per breekpunt, want onder
 * 901px staat er alleen nog het telefoonnummer in de topbalk.
 */
/*
 * Ankerlinks (zoals de onderwerpknoppen op Veelgestelde vragen) scrollen
 * soepel naar hun doel. Wie in het systeem minder beweging heeft ingesteld,
 * springt direct; zie de prefers-reduced-motion-regel hieronder.
 */
html {
    scroll-padding-top: var(--koos-header-hoogte);
    scroll-behavior: smooth;
}

/* Met de beheerbalk erbij schuift alles mee omlaag. */
.admin-bar .koos-header {
    top: 32px;
}

@media (max-width: 782px) {

    .admin-bar .koos-header {
        top: 46px;
    }
}

/*
 * Het uitklappaneel hangt onder de balk en vult het hele scherm daaronder.
 * --koos-header-hoogte is inclusief de beheerbalk, dus het paneel eindigt
 * precies onderaan het scherm. dvh houdt rekening met de adresbalk op een
 * telefoon die in- en uitschuift; vh is de terugval voor oudere browsers.
 *
 * Zolang het open is, scrolt de pagina eronder niet: js/koos-header.js zet
 * dan koos-menu-open op <html>. Alleen het paneel zelf scrolt, en
 * overscroll-behavior voorkomt dat dat aan het eind doorloopt naar de pagina.
 */
.koos-header__uitklap {
    height: calc(100vh - var(--koos-header-hoogte));
    height: var(--koos-paneel-hoogte, calc(100dvh - var(--koos-header-hoogte)));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Inhoud bovenaan; anders verdeelt space-between hem over de hele hoogte. */
    justify-content: flex-start;
}

/*
 * Alleen op <html>, niet ook op body: met overflow hidden wordt body zelf een
 * scrollvlak, en dan plakt de sticky header aan body in plaats van aan het
 * venster -- na wat scrollen schoot de header dan uit beeld.
 */
html.koos-menu-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
}


/*
 * De focusring is standaard KOOS-blauw. Op de blauwe balk en in het blauwe
 * uitklappaneel is die onzichtbaar, dus daar wit.
 */
.koos-header__balk :focus-visible,
.koos-header__uitklap :focus-visible,
.koos-footer :focus-visible {
    outline-color: var(--koos-wit);
}


/* ==================================================================
   Topmenu in het mobiele paneel
   ------------------------------------------------------------------
   Onder 900px staan de links uit de topbalk (Ouders, Locaties, Werken
   bij, Contact) niet meer in de topbalk maar in het uitklappaneel. Ze
   lopen daar door als een lijst met het hoofdmenu: zelfde letter, zelfde
   scheidingslijnen. Het telefoonnummer blijft in de topbalk staan.
   ================================================================== */

.koos-header__paneel-top {
    display: none;
}

@media (max-width: 900px) {

    .koos-header__paneel-top {
        display: block;
    }
}

/* ==================================================================
   Breekpunten
   ------------------------------------------------------------------
   1200px en breder  Alles in de balk: logo, hoofdmenu, knoppen. Geen
                     hamburger. Uitklapmenu's openen bij hover.
   901 - 1199px      Hoofdmenu achter de hamburger; de knoppen blijven
                     naast het logo, de topbalk blijft staan.
   900px en smaller  Topbalk toont alleen het telefoonnummer; zijn links
                     staan in het paneel, onder het hoofdmenu. Zoeken staat
                     in de blauwe balk. De knoppen staan niet meer in de
                     balk maar bovenaan in het paneel.

   De 1200 is gemeten: logo, hoofdmenu en knoppen samen zijn zo'n 1170px.
   Komt er een menu-item bij, kijk dan of het menu nog op een regel past.
   ================================================================== */

@media (min-width: 1200px) {

    /* Ook als het paneel nog openstond toen het venster breder werd. */
    .koos-header__uitklap,
    .koos-header__uitklap.is-open {
        display: none;
    }
}

/*
 * Alleen in de balk op desktop, en alleen met een echte muis: op een
 * aanraakscherm komt de eerste tik binnen als hover en klapte het paneel
 * dan open en meteen weer dicht. In het hamburgermenu opent een
 * uitklapmenu alleen met het pijltje.
 */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

    .koos-header__nav .menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    .koos-header__nav .menu-item-has-children:hover > .koos-header__submenu-knop svg {
        transform: rotate(180deg);
    }
}

@media (max-width: 1199px) {

    .koos-header__nav {
        display: none;
    }

    .koos-header__toggle {
        display: flex;
    }
}

/* Hier staan de knoppen nog in de balk; dan niet ook in het paneel. */
@media (min-width: 901px) {

    .koos-header__knoppen--paneel {
        display: none;
    }
}

@media (max-width: 900px) {

    /* Alleen het telefoonnummer blijft; menu en zoeken staan elders. */
    .koos-topbar__nav,
    .koos-topbar .koos-zoek {
        display: none;
    }

    .koos-header__acties .koos-zoek {
        display: flex;
    }

    .koos-header__acties .koos-header__knoppen {
        display: none;
    }

    /*
     * Loepje en hamburger als paar rechts in de balk: allebei een vlak van
     * 44x44 met het teken in het midden, 4px uit elkaar.
     */
    .koos-header__balk .koos-header__inner {
        column-gap: 4px;
    }

    .koos-header__toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }
}

/* ==================================================================
   Zoeken in de blauwe balk
   ------------------------------------------------------------------
   Het loepje en het kruisje krijgen een klikvlak van 44x44. Het geopende
   veld wordt een witte band onder de header, met een volwaardig
   invoerveld en de ronde zoekknop ernaast.
   ================================================================== */

.koos-header__acties .koos-zoek__schakelaar,
.koos-header .koos-header__balk .koos-zoek.is-open .koos-zoek__sluiten {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.koos-header__acties .koos-zoek__schakelaar {
    gap: 6px;
    font-size: 14px;
}

/*
 * In de balk alleen de schakelaar (of, open, het kruisje) in de rij. Veld en
 * zoekknop hangen open in de witte band eronder; dicht zijn ze onzichtbaar,
 * maar namen ze met de tussenruimte samen zo'n 20px in naast het loepje. Dan
 * stond het loepje los van de hamburger en leek het willekeurig geplaatst.
 */
.koos-header__acties .koos-zoek {
    gap: 0;
}

.koos-header__acties .koos-zoek:not(.is-open) .koos-zoek__invoer,
.koos-header__acties .koos-zoek:not(.is-open) .koos-zoek__knop,
.koos-header__acties .koos-zoek:not(.is-open) .koos-zoek__sluiten {
    position: absolute;
}

/* Ingeklapt loepje laat zijn klikvlak los, anders staat het naast het kruisje. */
.koos-header__acties .koos-zoek.is-open .koos-zoek__schakelaar {
    min-width: 0;
    min-height: 0;
}

.koos-header__acties .koos-zoek__schakelaar .koos-loep {
    width: 20px;
    height: 20px;
}

.koos-header .koos-header__balk .koos-zoek.is-open .koos-zoek__sluiten {
    flex-basis: 44px;
    width: 44px;
}

.koos-header__acties .koos-zoek__sluiten .koos-kruis {
    width: 16px;
    height: 16px;
}

/* De witte band zelf. */
.koos-header__acties .koos-zoek.is-open::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--koos-wit);
    border-bottom: 1px solid var(--koos-lijn);
    z-index: 39;
}

.koos-header .koos-header__acties .koos-zoek.is-open .koos-zoek__invoer {
    top: calc(100% + 10px);
    left: max(16px, calc((100% - var(--koos-siteinner, 1200px)) / 2 + 16px));
    right: max(68px, calc((100% - var(--koos-siteinner, 1200px)) / 2 + 68px));
    width: auto;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    /* 16px: kleiner laat iOS bij het tikken inzoomen. */
    font-size: 16px;
    line-height: 42px;
}

.koos-header .koos-header__acties .koos-zoek.is-open .koos-zoek__knop {
    display: inline-flex;
    position: absolute;
    top: calc(100% + 10px);
    right: max(16px, calc((100% - var(--koos-siteinner, 1200px)) / 2 + 16px));
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    z-index: 40;
}

.koos-header__acties .koos-zoek__knop .koos-loep {
    width: 18px;
    height: 18px;
}

/*
 * Op de telefoon scrolt de telefoonbalk weg en plakt alleen de blauwe balk:
 * samen namen ze 128px in, zo'n 16% van het scherm. Met een negatieve top
 * regelt de browser dat zelf, zonder dat de pagina verspringt.
 */
@media (max-width: 900px) {

    .koos-header {
        top: -40px;
    }

    .admin-bar .koos-header {
        top: 6px;
    }

    .koos-topbar .koos-header__inner {
        height: 40px;
    }

    /* Het hele nummer is tikbaar, over de volle hoogte van de balk. */
    .koos-topbar__contact a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 4px;
    }
}