/* =============================================================
   Mega menu
   Styles the full-width dropdown panels produced by
   Glacial_Mega_Menu_Walker for top-level items flagged `mega-menu`.
   Scoped to .mega-menu / .mega-panel so standard dropdowns are
   left untouched. Colors mirror the Webflow template.
   ============================================================= */

:root {
    --mega-blue: #2457c5; /* template --color-3 (links, buttons)   */
    --mega-btn-fill: #1b409a; /* darker blue for the button hover fill */
    --mega-ink: #1a1a1a; /* template --color-2 (link text)        */
    --mega-heading-color: #8a8985; /* column heading grey (was #navigation .nav-link-holder h4) */
    --mega-panel-bg: #fff;
    --mega-radius: 10px;
    --mega-gutter: 22px; /* space between columns                 */
    --mega-bridge-h: 36px;
    /* invisible hover bridge; must exceed the gap
                                 between the nav item and the panel (~22px)  */
}

/* --- Full-width panel ------------------------------------------------ */

/* Static positioning lets the panel span the whole fixed banner
   instead of being trapped inside the (relative) menu item. */
.gl-top-level > li.mega-menu {
    position: static;
}

.gl-top-level > li.mega-menu > .mega-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    margin: 0;
    padding: 32px 15px 20px;
    background: var(--mega-panel-bg);
    border-radius: 0 0 var(--mega-radius) var(--mega-radius);
    box-shadow: 0 15px 30px rgba(48, 66, 118, 0.18);
    z-index: 999;
}

/* Reveal on hover (desktop) or when toggled open (theme JS). */
.gl-top-level > li.mega-menu:hover > .mega-panel,
.gl-top-level > li.mega-menu > .mega-panel.toggled-on {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* Invisible hover bridge: fills the vertical gap between the nav item and the
   panel so moving the cursor down to a link doesn't drop the :hover and close
   the panel. Only exists while the panel is displayed. */
.gl-top-level > li.mega-menu > .mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%; /* sit directly above the panel */
    height: var(--mega-bridge-h, 28px);
}

/* Mega items are position:static (so the panel can be full width), which
   detaches the theme's absolutely-positioned caret and sends it to the screen
   edge. Re-anchor it inline next to the label. Desktop only — the theme's
   mobile caret layout is already correct.
   NOTE: the leading `#navigation ` is deliberate. webflow.css has (or may again
   contain) `#navigation .toggle-dropdown { position:absolute; right:0 }`, an
   ID-level rule that would otherwise outrank a class-only selector. Prefixing
   with the #navigation ID makes this fix win even if that block returns. */
@media (min-width: 992px) {
    #navigation .gl-top-level > li.mega-menu > .toggle-dropdown {
        position: static;
        height: auto;
        right: auto;
        padding: 0 0 0 4px;
    }

    #navigation .gl-top-level > li.mega-menu.menu-item-has-children > a {
        padding-right: var(--nav-horz-pad); /* drop the space reserved for the absolute caret */
    }
}

/* --- Columns --------------------------------------------------------- */

.mega-panel > .mega-col {
    display: block;
    width: auto;
    min-width: 170px;
    max-width: 320px;
    margin: 0 var(--mega-gutter) 12px !important;
    padding: 0;
    background: transparent;
    position: static;
}

.mega-panel > .mega-col:hover {
    background: transparent;
}

/* Column heading */
.mega-heading {
    margin: 0 0 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}

.site-navigation .mega-heading > a {
    font-weight: bold;
}

.mega-panel .mega-heading a {
    display: inline;
    width: auto;
    padding: 0;
    color: inherit;
    text-decoration: none;
}

.mega-panel .mega-heading a:hover {
    color: var(--mega-blue);
}

/* Links inside a column */
.mega-panel a.mega-link {
    display: block;
    width: auto;
    padding: 0 0 12px;
    color: var(--mega-ink);
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mega-panel a.mega-link:last-child {
    padding-bottom: 0;
}

/* Cancel the theme's "highlight the whole column on hover" rule
   (.gl-dropdown-1 > li:hover > a) inside mega panels, so hovering one link
   doesn't light up its neighbours... */
.mega-panel > .mega-col:hover > a.mega-link {
    color: var(--mega-ink);
}

/* ...only the link actually under the cursor highlights. */
.mega-panel > .mega-col > a.mega-link:hover {
    color: var(--mega-blue);
}

/* --- CTA pill button (template .button-2.c-06) ----------------------- */

.mega-panel > .mega-col-cta {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-panel a.mega-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.75rem 1.5rem;
    border-radius: 50rem;
    background: var(--mega-blue);
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}

.mega-panel a.mega-btn:hover {
    color: #fff;
}

a.mega-btn .btn-txt-wrapper {
    position: relative;
    z-index: 2;
}

a.mega-btn .btn-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--mega-btn-fill);
    border-radius: 50rem;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

a.mega-btn:hover .btn-bg {
    transform: scaleX(1);
}

/* --- Mobile (<= 991px): panel stacks inside the off-canvas nav ------- */

@media (max-width: 991px) {

    .gl-top-level > li.mega-menu {
        position: static;
    }

    /* Never open on hover on touch/narrow; only the toggle opens it. */
    .gl-top-level > li.mega-menu:hover > .mega-panel {
        display: none;
    }

    .gl-top-level > li.mega-menu > .mega-panel {
        position: static;
        width: 100%;
        padding: 4px 0 10px 1em;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .gl-top-level > li.mega-menu > .mega-panel.toggled-on {
        display: block;
    }

    .mega-panel > .mega-col {
        width: 100%;
        max-width: none;
        margin: 6px 0;
    }

    .mega-heading {
        color: var(--mobile-color, #fff);
        opacity: 0.7;
        padding: 8px 10px 4px;
        margin: 0;
    }

    .mega-heading a {
        color: inherit;
    }

    .mega-panel a.mega-link {
        color: var(--mobile-color, #fff);
        padding: 10px;
    }

    .mega-panel > .mega-col-cta {
        align-items: flex-start;
        padding: 8px 10px;
    }

    a.mega-btn {
        width: auto;
    }

    .mega-panel > .mega-col {
        display: block;
        width: auto;
        min-width: 170px;
        max-width: 320px;
        margin: 0 var(--mega-gutter) 12px !important;
    }

    [data-nav-menu-open] {
        text-align: left;
    }

    .nav-link-holder h4 ~ a {
        padding-left: 30px !important;
    }

    .mega-col.nav-link-holder {
        margin-left: 0 !important;
    }
}