/* layer-navigation.css — site-header, menubuilder, editmode-overlay, megamenu. */

/* ── Site-header + menubuilder (DT 152) ─────────────────────────────── */
/* ── Editmode-overlay ──────────────────────────────────────────────
   `?editmode=mm` activeert. Elke section/item met `data-edit-link`
   krijgt een hover-outline + "Edit"-knop. Sub-items binnen lagen
   (USPs, banners, kaarten) ondersteunen dezelfde decorate-call. */
[data-edit-link] {
    position: relative;
}
/* Megamenu-items: dropdown ankert op `.site-header` — `mb__main-item`
   moet `position: static` blijven zodat het `top: 100%` van .mb__dropdown
   blijft refereren aan de site-header, niet aan de li-trigger. */
.mb__main-item[data-edit-link] {
    position: static;
}
[data-edit-link]:hover {
    outline: 2px dashed rgba(237, 27, 45, 0.6);
    outline-offset: -2px;
}
.layer__edit-cta {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    padding: 0.35rem 0.7rem;
    background: var(--color-primary, #ed1b2d);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
[data-edit-link]:hover > .layer__edit-cta {
    opacity: 1;
    pointer-events: auto;
}
.layer__edit-cta--item {
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
}

/* Floating action button — pill links-onderin, lichte achtergrond.
   Layout: [×]  Bewerkingsmodus  [○ schuif]. X = cookie weg (permanent uit),
   schuif = JS body-class (tijdelijk pauzeren). Groen = aan, grijs = uit. */
.edit-fab {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.7rem 0.45rem 0.5rem;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.18);
    user-select: none;
}
.edit-fab__close {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.edit-fab__close:hover {
    background: #e5e7eb;
    color: #111827;
}
.edit-fab__label { line-height: 1; }
.edit-fab__switch {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
}
.edit-fab__switch-track {
    display: inline-block;
    width: 2.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #16a34a; /* groen = aan */
    position: relative;
    transition: background-color 0.15s ease;
}
.edit-fab__switch-thumb {
    position: absolute;
    top: 0.15rem;
    left: calc(100% - 1.05rem);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.edit-fab__switch[aria-pressed="false"] .edit-fab__switch-track { background: #d1d5db; }
.edit-fab__switch[aria-pressed="false"] .edit-fab__switch-thumb { left: 0.15rem; }

/* Tijdelijk gepauzeerd — JS zet body.edit-mode-paused. Overlays + edit-
   knoppen verdwijnen; cookie + data-edit-link blijven intact. */
body.edit-mode-paused [data-edit-link]:hover { outline: none; }
body.edit-mode-paused .layer__edit-cta       { display: none; }

/* Site-header = positioning-anker voor de megamenu-dropdown. Sticky +
   isolation creëert een stacking context zodat de dropdown boven page-
   content blijft maar onder fixed overlays kan blijven indien nodig. */
/* Skip-link — screenreader/keyboard-only, slides in on :focus. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    padding: 0.6rem 1rem;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--color-fg);
    outline-offset: 2px;
}

:root {
    /* Hoogte van de sticky site-header; nodig als `top:`-offset voor andere
       sticky-elementen die er onder moeten plakken (bv. matrix-thead).
       JS in `/modules/site-header.js` overschrijft 'm na resize met de
       gemeten hoogte. */
    --site-header-height: 64px;
    --site-header-offset: var(--site-header-height);
}
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
    /* Hide-on-scroll-down via JS: zodra `[data-header-hidden]` op <body>
       staat schuift de header weg met transform; bij scroll terug naar
       boven glijdt 'ie zacht in. SHOW gebruikt een ease-in-out-cubic
       voor symmetrische S-curve — zachte start (geen "hap"), versnelt
       in het midden, zachte landing. */
    transition: transform .65s cubic-bezier(.65, .05, .36, 1),
                box-shadow  .35s ease;
    will-change: transform;
}
body[data-header-hidden="true"] .site-header {
    transform: translateY(-100%);
    /* HIDE iets sneller en met meer "swoosh" — accelerating ipv lineair. */
    transition: transform .35s cubic-bezier(.55, .085, .68, .53),
                box-shadow  .35s ease;
}
/* Subtiele schaduw zodra de page voorbij `MIN_SCROLL_Y` is — geeft een
   lichte separatie tussen header en content. Class wordt door JS gezet. */
body[data-page-scrolled="true"] .site-header {
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.site-header__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.site-header__nav {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
/* Hamburger — alleen op mobile zichtbaar, geplakt rechts via flex-order. */
.site-header__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-fg);
    cursor: pointer;
    order: 99; /* helemaal rechts */
    margin-left: auto;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.site-header__menu-toggle:hover {
    background: var(--color-bg-soft);
}
.site-header__menu-toggle svg {
    transition: transform var(--dur-med) var(--ease-out);
}
body[data-menu-open="true"] .site-header__menu-toggle svg {
    transform: rotate(90deg);
}
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-logo img {
    display: block;
    height: 2.5rem;
    width: auto;
}

/* Color-scheme toggle — subtiele icoon-knop, geen rand. Iconen cross-faden
   met rotate+scale zodat de wissel zacht voelt. */
.color-scheme-toggle {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--color-fg-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.color-scheme-toggle:hover {
    color: var(--color-fg);
    background: var(--color-bg-soft);
}
.cs-icon {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
}
/* Default (light): zon zichtbaar, maan onzichtbaar. */
.cs-icon--sun  { opacity: 1; transform: rotate(0)        scale(1);   }
.cs-icon--moon { opacity: 0; transform: rotate(-90deg)   scale(0.5); }
/* Dark forced via attribute */
:root[data-color-scheme="dark"] .cs-icon--sun  { opacity: 0; transform: rotate(90deg)  scale(0.5); }
:root[data-color-scheme="dark"] .cs-icon--moon { opacity: 1; transform: rotate(0)      scale(1);   }
/* Dark via system-preference (mits gebruiker niet handmatig light heeft gekozen) */
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) .cs-icon--sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
    :root:not([data-color-scheme="light"]) .cs-icon--moon { opacity: 1; transform: rotate(0)     scale(1);   }
}
.mb {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.mb__main, .mb__main-ctas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
}
.mb__main { flex: 1; }
/* Bewust géén `position: relative` — dropdown ankert op .site-header
   (de hele balk-breedte), niet op de individuele trigger. */
.mb__main-link {
    display: block;
    padding: 1rem 0.9rem;
    font-weight: 600;
    color: var(--color-fg);
    text-decoration: none;
    transition: color 0.15s;
}
.mb__main-link:hover { color: var(--color-primary); }

/* ── Megamenu — full-width dropdown ─────────────────────────────────── */
.mb__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.12);
    padding: var(--space-5) var(--gutter);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: -1; /* onder de trigger zodat de hover-zone doorloopt */
}
.mb__main-item:hover > .mb__dropdown,
.mb__main-item:focus-within > .mb__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1;
}

