/* =========================================================================
   Site navigation menu
   -------------------------------------------------------------------------
   CSS-only multilevel flyout menu, rebuilt from the "1. Multilevel mega
   menu" example at https://codepen.io/victoriak7/pen/xxGGYOE

   Desktop (>= 768px): hovering/focusing a top-level item opens a dropdown
   below it; items within that dropdown that have children fly out a
   further panel to the right. Flyout positioning is capped at two nested
   levels, matching the CodePen model.

   Mobile (< 768px): the hamburger trigger reveals a fixed, full-height
   slide-in panel (via :hover/:focus/:focus-within - no JavaScript).
   Nested flyouts expand in place as an accordion.

   Colors match the site's previous navigation palette:
     - bar/panel background:  #0d1e32 / rgba(6,15,25,.90)
     - link text:             rgba(255,255,255,.7-.9), brightening to #fff
     - hover/open highlight:  rgba(255,255,255,.1)
   ========================================================================= */

.site-menu,
.site-menu nav,
.site-menu ul,
.site-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu a {
    display: block;
    text-decoration: none;
}

.site-menu a:hover,
.site-menu a:focus {
    text-decoration: none;
}

/* Trigger labels (checkbox hack) must not inherit Bootstrap's default
   label{display:inline-block; margin-bottom:5px; font-weight:700} styles.
   (display is intentionally left to .menu-link/.mobile-menu-trigger so
   each element's own show/hide rules keep working at every breakpoint.) */
.site-menu label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.site-menu {
    float: right;
}

.menu-link {
    display: block;
    padding: 12px 16px;
    color: rgba(255, 255, 255, .9);
    transition: background .2s ease, color .2s ease;
    position: relative;
}

.menu-bar-link {
    font-size: clamp(1.45rem, calc(1rem + 0.2vw + 0.2vh), 3rem);
}

.menu-link:hover,
.menu-link:focus {
    color: #ffffff;
}

.menu-link[aria-haspopup="true"] {
    padding-right: 34px;
}

.menu-link .fa-caret-down,
.menu-link .fa-caret-right {
    margin-left: 8px;
    font-size: 12px;
}

.file-upload-link {
    color: #cccccc !important;
}

.file-upload-link:hover,
.file-upload-link:focus {
    color: #ffffff !important;
}

/* ---- Mobile menu trigger (hamburger) ---- */
/* Visually hidden but focusable checkbox that drives the mobile panel via
   :checked, so the panel only opens/closes on click - never on hover. */
.mobile-menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mobile-menu-trigger {
    display: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .9);
    font-size: 26px;
    padding: 10px 12px;
}

.mobile-menu-trigger:hover {
    color: #ffffff;
}

.mobile-menu-toggle:focus + .mobile-menu-trigger {
    color: #ffffff;
    outline: 2px solid rgba(255, 255, 255, .6);
}

.mobile-menu-back-item {
    display: none;
}

/* =========================================================================
   Desktop (>= 768px)
   ========================================================================= */
