/* ==========================================================================
   AGDS Nav Menu — styling (identiek aan het originele menu, CLS-vrij)
   - Desktop >=1200px: horizontaal, dropdowns CSS-only (werkt zonder JS)
   - Mobiel  <1200px : hamburger (JS voegt ARIA + accordion toe)
   - Vaste hoogtes + Arial (systeemfont) => geen font-swap, geen layout shift
   ========================================================================== */

.agds-nav { display: flex; align-items: center; position: relative; }
.agds-nav__backdrop { display: none; }   /* alleen zichtbaar op mobiel/tablet */
/* Desktop: de drawer-wrappers doen niets (passthrough); de kop is verborgen. */
.agds-nav__drawer, .agds-nav__panels { display: contents; }
.agds-nav__drawer-head { display: none; }
.agds-nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; flex-wrap: nowrap;
}
.agds-nav__item { position: relative; margin: 0; display: flex; align-items: center; }

/* Links en toggle-knoppen zien er identiek uit. */
.agds-nav__link,
.agds-nav__toggle {
    font-family: Arial, Helvetica, sans-serif;   /* systeemfont => geen swap/CLS */
    font-size: 14.4px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Parent-item: link + losse toggle-knop naadloos naast elkaar. */
.agds-nav__item--has-children > .agds-nav__link { padding-right: 4px; }
.agds-nav__item--has-children > .agds-nav__toggle:not(.agds-nav__link) { padding-left: 4px; }

.agds-nav__arrow { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 0.3s ease; }

/* Onderstreping-hover (roze), zoals het origineel. */
.agds-nav__link::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 6px;
    height: 2px;
    background-color: #D100AF;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.agds-nav__item:hover > .agds-nav__link::after,
.agds-nav__link:focus-visible::after { opacity: 1; }

/* Zichtbare focus voor toetsenbord. */
.agds-nav__link:focus-visible,
.agds-nav__toggle:focus-visible,
.agds-nav__burger:focus-visible {
    outline: 2px solid #D100AF;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------- Dropdowns (desktop) ------- */
.agds-nav__submenu {
    list-style: none; margin: 0; padding: 8px 0;
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-radius: 6px;
    z-index: 100;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Openen op hover en via de knop (Enter/Spatie; de JS zet .is-expanded).
   K-104 (B4, 2026-10): niet meer op :focus-within, anders opende elke Tab een
   submenu en begon de inhoud pas bij Tab 47. Escape sluit (.is-dismissed bij hover). */
@media (min-width: 1200px) {
    /* Niveau 3 klapt zijwaarts uit (alleen desktop; mobiel = drilldown). */
    .agds-nav__submenu .agds-nav__item--has-children > .agds-nav__submenu { top: 0; left: 100%; }
    .agds-nav__item--has-children:hover > .agds-nav__submenu,
    .agds-nav__item--has-children.is-expanded > .agds-nav__submenu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .agds-nav__item--has-children.is-dismissed:hover > .agds-nav__submenu {
        opacity: 0; visibility: hidden; transform: translateY(6px);
    }
    .agds-nav__item:hover > * > .agds-nav__arrow,
    .agds-nav__toggle[aria-expanded="true"] .agds-nav__arrow { transform: rotate(180deg); }
    .agds-nav__burger { display: none; }
}

/* Sub-items: Poppins, paars — identiek aan origineel. */
.agds-nav__link--sub {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #43007B;
    padding: 13px 20px;
    width: 100%;
}
.agds-nav__link--sub::after { display: none; }
.agds-nav__submenu .agds-nav__item { display: block; }
.agds-nav__submenu .agds-nav__item--has-children { display: flex; align-items: center; }
.agds-nav__submenu .agds-nav__toggle { color: #43007B; }
.agds-nav__link--sub:hover { background: #f5f0fa; }

/* Kleuromslag bij sticky header (wit -> paars), zoals het origineel. */
[data-elementor-type="header"].is-sticky .agds-nav__link,
[data-elementor-type="header"].is-sticky .agds-nav__toggle,
[data-elementor-type="header"].is-sticky .agds-nav__burger { color: #43007B; }

/* ------- Hamburger-knop ------- */
.agds-nav__burger {
    background: none; border: 0; cursor: pointer; color: #ffffff;
    padding: 8px; line-height: 0;
    min-width: 44px; min-height: 44px;   /* touch target */
    display: none;
}

/* ========================================================================
   MOBIEL/TABLET < 1200px — bol.com-stijl DRILLDOWN-drawer
   - Drawer schuift van rechts in (tablet deels, mobiel bijna vol).
   - Kop: terug-chevron (links) — titel (midden) — sluitkruis (rechts).
   - Submenu's schuiven als volledige panelen over het huidige niveau
     (drilldown), niet als accordion die naar beneden openklapt.
   ======================================================================== */
@media (max-width: 1199px) {
    /* Hamburger: ALTIJD donkerpaars op de witte mobiele balk.
       !important omdat de Elementor-kit anders een eigen knopkleur oplegt. */
    .agds-nav__burger,
    .agds-nav__burger:hover,
    .agds-nav__burger:focus {
        display: inline-flex; align-items: center; justify-content: center;
        color: #43007B !important;
    }

    /* Backdrop verdonkert de pagina achter de drawer; aantikken = sluiten. */
    .agds-nav__backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 9980;
        background: rgba(20, 0, 40, 0.45);
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }
    .agds-nav.is-open .agds-nav__backdrop { opacity: 1; visibility: visible; }

    /* De drawer: van rechts inschuivend paneel. De transform (ook in de open
       stand: translateX(0)) maakt de drawer het containing-block voor de
       fixed subpanelen — daardoor positioneren ÁLLE submenu-niveaus t.o.v.
       de drawer i.p.v. genest binnen elkaar. overflow:hidden klipt de
       off-screen panelen. */
    .agds-nav__drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(420px, 85vw);
        background: #ffffff;
        box-shadow: -8px 0 30px rgba(0,0,0,0.18);
        z-index: 9990;
        overflow: hidden;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s;
    }
    .agds-nav.is-open .agds-nav__drawer {
        transform: translateX(0); visibility: visible;
    }

    /* Kop: terug (links) — titel (midden) — sluiten (rechts). */
    .agds-nav__drawer-head {
        display: flex; align-items: center; justify-content: center;
        position: relative; z-index: 2;
        flex: 0 0 60px; height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #f0eaf5;
    }
    .agds-nav__back, .agds-nav__close {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 44px; height: 44px;
        padding: 0; background: none; border: 0; cursor: pointer;
        color: #43007B !important; line-height: 0;
        transition: color 0.2s ease;
    }
    /* Hover/focus: alleen een kleurwissel naar het merk-roze (huisstijl-accent),
       géén achtergrond-pill (die komt uit de Elementor-kit en is hieronder
       in het OVERRIDES-blok uitgeschakeld). */
    .agds-nav__back:hover, .agds-nav__close:hover,
    .agds-nav__back:focus-visible, .agds-nav__close:focus-visible {
        color: #D100AF !important;
    }
    .agds-nav__back  { left: 8px; }
    .agds-nav__close { right: 8px; }
    .agds-nav__back[hidden] { display: none; }
    .agds-nav__title {
        margin: 0; padding: 0 52px; max-width: 100%;
        font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;
        color: #43007B !important; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Panels-venster: vast kader waarin de hoofdlijst + subpanelen leven. */
    .agds-nav__panels {
        display: block; position: relative;
        flex: 1 1 auto; overflow: hidden;
    }

    /* Hoofdlijst vult het venster en scrollt indien nodig. */
    .agds-nav__list {
        position: absolute; inset: 0;
        flex-direction: column; align-items: stretch;
        margin: 0; padding: 8px 0;
        background: #ffffff;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }

    /* Rijen: grote, tik-vriendelijke items. Kleur met !important zodat de
       kit-linkkleur (grijs/wit) nooit wint — ook niet op :hover. */
    .agds-nav__item { display: block; border-bottom: 1px solid #f0eaf5; margin: 0; }
    .agds-nav__item--has-children { display: flex; flex-wrap: wrap; align-items: center; }
    .agds-nav__link, .agds-nav__toggle,
    .agds-nav__link:hover, .agds-nav__toggle:hover,
    .agds-nav__link:focus, .agds-nav__toggle:focus {
        color: #43007B !important;
    }
    .agds-nav__link, .agds-nav__toggle {
        width: 100%;
        font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600;
        min-height: 56px; padding: 16px; line-height: 1.3;
    }
    .agds-nav__item--has-children > .agds-nav__link { flex: 1 1 auto; width: auto; }
    /* Chevron-kolom: in BEIDE rijvarianten (losse toggle-knop naast een echte
       link, én toggle-only rijen) staat de chevron op exact 16px van de
       rechterrand. padding expliciet, want de desktopregels zetten de
       binnenzijde op 4px en zouden de chevrons anders laten verspringen. */
    .agds-nav__item--has-children > .agds-nav__toggle:not(.agds-nav__link) {
        flex: 0 0 auto; width: auto; min-width: 56px;
        justify-content: flex-end;
        padding: 16px;
    }
    /* Toggle-only parents (Particulier, Zakelijk): pijl rechts uitlijnen. */
    .agds-nav__link.agds-nav__toggle { justify-content: space-between; padding: 16px; }
    .agds-nav__link::after { display: none; }
    /* Chevron wijst naar rechts = "ga een niveau dieper". */
    .agds-nav__arrow { width: 18px; height: 18px; transform: rotate(-90deg); }

    /* Submenu = volledig paneel dat van rechts over het huidige niveau schuift.
       Fixed t.o.v. de getransformeerde drawer, ZONDER eigen transform zodat
       ook diepere niveaus t.o.v. de drawer blijven positioneren. */
    .agds-nav__submenu {
        display: flex; flex-direction: column; align-items: stretch;
        position: fixed; top: 60px; bottom: 0; left: 100%; right: auto;
        width: 100%;
        margin: 0; padding: 8px 0;
        background: #ffffff;
        box-shadow: none; border-radius: 0; min-width: 0;
        opacity: 1; visibility: hidden; transform: none;   /* K-011: dicht = niet bereikbaar met Tab */
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        transition: left 0.3s ease, visibility 0s linear 0.3s;
    }
    .agds-nav__submenu.is-active { left: 0; visibility: visible; transition: left 0.3s ease, visibility 0s; }
    /* K-011: het bedekte niveau verbergen na de schuifanimatie, zodat Tab niet
       in onzichtbare items onder het actieve paneel landt (inert kan niet: dat
       erft door naar het actieve kind). */
    .agds-nav__list.is-covered { visibility: hidden; transition: visibility 0s linear 0.3s; }
    .agds-nav__submenu.is-active.is-covered { visibility: hidden; transition: left 0.3s ease, visibility 0s linear 0.3s; }
    .agds-nav__submenu .agds-nav__item { display: block; }
    .agds-nav__submenu .agds-nav__item--has-children { display: flex; flex-wrap: wrap; align-items: center; }
    .agds-nav__submenu .agds-nav__toggle { color: #43007B; }
    .agds-nav__link--sub { font-size: 16px; padding: 16px; width: 100%; }
}

/* Body-scroll vergrendelen zolang het fullscreen-menu open is. */
body.agds-nav-open { overflow: hidden; }

/* Editor-melding als er nog geen menu is gekozen. */
.agds-nav__notice { padding: 12px 16px; color: #a00; font-style: italic; }

/* ==========================================================================
   OVERRIDES — component afschermen van globale thema-/Elementor-styling
   (Elementor-kit zet o.a. button-achtergrond op :hover + border-radius 48px,
   en een link-kleur op dropdown-links. Deze regels winnen daarvan.)
   ========================================================================== */
.agds-nav .agds-nav__toggle,
.agds-nav .agds-nav__burger,
.agds-nav .agds-nav__back,
.agds-nav .agds-nav__close,
.agds-nav .agds-nav__toggle:hover,
.agds-nav .agds-nav__toggle:focus,
.agds-nav .agds-nav__burger:hover,
.agds-nav .agds-nav__burger:focus,
.agds-nav .agds-nav__back:hover,
.agds-nav .agds-nav__back:focus,
.agds-nav .agds-nav__close:hover,
.agds-nav .agds-nav__close:focus {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Kop-knoppen (terug/sluiten): altijd merkpaars, hover = merk-roze.
   Staat óók hier (buiten de media query, hoogste specificiteit) zodat de
   Elementor-kit-knopkleur er nooit doorheen komt. */
.agds-nav .agds-nav__back,
.agds-nav .agds-nav__close { color: #43007B !important; }
.agds-nav .agds-nav__back:hover,
.agds-nav .agds-nav__close:hover,
.agds-nav .agds-nav__back:focus-visible,
.agds-nav .agds-nav__close:focus-visible { color: #D100AF !important; }

/* Iconen tekenen altijd in de actuele tekstkleur. Expliciet, omdat een
   fill-regel uit thema of kit anders van het currentColor-attribuut wint —
   zelfs wanneer color hierboven wél met !important is gezet. */
.agds-nav .agds-nav__burger svg path,
.agds-nav .agds-nav__back svg path,
.agds-nav .agds-nav__close svg path,
.agds-nav .agds-nav__arrow path {
    fill: currentColor !important;
}

/* Icon-SVG's expliciete afmetingen geven. De burger/terug/sluit-SVG's dragen
   géén eigen class; een brede thema-/kit-regel op SVG's in de header laat ze
   in de flex-knop inklappen tot 0px breed → icoon onzichtbaar (de chevron
   overleeft omdat die hierboven al een eigen breedte heeft). !important zodat
   die thema-regel niet alsnog wint. */
.agds-nav .agds-nav__burger svg {
    width: 28px !important; height: 28px !important; flex: 0 0 auto;
}
.agds-nav .agds-nav__back svg,
.agds-nav .agds-nav__close svg {
    width: 24px !important; height: 24px !important; flex: 0 0 auto;
}

/* Dropdown-tekst altijd merkpaars (specifieker dan de top-level witte kleur). */
.agds-nav .agds-nav__submenu .agds-nav__link,
.agds-nav .agds-nav__submenu .agds-nav__toggle,
.agds-nav .agds-nav__link--sub {
    color: #43007B !important;
}
.agds-nav .agds-nav__submenu .agds-nav__link:hover { color: #43007B !important; }

/* ==========================================================================
   MOBIEL/TABLET — knoppenrij in huisstijl (secundaire-buttonstijl:
   donkerpaarse outline, hover vult met de kit-gradient — zoals
   .btn--secondary). Staat NÁ het overrides-blok zodat deze regels de
   kit-neutralisatie hierboven bewust overschrijven. Labels zijn instelbaar
   in de editor; de knoppen stylen zich via :has() vanzelf mee (mét label =
   tekst-pill, zonder label = compacte icoonknop).
   ========================================================================== */
@media (max-width: 1199px) {
    .agds-nav { gap: 10px; }

    /* Menu-knop: outlined knop; zonder label compact, mét label een pill.
       De border staat óók expliciet op :hover/:focus/:focus-visible, anders
       zet het overrides-blok hierboven (border:0 op :hover/:focus) hem op
       0px — dat liet de rand verdwijnen nadat het menu sloot en de JS
       focus() teruggaf aan de knop. */
    .agds-nav .agds-nav__burger,
    .agds-nav .agds-nav__burger:hover,
    .agds-nav .agds-nav__burger:focus,
    .agds-nav .agds-nav__burger:focus-visible {
        gap: 8px;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px !important;
        border: 2px solid #43007B !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #43007B !important;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        line-height: 1 !important;
        transition: color 0.3s ease, border-color 0.3s ease;
    }
    .agds-nav .agds-nav__burger:has(.agds-nav__burger-label),
    .agds-nav .agds-nav__burger:has(.agds-nav__burger-label):hover,
    .agds-nav .agds-nav__burger:has(.agds-nav__burger-label):focus,
    .agds-nav .agds-nav__burger:has(.agds-nav__burger-label):focus-visible {
        padding: 8px 14px 8px 18px !important;
    }
    /* Hover / toetsenbord-focus: alléén kleuromslag donkerpaars -> roze. */
    .agds-nav .agds-nav__burger:hover,
    .agds-nav .agds-nav__burger:focus-visible {
        color: #D100AF !important;
        border-color: #D100AF !important;
    }
    /* Compacter icoon naast het label. */
    .agds-nav .agds-nav__burger svg { width: 20px !important; height: 20px !important; }

    /* Sluit-knop in de drawer-kop: kruis, met optioneel tekstlabel ervoor. */
    .agds-nav .agds-nav__close {
        width: auto;
        min-width: 44px;
        justify-content: center;
        gap: 6px;
        padding: 0 10px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
    }
    .agds-nav .agds-nav__close svg { width: 18px !important; height: 18px !important; }
    /* Alleen bij een zichtbaar sluit-label extra titelruimte reserveren. */
    .agds-nav__drawer-head:has(.agds-nav__close-label) .agds-nav__title { padding: 0 104px; }
}

/* ==========================================================================
   MOBIEL/TABLET — header volledig vast, zonder enige beweging.
   Het thema laat de header op mobiel in principe al vast staan, maar de
   `headerSlideDown`-animatie (uit style.css) glipt er soms doorheen waardoor
   de balk bij omhoogscrollen even wegschuift en terugkomt. `body`-prefix
   verhoogt de specificiteit boven de themaregels, en `transform: none`
   +`animation: none` (beide !important, en !important wint van animaties)
   maken de header rotsvast. Alleen mobiel/tablet; desktop-sticky ongemoeid. */
@media (max-width: 1199px) {
    body [data-elementor-type="header"],
    body [data-elementor-type="header"].is-sticky {
        position: fixed !important;
        top: 0 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    body.admin-bar [data-elementor-type="header"],
    body.admin-bar [data-elementor-type="header"].is-sticky {
        top: 32px !important;
    }
}
@media (max-width: 782px) {
    body.admin-bar [data-elementor-type="header"],
    body.admin-bar [data-elementor-type="header"].is-sticky {
        top: 46px !important;
    }
}

/* Desktop: burger/drawer bestaan daar niet; labels voor de zekerheid weg
   mocht een toekomstige themawijziging ze tonen. */
@media (min-width: 1200px) {
    .agds-nav__burger-label,
    .agds-nav__close-label { display: none; }
}

/* N-063 (C9, 2026-10-08) — ongelijke tussenruimte in het desktopmenu.
   Een ouder-item met een echte link ('DJ shows', 'Over ons') heeft een losse
   pijlknop. Die kreeg links 4px (zie boven) maar hield rechts de algemene 16px,
   terwijl een toggle-only item ('Particulier', 'Zakelijk') rechts 4px heeft —
   dat is dezelfde knop met óók de class agds-nav__link. Resultaat: na 'DJ shows'
   en 'Over ons' stond ~40px en na 'Zakelijk' ~20px.

   Nu 5px aan beide kanten, zodat de afstand na elke pijl gelijk is. Niet 4px:
   dan wordt de knop 22px breed en zakt hij onder de 24px van WCAG 2.5.8
   (Target Size, Minimum). Met 5px is hij 24px breed en 40px hoog. De knop
   blijft bestaan, dus de toetsenbordbediening verandert niet.

   In @media (min-width: 1200px), omdat het mobiele blok hierboven voor dezelfde
   selector 'padding: 16px' zet (chevronkolom in de drawer). */
@media (min-width: 1200px) {
    .agds-nav__item--has-children > .agds-nav__toggle:not(.agds-nav__link) {
        padding-left: 5px;
        padding-right: 5px;
    }
}