/* ============================================================
   TNS MENU STYLES — 5 wisselbare stijlen via Customizer
   Weergave → Aanpassen → Menu stijl
   Stijl 1 = standaard (geen body class)
   ============================================================ */

.desktop-menu-toggle .toggle-knob { display: none; }
.tns-menu-bars   { display: none; }
.tns-photo-stage { display: none; }
.tns-stats-bg    { display: none; }


/* ════════════════════════════════════════════════════════════
   GEDEELDE TOGGLE-PILL (stijlen 2–5)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-2 .desktop-menu-toggle,
    body.menu-style-3 .desktop-menu-toggle,
    body.menu-style-4 .desktop-menu-toggle,
    body.menu-style-5 .desktop-menu-toggle,
    body.menu-style-6 .desktop-menu-toggle {
        width: 60px; height: 32px; border-radius: 999px;
        background: rgba(255,255,255,0.12);
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(8px); top: 1.3rem;
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    body.menu-style-2 .desktop-menu-toggle:hover,
    body.menu-style-3 .desktop-menu-toggle:hover,
    body.menu-style-4 .desktop-menu-toggle:hover,
    body.menu-style-5 .desktop-menu-toggle:hover,
    body.menu-style-6 .desktop-menu-toggle:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.55); transform: none;
    }
    body.menu-style-2 .desktop-menu-toggle:active,
    body.menu-style-3 .desktop-menu-toggle:active,
    body.menu-style-4 .desktop-menu-toggle:active,
    body.menu-style-5 .desktop-menu-toggle:active,
    body.menu-style-6 .desktop-menu-toggle:active { transform: none; }

    body.menu-style-2 .desktop-menu-toggle span:not(.toggle-knob),
    body.menu-style-3 .desktop-menu-toggle span:not(.toggle-knob),
    body.menu-style-4 .desktop-menu-toggle span:not(.toggle-knob),
    body.menu-style-5 .desktop-menu-toggle span:not(.toggle-knob),
    body.menu-style-6 .desktop-menu-toggle span:not(.toggle-knob) { display: none; }

    body.menu-style-2 .desktop-menu-toggle .toggle-knob,
    body.menu-style-3 .desktop-menu-toggle .toggle-knob,
    body.menu-style-4 .desktop-menu-toggle .toggle-knob,
    body.menu-style-5 .desktop-menu-toggle .toggle-knob,
    body.menu-style-6 .desktop-menu-toggle .toggle-knob {
        display: block; position: absolute;
        width: 22px; height: 22px; border-radius: 50%;
        background: white; top: 50%; left: 3px;
        transform: translateY(-50%);
        transition: left 0.35s cubic-bezier(0.25,0.46,0.45,0.94), background 0.35s ease;
        box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    }
    body.menu-style-2 .desktop-menu-toggle.active,
    body.menu-style-3 .desktop-menu-toggle.active,
    body.menu-style-4 .desktop-menu-toggle.active,
    body.menu-style-5 .desktop-menu-toggle.active,
    body.menu-style-6 .desktop-menu-toggle.active {
        background: rgba(191,164,106,0.15); border-color: var(--tns-oker);
    }
    body.menu-style-2 .desktop-menu-toggle.active .toggle-knob,
    body.menu-style-3 .desktop-menu-toggle.active .toggle-knob,
    body.menu-style-4 .desktop-menu-toggle.active .toggle-knob,
    body.menu-style-5 .desktop-menu-toggle.active .toggle-knob,
    body.menu-style-6 .desktop-menu-toggle.active .toggle-knob {
        left: calc(100% - 25px); background: var(--tns-oker);
    }

    /* Bars zichtbaar in overlay */
    body.menu-style-2 .main-navigation.desktop-overlay-active .tns-menu-bars,
    body.menu-style-3 .main-navigation.desktop-overlay-active .tns-menu-bars,
    body.menu-style-4 .main-navigation.desktop-overlay-active .tns-menu-bars,
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-menu-bars,
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-menu-bars {
        display: flex;
    }

    /* Gedeelde bar-kleuren */
    .tns-menu-bars {
        position: absolute; bottom: 0; left: 0; right: 0;
        z-index: 10; pointer-events: none;
    }
    .tns-menu-bars span {
        flex: 1; display: block;
    }
    /* Kleuren zitten globaal hieronder, buiten de media query */
}

