.ewolve-cmm-root {
    position: relative;
    width: 100%;
}

.ewolve-cmm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ewolve-cmm-item {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Mobiel: het paneel is hier een volledig-scherm overlay (zie
       .ewolve-cmm-panel hieronder: left:100%; width:100%; height:100%),
       die t.o.v. .ewolve-cmm-root moet positioneren — niet t.o.v. het
       individuele li dat 'm opende. Vandaar hier bewust position:static.
       Vanaf de desktop-breakpoint overschrijft render_desktop_style()
       dit naar position:relative, zodat elk paneel juist WEL relatief aan
       zijn eigen triggerende rij positioneert (zie toelichting daar). */
    position: static;
}

.ewolve-cmm-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 10px 0;
    color: inherit;
    /* Geen hardcoded border-radius hier: de "Afronding hoeken"-control in
       Bricks (parentRadius/childRadius) is de enige bron van waarheid.
       Stond hier voorheen een vaste 4px, dan won die selector qua
       specificiteit weliswaar altijd van deze regel zodra je in Bricks
       een waarde instelde — maar 0 instellen om de hoeken weer recht te
       maken gaf dan zichtbaar niks, omdat je dan alsnog op deze 4px
       uitkwam. Nu is de rand pas rond zodra je 'm in Bricks instelt. */
    border-radius: 0;
    /* Basis voor de instelbare divider onder elk item: onzichtbaar
       (0px, transparant) totdat je in Bricks een dikte/kleur zet
       bij "Parent items" of "Child items". */
    border-bottom-style: solid;
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

/* Vangnet: ongeacht wat Bricks voor "Divider dikte/kleur" genereert, mag
   de divider nooit op het laatste item van een lijst verschijnen. Dit
   overschrijft eventuele Bricks-styling voor :last-child met opzet via
   !important, zodat dit altijd klopt, ook als de gegenereerde CSS voor
   parentDividerWidth/childDividerWidth ooit anders scoped wordt. */
.ewolve-cmm-list[data-level="1"] > .ewolve-cmm-item:last-child > .ewolve-cmm-link,
.ewolve-cmm-panel .ewolve-cmm-item:last-child > .ewolve-cmm-link {
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
}

.ewolve-cmm-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.ewolve-cmm-arrow {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Standaard hover-accent (alleen items met een sub-menu), zodat het
   menu er zonder verdere configuratie nog steeds netjes uitziet.
   Lage specificiteit met opzet: de "Parent items" / "Child items"
   stijlsecties in Bricks overschrijven dit altijd via hun eigen
   #brxe-{id}-selector zodra je daar een kleur instelt. */
.ewolve-cmm-list[data-level="1"]:not(.cmm-touch) .ewolve-cmm-item.has-children:hover > .ewolve-cmm-link,
.ewolve-cmm-list[data-level="1"]:not(.cmm-touch) .ewolve-cmm-item.has-children:focus-within > .ewolve-cmm-link,
.ewolve-cmm-list[data-level="1"]:not(.cmm-touch) .ewolve-cmm-item.has-children.cmm-active > .ewolve-cmm-link {
    background-color: #1e2a5e;
    color: #fff;
}

/* Sub-panelen: standaard verborgen, schuiven in vanaf rechts.
   Expliciete display:none als basis (i.p.v. alleen te vertrouwen op
   de [data-cmm-root-open="false"]-regel hieronder) voorkomt dat
   ándere, nog niet geopende panelen ook zichtbaar/klikbaar worden
   zodra data-cmm-root-open op "true" komt te staan door het openen
   van een willekeurig ander niveau. */
.ewolve-cmm-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.3s ease;
    transform: translateX(0);
    overflow-y: auto;
    z-index: 2;
}

.ewolve-cmm-root[data-cmm-root-open="false"] .ewolve-cmm-panel {
    display: none;
}

