/* Site-header — responsive hoofdmenu met hamburger op mobiel.
 *
 * Thema-neutraal: alle kleuren via design-tokens met fallback
 * (`var(--token, fallback)`), zodat het CMS-thema meekleurt.
 *
 * Desktop (>= 768px): normale horizontale nav; de hamburger is verborgen.
 * Mobiel   (< 768px): nav klapt in tot een hamburger-knop; het menu
 *                     schuift als paneel onder de header uit.
 *
 * State-hook: `body[data-menu-open="true"]` (gezet door site-header.js).
 */

/* Anker voor het uitschuivende mobiele paneel. */
.site-header { position: relative; }

/* ── Sticky header (opt-in via .site-header--sticky) ──────────────────
 * Blijft bij het scrollen bovenaan plakken. Ondoorzichtige achtergrond
 * (thema-token met fallback) zodat de content er niet doorheen schijnt, en
 * een lichte schaduw voor diepte. De z-index ligt boven de content maar het
 * uitschuivende mobiele nav-paneel (dat binnen deze header zit) blijft correct
 * gestapeld. Opt-in: de site zet de klasse op basis van de CMS-toggle. */
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface, var(--bg, #fff));
    box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}

/* ── Hamburger-knop ───────────────────────────────────────────────── */
.site-nav-toggle {
    display: none;                       /* desktop: verborgen (zie media query) */
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 24px;
    height: 18px;
    padding: 10px;
    margin: -10px;                       /* ruime tap-target zonder layout-shift */
    border: 0;
    background: transparent;
    color: var(--ink, var(--fg, #1a1a1a));
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
}
.site-nav-toggle:focus-visible {
    outline: 2px solid var(--accent, #0a7c5a);
    outline-offset: 2px;
}

/* Drie balkjes die naar een kruis animeren wanneer het menu open is. */
.site-nav-toggle__bars {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
}
.site-nav-toggle__bars span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: top .2s ease, transform .2s ease, opacity .2s ease;
}
.site-nav-toggle__bars span:nth-child(1) { top: 0; }
.site-nav-toggle__bars span:nth-child(2) { top: 8px; }
.site-nav-toggle__bars span:nth-child(3) { top: 16px; }

body[data-menu-open="true"] .site-nav-toggle__bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
body[data-menu-open="true"] .site-nav-toggle__bars span:nth-child(2) { opacity: 0; }
body[data-menu-open="true"] .site-nav-toggle__bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ── Mobiel (< 768px) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .site-nav-toggle { display: inline-flex; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        padding: .25rem 1.5rem 1rem;
        background: var(--surface, var(--bg, #fff));
        border-bottom: 1px solid var(--line, rgba(0, 0, 0, .12));
        box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
        /* Dicht: onzichtbaar en niet-focusbaar; open: schuift in. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-.5rem);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }

    body[data-menu-open="true"] .site-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s;
    }

    .site-nav a {
        padding: .8rem .25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
    }
    .site-nav a:last-child { border-bottom: 0; }
}

/* Respecteer een verkleinde-beweging-voorkeur. */
@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav-toggle__bars span {
        transition: none;
    }
}

/* ── Zijmenu / off-canvas drawer (opt-in via html[data-nav="drawer"]) ──
 * Layout in drawer-modus:
 *   - .site-nav (hoofdmenu) = gewone horizontale balk, zichtbaar op desktop,
 *     verborgen op mobiel (daar neemt de drawer het over).
 *   - .site-nav-toggle (hamburger) = ALTIJD zichtbaar, ook op desktop → opent
 *     het zijmenu, zodat naast de paar hoofdmenu-items het volledige menu
 *     bereikbaar blijft.
 *   - .site-drawer (#site-drawer) = apart paneel dat vanaf rechts inschuift, met
 *     verduisterde backdrop + achtergrond-scroll-lock (site-header.js lockt op
 *     body[data-menu-open], via aria-controls op de toggle). Sluiten via de
 *     hamburger (X), Escape, of een klik op de backdrop (valt buiten .site-header).
 * Pairt het best met een sticky header (die blijft boven de backdrop).
 * State-hook: body[data-menu-open="true"]. */

/* Hamburger altijd zichtbaar in drawer-modus (ook op desktop). */
html[data-nav="drawer"] .site-nav-toggle { display: inline-flex; }

/* Op mobiel verbergt de horizontale hoofdnav — de drawer bevat het hele menu. */
@media (max-width: 767px) {
    html[data-nav="drawer"] .site-nav { display: none; }
}

/* Het off-canvas zijmenu-paneel (rendert alleen op drawer-sites). */
.site-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 120;                          /* boven de backdrop (90) en sticky header (100) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(320px, 85vw);
    margin: 0;
    padding: 5rem 1.5rem 1.5rem;           /* ruimte onder de header-strook */
    background: var(--surface, var(--bg, #fff));
    box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Dicht: buiten beeld, niet-focusbaar. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
}
body[data-menu-open="true"] .site-drawer {
    transform: none;
    visibility: visible;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.site-drawer a {
    padding: .85rem .25rem;
    font-size: 1.05rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.site-drawer a:last-child { border-bottom: 0; }

/* Verduisterde backdrop achter de drawer (fixed, klik = sluiten). */
html[data-nav="drawer"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;                           /* onder de (sticky) header (100), boven de content */
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
html[data-nav="drawer"] body[data-menu-open="true"]::after {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .site-drawer,
    html[data-nav="drawer"] body::after { transition: none; }
}