.mb__columns {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-5);
}
.mb__col-header { margin-bottom: var(--space-2); }
.mb__col-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-fg);
    text-decoration: none;
}
.mb__col-title:hover { color: var(--color-primary); }
.mb__col-subtitle {
    display: block;
    font-size: 0.85rem;
    color: var(--color-fg-muted);
}
.mb__col-list { list-style: none; padding: 0; margin: 0; }
.mb__item-link {
    display: block;
    padding: 0.4rem 0;
    color: var(--color-fg);
    text-decoration: none;
}
.mb__item-link:hover { color: var(--color-primary); }
.mb__item-tagline {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-fg-muted);
}
.mb__item-title { font-weight: 500; }
.mb__item-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--color-fg-muted);
}

/* Banners zitten gegroepeerd in één banner-kolom (`.mb__col--banners`),
   die meedraait in de zelfde `.mb__columns`-grid als de inhouds-kolommen. */
.mb__col--banners {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Horizontale list-stijl: kleine vierkante thumb links, titel + subtitle rechts.
   Image is een vaste 4rem (64px) square; body krijgt de rest van de breedte. */
.mb__dropdown-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    text-decoration: none;
    color: var(--color-fg);
    border-radius: 0.5rem;
    background: var(--color-bg-soft, #f6f5f0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mb__dropdown-cta:hover,
.mb__dropdown-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
}
.mb__cta-image {
    flex: 0 0 auto;
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 0.375rem;
    overflow: hidden;
}
/* MediaRender wrapt de <img> in een <div class="mm-media"> — die moet
   ook de volledige cel vullen, anders krijgt de inner img height:100% van 0. */
.mb__cta-image .mm-media {
    display: block;
    width: 100%;
    height: 100%;
}
.mb__cta-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mb__cta-body {
    /* min-width:0 zodat lange titles binnen flex kunnen ellipsen i.p.v. te
       overflowen — anders forceert intrinsic content de body breder dan beschikbaar. */
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}
.mb__cta-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--color-fg);
}
.mb__cta-subtitle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-fg-muted);
}

/* ── Site-nav (NavigationMenuRenderer — Navigation-tabel) ───────────── */

.site-nav {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}

/* Top-level items */
.site-nav__list--depth-0 { flex: 1; }

.site-nav__item { position: relative; }

.site-nav__link {
    display: block;
    padding: 1rem 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-fg);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--color-primary); }
.site-nav__link--no-route { cursor: default; }

/* Dropdown — depth-1 */
.site-nav__list--depth-1 {
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    min-width: 13rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.14);
    padding: var(--space-1) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    z-index: 10;
}
.site-nav__item:hover > .site-nav__list--depth-1,
.site-nav__item:focus-within > .site-nav__list--depth-1 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease;
}

