/* =============================================================================
   BOOTHACK COMPONENT — BESPOKE NAVIGATION
============================================================================= */

/* =============================================================================
   CROSS-FRAMEWORK NAVBAR HEIGHT BASELINE
   Standardise every framework adapter on Bootstrap's default navbar
   vertical rhythm so the navbar never appears squat regardless of which
   CSS framework is active.

   Bootstrap's vendor default: `.navbar { padding-top: 0.5rem; padding-bottom:
   0.5rem }` and `.navbar-brand { font-size: 1.25rem; line-height: 1.5 }` →
   total navbar height ≈ 3.5rem (56 px).

   Status per adapter (the .navbar wrapper class is emitted by every adapter
   except Tailwind, which scopes its chrome to .bh-tw-nav and provides the
   equivalent padding/brand sizing in its bridge):

   - bootstrap5  : vendor already sets identical values; rules below no-op.
   - foundation  : `.top-bar` vendor padding overlaps; rules below provide
                   the same outer padding, no visible change.
   - bulma       : framework provides `.navbar { min-height: 3.25rem }`;
                   the +1rem padding sits inside `min-height`, navbar height
                   resolves to max(3.25rem, content+padding) ≈ 3.5rem.
   - pico        : no native `.navbar` styling; rules below establish a
                   Bootstrap-default height in place of the previously bare
                   `border-bottom`-only bridge rule.
   - materialize : framework provides its own navbar metrics in
                   `materialize-navbar`; the `.navbar` class is still emitted
                   so rules below apply unless overridden by the adapter bridge.
   - uikit       : `.uk-navbar-container` provides no padding at all; the
                   navbar previously rendered squat (~24 px tall, only the
                   brand text height).  Rules below fix that.
   - tailwind    : scopes chrome to `.bh-tw-nav`, not `.navbar`; rules below
                   do not apply.  Tailwind's bridge already carries the
                   equivalent padding/brand-size rules.
============================================================================= */

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.bh-brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* =============================================================================
   FRAMEWORK-AGNOSTIC SVG CARET
============================================================================= */

.bh-caret {
    transition: transform .25s ease;
}

.bh-nav-list .bh-accordion-toggle .bh-caret {
    margin-left: auto;
}

[aria-expanded="true"] > .bh-caret {
    transform: rotate(180deg);
}

.bh-dropup .bh-caret {
    transform: rotate(180deg);
}

.bh-dropup [aria-expanded="true"] > .bh-caret {
    transform: rotate(0deg);
}

/* =============================================================================
   MOBILE NAVIGATION STRUCTURE (DEFAULT BASE)
============================================================================= */

.bh-nav-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
    margin-bottom: 0;
}