@media all and (min-width: 768px) {

    .site-menu nav {
        display: flex;
        align-items: center;
    }

    .menu-bar {
        display: flex;
        align-items: center;
        position: relative;
    }

    .menu-bar > li {
        position: relative;
    }

    /* Hide every dropdown/flyout by default, at any nesting depth */
    .menu [aria-haspopup="true"] ~ ul {
        display: none;
    }

    /* First-level dropdown, shown below the top-level item */
    .menu-bar > li > [aria-haspopup="true"] ~ ul {
        position: absolute;
        top: 100%;
        left: 0;
        width: 240px;
        background: rgba(6, 15, 25, .90);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
        z-index: 50;
    }

    .menu-bar > li:hover > [aria-haspopup="true"] ~ ul,
    .menu-bar > li:focus-within > [aria-haspopup="true"] ~ ul,
    .menu-bar > li > [aria-haspopup="true"]:focus ~ ul,
    .menu-bar > li > [aria-haspopup="true"] ~ ul:hover,
    .menu-bar > li > [aria-haspopup="true"] ~ ul:focus-within {
        display: block;
        animation: menu-dropdown .15s ease-out;
    }

    .menu-bar > li:hover > .menu-link,
    .menu-bar > li:focus-within > .menu-link,
    .menu-bar > li > .menu-link:focus {
        background: rgba(255, 255, 255, .1);
        color: #ffffff;
    }

    /* Nested flyouts inside the first-level dropdown, capped at two levels */
    .mega-menu--multiLevel li {
        position: relative;
    }

    .mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul,
    .mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul ul {
        display: none;
        position: absolute;
        top: -1px;
        left: 100%;
        width: 240px;
        background: rgba(6, 15, 25, .90);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
        z-index: 10;
    }

    .mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul,
    .mega-menu--multiLevel li:focus-within > [aria-haspopup="true"] ~ ul,
    .mega-menu--multiLevel [aria-haspopup="true"]:focus ~ ul {
        display: block;
        animation: menu-flyout .15s ease-out;
    }

    .mega-menu--multiLevel li:hover > .menu-link,
    .mega-menu--multiLevel li:focus-within > .menu-link,
    .mega-menu--multiLevel .menu-link:focus {
        background: rgba(255, 255, 255, .1);
        color: #ffffff;
    }

    .menu-list-link {
        color: rgba(255, 255, 255, .7);
        padding: 9px 18px;
        font-size: 14px;
    }

    .mobile-menu-back-item {
        display: none !important;
    }
}

/* =========================================================================
   Mobile (< 768px)
   ========================================================================= */
@media all and (max-width: 767px) {

    .site-menu {
        float: none;
    }

    .mobile-menu-trigger {
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }

    .menu-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 300px;
        max-width: 85%;
        overflow-y: auto;
        background: #0d1e32;
        box-shadow: 1px 0 4px rgba(0, 0, 0, .35);
        transition: left .3s ease;
        z-index: 3500;
    }

    .mobile-menu-toggle:checked ~ .menu-bar {
        left: 0;
    }

    .menu-bar .menu-link {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    /* First-level dropdown becomes a full slide-in panel */
    .menu-bar > li > [aria-haspopup="true"] ~ ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        min-height: 100%;
        background: #0d1e32;
        transition: left .3s ease;
        z-index: 5;
    }

    /* First-level dropdown items now toggle open/closed via their own
       hidden checkbox (see .mobile-submenu-toggle), so "Back" can close
       just this panel without touching the outer hamburger checkbox.
       Selector specificity must match/exceed the closed-state rule above. */
    .menu-bar > li > .mobile-submenu-toggle:checked ~ ul {
        left: 0;
    }

    /* Nested flyouts expand in place as an accordion, capped at two levels */
    .mega-menu--multiLevel [aria-haspopup="true"] ~ ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
    }

    .mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul,
    .mega-menu--multiLevel li:focus-within > [aria-haspopup="true"] ~ ul,
    .mega-menu--multiLevel [aria-haspopup="true"]:focus ~ ul {
        max-height: 1000px;
    }

    .mega-menu--multiLevel .menu-list .menu-link {
        padding-left: 34px;
    }

    .mega-menu--multiLevel .menu-list .menu-list .menu-link {
        padding-left: 50px;
    }

    .menu-link[aria-haspopup="true"] .fa-caret-right {
        transition: transform .2s ease;
    }

    .mega-menu--multiLevel li:hover > .menu-link .fa-caret-right,
    .mega-menu--multiLevel li:focus-within > .menu-link .fa-caret-right {
        transform: rotate(90deg);
    }

    .mobile-menu-back-item {
        display: block;
        order: -1;
    }

    .mobile-menu-back-link {
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .8);
    }

    .mobile-menu-back-link:before {
        content: "\f104";
        font-family: FontAwesome;
        margin-right: 8px;
    }
}

@keyframes menu-dropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes menu-flyout {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}