/* ========== AF MEGA MENU ========== */

/* Root wrapper (staat NU naast/bij de trigger als sibling) */
.af-mega{
    display: flex;
    left: 0;
    right: 0;
}




/* Trigger (staat buiten .af-mega, dus styling los houden) */
.af-mega__trigger{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    padding: 14px 0;
    line-height: 1;
    position: relative;

    /* ✅ Dynamische kleur (komt van style="--af-mm-trigger-color: ..." op de button of root) */
    color: #fff;
}

.af-mega__trigger:hover{
    color: #556FE8;
}

/* underline effect */
.af-mega__trigger::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:6px;
    height:2px;
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .18s ease;
    background: currentColor;
    opacity: .9;
}

/* ✅ Underline open: werkt met trigger OUTSIDE root */
.af-mega__trigger.is-open::after,
.af-mega.is-open .af-mega__trigger::after{
    transform: scaleX(1);
}

/* Overlay */
.af-mega__overlay{
    margin-top: 20px;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 998;
}

.af-mega.is-open .af-mega__overlay{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: 250px;
    backdrop-filter: blur(10px);
}

/* Panel base (hidden) */
.af-mega__panel{
    background: var(--af-mm-bg, #fff);
    border-radius: var(--af-mm-r, 0px);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

    left: 0;
    top: 100%;
}

/* ✅ Desktop: panel gecentreerd op viewport (1400px max), géén fixed */
@media (min-width: 992px){
    .af-mega__panel{
        position: absolute;

        /* top wordt door JS gezet (want trigger staat buiten root) */
        top: 82px;

        /* ✅ altijd midden van viewport */
        left: 50vw;

        transform: translate3d(-50%, 10px, 0);

        /* ✅ max 1400px (via var) */
        width: 100vw;
    }

    .af-mega.is-open > .af-mega__panel{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0);
    }

    /* extra safety: als iemand per ongeluk .is-open op panel zet */
    .af-mega__panel.is-open{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0);
    }
}

.af-mega__inner{
    padding: var(--af-mm-pt, 28px) var(--af-mm-pr, 24px) var(--af-mm-pb, 28px) var(--af-mm-pl, 24px);
}

.af-mega__title{
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 14px;
}

/* Grid met kolommen */
.af-mega__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--af-mm-col-min, 220px), 1fr));
    column-gap: var(--af-mm-gap-x, 60px);
    row-gap: var(--af-mm-gap-y, 10px);
    align-content: start;
}

.af-mega__col-title{
    font-weight: 800;
    margin: 0 0 8px;
}

.af-mega__list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.af-mega__item{
    margin: 0;
}

.af-mega__item a{
    display: inline-block;
    padding: 4px 0;
    font-weight: 600;
    text-decoration: none;
}

.af-mega__item a:hover{
    text-decoration: underline;
}

/* ✅ Mobile: accordion onder trigger (zonder overlay) */
@media (max-width: 991px){
    .af-mega{ display:block; width:100%; }
    .af-mega__trigger{ width:100%; text-align:left; display:block; }

    .af-mega__overlay{ display:none; }

    .af-mega__panel{
        position: static;
        width: 100%;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        transform: none;
    }

    .af-mega.is-open .af-mega__panel{
        max-height: 1400px;
    }

    .af-mega__title{
        font-size: 24px;
    }
}

/* ==========================================================
   ✅ BUILDER ONLY FIX (alleen bij builderOpen toggle)
   ========================================================== */




/* ✅ Builder: root moet in de flow zitten */
.af-mm-builder-open.af-mega{
    position: relative !important; /* i.p.v. absolute */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 9999 !important;
}


.af-mm-builder-open{
    display: block !important;
    width: 100% !important;
}

/* overlay uit in builder zodat je kan klikken/editen */
.af-mm-builder-open .af-mega__overlay{
    display: none !important;
}

/* panel in builder full width & altijd zichtbaar */
.af-mm-builder-open .af-mega__panel{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    margin-top: 10px;
}

.af-mm-builder-open .af-mega__inner{
    min-height: 200px;
}

/* Bricks nestable wrapper full width */
.af-mm-builder-open .brxe-nestable-children{
    width: 100% !important;
    max-width: none !important;
}

.af-mm-builder-open .brxe-nestable-children > *{
    width: 100% !important;
    max-width: none !important;
}


/* ✅ Builder: force dropdown zichtbaar + niet geclipped */
.af-mm-builder-open.af-mega{
    position: static !important;     /* i.p.v. absolute */
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

.af-mm-builder-open .af-mega__panel{
    max-height: none !important;     /* heel belangrijk (anders 0 hoogte) */
    overflow: visible !important;
}


html.bricks-is-builder .af-mega.af-mm-builder-open,
body.bricks-is-builder .af-mega.af-mm-builder-open{
    overflow: visible !important;
}

html.bricks-is-builder .af-mega.af-mm-builder-open .af-mega__panel,
body.bricks-is-builder .af-mega.af-mm-builder-open .af-mega__panel{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none !important;
    overflow: visible !important;
}


.bricks-is-builder .af-mega__panel {
    position: absolute !important;
    left: 0;
    right: 0;
}