/* =========================================
   COBACH 34
   MEGA MENU PREMIUM
========================================= */

.mega-navigation {
    margin-left: auto;
}

.mega-menu {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    gap: 2px;

    list-style: none;
}

.mega-menu-item {
    position: relative;
}

.mega-menu-link {
    min-height: 44px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    font-size: .87rem;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease;
}

.mega-menu-link:hover,
.mega-menu-item.is-open > .mega-menu-link {
    color: var(--cobach-blue);

    background: #eef4f8;
}

.mega-chevron {
    font-size: .72rem;

    transition:
        transform .2s ease;
}

.mega-menu-item.is-open .mega-chevron {
    transform: rotate(180deg);
}


/* =========================================
   PANEL
========================================= */

.mega-panel {
    position: fixed;

    top: 120px;
    left: 50%;

    width:
        min(
            1100px,
            calc(100vw - 40px)
        );

    transform:
        translateX(-50%)
        translateY(8px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(6, 31, 60, .18);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    overflow: hidden;
}

.mega-menu-item.is-open .mega-panel {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}

.mega-panel-inner {
    padding: 32px;

    display: grid;

    grid-template-columns:
        minmax(260px, .7fr)
        minmax(400px, 1.3fr);

    gap: 40px;
}

.mega-panel-small
.mega-panel-inner {
    grid-template-columns: 1fr;

    max-width: 620px;

    margin: auto;
}


/* =========================================
   INTRO
========================================= */

.mega-intro {
    padding: 25px;

    border-radius: 16px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cobach-blue-dark),
            var(--cobach-blue-light)
        );
}

.mega-eyebrow {
    color:
        rgba(255,255,255,.65);

    font-size: .72rem;
    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .1em;
}

.mega-intro h3 {
    margin:
        9px 0
        11px;

    color: white;

    font-size: 1.5rem;
}

.mega-intro p {
    margin:
        0 0
        18px;

    color:
        rgba(255,255,255,.75);

    line-height: 1.65;

    font-size: .9rem;
}

.mega-feature-link {
    color: white;

    font-size: .85rem;
    font-weight: 850;
}


/* =========================================
   LINKS
========================================= */

.mega-links-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 35px;
}

.mega-column h4 {
    margin:
        0 0
        12px;

    padding-bottom: 10px;

    border-bottom:
        1px solid var(--border);

    color: var(--cobach-blue);

    font-size: .82rem;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.mega-column a {
    padding: 9px 8px;

    display: block;

    border-radius: 8px;

    color: var(--muted);

    font-size: .9rem;
    font-weight: 600;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.mega-column a:hover {
    color: var(--cobach-blue);

    background: #f1f5f8;

    transform:
        translateX(3px);
}


/* =========================================
   PORTAL BUTTON
========================================= */

.header-portal-button {
    margin-left: 9px;

    padding: 11px 16px;

    flex-shrink: 0;

    border-radius: 11px;

    color: white;

    background: var(--cobach-red);

    font-size: .82rem;
    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(180, 32, 42, .21);

    transition:
        background .2s ease,
        transform .2s ease;
}

.header-portal-button:hover {
    background:
        var(--cobach-red-dark);

    transform:
        translateY(-1px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1120px) {

    .mega-navigation {
        position: fixed;

        top: 70px;
        right: 0;

        width:
            min(
                430px,
                100%
            );

        height:
            calc(100vh - 70px);

        padding: 18px;

        overflow-y: auto;

        background: white;

        box-shadow:
            -20px 30px 60px
            rgba(6,31,60,.15);

        transform:
            translateX(105%);

        transition:
            transform .28s ease;

        z-index: 1100;
    }

    .mega-navigation.is-mobile-open {
        transform:
            translateX(0);
    }

    .mega-menu {
        display: block;
    }

    .mega-menu-item {
        border-bottom:
            1px solid var(--border);
    }

    .mega-menu-link {
        width: 100%;

        min-height: 52px;

        padding:
            0 8px;

        justify-content:
            space-between;

        border-radius: 0;
    }

    .mega-panel {
        position: static;

        width: auto;

        max-height: 0;

        padding: 0;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: none;

        overflow: hidden;

        transition:
            max-height .35s ease;
    }

    .mega-menu-item.is-open
    .mega-panel {
        max-height: 1200px;

        transform: none;
    }

    .mega-panel-inner {
        padding:
            5px 8px
            22px;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .mega-intro {
        padding: 20px;
    }

    .mega-links-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .header-portal-button {
        margin-left: auto;
    }

    .mobile-menu-button {
        display: block;
    }

}


@media (max-width: 650px) {

    .header-portal-button {
        display: none;
    }

    .mega-navigation {
        width: 100%;
    }

}