.bh-nav-list > .bh-nav-item {
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.bh-nav-list > .bh-nav-item:last-child {
    border-bottom: none;
}

/* Mobile Background Override (Only applied via our new CSS variable) */
@media (max-width: 991.98px) {
    .offcanvas[style*="--bh-offcanvas-bg"] {
        background-color: var(--bh-offcanvas-bg) !important;
    }
}

/* =============================================================================
   LINK TEXT COLORS (DARK / LIGHT MODE ADAPTER)
============================================================================= */

/* 1. Light Mode (Dark Text) */

/*
 * Suppress framework `a:hover { text-decoration: underline }` defaults
 * (UIkit, Pico, and several others) on menu links. The hover/focus
 * underline is inconsistent with the navbar's hover-colour-only feedback
 * pattern and creates a visually busy navbar. `.bh-nav-link:hover`
 * specificity [0,2,0] beats UIkit's `a:hover` [0,1,1].
 */
.bh-nav-link,
.bh-submenu-link {
    color: rgba(0, 0, 0, 0.65);
    text-decoration: none;
}
.navbar-light .bh-nav-link,
.navbar-light .bh-submenu-link,
[data-bs-theme="light"] .bh-nav-link,
[data-bs-theme="light"] .bh-submenu-link {
    color: rgba(0, 0, 0, 0.65);
}

.bh-nav-link:hover,
.bh-nav-link:focus,
.bh-submenu-link:hover,
.bh-submenu-link:focus,
.current-menu-item > .bh-nav-link,
.current-menu-item > .bh-submenu-link {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
}
.navbar-light .bh-nav-link:hover,
.navbar-light .bh-nav-link:focus,
.navbar-light .bh-submenu-link:hover,
.navbar-light .bh-submenu-link:focus,
.navbar-light .current-menu-item > .bh-nav-link,
.navbar-light .current-menu-item > .bh-submenu-link,
[data-bs-theme="light"] .bh-nav-link:hover,
[data-bs-theme="light"] .bh-nav-link:focus,
[data-bs-theme="light"] .bh-submenu-link:hover,
[data-bs-theme="light"] .bh-submenu-link:focus,
[data-bs-theme="light"] .current-menu-item > .bh-nav-link,
[data-bs-theme="light"] .current-menu-item > .bh-submenu-link {
    color: rgba(0, 0, 0, 0.9);
}

/* 2. Dark Mode (Light Text) */
.navbar-dark .bh-nav-link,
.navbar-dark .bh-submenu-link,
[data-bs-theme="dark"] .bh-nav-link,
[data-bs-theme="dark"] .bh-submenu-link {
    color: rgba(255, 255, 255, 0.65);
}

.navbar-light .bh-brand-link,
[data-bs-theme="light"] .bh-brand-link {
    color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .bh-brand-link,
[data-bs-theme="dark"] .bh-brand-link {
    color: rgba(255, 255, 255, 0.92);
}

.navbar-light .bh-brand-link:hover,
.navbar-light .bh-brand-link:focus-visible,
[data-bs-theme="light"] .bh-brand-link:hover,
[data-bs-theme="light"] .bh-brand-link:focus-visible {
    color: rgba(0, 0, 0, 1);
}

.navbar-dark .bh-brand-link:hover,
.navbar-dark .bh-brand-link:focus-visible,
[data-bs-theme="dark"] .bh-brand-link:hover,
[data-bs-theme="dark"] .bh-brand-link:focus-visible {
    color: rgba(255, 255, 255, 1);
}

.bh-brand-link,
.bh-brand-link:hover,
.bh-brand-link:focus,
.bh-brand-link:focus-visible,
.bh-brand-link:active {
    text-decoration: none;
}

/*
 * Brand cluster: logo + optional title share one hit target; spacing works without Bootstrap ms-* on Bulma.
 */
.bh-brand-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    max-width: 100%;
}

.bh-brand-title {
    display: inline-block;
}

nav.navbar .bh-brand-link .bh-brand-title {
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.25rem;
}

nav.navbar.py-3 .bh-brand-link .bh-brand-title {
    font-size: 1.3rem;
}

nav.navbar.py-5 .bh-brand-link .bh-brand-title {
    font-size: 1.45rem;
}

/*
 * Custom-logo sizing scales with navbar height mods (py-3 / py-5); Customizer width still constrains wrapper.
 */
nav.navbar .bh-brand-link .site-logo-wrapper img,
nav.navbar .bh-brand-link .site-logo-wrapper .site-logo {
    height: auto;
    width: auto;
    max-height: 2.25rem;
    vertical-align: middle;
    object-fit: contain;
}

nav.navbar.py-3 .bh-brand-link .site-logo-wrapper img,
nav.navbar.py-3 .bh-brand-link .site-logo-wrapper .site-logo {
    max-height: 2.65rem;
}

nav.navbar.py-5 .bh-brand-link .site-logo-wrapper img,
nav.navbar.py-5 .bh-brand-link .site-logo-wrapper .site-logo {
    max-height: 3.05rem;
}

.offcanvas .bh-brand-link .bh-brand-title {
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.3rem;
}

.offcanvas .bh-brand-link .site-logo-wrapper img,
.offcanvas .bh-brand-link .site-logo-wrapper .site-logo {
    max-height: 2.35rem;
    height: auto;
    width: auto;
    vertical-align: middle;
    object-fit: contain;
}

/*
 * Full-screen landing + fixed-top nav: transparent bar sits over hero imagery.
 * `data-bh-hero-text` mirrors hero Customizer light/dark prose until `.navbar-shrink` applies a solid bar.
 * !important beats Bulma `.navbar-item` link resets.
 */
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link:visited {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-title {
    color: inherit !important;
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link:focus-visible {
    color: rgba(255, 255, 255, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 3px;
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link .site-logo-wrapper img,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-brand-link .site-logo-wrapper .site-logo {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link:visited {
    color: rgba(17, 24, 39, 0.94) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-title {
    color: inherit !important;
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link:focus-visible {
    color: rgba(0, 0, 0, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 3px;
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link .site-logo-wrapper img,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-brand-link .site-logo-wrapper .site-logo {
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}

nav.bh-navbar--hero .bh-brand-link,
nav.bh-navbar--hero .bh-brand-title {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

nav.bh-navbar--hero .bh-brand-link .site-logo-wrapper img,
nav.bh-navbar--hero .bh-brand-link .site-logo-wrapper .site-logo {
    transition: filter 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    nav.bh-navbar--hero .bh-brand-link,
    nav.bh-navbar--hero .bh-brand-title,
    nav.bh-navbar--hero .bh-brand-link .site-logo-wrapper img,
    nav.bh-navbar--hero .bh-brand-link .site-logo-wrapper .site-logo {
        transition: none;
    }
}

/*
 * Same landing overlay: primary menu links + accordion toggles (desktop inline path).
 */
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-nav-link,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-submenu-link,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-accordion-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-nav-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-nav-link:focus-visible,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-submenu-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-submenu-link:focus-visible,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .bh-accordion-toggle:hover {
    color: rgba(255, 255, 255, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .current-menu-item > .bh-nav-link,
nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .current-menu-item > .bh-submenu-link {
    color: rgba(255, 255, 255, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-nav-link,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-submenu-link,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-accordion-toggle {
    color: rgba(17, 24, 39, 0.94) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-nav-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-nav-link:focus-visible,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-submenu-link:hover,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-submenu-link:focus-visible,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .bh-accordion-toggle:hover {
    color: rgba(0, 0, 0, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .current-menu-item > .bh-nav-link,
nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .current-menu-item > .bh-submenu-link {
    color: rgba(0, 0, 0, 1) !important;
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .navbar-burger span {
    background-color: rgba(255, 255, 255, 0.92);
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .navbar-burger span {
    background-color: rgba(17, 24, 39, 0.88);
}

nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.95);
}

nav.bh-navbar--hero[data-bh-hero-text="dark"]:not(.navbar-shrink) .navbar-toggler {
    border-color: rgba(17, 24, 39, 0.35);
    color: rgba(17, 24, 39, 0.95);
}

.navbar-dark .bh-nav-link:hover,
.navbar-dark .bh-nav-link:focus,
.navbar-dark .bh-submenu-link:hover,
.navbar-dark .bh-submenu-link:focus,
.navbar-dark .current-menu-item > .bh-nav-link,
.navbar-dark .current-menu-item > .bh-submenu-link,
[data-bs-theme="dark"] .bh-nav-link:hover,
[data-bs-theme="dark"] .bh-nav-link:focus,
[data-bs-theme="dark"] .bh-submenu-link:hover,
[data-bs-theme="dark"] .bh-submenu-link:focus,
[data-bs-theme="dark"] .current-menu-item > .bh-nav-link,
[data-bs-theme="dark"] .current-menu-item > .bh-submenu-link {
    color: rgba(255, 255, 255, 0.9);
}


/* =============================================================================
   LINK STATES & HOVER POLISH
============================================================================= */

.bh-nav-link,
.bh-submenu-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    margin: 0.15rem 0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Dynamic Hover Background */
.bh-nav-link:hover,
.bh-submenu-link:hover,
.bh-nav-link:focus,
.bh-submenu-link:focus,
.bh-accordion-toggle:hover {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Active / Current Page State Background */
.current-menu-item > .bh-nav-link {
    font-weight: 600;
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* =============================================================================
   ACCORDION TOGGLE
============================================================================= */

.bh-accordion-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: 500;
    gap: 0.75rem;
}

/* =============================================================================
   SUBMENU CONTAINER
============================================================================= */

.bh-submenu {
    display: block; 
    position: static;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    background: transparent; 
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

.bh-submenu-open > .bh-submenu {
    opacity: 1;
}

/* =============================================================================
   SUBMENU ITEMS & ANIMATION
============================================================================= */

.bh-submenu .bh-nav-item {
    padding-left: 1rem;
    transform: translateX(-6px);
    opacity: 0.85;
    transition: transform .25s ease, opacity .25s ease;
}

.bh-submenu-open .bh-submenu .bh-nav-item {
    transform: translateX(0);
    opacity: 1;
}

.bh-submenu-link {
    padding: .55rem 1rem;
    font-size: .95rem;
}

/* Staggered Animations */
.bh-submenu .bh-nav-item:nth-child(1) { transition-delay: .03s; }
.bh-submenu .bh-nav-item:nth-child(2) { transition-delay: .06s; }
.bh-submenu .bh-nav-item:nth-child(3) { transition-delay: .09s; }
.bh-submenu .bh-nav-item:nth-child(4) { transition-delay: .12s; }
.bh-submenu .bh-nav-item:nth-child(5) { transition-delay: .15s; }


/* =============================================================================
   DESKTOP MORPHING (STANDARD MENU MIMICRY)
============================================================================= */

@media (min-width: 992px) {
    /*
     * Bootstrap offcanvas-lg desktop inline mode:
     * make the offcanvas container consume remaining navbar row width,
     * then align nav contents to the far right.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        margin-left: 0;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg .offcanvas-body {
        width: 100%;
        justify-content: flex-end;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg #bh-offcanvas-nav.bh-offcanvas-nav-inline {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg #menu-main-menu.bh-offcanvas-menu-inline {
        width: auto;
        flex: 0 0 auto;
    }
    
    /*
     * Hide search/social only inside the *expanding* offcanvas (offcanvas-lg).
     * The plain drawer (offcanvas-end, no -lg suffix) is still a slide-in panel
     * at desktop — its search bar must remain visible.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg .bh-offcanvas-search {
        display: none !important;
    }

    /*
     * Horizontal inline layout for the expanding offcanvas body only.
     * Scoped to .offcanvas-lg so the non-expanding drawer keeps its
     * column layout, padding, and scroll.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg .offcanvas-body {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 0;
        overflow: visible;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-container {
        display: flex;
        align-items: center;
        width: 100%;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-list,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) #bh-offcanvas-nav > ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: auto;
        width: auto;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-list > .bh-nav-item,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) #bh-offcanvas-nav > ul > .bh-nav-item {
        border-bottom: none;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-link {
        padding: 0.5rem 0.75rem;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-accordion-toggle {
        width: auto;
        justify-content: flex-start;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-accordion-toggle .bh-caret {
        margin-left: 0.25rem;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-item {
        position: relative;
    }

    /*
     * Fixed-bottom + flyouts: upward-opening panels escape the bar; clip any overflow:hidden ancestors.
     */
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom > .container,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .navbar-collapse,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .navbar-menu,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .collapse,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-nav-menu-panel,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-nav-container,
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .offcanvas.offcanvas-lg {
        overflow: visible !important;
    }

    /*
     * lg flyouts (collapse + inline offcanvas): accordion max-height clips position:absolute submenus.
     * The offcanvas variant is scoped to .offcanvas-lg (the expanding type that goes inline at
     * desktop).  The non-expanding drawer (.offcanvas-end without .offcanvas-lg) remains an
     * overlay at every viewport width and uses JS accordion; these rules must not apply to it.
     * BootHack's custom system uses .is-active (not Bootstrap's .show) to open the drawer, so
     * the old :not(.show) check was insufficient — restricting to .offcanvas-lg is definitive.
     * Bulma uses `.navbar-menu` (Bootstrap uses `.navbar-collapse`) — both must be wired here.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .navbar-collapse .bh-nav-item:not(.bh-submenu-open) > .bh-submenu,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .navbar-menu .bh-nav-item:not(.bh-submenu-open) > .bh-submenu,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg:not(.show):not(.showing) .bh-nav-item:not(.bh-submenu-open) > .bh-submenu {
        max-height: none !important;
        visibility: hidden;
        pointer-events: none;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .navbar-collapse .bh-submenu-open > .bh-submenu,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .navbar-menu .bh-submenu-open > .bh-submenu,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas.offcanvas-lg:not(.show):not(.showing) .bh-submenu-open > .bh-submenu {
        max-height: none !important;
        visibility: visible;
        pointer-events: auto;
    }

    /*
     * Desktop dropdown panels (Bootstrap-like surface).
     * overflow: visible so nested `.bh-submenu--nested` flyouts are not clipped by the parent panel.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        inset-inline-end: auto;
        min-width: 13rem;
        margin-top: 0.25rem;
        margin-inline-start: 0;

        background-color: var(--bh-nav-bg, #ffffff);
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 0.375rem;
        box-shadow:
            0 0.25rem 0.5rem rgba(0, 0, 0, 0.08),
            0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
        padding: 0.375rem 0;
        z-index: 1000;
        overflow: visible;
    }

    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-submenu {
        z-index: 1040;
    }

    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-submenu.bh-submenu--nested {
        z-index: 1050;
    }

    /* Second tier and deeper: horizontal flyout attached to the parent row */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu.bh-submenu--nested {
        top: 0;
        bottom: auto;
        inset-inline-start: 100%;
        margin-top: 0;
        margin-bottom: 0;
        margin-inline-start: 0.1875rem;
        z-index: 1010;
    }

    /*
     * Tier-1 submenu geometry: walker adds `bh-dropup` when placement is bottom (`drop_direction` up).
     * Selectors must not rely on `.bh-nav-list` alone — adapters historically omitted that structural class.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) #bh-offcanvas-nav .bh-nav-item.bh-dropup > .bh-submenu:not(.bh-submenu--nested),
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-nav-list > .bh-nav-item.bh-dropup > .bh-submenu:not(.bh-submenu--nested) {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 0.25rem;
    }

    /*
     * Fixed-bottom bar: tier-1 menus must open upward (downward points off-screen below the viewport).
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom #bh-offcanvas-nav .bh-nav-item > .bh-submenu:not(.bh-submenu--nested),
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom #bh-offcanvas-nav .bh-nav-item > .bh-submenu:not(.bh-submenu--nested),
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-nav-list > .bh-nav-item > .bh-submenu:not(.bh-submenu--nested),
    nav:is(.navbar-expand-lg, .bh-nav-desktop-flyouts).fixed-bottom .bh-nav-list > .bh-nav-item > .bh-submenu:not(.bh-submenu--nested) {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 0.25rem;
    }

    /*
     * nav-controller.js viewport flip — prefers placement that minimizes overflow past viewport gutters.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu:not(.bh-submenu--nested).bh-submenu--flip-inline {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu:not(.bh-submenu--nested).bh-submenu--flip-block {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 0.25rem;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu.bh-submenu--nested.bh-submenu--flip-inline {
        inset-inline-start: auto;
        inset-inline-end: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0.1875rem;
    }

    /*
     * Non-expanding drawer accordion reset.
     *
     * The broad :is(...) .bh-submenu rule above sets position:absolute, overflow:visible,
     * and various flyout-geometry properties on EVERY submenu inside a bh-nav-desktop-flyouts
     * navbar — including submenus inside the non-expanding slide-in drawer (.offcanvas-end
     * without .offcanvas-lg).  The drawer always uses JS accordion at every viewport width;
     * absolute-position submenus and overflow:visible would break the accordion animation.
     *
     * This rule has higher specificity ([0,4,0] vs [0,2,0]) so it wins source-order
     * regardless of where it appears in the sheet.
     */
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .offcanvas:not(.offcanvas-lg) .bh-submenu {
        position: static;
        top: auto;
        bottom: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        min-width: 0;
        margin: 0;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        z-index: auto;
        overflow: hidden;
    }

    .navbar-dark :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu,
    [data-bs-theme="dark"] :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu {
        background-color: var(--bh-nav-bg, #212529);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow:
            0 0.35rem 0.65rem rgba(0, 0, 0, 0.45),
            0 0.85rem 2rem rgba(0, 0, 0, 0.35);
    }

    /*
     * Landing overlay uses bright nav links; submenu stays a light “dropdown sheet” even when the document theme paints dark dropdowns elsewhere.
     */
    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu {
        background-color: var(--bh-nav-bg, #ffffff);
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow:
            0 0.25rem 0.5rem rgba(0, 0, 0, 0.08),
            0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
    }

    /*
     * Overlay colours force bright submenu links; restore readable prose inside the desktop panel.
     */
    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link,
    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:visited {
        color: rgba(0, 0, 0, 0.65) !important;
        text-shadow: none !important;
    }

    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:hover,
    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:focus-visible {
        color: rgba(0, 0, 0, 0.9) !important;
    }

    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .current-menu-item > .bh-submenu-link {
        color: rgba(0, 0, 0, 0.9) !important;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu-link {
        padding: 0.45rem 1.25rem;
        margin: 0;
        border-radius: 0.25rem;
        font-size: 0.9rem;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:hover,
    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:focus-visible {
        background-color: rgba(0, 0, 0, 0.06);
    }

    .navbar-dark :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:hover,
    .navbar-dark :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:focus-visible,
    [data-bs-theme="dark"] :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:hover,
    [data-bs-theme="dark"] :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:hover,
    nav.bh-navbar--hero[data-bh-hero-text="light"]:not(.navbar-shrink) :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-submenu-link:focus-visible {
        background-color: rgba(0, 0, 0, 0.06) !important;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-nav-item {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        padding-left: 0;
    }

    :is(.navbar-expand-lg, .bh-nav-desktop-flyouts) .bh-submenu .bh-nav-item + .bh-nav-item {
        margin-top: 0.0625rem;
    }
}

@media (max-width: 991.98px) {
    #bh-offcanvas-nav.bh-offcanvas-nav-inline {
        width: 100%;
    }

    #menu-main-menu.bh-offcanvas-menu-inline {
        width: 100%;
    }
}

/* =============================================================================
   REDUCED MOTION SUPPORT
============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .bh-submenu,
    .bh-caret,
    .bh-submenu .bh-nav-item {
        transition: none !important;
    }
}