/* Dropdown links */
.site-nav__list--depth-1 .site-nav__link {
    padding: 0.5rem 1.1rem;
    font-weight: 400;
    font-size: 0.9rem;
}
.site-nav__list--depth-1 .site-nav__link:hover {
    background: color-mix(in srgb, var(--color-primary, #c1272d) 6%, transparent);
    color: var(--color-primary);
}

/* Chevron-indicator voor items met een submenu (desktop: op de link) */
.site-nav__item--has-children > .site-nav__link::after {
    content: '';
    display: inline-block;
    width: .45em;
    height: .45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: .4em;
    opacity: .6;
    vertical-align: middle;
    transition: transform .15s ease;
}
.site-nav__item--has-children:hover > .site-nav__link::after,
.site-nav__item--has-children:focus-within > .site-nav__link::after {
    transform: rotate(-135deg) translateY(-1px);
}

/* Toggle-knop — alleen zichtbaar op mobile; desktop gebruikt hover. */
.site-nav__toggle {
    display: none;
}

/* ── Navigatie CTA-knoppen ──────────────────────────────────────────────── */

.site-nav__ctas {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.site-nav__ctas--mobile { display: none; }
.site-nav__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-primary-fg, #fff);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 0.25rem);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.site-nav__cta:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
    transform: translateY(-1px);
}
.site-nav__cta-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}
.site-nav__cta-text { line-height: 1; }

/* Basket-badge: kleine rode stip met teller; verborgen als leeg */
.site-nav__cta-badge {
    display: none;
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;
    background: #e53e3e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2rem;
    border-radius: 999px;
    text-align: center;
}
.site-nav__cta-badge:not(:empty) { display: block; }

/* Mobile-state: hamburger zichtbaar, megamenu klapt drawer-style uit
   onder de header. Toggle wordt door /modules/site-header.js gezet. */
@media (max-width: 48rem) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        /* position: fixed werkt niet binnen will-change: transform ancestor.
           position: absolute + top: 100% ankert de drawer direct onder de header. */
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100dvh - var(--site-header-height, 4rem));
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        overflow-y: auto;
        padding: var(--space-3) var(--gutter);
        transform: translateY(-110%);
        transition: transform var(--dur-med) var(--ease-out);
        visibility: hidden;
    }
    body[data-menu-open="true"] .site-header__nav {
        transform: translateY(0);
        visibility: visible;
    }
    body[data-menu-open="true"] {
        overflow: hidden; /* lock background-scroll */
    }
    .mb { flex-direction: column; align-items: stretch; gap: 0; }
    .mb__main { flex-direction: column; width: 100%; gap: 0; }
    .mb__main-item { border-bottom: 1px solid var(--color-border); }
    .mb__main-link { padding: var(--space-3) 0; }
    .mb__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0 0 var(--space-3);
        border: 0;
        box-shadow: none;
        display: none;
    }
    .mb__main-item--open > .mb__dropdown,
    .mb__main-item:focus-within > .mb__dropdown {
        display: block;
    }
    .mb__columns { grid-template-columns: 1fr; gap: var(--space-3); }
    .mb__col--banners { display: none; } /* banners alleen desktop */

    /* Desktop CTA's verbergen in drawer; mobile CTA's zijn al in de drawer */
    .site-nav__ctas--main   { display: none; }
    .site-nav__ctas--mobile { display: flex; padding: var(--space-3) 0 var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-2); }

    /* site-nav mobile — drawer-stijl in de .site-header__nav container */
    .site-nav { display: block; width: 100%; }
    .site-nav__list--depth-0 { flex-direction: column; }
    .site-nav__item { border-bottom: 1px solid var(--color-border); }
    .site-nav__link { padding: var(--space-3) 0; font-size: 1rem; }

    /* Items met submenu: link + toggle-knop naast elkaar, depth-1 wraps eronder */
    .site-nav__item--has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .site-nav__item--has-children > .site-nav__link {
        flex: 1;
        min-width: 0;
    }
    /* Verberg desktop-chevron op de link; button neemt het over */
    .site-nav__item--has-children > .site-nav__link::after { display: none; }

    /* Toggle-knop */
    .site-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        flex-shrink: 0;
        background: transparent;
        border: 0;
        color: var(--color-fg-muted);
        cursor: pointer;
        padding: 0;
    }
    .site-nav__toggle::after {
        content: '';
        display: inline-block;
        width: .5em;
        height: .5em;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform .15s ease;
    }
    .site-nav__item.is-open > .site-nav__toggle::after {
        transform: rotate(-135deg);
    }

    /* Depth-1 dropdown: inline, niet absoluut; vult volle breedte */
    .site-nav__list--depth-1 {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 var(--space-2) var(--space-3);
        flex-basis: 100%;
        display: none;
    }
    .site-nav__item.is-open > .site-nav__list--depth-1 {
        display: flex;
    }
    .site-nav__list--depth-1 .site-nav__link {
        padding: 0.4rem 0;
        font-size: 0.9rem;
    }
    .site-nav__list--depth-1 .site-nav__link:hover { background: none; }
}