/* Actief pad: panel is zichtbaar en geschoven */
.ewolve-cmm-item.cmm-open > .ewolve-cmm-panel {
    display: block;
    transform: translateX(-100%);
}

.ewolve-cmm-link:focus-visible,
.ewolve-cmm-back:focus-visible,
.ewolve-cmm-close:focus-visible,
.ewolve-cmm-view-all:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Mobiele drill-down: de rij waarvan het paneel open is, wordt volledig door
   dat paneel bedekt. Verbergen voorkomt dat er (door afronding) een streepje
   van de geselecteerde rij naast het schuivende paneel zichtbaar blijft. */
.ewolve-cmm-item.cmm-open > .ewolve-cmm-link {
    visibility: hidden;
}

/* De plek in de offcanvas en zijn lijst mogen niet tot de inhoudsbreedte krimpen
   (bijv. door align-items:flex-start of een flex-wrap rij): het menu
   gebruikt de volle breedte. */
.cmm-mount,
.cmm-mount-holder {
    width: 100%;
    box-sizing: border-box;
}

/* Verplaatst naar een offcanvas ("verplaats naar"): zolang je dieper in het
   menu zit, verdwijnen de andere items naast het menu (bijv. "Contact", zoekbalk). */
[data-cmm-drilled="true"] > :not(.cmm-mount) {
    display: none;
}

.ewolve-cmm-panel-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.ewolve-cmm-back,
.ewolve-cmm-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ewolve-cmm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Aantal via data-attribuut i.p.v. tekst in de link, zodat de anchor-tekst
   (voor zoekmachines en screenreaders) alleen de categorienaam is. */
.ewolve-cmm-count::after {
    content: "(" attr(data-count) ")";
}

/* Huidige pagina / bovenliggende categorie. Lage specificiteit (:where),
   dus de Bricks-stijlcontrols winnen altijd. */
:where(.ewolve-cmm-item.is-current > .ewolve-cmm-link),
:where(.ewolve-cmm-item.is-current-ancestor > .ewolve-cmm-link) {
    font-weight: 700;
}

.ewolve-cmm-panel-title {
    font-weight: 700;
    padding: 12px 0;
}

.ewolve-cmm-view-all {
    display: block;
    margin-top: 12px;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    color: #1e2a5e;
    background-color: #f2f3f8;
    border-radius: 6px;
}

.ewolve-cmm-view-all:hover,
.ewolve-cmm-view-all:focus {
    background-color: #e4e6f2;
}

/* Tweede knop (Steenwijzer) onder "Bekijk alle": zelfde stijl en dezelfde
   Bricks-stijlcontrols, alleen minder ruimte erboven. */
.ewolve-cmm-view-all + .ewolve-cmm-view-all--steenwijzer,
.ewolve-cmm-view-all--steenwijzer {
    margin-top: 8px;
}

/* Desktop-specifieke stijlen worden per element-instance dynamisch
   gegenereerd door category-mega-menu.php (render_desktop_style()),
   met de breakpoint uit de "Desktop breakpoint (px)" control.
   Zo blijven CSS en JS altijd exact dezelfde waarde gebruiken. */


/* =============================================================
   MEGA-MODUS (Plaatsing: "Eigen trigger + volledige breedte")
   -------------------------------------------------------------
   Structuur:
     .ewolve-cmm-root[data-cmm-mode="mega"]
       .ewolve-cmm-trigger         knop (of een eigen knop via selector)
       .ewolve-cmm-mega            paneel, door JS over de volle viewport-
                                   breedte gelegd, direct onder de header
         .ewolve-cmm-inner         inhoud, door JS uitgelijnd met de container
       .ewolve-cmm-overlay         door JS naar <body> verplaatst
   Positie/breedte (left/top/width) worden door cmm.js gezet, want die
   hangen af van de header en de container van de pagina.
   ============================================================= */

