/*
 * trainitnow-child — Mega menu
 *
 * Custom desktop mega menu used by the Divi header.
 *
 * Branding:
 * - Primary:   var(--tin-primary)   = #00A594
 * - Secondary: var(--tin-secondary) = #1F2342
 *
 * The menu markup itself is created by /js/mega-menu.js.
 */


/* ==========================================================================
 * Desktop only
 * ========================================================================== */

@media (max-width: 980px) {

    .tin-mega {
        display: none !important;
    }
}


/* ==========================================================================
 * Base panel
 * ========================================================================== */

.tin-mega {
    position: fixed;

    background: var(--tin-card, #FFFFFF);

    border: 1px solid var(--tin-border, #E3E5EA);
    border-radius: 20px;

    box-shadow:
        0 24px 60px rgb(31 35 66 / 0.18);

    padding: 30px 34px 24px;

    z-index: 11000;

    display: grid;
    gap: 8px 40px;

    text-align: left;

    color: var(--tin-foreground, #1F2342);
}


/*
 * Hidden state is controlled by JavaScript.
 */
.tin-mega[hidden] {
    display: none;
}


/* ==========================================================================
 * Panel layouts
 * ========================================================================== */

/*
 * Broad panel used underneath "Cursussen".
 */
.tin-mega.tm-breed {
    width: min(1060px, 96vw);

    grid-template-columns:
        1.15fr
        0.85fr
        1.15fr;
}


/*
 * Compact panel used underneath "Leervormen".
 */
.tin-mega.tm-smal {
    width: 380px;

    grid-template-columns: 1fr;

    padding: 22px 26px 18px;
}


/* ==========================================================================
 * Column headings
 * ========================================================================== */

.tin-mega h4 {
    margin: 0 0 14px;

    font-family:
        "Space Grotesk",
        system-ui,
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color:
        var(
            --tin-muted-foreground,
            #6E6A86
        );
}


/* ==========================================================================
 * Large menu items
 * ========================================================================== */

.tin-mega .tm-item {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 10px 12px;

    margin: 0 -12px;

    border-radius: 12px;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


.tin-mega .tm-item:hover,
.tin-mega .tm-item:focus-visible {
    background:
        var(
            --tin-accent,
            #EAF8F5
        );

    outline: none;
}


/* ==========================================================================
 * Icons
 * ========================================================================== */

.tin-mega .tm-ico {
    flex: none;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background:
        var(
            --tin-accent,
            #EAF8F5
        );

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}


.tin-mega .tm-ico svg {
    width: 18px;
    height: 18px;

    stroke:
        var(
            --tin-primary,
            #00A594
        );

    fill: none;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.tin-mega .tm-item:hover .tm-ico,
.tin-mega .tm-item:focus-visible .tm-ico {
    background:
        color-mix(
            in srgb,
            var(--tin-primary, #00A594) 14%,
            white
        );

    transform: translateY(-1px);
}


/* ==========================================================================
 * Item title
 * ========================================================================== */

.tin-mega .tm-titel {
    display: block;

    font-family:
        "Space Grotesk",
        system-ui,
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    color:
        var(
            --tin-foreground,
            #1F2342
        );

    transition:
        color 0.18s ease;
}


.tin-mega .tm-item:hover .tm-titel,
.tin-mega .tm-item:focus-visible .tm-titel {
    color:
        var(
            --tin-primary,
            #00A594
        );
}


/* ==========================================================================
 * Item descriptions
 * ========================================================================== */

.tin-mega .tm-desc {
    display: block;

    margin-top: 2px;

    font-size: 13px;
    line-height: 1.45;

    color:
        var(
            --tin-muted-foreground,
            #6E6A86
        );
}


/* ==========================================================================
 * Compact subject list
 * ========================================================================== */

.tin-mega .tm-lijst {
    display: flex;

    flex-direction: column;
}


.tin-mega .tm-lijst a {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 12px;

    margin: 0 -12px;

    border-radius: 8px;

    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;

    color:
        var(
            --tin-foreground,
            #1F2342
        );

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


.tin-mega .tm-lijst a:hover,
.tin-mega .tm-lijst a:focus-visible {
    background:
        var(
            --tin-accent,
            #EAF8F5
        );

    color:
        var(
            --tin-primary,
            #00A594
        );

    outline: none;
}


/* Smaller icon variant inside subject list. */

.tin-mega .tm-lijst .tm-ico {
    width: 28px;
    height: 28px;

    border-radius: 7px;
}


.tin-mega .tm-lijst .tm-ico svg {
    width: 15px;
    height: 15px;
}


/* ==========================================================================
 * Footer CTA
 * ========================================================================== */

.tin-mega .tm-cta {
    grid-column: 1 / -1;

    margin-top: 16px;
    padding-top: 16px;

    border-top:
        1px solid
        rgb(31 35 66 / 0.08);
}


.tin-mega .tm-cta a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family:
        "Space Grotesk",
        system-ui,
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 600;

    color:
        var(
            --tin-primary,
            #00A594
        );

    text-decoration: none;

    transition:
        color 0.18s ease;
}


.tin-mega .tm-cta a:hover,
.tin-mega .tm-cta a:focus-visible {
    color:
        var(
            --tin-secondary,
            #1F2342
        );

    outline: none;
}


.tin-mega .tm-cta a svg {
    width: 16px;
    height: 16px;

    stroke:
        currentColor;

    fill: none;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 0.2s ease;
}


.tin-mega .tm-cta a:hover svg,
.tin-mega .tm-cta a:focus-visible svg {
    transform: translateX(4px);
}


/* ==========================================================================
 * Divi menu integration
 * ========================================================================== */

@media (min-width: 981px) {

    /*
     * Voeg bij "Cursussen" dezelfde dropdown-chevron toe die Divi
     * ook standaard gebruikt bij menu-items met children.
     */
    li.et_pb_menu_page_id-335 > a::after {
        content: "3";

        font-family: ETmodules;

        font-size: 16px;
        font-weight: 800;

        margin-left: 6px;

        position: relative;
        top: 2px;
    }


    /*
     * De standaard Divi-submenu-dropdown onder "Leervormen" verbergen,
     * omdat daarvoor het custom compacte paneel wordt gebruikt.
     */
    li.et_pb_menu_page_id-3014 ul.sub-menu {
        display: none !important;
    }
}


/* ==========================================================================
 * Reduced motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .tin-mega .tm-item,
    .tin-mega .tm-ico,
    .tin-mega .tm-titel,
    .tin-mega .tm-lijst a,
    .tin-mega .tm-cta a,
    .tin-mega .tm-cta a svg {
        transition: none;
    }
}