:root {
    --bg-test-color: rgba(45, 70, 150, 0.534);

    --brxp-header-height: 120px;
    --brxw-radius-s: clamp(0.9rem, calc(0.005555555555555556 * (100vw - 36rem) + 0.9rem), 1.5rem);
    --brxw-space-fluid-l: clamp(1.33rem, calc(0.012407407407407407 * (100vw - 36rem) + 1.33rem), 2.67rem);

    --megamenu-bg: oklch(0 0.0724 29.23 / 75%);
    --megamenu-bg-hover: oklch(0.202 0.083 29.234 / 80%);

    --popup-shadow: 4px 4px 10px rgba(0, 0, 0, 0.35);
    --popup-shadow-hover: 8px 8px 20px rgba(0, 0, 0, 0.75);

    --brxw-text-s: 0.8rem;
}

:root #ejk-header-section {
    anchor-name: --header;
}

/* Mega menu intree-animatie: fade-in + schuiven van rechtsboven naar linksonder */
@keyframes megamenu-reveal {
    from {
        opacity: 0;
        transform: translateX(calc(10% + 40px)) translateY(0);
    }
    to {
        opacity: 1;
        transform: translateX(10%) translateY(2rem);
    }
}

:root .header-container__main-menu .brx-megamenu {
    position: fixed;
    position-anchor: --header;
    justify-self: anchor-center;
    /* betrouwbare viewport-centering als fallback voor justify-self: anchor-center */
    left: 15% !important;
    transform: translate(10%, 2rem);
    right: unset;
    min-width: unset;
    width: min(80vw, 1400px);
}

/* Animatie speelt zodra het megamenu zichtbaar wordt (Bricks voegt .open toe bij hover) */
:root .header-container__main-menu li.menu-item.open .brx-megamenu,
:root .header-container__main-menu li.menu-item:hover .brx-megamenu {
    animation: megamenu-reveal 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    :root .header-container__main-menu li.menu-item.open .brx-megamenu,
    :root .header-container__main-menu li.menu-item:hover .brx-megamenu {
        animation: none;
    }
}

