:root {
    --site-header-mobile-height: 61px;
    --site-header-desktop-height: 75.1875px;
    --site-header-navy: #1a1a2e;
    --site-header-gold: #d4af37;
    --site-header-gold-dark: #b8923f;
    --site-header-border: #e7e7eb;
}

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: var(--site-header-mobile-height) !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

.site-header > .container { height: 100% !important; }

.site-header .site-header__inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding: 0 !important;
    gap: 20px !important;
}

.site-header .menu-toggle {
    display: inline-flex !important;
    width: 25px !important;
    height: 21px !important;
    flex: 0 0 25px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--site-header-navy) !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

.site-header .menu-toggle span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transition: transform .2s ease, opacity .2s ease !important;
}

.site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg) !important; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg) !important; }

.site-header .logo-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

.site-header .logo {
    display: block !important;
    width: auto !important;
    height: 180px !important;
    max-width: 220px !important;
    object-fit: fill !important;
}

.site-header .btn-selecties-header {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg,#C9A14A 0%,#d4af37 100%) !important;
    box-shadow: 0 4px 12px rgba(201,161,74,.3) !important;
    color: var(--site-header-navy) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.site-header .btn-selecties-header:hover { transform: translateY(calc(-50% - 1px)) !important; }

.site-header .site-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: min(460px, calc(100vw - 40px)) !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain !important;
    visibility: hidden !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.15) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: max-height .25s ease, visibility 0s linear .25s !important;
}

.site-header .site-menu[data-open="true"] {
    max-height: calc(100dvh - var(--site-header-mobile-height)) !important;
    visibility: visible !important;
    border-top: 1px solid var(--site-header-border) !important;
    transition-delay: 0s !important;
}

.site-header .site-menu__list,
.site-header .submenu { padding: 0 !important; margin: 0 !important; list-style: none !important; }

.site-header .site-menu a,
.site-header .submenu-toggle {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--site-header-border) !important;
    background: #fff !important;
    color: var(--site-header-navy) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.site-header .site-menu a:hover,
.site-header .submenu-toggle:hover { color: var(--site-header-gold-dark) !important; background: #fcfbf7 !important; }
.site-header .site-menu .nav-link--active { color: var(--site-header-gold-dark) !important; }
.site-header .submenu-toggle::after {
    content: "+";
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--site-header-gold);
    color: var(--site-header-navy);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}