/* ── Bar-kleuren: globaal, ook beschikbaar op mobiel ── */
.tns-menu-bars span:nth-child(1) { background: #102F49; } /* navy */
.tns-menu-bars span:nth-child(2) { background: #828673; } /* sage */
.tns-menu-bars span:nth-child(3) { background: #BFA46A; } /* gold */
.tns-menu-bars span:nth-child(4) { background: #414246; } /* gray */


/* ══════════════════════════════════════════════════════════
   STIJL 2 — Toggle + overlay van onderen, wipe-balken
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-2 .main-navigation.desktop-overlay-active {
        animation: tns-s2-in 0.6s cubic-bezier(0.65,0,0.35,1) forwards;
    }
    @keyframes tns-s2-in { from{transform:translateY(100%)} to{transform:translateY(0)} }
    body.menu-style-2 .main-navigation.desktop-overlay-closing {
        animation: tns-s2-out 0.5s cubic-bezier(0.65,0,0.35,1) forwards;
    }
    @keyframes tns-s2-out { from{transform:translateY(0)} to{transform:translateY(100%)} }

    /* Wipe: elk segment schuift in met stagger */
    body.menu-style-2 .main-navigation.desktop-overlay-active .tns-menu-bars span {
        height: 16px;
        transform: scaleX(0); transform-origin: left center;
        transition: transform 0.55s cubic-bezier(0.77,0,0.18,1);
    }
    body.menu-style-2 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { transform: scaleX(1); }
    body.menu-style-2 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay: 0.30s; }
    body.menu-style-2 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay: 0.40s; }
    body.menu-style-2 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay: 0.50s; }
    body.menu-style-2 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay: 0.60s; }
}