:root .megamenu-section {
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    flex-direction: row;

    padding: 20px 0 0;
    row-gap: 0;
    z-index: 9999;
    position: relative;

    & .megamenu-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 80%;
        column-gap: 1cqh;
        align-content: flex-start;
        justify-content: space-evenly;
        align-items: flex-start;
        align-self: flex-start;
        margin-left: auto;
        margin-right: auto;
        background-color: var(--megamenu-bg);
        border: 3px solid var(--ejk-surface-light-l);
        border-radius: 0 0 var(--at-radius--s) var(--at-radius--s);
        box-shadow: var(--popup-shadow);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: var(--at-space--m);
        flex-grow: 0;
        flex-shrink: 1;

        position: relative;

        &:hover {
            background-color: var(--megamenu-bg-hover);
            border-color: var(--ejk-primary-l-5);
            box-shadow: var(--popup-shadow-hover);
        }

        & .mega-col-logo {
            width: 5rem;
            max-block-size: 25%;
            justify-content: center;
            align-self: center;
            max-inline-size: 25%;
            height: auto;
            margin: 0 var(--at-space--m) 0 0;

            & img {
                width: 100%;
            }
        }

        & .mega-menu-block {
            padding-right: 3rem;
            max-inline-size: 25%;

            &.mega-block-small {
                max-inline-size: 15%;
            }

            & .megamenu-nav__items {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                row-gap: 0.7rem;

                & > li.menu-item {
                    display: block;
                    margin: 0;
                    padding: 0;
                    border-radius: 0;
                    background: none;
                    list-style: none;

                    & > a {
                        anchor-name: none;

                    }
                }

                & .mega-menu__link {
                    display: flex;
                    font-family: Montserrat, sans-serif;
                    font-size: var(--at-text--xs);
                    line-height: 1.2rem;
                    letter-spacing: 0.05rem;
                    color: var(--ejk-grey-d-4);
                    flex-direction: row;
                    align-items: center;
                    align-content: center;
                    padding-inline-start: var(--at-space--xs);
                    padding-block-end: 0.8rem;
                    position: relative;
                    white-space: nowrap;
                    width: fit-content;
                    max-width: 100%;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0.4rem;
                        left: var(--at-space--xs);
                        right: calc(-1 * var(--at-space--s));
                        height: 1px;
                        background: var(--ejk-secondary-l-1);
                        transform: scaleX(0);
                        transform-origin: left center;
                        transition: transform 0.3s ease;
                    }

                    &:hover {
                        color: var(--ejk-secondary-l-1);

                        &::after {
                            transform: scaleX(1);
                        }
                    }

                    @media (prefers-reduced-motion: reduce) {
                        &::after {
                            transition: none;
                        }
                    }
                }
            }

            & .mega-menu__linkbutton {
                display: flex;
                font-family: Montserrat, sans-serif;
                font-size: var(--at-text--xs);
                line-height: 1.2rem;
                letter-spacing: 0.05rem;
                color: var(--ejk-grey-d-4);
                flex-direction: row-reverse;
                align-items: center;
                align-content: center;
                padding-block-end: 0.2rem;
                border-bottom: 1px solid transparent;
                transition: border-color 0.7s ease;

                & .icon > i {
                    font-size: var(--at-text--m);
                }

                & .icon > svg {
                    width: var(--at-text--m);
                }

                & .icon > i {
                    width: var(--at-space--m);
                    color: inherit;
                    fill: var(--ejk-text-white);
                }

                &:hover {
                    color: var(--ejk-secondary-l-1);
                    border-color: var(--ejk-secondary-l-1);
                }
            }

            & .mega-col-title,
            & .leeftijd-chips__titel {
                font-family: "Poppins", sans-serif;
                font-size: var(--at-text--m);
                font-weight: 600;
                letter-spacing: 1px;
                color: var(--ejk-tertiary-d-3);
                width: 100%;
                padding-bottom: var(--at-space--3xs);
                border-bottom: 2px solid var(--ejk-secondary-l-3);

                &.title-small {
                    color: var(--ejk-secondary-l-5);
                    font-family: "Poppins", sans-serif;
                    font-size: var(--at-text--s);
                    font-weight: 500;
                    border-bottom: 2px solid var(--ejk-secondary-l-7);
                }
            }

            & .leeftijd-chips {
                /* laag 1: scoped  |  laag 2: publieke override  |  laag 3: token + fallback */
                --_gap: var(--gap, 0.4rem);
                --_chip-py: var(--chip-py, 0.45rem);
                --_chip-px: var(--chip-px, 0.9rem);
                --_chip-size: var(--chip-size, 0.8rem);
                --_chip-bg: var(--chip-bg, rgba(255, 255, 255, 0.05));
                --_chip-line: var(--chip-line, rgba(255, 255, 255, 0.14));
                --_chip-color: var(--chip-color, oklch(0.92 0 0));
                --_label: var(--label, var(--ejk-tertiary-d-3));
                --_radius: var(--radius, var(--radius-full, 9999px));
                --_font: var(--font, var(--Poppins, sans-serif));
                --_accent: var(--accent, var(--geel-600, #c4ba07));

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                min-width: 0;
                row-gap: var(--at-space--3xs);

                & .leeftijd-chips__label {
                    font-family: Montserrat, sans-serif;
                    font-size: var(--at-heading--xs);
                    font-weight: 600;
                    line-height: 1;
                    letter-spacing: 1px;
                    text-align: left;
                    color: var(--ejk-secondary-t-5);
                    margin-block-start: var(--at-space--3xs);
                    margin-block-end: var(--at-space--3xs);
                }

                & .leeftijd-chips__rij {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    gap: var(--_gap);
                    margin-block-start: var(--at-space--3xs);
                    margin-block-end: var(--at-space--3xs);
                }

                & .leeftijd-chips__chip {
                    display: inline-block;
                    padding: var(--_chip-py) var(--_chip-px);
                    border: 1px solid var(--_chip-line);
                    border-radius: var(--_radius);
                    background: var(--_chip-bg);
                    color: var(--_chip-color);
                    font-family: var(--_font), sans-serif;
                    font-size: var(--_chip-size);
                    line-height: 1;
                    text-decoration: none;
                    white-space: nowrap;
                    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
                }

                & .leeftijd-chips__chip:is(:hover, :focus-visible) {
                    --_chip-color: var(--_accent);
                    --_chip-line: var(--_accent);
                    --_chip-bg: color-mix(in oklch, var(--_accent) 14%, transparent);
                }

                & .leeftijd-chips__chip:focus-visible {
                    outline: 2px solid var(--_accent);
                    outline-offset: 2px;
                }

                /* markeert de groep van de pagina waar je nu bent */

                & .leeftijd-chips__chip[aria-current="page"] {
                    --_chip-line: var(--rood-500, #ed1c24);
                    --_chip-bg: color-mix(in oklch, var(--rood-500, #ed1c24) 18%, transparent);
                    --_chip-color: #fff;
                }

                & .leeftijd-chips__meer {
                    margin-top: 0.1rem;
                    padding: 0;
                    background: none;
                    border: none;
                    color: var(--_accent);
                    font-family: var(--_font), sans-serif;
                    font-size: 0.78rem;
                    font-weight: 500;
                    text-decoration: none;
                }

                & .leeftijd-chips__meer:is(:hover, :focus-visible) {
                    text-decoration: underline;
                }

                /* --- smalle kolom: chips iets krapper i.p.v. lelijk afbreken --- */

                *:has( > .leeftijd-chips ) {
                    container-type: inline-size;
                }

                @container (max-width: 270px) {
                    .leeftijd-chips {
                        --chip-px: 0.7rem;
                        --chip-size: 0.75rem;
                        --gap: 0.35rem;
                    }
                }

                /* --- mobiel menu: chips groot genoeg om met de duim te raken (min. 40px) --- */
                @media (max-width: 991px) {
                    .leeftijd-chips {
                        --chip-py: 0.8rem;
                        --chip-px: 1.15rem;
                        --chip-size: 0.875rem;
                        --gap: 0.5rem;
                    }
                }

                /* --- respecteert 'reduce motion' --- */
                @media (prefers-reduced-motion: reduce) {
                    .leeftijd-chips__chip {
                        transition: none;
                    }
                }


            }


        }

        & .leeftijden-grid {
            width: 40rem;
        }
    }
}