.site-header .submenu-toggle[aria-expanded="true"]::after { content: "−"; }
.site-header .submenu[hidden] { display: none !important; }
.site-header .submenu a { min-height: 40px !important; padding: 9px 20px 9px 38px !important; background: #f8f8fa !important; font-size: 13.5px !important; font-weight: 500 !important; }
.site-header .menu-flag-icon { display: inline-block; width: 18px; height: 12px; margin-right: 6px; flex: 0 0 18px; vertical-align: -1px; }
.site-header .menu-badge { padding: 2px 6px; margin-left: 8px; border-radius: 3px; background: var(--site-header-gold); color: var(--site-header-navy); font-size: 10px; font-weight: 700; }

.site-header .language-panel {
    display: flex !important;
    position: static !important;
    gap: 10px !important;
    padding: 12px 16px 16px !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.site-header .language-button {
    display: inline-flex !important;
    width: 46px !important;
    min-height: 44px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--site-header-border) !important;
    border-radius: 4px !important;
    background: #fff !important;
}

.site-header .language-button[aria-current="page"] { border-color: var(--site-header-gold) !important; background: #fffaf0 !important; }
.site-header .language-button img { display: block !important; width: 24px !important; height: auto !important; }
.site-header .menu-toggle:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible { outline: 3px solid var(--site-header-gold) !important; outline-offset: 3px !important; }

@media (min-width: 769px) {
    .site-header { height: var(--site-header-desktop-height) !important; }
    .site-header .logo { max-width: 300px !important; }
    .site-header .btn-selecties-header { padding: 8px 14px !important; font-size: 12px !important; letter-spacing: .5px !important; }
    .site-header .site-menu[data-open="true"] { max-height: calc(100dvh - var(--site-header-desktop-height)) !important; }
}

@media (max-width: 430px) {
    .site-header .site-menu {
        position: fixed !important;
        top: var(--site-header-mobile-height) !important;
        left: 0 !important;
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .menu-toggle span,
    .site-header .site-menu,
    .site-header .submenu-toggle::after,
    .site-header .btn-selecties-header { transition: none !important; }
}

/* ── Logo en de SELECTIES-knop overlapten elkaar ───────────────────────
   Het logo stond absoluut op 50% van de balk en hield geen rekening met
   de knop ernaast. Het logobestand heeft bovendien veel transparante
   rand (inkt 353x116 in een canvas van 539x360), waardoor het element
   veel breder is dan het zichtbare logo. Onder ~430px schoof de knop
   daardoor over het logo heen — op een iPhone 13 zelfs over de letters.

   Drie kolommen houden het logo in het midden en reserveren links en
   rechts evenveel ruimte, zodat de knop het logo nooit meer kan raken.
   Wordt het krap, dan schaalt alleen het logo mee (object-fit: contain
   in plaats van fill, dus zonder vervorming). */
.site-header .site-header__inner {
    display: grid !important;
    grid-template-columns:
        minmax(var(--site-header-side, 96px), 1fr)
        auto
        minmax(var(--site-header-side, 96px), 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
}

.site-header .menu-toggle { justify-self: start !important; }

.site-header .logo-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 0 !important;
}

/* Bijgesneden variant van hetzelfde logo: identiek beeld, maar zonder de
   transparante rand. Daardoor is het element even breed als het logo zelf
   en past het naast de knop. logo.png blijft ongewijzigd, want dat bestand
   wordt ook als og:image en als organisatielogo in de JSON-LD gebruikt.
   Laadt de CSS niet, dan verschijnt gewoon het originele logo. */
.site-header .logo {
    content: url("/images/logo-header.png") !important;
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.site-header .btn-selecties-header {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: end !important;
}
.site-header .btn-selecties-header:hover { transform: translateY(-1px) !important; }

/* Zonder SELECTIES-knop (EN/DE/ES) hoeft rechts niets gereserveerd te
   worden, dus krijgt het logo daar de volle breedte. */
.site-header .site-header__inner:not(:has(.btn-selecties-header)) {
    grid-template-columns: minmax(25px, 1fr) auto minmax(25px, 1fr) !important;
}

@media (min-width: 769px) {
    .site-header .logo { height: 58px !important; max-height: 58px !important; }
}

/* Floating mobile header. Keep every desktop rule above unchanged. */
@media (max-width: 768px) {
    body:has(> .site-header) {
        --mobile-header-top: calc(12px + env(safe-area-inset-top, 0px));
        --mobile-header-space: calc(88px + env(safe-area-inset-top, 0px));
        padding-top: var(--mobile-header-space) !important;
    }

    .site-header {
        position: fixed !important;
        top: var(--mobile-header-top) !important;
        left: max(14px, env(safe-area-inset-left, 0px)) !important;
        right: max(14px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(201, 161, 74, .22) !important;
        border-radius: 22px !important;
        background: #fffefa !important;
        box-shadow: 0 6px 24px rgba(26, 26, 46, .12) !important;
    }

    .site-header > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* Robuuste kolomverdeling i.p.v. vaste 80px/44px-aannames: de zij-
       kolommen groeien mee met hun werkelijke inhoud (hamburger, of de
       bredere SELECTIES-knop) met een bodem van 44px (toch al de minimale
       tikdoelgrootte), en het logo krijgt gegarandeerd de rest — geen kans
       meer dat een van beide de ruimte van het logo "leent" op smalle
       schermen (360-390px), ongeacht exacte tekstbreedte/lettertype op een
       echt toestel. Werkt identiek met én zonder SELECTIES-knop (bv. EN/DE/
       ES), dus de losse :not(:has(...))-variant is niet meer nodig. */
    .site-header .site-header__inner {
        grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto) !important;
        gap: 6px !important;
    }

    .site-header .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 11.5px 9.5px !important;
        box-sizing: border-box !important;
    }

    /* Geen transform:scale meer: die vergroot alleen de PAINT, niet de
       layout-doos, waardoor het logo buiten zijn eigen grid-kolom kon
       uitsteken en alsnog de knop kon raken. Een iets grotere echte
       hoogte laat de grid-kolom wél meegroeien. */
    .site-header .logo {
        height: 46px !important;
        max-height: 46px !important;
    }

    .site-header .btn-selecties-header {
        min-height: 36px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
        box-shadow: 0 2px 6px rgba(201, 161, 74, .18) !important;
    }

    .site-header .site-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: -10px !important;
        right: -10px !important;
        width: auto !important;
        border-radius: 18px !important;
    }

    .site-header .site-menu[data-open="true"] {
        max-height: calc(100dvh - var(--mobile-header-space) - 12px - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Let text-hero backgrounds start at the top; keep their text below the bar.
       Image-only property heroes and other layouts retain the normal spacer. */
    .site-header + :is(.hero:not(:has(.hero-image-wrap)), .article-hero, .blog-hero, .page-hero, .page-header, .calc-hero, .mag-hero, .vh-hero, .win-hero, .tv-head) {
        margin-top: calc(-1 * var(--mobile-header-space)) !important;
        padding-top: calc(var(--mobile-header-space) + 20px) !important;
    }

    html:has(.site-header) { scroll-padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
}

/* HEADER FIT FIX ---------------------------------------------------------
   Extra ruimtemarge voor smalle telefoons (iPhone 13 = 390px, 320-380px en
   hogere tekstgrootte). Alleen onder 430px; daarboven blijft alles zoals het
   was. De kolommen (hamburger | logo | SELECTIES) blijven, maar:
   - het logo krimpt met de schermbreedte (hoogte via clamp) in plaats van
     op een vaste 46px te blijven staan en de knop op te zoeken;
   - de SELECTIES-knop wordt onder 380px compacter (kleiner lettertype en
     padding via clamp) en onder 350px nog iets strakker;
   - het tekstlettertype van de knop volgt de Safari-tekstgrootte niet meer
     (text-size-adjust) zodat de knop niet ongemerkt breder wordt. */
@media (max-width: 430px) {
    .site-header .site-header__inner {
        min-width: 0 !important;
        gap: clamp(4px, 1.6vw, 6px) !important;
    }

    .site-header .logo-container {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-header .logo {
        height: clamp(34px, 11.8vw, 46px) !important;
        max-height: clamp(34px, 11.8vw, 46px) !important;
        max-width: 100% !important;
    }

    .site-header .btn-selecties-header {
        flex: 0 0 auto !important;
        padding: 0 clamp(5px, 1.8vw, 7px) !important;
        font-size: clamp(9px, 2.6vw, 10px) !important;
        white-space: nowrap !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

@media (max-width: 379px) {
    .site-header .btn-selecties-header {
        min-height: 32px !important;
        letter-spacing: -.1px !important;
    }
}

@media (max-width: 349px) {
    .site-header .btn-selecties-header { gap: 2px !important; padding: 0 5px !important; }
}