/* ══════════════════════════════════════════════════════════
   STIJL 3 — Toggle + split overlay (nav links / contact rechts)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-3 .main-navigation.desktop-overlay-active {
        display: grid; grid-template-columns: 1fr 340px; grid-template-rows: 1fr;
        justify-content: unset; align-items: unset; padding: 0;
        animation: tns-s3-in 0.55s cubic-bezier(0.4,0,0.15,1) forwards;
    }
    @keyframes tns-s3-in { from{transform:translateY(100%)} to{transform:translateY(0)} }
    body.menu-style-3 .main-navigation.desktop-overlay-closing {
        animation: tns-s3-out 0.5s cubic-bezier(0.4,0,0.15,1) forwards;
    }
    @keyframes tns-s3-out { from{transform:translateY(0)} to{transform:translateY(100%)} }

    body.menu-style-3 .main-navigation.desktop-overlay-active .nav-menu {
        display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
        max-width:none; width:100%;
        padding: 6rem 3rem 5rem clamp(48px,8vw,96px);
        margin:0; grid-column:1; grid-row:1;
    }
    body.menu-style-3 .main-navigation.desktop-overlay-active .nav-menu::before {
        content:'NAVIGATIE'; display:block; font-size:10px; font-weight:700;
        letter-spacing:0.18em; color:var(--tns-oker); margin-bottom:2rem;
    }
    body.menu-style-3 .main-navigation.desktop-overlay-active .nav-menu > li { text-align:left; width:auto; }
    body.menu-style-3 .main-navigation.desktop-overlay-active .nav-menu > li > a {
        font-size:clamp(1.5rem,2.8vw,2.25rem); justify-content:flex-start;
        padding:0.45rem 0; transition:color 0.3s ease, padding-left 0.3s ease;
    }
    body.menu-style-3 .main-navigation.desktop-overlay-active .nav-menu > li > a:hover { padding-left:0.75rem; }

    body.menu-style-3 .main-navigation.desktop-overlay-active .overlay-footer {
        display:flex !important; flex-direction:column !important;
        justify-content:center !important; align-items:flex-start !important;
        gap:2.5rem !important; padding:6rem 3.5rem 5rem 3rem !important;
        margin:0 !important; border-left:1px solid rgba(255,255,255,0.08);
        background:rgba(0,0,0,0.12); grid-column:2; grid-row:1; width:auto;
        opacity:0; transform:none !important; transition:opacity 0.5s ease 0.35s !important;
    }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .overlay-footer { opacity:1 !important; }
    body.menu-style-3 .main-navigation.desktop-overlay-active .overlay-footer-col { align-items:flex-start !important; text-align:left !important; }

    body.menu-style-3 .main-navigation.desktop-overlay-active .tns-menu-bars { grid-column:1/-1; grid-row:1; align-self:end; position:relative; }
    body.menu-style-3 .main-navigation.desktop-overlay-active .tns-menu-bars span {
        height:16px; transform:scaleX(0); transform-origin:left center;
        transition: transform 0.55s cubic-bezier(0.77,0,0.18,1);
    }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { transform:scaleX(1); }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay:0.30s; }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay:0.40s; }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay:0.50s; }
    body.menu-style-3 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay:0.60s; }
}


/* ══════════════════════════════════════════════════════════
   STIJL 4 — Hover-balken
   Bars poppen direct in (geen wipe, geen delay) zodat ze
   METEEN reageren op hover. Transition height: 0.18s —
   voelbaar sneller dan een menselijke cursor-beweging.
   Per 2 items hoort één kleur: items 1-2 = navy, 3-4 = sage,
   5-6 = gold, 7-8 = gray.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-4 .main-navigation.desktop-overlay-active {
        display:grid; grid-template-columns:1fr 340px; grid-template-rows:1fr;
        justify-content:unset; align-items:unset; padding:0;
        animation: tns-s3-in 0.55s cubic-bezier(0.4,0,0.15,1) forwards;
    }
    body.menu-style-4 .main-navigation.desktop-overlay-closing {
        animation: tns-s3-out 0.5s cubic-bezier(0.4,0,0.15,1) forwards;
    }

    /* Nav */
    body.menu-style-4 .main-navigation.desktop-overlay-active .nav-menu {
        display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
        max-width:none; width:100%;
        padding:6rem 3rem 5rem clamp(48px,8vw,96px);
        margin:0; grid-column:1; grid-row:1;
    }
    body.menu-style-4 .main-navigation.desktop-overlay-active .nav-menu::before {
        content:'NAVIGATIE'; display:block; font-size:10px; font-weight:700;
        letter-spacing:0.18em; color:var(--tns-oker); margin-bottom:2rem;
    }
    body.menu-style-4 .main-navigation.desktop-overlay-active .nav-menu > li { text-align:left; width:auto; }
    body.menu-style-4 .main-navigation.desktop-overlay-active .nav-menu > li > a {
        font-size:clamp(1.5rem,2.8vw,2.25rem); justify-content:flex-start;
        padding:0.45rem 0; transition:color 0.3s ease, padding-left 0.3s ease;
    }
    body.menu-style-4 .main-navigation.desktop-overlay-active .nav-menu > li > a:hover { padding-left:0.75rem; }

    /* Contact rechts */
    body.menu-style-4 .main-navigation.desktop-overlay-active .overlay-footer {
        display:flex !important; flex-direction:column !important;
        justify-content:center !important; align-items:flex-start !important;
        gap:2.5rem !important; padding:6rem 3.5rem 5rem 3rem !important;
        margin:0 !important; border-left:1px solid rgba(255,255,255,0.08);
        background:rgba(0,0,0,0.12); grid-column:2; grid-row:1; width:auto;
        opacity:0; transform:none !important; transition:opacity 0.5s ease 0.35s !important;
    }
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .overlay-footer { opacity:1 !important; }
    body.menu-style-4 .main-navigation.desktop-overlay-active .overlay-footer-col { align-items:flex-start !important; text-align:left !important; }

    /* ── BARS: grid-balk over de volle breedte ── */
    body.menu-style-4 .main-navigation.desktop-overlay-active .tns-menu-bars {
        grid-column:1/-1; grid-row:1; align-self:end;
        align-items: flex-end; /* balken groeien van onderaf omhoog */
    }

    /*
     * Geen wipe — bars zijn meteen zichtbaar bij openen (alleen fade).
     * Hierdoor staat height-transition los en reageert hij direct op hover.
     * transition: height 0.18s = sneller dan de cursor, voelt instant aan.
     */
    body.menu-style-4 .main-navigation.desktop-overlay-active .tns-menu-bars span {
        height: 16px;
        opacity: 0;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94),
                    opacity 0.25s ease;
    }

    /* Fade in bij items-revealed, lichte stagger */
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { opacity: 1; }
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay: 0.30s, 0.30s; }
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay: 0.38s, 0.38s; }
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay: 0.46s, 0.46s; }
    body.menu-style-4 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay: 0.54s, 0.54s; }

    /*
     * Hover groepen — JS zet tns-bar-active-N op de nav.
     * Actieve balk: 80px. Rust: 16px.
     * transition-delay: 0 zodat hover DIRECT reageert (niet wachten op fade-in delay).
     */
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-0 .tns-menu-bars span:nth-child(1),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-1 .tns-menu-bars span:nth-child(2),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-2 .tns-menu-bars span:nth-child(3),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-3 .tns-menu-bars span:nth-child(4) {
        height: 80px;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94),
                    opacity 0.25s ease;
        transition-delay: 0s !important; /* reset delay zodat hover direct werkt */
    }

    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-0 .tns-menu-bars span:not(:nth-child(1)),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-1 .tns-menu-bars span:not(:nth-child(2)),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-2 .tns-menu-bars span:not(:nth-child(3)),
    body.menu-style-4 .main-navigation.desktop-overlay-active.tns-bar-active-3 .tns-menu-bars span:not(:nth-child(4)) {
        height: 16px;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94),
                    opacity 0.25s ease;
        transition-delay: 0s !important;
    }
}


