/*** Navbar nested submenus (Academics > School > Description/Programmes) ***/
/* Nested menus use .nav-submenu* classes, not .dropdown/.dropdown-menu/.dropdown-toggle,
   so main.js's hover handler does not open every nested menu along with its parent.
   Open state (.show + aria-expanded) is managed by js/nav.js. */

.navbar .nav-submenu {
    position: relative;
}

.navbar .nav-submenu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar .nav-submenu-toggle::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: .75rem;
    transition: transform .3s;
}

.navbar .nav-submenu-toggle[aria-expanded="true"]:not(.active) {
    color: var(--primary);
    background-color: var(--light);
}

/* Desktop: fly-out to the side (dropend), flips to the left near the right edge */
@media (min-width: 992px) {
    .navbar .nav-submenu-menu {
        position: absolute;
        top: 0;
        /* While hidden, park inside the parent menu (left: 0) so an invisible fly-out
           never adds horizontal page scroll; it moves out to the side when shown. */
        left: 0;
        min-width: 12rem;
        z-index: 1001;
        padding: .5rem 0;
        margin-top: -.5rem;
        background-color: var(--bs-white, #fff);
        border: 1px solid rgba(var(--dark-rgb, 3, 33, 71), .15);
        border-radius: .25rem;
        box-shadow: 0 .5rem 1rem rgba(var(--dark-rgb, 3, 33, 71), .15);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-.5rem);
        /* On close: fade out in place, then hide and park once invisible... */
        transition: opacity .3s, transform .3s, visibility 0s linear .3s, left 0s linear .3s;
    }

    .navbar .nav-submenu-menu.show {
        left: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        /* ...on open: show and position immediately, so keyboard focus can move in. */
        transition: opacity .3s, transform .3s, visibility 0s, left 0s;
    }

    /* Flipped to the left (set by nav.js near the right edge). The class persists after
       closing, and a left-side fly-out can't cause right-edge overflow. */
    .navbar .nav-submenu-menu.nav-submenu--start {
        left: auto;
        right: 100%;
        transform: translateX(.5rem);
    }

    .navbar .nav-submenu-menu.nav-submenu--start.show {
        transform: none;
    }

    /* Keyboard/click-opened top-level dropdowns (Bootstrap adds .show) must be
       visible too; style.css only reveals them on :hover. */
    .navbar .nav-item .dropdown-menu.show {
        top: 100%;
        transform: rotateX(0deg);
        visibility: visible;
        opacity: 1;
    }
}

/* Small desktops: the new top-level labels (About Us / Academics dropdowns, Admissions)
   are wider than the old menu, so tighten link spacing to keep the navbar inside the
   viewport between 992px and 1199px (style.css uses margin-right: 30px). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-light .navbar-nav .nav-link {
        margin-right: 18px;
    }
}

/* Mobile (collapsed navbar): submenu expands inline under its toggle */
@media (max-width: 991.98px) {
    .navbar .nav-submenu-menu {
        display: none;
        margin-left: 1rem;
        padding-left: 1rem;
        border-left: 2px solid var(--primary);
    }

    .navbar .nav-submenu-menu.show {
        display: block;
    }

    .navbar .nav-submenu-toggle::after {
        content: "\f107";
    }

    .navbar .nav-submenu-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar .nav-submenu-menu,
    .navbar .nav-submenu-toggle::after {
        transition: none;
    }
}