/**
 * Megamenu (Figma: SECTIONS → Navigation, de uitklapmenu's van Groep 8,
 * Ons onderwijs, Praktische info en Over Alma College).
 *
 * Opbouw zoals BCE: elk hoofditem heeft een subitem "Megamenu" (klasse
 * alma-megamenu-item, link #) met in Kadence Pro "eigen inhoud" het
 * Element "Menu item …". Dat Element is een rij .alma-megamenu
 * (.js-menu-image-group: de foto wisselt bij hover, plugin
 * menu-image-swap.js) met kolommen:
 * - .alma-megamenu__lijst: grijze titel + links (blok Menu-item met
 *   hover-afbeelding);
 * - .alma-megamenu__beeld: foto rechts (.js-menu-image-target);
 * - .alma-megamenu__kaart: foto met titel en pijl (Over Alma College).
 *
 * Desktop: alleen het Element, de gewone subitems verborgen. Mobiel:
 * andersom, de lade toont de gewone uitklaplijst.
 */

@media (min-width: 1025px) {
    /* Uitklapmenu met een megamenu: geen witte lijst-kaart (header.css),
       alleen het Element */
    #main-header .header-navigation .primary-menu-container > ul.menu > li.menu-item > ul.sub-menu:has(> .alma-megamenu-item) {
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        > li:not(.alma-megamenu-item) {
            display: none !important;
        }

        > li.alma-megamenu-item {
            width: max-content !important;
        }
    }

    .alma-megamenu {
        width: max-content !important; /* plugin: 720px; Kadence: het uitklapmenu is smal */
        margin: 0 !important;
        background: var(--alma-neutral-0);
        border-radius: var(--carmel-radius-md);
        box-shadow: 0 8px 32px rgba(44, 42, 103, 0.15);
        overflow: hidden;

        > div {
            background: transparent !important; /* plugin: wit vlak */
        }

        > .kt-row-column-wrap {
            display: grid !important;
            grid-template-columns: 280px 240px !important;
            gap: 32px !important;
            max-width: none !important;
            padding: 24px !important;
        }

        :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            padding: 0 !important;
        }
    }

    .alma-megamenu--onderwijs > .kt-row-column-wrap {
        grid-template-columns: 260px 260px 240px !important;
    }

    .alma-megamenu--over > .kt-row-column-wrap {
        grid-template-columns: 260px 220px 220px !important;
    }
}

/* Titel boven de lijst: klein en grijs */
.alma-megamenu__titel {
    margin: 0 0 12px !important;
    font-family: var(--carmel-font-body);
    font-size: 12px !important;
    line-height: 120% !important;
    color: var(--alma-neutral-500) !important;
}

/* Links */
.alma-megamenu .carmel-menu-hover-link {
    display: block;
    padding: 8px 0;
    color: var(--alma-donker-blauw) !important;
    font-family: var(--carmel-font-body);
    font-size: 16px;
    line-height: 120%;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;

    &:is(:hover, :focus-visible) {
        text-decoration-color: currentColor;
    }
}

/* Foto rechts: vult de hoogte van de kaart */
.alma-megamenu__beeld {
    > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        height: 100%;
    }

    figure {
        height: 100%;
        min-height: 280px;
        margin: 0 !important;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--carmel-radius-sm);
    }
}

/* Kaarten (Over Alma College): foto, daaronder titel met pijl */
.alma-megamenu__kaart {
    figure {
        margin: 0 0 12px !important;
    }

    img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--carmel-radius-sm);
    }

    .alma-megamenu__kaart-titel {
        margin: 0 !important;

        a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            color: var(--alma-donker-blauw) !important;
            font-family: var(--carmel-font-body);
            font-size: 16px;
            line-height: 120%;
            text-decoration: none;

            &::after {
                content: '';
                flex: 0 0 14px;
                width: 14px;
                height: 14px;
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8H15M8.5 1.5L15 8L8.5 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8H15M8.5 1.5L15 8L8.5 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
                transition: translate 0.2s ease;
            }

            &:is(:hover, :focus-visible)::after {
                translate: 3px 0;
            }
        }
    }
}

/* Mobiel en tablet: de lade toont de gewone subitems, niet het Element */
@media (max-width: 1024px) {
    li.alma-megamenu-item {
        display: none !important;
    }
}