/* ══════════════════════════════════════════════════════════
   STIJL 5 — Foto-reveal
   Nav links (42%), grote foto rechts (58%).
   Foto-stijl gebaseerd op waarom.html USP-blok:
   object-fit cover, navy gradient overlay van onderaf,
   subtiele overgang links (zoals block-a-right::before).
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-5 .main-navigation.desktop-overlay-active {
        display: grid;
        grid-template-columns: 42% 58%;
        grid-template-rows: 1fr auto;
        padding: 0;
        animation: tns-s5-in 0.65s cubic-bezier(0.65,0,0.35,1) forwards;
        overflow: hidden;
    }
    @keyframes tns-s5-in { from{transform:translateY(100%)} to{transform:translateY(0)} }
    body.menu-style-5 .main-navigation.desktop-overlay-closing {
        animation: tns-s5-out 0.5s cubic-bezier(0.65,0,0.35,1) forwards;
    }
    @keyframes tns-s5-out { from{transform:translateY(0)} to{transform:translateY(100%)} }

    /* Nav: linker kolom */
    body.menu-style-5 .main-navigation.desktop-overlay-active .nav-menu {
        display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
        max-width:none; width:100%;
        padding:5.5rem 2rem 5rem clamp(48px,7vw,80px);
        margin:0; grid-column:1; grid-row:1; gap:0; z-index:2;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .nav-menu::before {
        content:'MENU'; display:block; font-size:10px; font-weight:700;
        letter-spacing:0.18em; color:var(--tns-oker); margin-bottom:2rem;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .nav-menu > li { text-align:left; width:auto; }
    body.menu-style-5 .main-navigation.desktop-overlay-active .nav-menu > li > a {
        font-size:clamp(1.1rem,1.9vw,1.6rem); justify-content:flex-start;
        padding:0.5rem 0; transition:color 0.3s ease, padding-left 0.3s ease;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .nav-menu > li > a:hover { padding-left:0.6rem; }

    /* Foto-stage: rechter kolom, volle hoogte */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-stage {
        display: block !important;  /* !important als vangnet tegen globale display:none */
        grid-column:2; grid-row:1 / -1;
        position:relative; overflow:hidden;
        min-height: 0; /* voorkomt dat grid-item overflow veroorzaakt */
        width: 100%; height: 100%;
    }

    /* Twee img slots voor crossfade-wissel */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-stage img {
        position:absolute; inset:0;
        width:100%; height:100%;
        object-fit:cover; object-position:center 20%; /* zelfde als waarom.html */
        transition: opacity 0.55s ease, transform 0.75s ease;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-a {
        opacity:1; transform:scale(1.04); z-index:1;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-b {
        opacity:0; transform:scale(1.0); z-index:2;
    }

    /* Navy gradient van onderaf — identiek aan .usp-overlay in waarom.html */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-gradient {
        display:block; position:absolute; inset:0; z-index:3;
        background: linear-gradient(
            to top,
            rgba(16,47,73,0.92) 0%,
            rgba(16,47,73,0.45) 50%,
            rgba(16,47,73,0.08) 100%
        );
    }

    /* Linker overgang — identiek aan .block-a-right::before in waarom.html */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-stage::before {
        content:''; position:absolute; inset:0; z-index:4;
        background: linear-gradient(to right, var(--tns-blauw) 0%, transparent 30%);
        pointer-events: none;
    }

    /* Caption: eyebrow + grote titel links onderaan de foto */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-caption {
        display:block; position:absolute;
        bottom: 5rem; left: 2.5rem;
        z-index:5;
        opacity:0; transform:translateY(12px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-stage.tns-photo-loaded .tns-photo-caption {
        opacity:1; transform:translateY(0);
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-eyebrow {
        display:flex; align-items:center; gap:8px;
        font-size:10px; font-weight:700; letter-spacing:0.18em;
        color:var(--tns-oker); text-transform:uppercase; margin-bottom:10px;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-eyebrow::before {
        content:''; width:18px; height:2px; background:var(--tns-oker); flex-shrink:0;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-photo-label {
        font-family:var(--tns-font-heading);
        font-size:clamp(2rem,3.5vw,3rem);
        font-weight:900; text-transform:uppercase;
        color:white; line-height:1.0; letter-spacing:-0.01em;
    }

    /* Overlay-footer: smal strookje onderaan linker kolom */
    body.menu-style-5 .main-navigation.desktop-overlay-active .overlay-footer {
        display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
        align-items:flex-start !important; gap:2rem !important;
        padding:1.25rem clamp(48px,7vw,80px) 2rem !important;
        margin:0 !important; width:100%;
        grid-column:1; grid-row:2; z-index:2;
        border-top:1px solid rgba(255,255,255,0.08);
        opacity:0; transform:none !important;
        transition:opacity 0.5s ease 0.5s !important;
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .overlay-footer { opacity:1 !important; }
    body.menu-style-5 .main-navigation.desktop-overlay-active .overlay-footer-col { align-items:flex-start !important; text-align:left !important; }

    /* Balken: links onderaan */
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-menu-bars {
        grid-column:1; grid-row:1; align-self:end; z-index:3;
        position:relative; /* grid-placement vereist position:relative, niet absolute */
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active .tns-menu-bars span {
        height:16px; transform:scaleX(0); transform-origin:left center;
        transition:transform 0.55s cubic-bezier(0.77,0,0.18,1);
    }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { transform:scaleX(1); }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay:0.35s; }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay:0.45s; }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay:0.55s; }
    body.menu-style-5 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay:0.65s; }
}


/* ══════════════════════════════════════════════════════════
   STIJL 6 — Foto-reveal + Hover-balken
   Combineert stijl 5 (foto rechts) en stijl 4 (hover-balken).
   Linker kolom: nav + hover-balken onderaan.
   Rechter kolom: grote foto die wisselt bij hover.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body.menu-style-6 .main-navigation.desktop-overlay-active {
        display: grid;
        grid-template-columns: 42% 58%;
        grid-template-rows: 1fr auto;
        padding: 0;
        animation: tns-s5-in 0.65s cubic-bezier(0.65,0,0.35,1) forwards;
        overflow: hidden;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-closing {
        animation: tns-s5-out 0.5s cubic-bezier(0.65,0,0.35,1) forwards;
    }

    /* Nav: linker kolom — identiek aan stijl 5 */
    body.menu-style-6 .main-navigation.desktop-overlay-active .nav-menu {
        display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
        max-width:none; width:100%;
        padding:5.5rem 2rem 5rem clamp(48px,7vw,80px);
        margin:0; grid-column:1; grid-row:1; gap:0; z-index:2;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .nav-menu::before {
        content:'MENU'; display:block; font-size:10px; font-weight:700;
        letter-spacing:0.18em; color:var(--tns-oker); margin-bottom:2rem;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .nav-menu > li { text-align:left; width:auto; }
    body.menu-style-6 .main-navigation.desktop-overlay-active .nav-menu > li > a {
        font-size:clamp(1.1rem,1.9vw,1.6rem); justify-content:flex-start;
        padding:0.5rem 0; transition:color 0.3s ease, padding-left 0.3s ease;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .nav-menu > li > a:hover { padding-left:0.6rem; }

    /* Foto-stage: rechter kolom — identiek aan stijl 5 */
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-stage {
        display: block !important;
        grid-column:2; grid-row:1 / -1;
        position:relative; overflow:hidden;
        min-height:0; width:100%; height:100%;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-stage img {
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; object-position:center 20%;
        transition: opacity 0.55s ease, transform 0.75s ease;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-a { opacity:1; transform:scale(1.04); z-index:1; }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-b { opacity:0; transform:scale(1.0); z-index:2; }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-gradient {
        display:block; position:absolute; inset:0; z-index:3;
        background: linear-gradient(
            to top,
            rgba(16,47,73,0.92) 0%,
            rgba(16,47,73,0.45) 50%,
            rgba(16,47,73,0.08) 100%
        );
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-stage::before {
        content:''; position:absolute; inset:0; z-index:4;
        background: linear-gradient(to right, var(--tns-blauw) 0%, transparent 30%);
        pointer-events:none;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-caption {
        display:block; position:absolute; bottom:5rem; left:2.5rem; z-index:5;
        opacity:0; transform:translateY(12px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-stage.tns-photo-loaded .tns-photo-caption {
        opacity:1; transform:translateY(0);
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-eyebrow {
        display:flex; align-items:center; gap:8px;
        font-size:10px; font-weight:700; letter-spacing:0.18em;
        color:var(--tns-oker); text-transform:uppercase; margin-bottom:10px;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-eyebrow::before {
        content:''; width:18px; height:2px; background:var(--tns-oker); flex-shrink:0;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-photo-label {
        font-family:var(--tns-font-heading);
        font-size:clamp(2rem,3.5vw,3rem);
        font-weight:900; text-transform:uppercase;
        color:white; line-height:1.0; letter-spacing:-0.01em;
    }

    /* Overlay-footer: smal strookje onderaan linker kolom */
    body.menu-style-6 .main-navigation.desktop-overlay-active .overlay-footer {
        display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
        align-items:flex-start !important; gap:2rem !important;
        padding:1.25rem clamp(48px,7vw,80px) 2rem !important;
        margin:0 !important; width:100%;
        grid-column:1; grid-row:2; z-index:2;
        border-top:1px solid rgba(255,255,255,0.08);
        opacity:0; transform:none !important;
        transition:opacity 0.5s ease 0.5s !important;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .overlay-footer { opacity:1 !important; }
    body.menu-style-6 .main-navigation.desktop-overlay-active .overlay-footer-col { align-items:flex-start !important; text-align:left !important; }

    /* ── HOVER-BALKEN — links onderaan, per 2 items één kleur ── */
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-menu-bars {
        /* position:absolute uit de gedeelde regel — pakt volle breedte van de overlay */
        position: absolute;
        bottom: 0; left: 0; right: 0;
        z-index: 20;
        align-items: flex-end;
    }

    /* Direct aanwezig (geen wipe), fade in */
    body.menu-style-6 .main-navigation.desktop-overlay-active .tns-menu-bars span {
        height: 16px;
        opacity: 0;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94),
                    opacity 0.25s ease;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { opacity: 1; }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay: 0.30s, 0.30s; }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay: 0.38s, 0.38s; }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay: 0.46s, 0.46s; }
    body.menu-style-6 .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay: 0.54s, 0.54s; }

    /* Actieve balk omhoog, rest daalt terug — direct, geen delay */
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-0 .tns-menu-bars span:nth-child(1),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-1 .tns-menu-bars span:nth-child(2),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-2 .tns-menu-bars span:nth-child(3),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-3 .tns-menu-bars span:nth-child(4) {
        height: 80px;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s ease;
        transition-delay: 0s !important;
    }
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-0 .tns-menu-bars span:not(:nth-child(1)),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-1 .tns-menu-bars span:not(:nth-child(2)),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-2 .tns-menu-bars span:not(:nth-child(3)),
    body.menu-style-6 .main-navigation.desktop-overlay-active.tns-bar-active-3 .tns-menu-bars span:not(:nth-child(4)) {
        height: 16px;
        transition: height 0.18s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s ease;
        transition-delay: 0s !important;
    }
}