.ewolve-cmm-root[data-cmm-mode="mega"] {
    position: relative;
    width: auto;
    display: inline-block;
}

.ewolve-cmm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 6px;
    background-color: #1e2a5e;
    color: #fff;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ewolve-cmm-trigger[hidden] {
    display: none;
}

.ewolve-cmm-trigger-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s ease;
}

.ewolve-cmm-trigger[aria-expanded="true"] .ewolve-cmm-trigger-arrow {
    transform: rotate(180deg);
}

/* Het paneel zelf. Vóór de JS het positioneert valt het onder de root
   (left/top/width), na de eerste open wordt dit overschreven. */
.ewolve-cmm-mega {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: var(--cmm-panel-z, 100);
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 0;
    border-bottom-color: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.ewolve-cmm-root.cmm-is-open .ewolve-cmm-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
}

/* Binnenste laag: containerbreedte. Hoogte volgt de hoogste open kolom
   (--cmm-h, door JS gezet), met --cmm-min als ondergrens. */
.ewolve-cmm-inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    min-height: max(var(--cmm-min, 0px), var(--cmm-h, 0px));
    /* Mobiel: de drill-down-panelen schuiven binnen deze laag. */
    overflow: hidden;
}

.ewolve-cmm-nav {
    display: block;
}

/* Overlay: staat in <body>, dimt (en blurt optioneel) de pagina. */
.ewolve-cmm-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: var(--cmm-ov-z, 90);
    background: var(--cmm-ov-bg, rgba(0, 0, 0, 0.45));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--cmm-ov-dur, 200ms) ease, visibility 0s linear var(--cmm-ov-dur, 200ms);
}

.ewolve-cmm-overlay.has-blur {
    -webkit-backdrop-filter: blur(var(--cmm-ov-blur, 4px));
    backdrop-filter: blur(var(--cmm-ov-blur, 4px));
}

.ewolve-cmm-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--cmm-ov-dur, 200ms) ease, visibility 0s;
}

html.cmm-scroll-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ewolve-cmm-mega,
    .ewolve-cmm-overlay,
    .ewolve-cmm-inner,
    .ewolve-cmm-panel,
    .ewolve-cmm-trigger-arrow {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Builder-preview ("Open tonen in de builder"): paneel permanent zichtbaar,
   in de normale flow, met de eerste categorie met submenu opengeklapt.
   Alleen actief als PHP de builder detecteert (data-cmm-preview). */
.ewolve-cmm-root[data-cmm-preview="1"] .ewolve-cmm-mega {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ewolve-cmm-root[data-cmm-preview="1"] .ewolve-cmm-inner {
    min-height: 320px;
}

.ewolve-cmm-root[data-cmm-preview="1"] .ewolve-cmm-list[data-level="1"] > .ewolve-cmm-item.has-children:first-child > .ewolve-cmm-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =============================================================
   PROMO-KAART (mega-modus, alleen desktop)
   -------------------------------------------------------------
   Basis is verborgen; de dynamische desktop-CSS (render_mega_style)
   zet hem vanaf het breakpoint op display:block en rechts uitgelijnd.
   Kleuren en typografie zijn standaardwaarden: de Bricks-controls
   in "Promo-kaart (mega-modus)" winnen daar altijd van.
   ============================================================= */
.ewolve-cmm-promo {
    display: none;
    box-sizing: border-box;
    padding: 16px;
    background-color: #f2f3f8;
    border-radius: 6px;
}

.ewolve-cmm-promo-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
    border-radius: 4px;
}

.ewolve-cmm-promo-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.ewolve-cmm-promo-text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.4;
}

.ewolve-cmm-promo-btn {
    display: block;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    color: #fff;
    background-color: #1e2a5e;
    border-radius: 4px;
}

.ewolve-cmm-promo-btn:hover,
.ewolve-cmm-promo-btn:focus-visible {
    opacity: 0.9;
}

.ewolve-cmm-promo-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}