/* ── Mobile Menu Styles — Oechsli Framework ────────────────────────────────── */
/*
 * Mobile menu types activated by classes on the core/navigation element:
 *   oi-nav--dropdown  — styled WP native overlay (dropdown feel)
 *   oi-nav--overlay   — WP native overlay stretched fullscreen
 *   oi-nav--offcanvas — custom side drawer; burger injected by PHP
 *   oi-nav--hidden    — nav fully hidden below 768px (no burger, no panel)
 *
 * Visibility modifiers:
 *   oi-nav--vis-mobile  — hamburger on mobile only (< 768px)
 *   oi-nav--vis-always  — hamburger always
 */

/* ══ Hidden on mobile — fully suppress the nav below 768px ════════════════ */

@media ( max-width: 767px ) {
    .oi-nav--hidden {
        display: none !important;
    }
}

/* ══ Override legacy nav positioning — our types own the mobile layout ═════
   The theme's legacy CSS sets position:absolute + visibility:hidden on
   nav.oi-site-navigation:not(.is-responsive) at ≤1024px (for an old menu
   system). Our nav forces overlayMenu:'never' so it never gets is-responsive.
   Without this reset the burger (inside <nav>) inherits visibility:hidden. */

.oi-nav--inline,
.oi-nav--offcanvas,
.oi-nav--dropdown {
    position:    static !important;
    visibility:  visible !important;
    background:  none !important;
    padding:     0 !important;
    height:      auto !important;
    top:         auto !important;
    left:        auto !important;
}

/* ══ Hide WP's native responsive elements — we own all mobile menu UI ═════ */

.oi-nav--offcanvas .wp-block-navigation__responsive-container-open,
.oi-nav--dropdown  .wp-block-navigation__responsive-container-open {
    display: none !important;
}


/* ══ Nav inside the offcanvas panel — always show links, never hamburger ══ */

.oi-offcanvas-panel .wp-block-navigation__responsive-container-open,
.oi-offcanvas-panel .wp-block-navigation__responsive-container-close {
    display: none !important;
}
.oi-offcanvas-panel .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column;
}

/* Some setups save the inner nav with overlayMenu != 'never', which wraps
   the <ul> in a hidden modal container. Force the wrapper visible inside
   the offcanvas drawer so the menu items are always shown. */
.oi-offcanvas-panel .wp-block-navigation__responsive-container,
.oi-offcanvas-panel .wp-block-navigation__responsive-close,
.oi-offcanvas-panel .wp-block-navigation__responsive-dialog,
.oi-offcanvas-panel .wp-block-navigation__responsive-container-content {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    inset: auto !important;
}

/* Honour the navigation block's text-color setting on the link items inside
   the offcanvas. WP outputs the colour on the <nav> via inline style, but
   <a class="wp-block-navigation-item__content"> picks up theme/UA colour
   instead of inheriting — force inheritance so the setting actually applies. */
.oi-offcanvas-panel .wp-block-navigation.has-text-color .wp-block-navigation-item__content,
.oi-offcanvas-panel .wp-block-navigation[style*="color"] .wp-block-navigation-item__content {
    color: inherit;
}

/* WP applies `is-vertical` to the inner <ul>, but the <nav> wrapper still
   inherits the default `is-layout-flex` row direction (and `align-items:
   center`). With only the <ul> as a child this is invisible; add anything
   as a sibling (e.g. a buttons block) and it flows to the right or centers.
   Force the wrapper to a real column stack with stretched cross-axis so
   children fill the drawer width consistently.

   Specificity note: this targets the <nav> wrapper layout only. The block
   sidebar's Justification control on a navigation block sets alignment on
   the inner <ul>'s items (different element), so authors retain layout
   control where it actually matters. */
.oi-offcanvas-panel .wp-block-navigation.is-vertical {
    flex-direction: column;
    align-items: stretch;
}

/* ── Sub-menus inside the drawer — accordion, not fly-out ─────────────────
   The panel nav is a plain vertical navigation, so WP core applies its
   DESKTOP submenu CSS: absolutely-positioned containers (left:-1px/top:100%),
   third level flying out to left:100% (off the drawer edge), nested item
   content indented 0.5em 1em, and nested arrows rotated -90°. None of that
   makes sense in a 360px drawer. Flatten every level into an in-flow
   accordion: containers static + full-width, every level flush left, arrows
   sitting a fixed gap after the label in BOTH hover and click modes.
   Open/close still rides core's visibility/height mechanics (hover,
   focus-within, or aria-expanded from the submenu toggle button). */

/* Parent items span the drawer; the (static) submenu wraps to its own row. */
.oi-offcanvas-panel .wp-block-navigation .wp-block-navigation-item.has-child {
    width: 100%;
    flex-wrap: wrap;
}

.oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    position: static !important;
    width: 100%;
    flex-basis: 100%;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Kill core's hover-bridge pseudo (only useful on absolute fly-outs). */
.oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
    display: none !important;
}

/* Every level aligns to the same left edge — no per-level indent. */
.oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.4em 0 !important;
}

/* Arrow: fixed size, fixed gap after the label at every level. Overrides
   core's click-mode -0.6em pull (which overlaps the label once the toggle's
   0.85em padding is lost inside the drawer) and the margin-left:auto that
   shoves nested arrows to the far right. */
.oi-offcanvas-panel .wp-block-navigation .wp-block-navigation__submenu-icon {
    width: 12px;
    height: 12px;
    margin-left: 0.35em !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}
.oi-offcanvas-panel .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    width: 12px;
    height: 12px;
}
.oi-offcanvas-panel .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-right: 0;
}

/* Hover mode renders the arrow as its own <button>: give it a ≥24px tap
   target while keeping the 12px glyph centered. */
.oi-offcanvas-panel .wp-block-navigation button.wp-block-navigation__submenu-icon {
    width: auto;
    height: auto;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.15em !important;
}

/* Nested arrows: core rotates them -90° (pointing right, for the desktop
   fly-out) at ≥782px. In the accordion they behave like the top level:
   point down, flip up when expanded. */
@media ( min-width: 782px ) {
    .oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
        transform: rotate(0deg);
    }
    .oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
    .oi-offcanvas-panel .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
        transform: rotate(180deg);
    }
}

/* ══ Burger button (offcanvas only) ════════════════════════════════════════ */

.oi-nav__burger {
    display:        none;
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    cursor:         pointer;
    background:     none;
    border:         none;
    padding:        8px;
    line-height:    1;
    color:          inherit;
}

.oi-nav__burger span {
    display:          block;
    width:            22px;
    height:           2px;
    background:       currentColor;
    border-radius:    2px;
    transition:       transform 0.25s ease, opacity 0.25s ease;
    pointer-events:   none;
}

/* Animate burger → X when open */
body.oi-offcanvas-open .oi-nav__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.oi-offcanvas-open .oi-nav__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
body.oi-offcanvas-open .oi-nav__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── vis-mobile: show burger below the chosen breakpoint, inline nav above.
   The hide targets every direct child of the <nav> except our burger, so a
   sibling buttons block (Client Login, search field, social links, etc.)
   collapses with the menu items rather than staying visible alongside the
   burger. The breakpoint is per-instance via .oi-nav--collapse-{px}. */

.oi-nav--offcanvas.oi-nav--vis-mobile .oi-nav__burger {
    display: flex;
}

/* Breakpoint = 768 px */
@media ( max-width: 767px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-768 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 768px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-768 .oi-nav__burger {
        display: none;
    }
}

/* Breakpoint = 1024 px (default) */
@media ( max-width: 1023px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-1024 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 1024px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-1024 .oi-nav__burger {
        display: none;
    }
}

/* Breakpoint = 1280 px */
@media ( max-width: 1279px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-1280 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 1280px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile.oi-nav--collapse-1280 .oi-nav__burger {
        display: none;
    }
}

/* Backwards-compat: existing nav blocks saved before the breakpoint setting
   was introduced have neither .oi-nav--collapse-* class. Fall back to 768 px
   so prod sites that worked at 768 don't suddenly collapse at 1024. */
@media ( max-width: 767px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile:not([class*="oi-nav--collapse-"]) > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 768px ) {
    .oi-nav--offcanvas.oi-nav--vis-mobile:not([class*="oi-nav--collapse-"]) .oi-nav__burger {
        display: none;
    }
}

/* ── Classic Mobile Menu: sticky header on mobile ────────────────────────── */
/*    Keeps the header in view while scrolling so the burger is always reachable. */

@media ( max-width: 767px ) {
    header.wp-block-template-part:has( .oi-nav--dropdown ) {
        position:   sticky;
        top:        0;
        z-index:    1021;
        background: var(--wp--preset--color--palette-9, #fff);
    }

    /* --oi-admin-bar-offset (theme.js) = the admin bar's visible height: 46px,
       dropping to 0 as the bar scrolls away at ≤600px (WP un-fixes it there).
       A flat 46px left a gap above the header once the bar was gone. */
    .admin-bar header.wp-block-template-part:has( .oi-nav--dropdown ) {
        top: var( --oi-admin-bar-offset, 46px );
    }

    /* Transparent Overlay header types, while they're see-through (the same
       states the theme's overlay rules key on): drop the solid background
       above. The Overlay + Sticky types only clear .oi-site-header, not the
       <header> itself, so without this the header rests on palette-9. */
    body.header-transparent header.wp-block-template-part:has( .oi-nav--dropdown ),
    body:not(.scrolling).header-transparent-sticky header.wp-block-template-part:has( .oi-nav--dropdown ),
    body.home:not(.scrolling).header-transparent-sticky-home header.wp-block-template-part:has( .oi-nav--dropdown ),
    body.home.header-transparent-home header.wp-block-template-part:has( .oi-nav--dropdown ),
    body:not(.home).header-transparent-secondary header.wp-block-template-part:has( .oi-nav--dropdown ) {
        background: transparent;
    }
}

/* Burger over a see-through overlay header: match the nav links, which the
   theme forces to palette-9 in these states. It inherits the nav's text color
   otherwise, which is meant for a solid header and disappears on the hero. */
body.header-transparent .oi-site-header .oi-nav__burger,
body:not(.scrolling).header-transparent-sticky .oi-site-header .oi-nav__burger,
body.home:not(.scrolling).header-transparent-sticky-home .oi-site-header .oi-nav__burger,
body.home.header-transparent-home .oi-site-header .oi-nav__burger,
body:not(.home).header-transparent-secondary .oi-site-header .oi-nav__burger {
    color: var(--wp--preset--color--palette-9);
}

/* ── Classic Mobile Menu — full-width slide-down panel ───────────────────── */

/* vis-mobile (dropdown): same breakpoint variants as offcanvas. */
.oi-nav--dropdown.oi-nav--vis-mobile .oi-nav__burger {
    display: flex;
}

/* Breakpoint = 768 px */
@media ( max-width: 767px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-768 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 768px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-768 .oi-nav__burger {
        display: none;
    }
}

/* Breakpoint = 1024 px (default) */
@media ( max-width: 1023px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-1024 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 1024px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-1024 .oi-nav__burger {
        display: none;
    }
}

/* Breakpoint = 1280 px */
@media ( max-width: 1279px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-1280 > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 1280px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile.oi-nav--collapse-1280 .oi-nav__burger {
        display: none;
    }
}

/* Backwards-compat fallback for dropdown navs without a breakpoint class. */
@media ( max-width: 767px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile:not([class*="oi-nav--collapse-"]) > *:not(.oi-nav__burger) {
        display: none;
    }
}
@media ( min-width: 768px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile:not([class*="oi-nav--collapse-"]) .oi-nav__burger {
        display: none;
    }
}

/* At any width above the smallest possible breakpoint, cancel the slide-down
   panel styles body.oi-offcanvas-open applies. Scoped to all dropdown navs;
   only takes effect once the panel-style overrides would have applied. */
@media ( min-width: 768px ) {
    .oi-nav--dropdown.oi-nav--vis-mobile .wp-block-navigation__container {
        position:   static !important;
        background: none !important;
        box-shadow: none !important;
        border:     none !important;
        padding:    0 !important;
        animation:  none !important;
        transform:  none !important;
    }
}

/* ── Open state ─────────────────────────────────────────────────────────────
   NOTE: inset:auto must come BEFORE top/left/right so it doesn't reset them.
   JS sets --oi-dropdown-top from header getBoundingClientRect().bottom.
   Targets both possible WP nav DOM structures (with/without __responsive-container). */

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__responsive-container,
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__container {
    /* 1. Reset WP's overlay positioning first */
    inset:          auto !important;
    transform:      none !important;

    /* 2. Our full-width panel position */
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            0 !important;
    position:       fixed !important;
    top:            var( --oi-dropdown-top, 60px ) !important;
    left:           0 !important;
    right:          0 !important;
    bottom:         auto !important;
    width:          100% !important;
    max-width:      100% !important;
    max-height:     calc( 100dvh - var( --oi-dropdown-top, 60px ) ) !important;
    overflow-x:     hidden !important;
    overflow-y:     auto !important;
    z-index:        10000 !important;

    /* 3. Visual design */
    background:     var(--wp--preset--color--palette-9, #fff) !important;
    color:          var(--wp--preset--color--palette-3, #1a1a1a) !important;
    border-top:     none !important;
    box-shadow:     none !important;
    padding:        0.375rem 0 0.75rem !important;
    margin:         0 !important;
    list-style:     none !important;
    border-radius:  0 !important;

    animation:      oi-dropdown-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* When __container is nested inside __responsive-container, reset inner element */
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__responsive-container
    .wp-block-navigation__container {
    inset:          auto !important;
    transform:      none !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    position:       static !important;
    background:     none !important;
    box-shadow:     none !important;
    border:         none !important;
    padding:        0 !important;
    width:          100% !important;
    max-height:     none !important;
    overflow:       visible !important;
    animation:      none !important;
}

@keyframes oi-dropdown-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hide WP's native close button */
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__responsive-container-close {
    display: none !important;
}

/* Sibling blocks inside the open dropdown panel — buttons, search, social
   links, etc. The breakpoint rule hides everything except the burger at narrow
   widths, AND in the DOM these blocks are siblings of the <ul> (which is the
   floating panel), not children — so they wouldn't visually appear "inside"
   the panel even if we just unhid them. Solution: pin them as a fixed strip
   at the bottom of the viewport while the dropdown is open. The menu list
   floats from the top, this floats from the bottom; together they bracket
   the page content, which is dimmed by the menu's overlay. */
body.oi-offcanvas-open .oi-nav--dropdown > .wp-block-buttons,
body.oi-offcanvas-open .oi-nav--dropdown > .wp-block-search,
body.oi-offcanvas-open .oi-nav--dropdown > .wp-block-social-links {
    position:        fixed !important;
    bottom:          0 !important;
    left:            0 !important;
    right:           0 !important;
    z-index:         10001 !important;
    display:         flex !important;
    flex-wrap:       wrap !important;
    justify-content: center !important;
    gap:             0.5rem !important;
    padding:         0.75rem 1rem !important;
    margin:          0 !important;
    background:      var(--wp--preset--color--palette-9, #fff) !important;
    border-top:      none !important;
    box-shadow:      none !important;
    animation:       oi-dropdown-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* Buttons block: stretch buttons to fill the row evenly so two CTAs use the
   full width as 50/50 (matches typical mobile-CTA layouts). */
body.oi-offcanvas-open .oi-nav--dropdown > .wp-block-buttons .wp-block-button {
    flex: 1 1 auto !important;
}
body.oi-offcanvas-open .oi-nav--dropdown > .wp-block-buttons .wp-block-button .wp-block-button__link {
    width:      100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* When a sibling block (buttons / search / social) is pinned to the bottom
   as a strip, stretch the menu panel ALL the way to the viewport bottom so
   no gap can ever show through between them. The strip then layers on top
   of the panel's bottom edge — both share the same background so the seam
   is invisible. The panel reserves padding-bottom equal to a typical strip
   height so menu items don't sit underneath the strip. */
body.oi-offcanvas-open .oi-nav--dropdown:has( > .wp-block-buttons, > .wp-block-search, > .wp-block-social-links ) .wp-block-navigation__container {
    bottom:         0 !important;
    max-height:     none !important;
    padding-bottom: var( --oi-dropdown-bottom-strip, 80px ) !important;
}

/* ── Nav items — full-width tap targets ──────────────────────────────────── */

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item {
    display: block !important;
    width:   100% !important;
}

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item__content {
    display:          block !important;
    width:            100% !important;
    box-sizing:       border-box !important;
    padding:          0.875rem 1.5rem !important;
    border-bottom:    1px solid var(--wp--preset--color--palette-6, rgba(0, 0, 0, 0.07)) !important;
    color:            var(--wp--preset--color--palette-3, #1a1a1a) !important;
    text-decoration:  none !important;
    font-size:        1rem !important;
    font-weight:      500 !important;
    line-height:      1.5 !important;
    transition:       background-color 0.15s ease, color 0.15s ease !important;
}

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item__content:hover,
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item__content:focus-visible {
    background-color: var(--wp--preset--color--palette-8, rgba(0, 0, 0, 0.04)) !important;
    color:            var(--wp--preset--color--palette-1, #3858e9) !important;
    outline:          none !important;
}

/* ── Sub-menus — collapsible accordion ───────────────────────────────────
   Collapsed by default. mobile-menu.js adds a chevron button
   (.oi-nav__sub-toggle) to every parent row; the chevron or the parent label
   toggles .oi-sub-open on the <li>. Core's hover / focus-within /
   aria-expanded submenu states are deliberately ignored here — on touch they
   fight the toggle (focus stays on the tapped button, so a submenu opened by
   :focus-within could never be closed). Core's closed state is height:0 +
   overflow:hidden, so the open state must restore both. */

/* Row: label (grows) + chevron; the submenu wraps to its own full-width line.
   flex-direction must be explicit — core leaves submenu parents in a column,
   where flex-basis:100% on the submenu means 100% HEIGHT (new column). */
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item.has-child {
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      wrap !important;
    align-items:    stretch !important;
}

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    flex:      1 1 0% !important;
    width:     auto !important;
    min-width: 0 !important;
}

/* Core's own arrow (hover-mode <button> / click-mode <span>) — the chevron replaces it. */
body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__submenu-icon {
    display: none !important;
}

.oi-nav__sub-toggle {
    display: none;
}

body.oi-offcanvas-open .oi-nav--dropdown .oi-nav__sub-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 3.25rem;
    margin:          0;
    padding:         0;
    background:      transparent;
    border:          0;
    border-bottom:   1px solid var(--wp--preset--color--palette-6, rgba(0, 0, 0, 0.07));
    color:           var(--wp--preset--color--palette-3, #1a1a1a);
    cursor:          pointer;
    transition:      background-color 0.15s ease, color 0.15s ease;
}

body.oi-offcanvas-open .oi-nav--dropdown .oi-nav__sub-toggle:hover,
body.oi-offcanvas-open .oi-nav--dropdown .oi-nav__sub-toggle:focus-visible {
    background-color: var(--wp--preset--color--palette-8, rgba(0, 0, 0, 0.04));
    color:            var(--wp--preset--color--palette-1, #3858e9);
}

body.oi-offcanvas-open .oi-nav--dropdown .oi-nav__sub-toggle:focus-visible {
    outline:        2px solid var(--wp--preset--color--palette-1, #3858e9);
    outline-offset: -2px;
}

.oi-nav__sub-toggle svg {
    width:      12px;
    height:     12px;
    transition: transform 0.2s ease;
}

body.oi-offcanvas-open .oi-nav--dropdown .has-child.oi-sub-open > .oi-nav__sub-toggle svg {
    transform: rotate(180deg);
}

@media ( prefers-reduced-motion: reduce ) {
    .oi-nav__sub-toggle,
    .oi-nav__sub-toggle svg {
        transition: none;
    }
}

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__submenu-container {
    position:   static !important;
    display:    none !important;
    flex-basis: 100% !important;
    width:      100% !important;
    min-width:  0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding:    0 !important;
    opacity:    1 !important;
    visibility: visible !important;
}

body.oi-offcanvas-open .oi-nav--dropdown .has-child.oi-sub-open > .wp-block-navigation__submenu-container {
    display:  block !important;
    height:   auto !important;
    overflow: visible !important;
}

body.oi-offcanvas-open .oi-nav--dropdown
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: 2.5rem !important;
    font-size:    0.9375rem !important;
    font-weight:  400 !important;
    color:        var(--wp--preset--color--palette-4, #555) !important;
}

/* Third level and deeper: one more step of indent so nesting stays readable. */
body.oi-offcanvas-open .oi-nav--dropdown
    .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: 3.5rem !important;
}

/* ── vis-always: burger always visible, all other nav children always hidden
   (covers the inline <ul> AND any sibling blocks like a Client Login button). */

.oi-nav--offcanvas.oi-nav--vis-always .oi-nav__burger,
.oi-nav--dropdown.oi-nav--vis-always  .oi-nav__burger {
    display: flex;
}
.oi-nav--offcanvas.oi-nav--vis-always > *:not(.oi-nav__burger),
.oi-nav--dropdown.oi-nav--vis-always > *:not(.oi-nav__burger) {
    display: none;
}

/* ══ Offcanvas panel (output in wp_footer) ════════════════════════════════ */

.oi-offcanvas-panel {
    position:        fixed;
    top:             0;
    z-index:         9999;
    height:          100dvh;
    overflow-y:      auto;
    visibility:      hidden;
    transition:      transform 0.3s ease, visibility 0.3s ease;
    display:         flex;
    flex-direction:  column;
}

/* Stretch template-part content to fill full panel height */
.oi-offcanvas-panel > * {
    flex: 1 0 auto;
    min-height: 100%;
}

/* Admin bar offset */
.admin-bar .oi-offcanvas-panel {
    top: 32px;
    height: calc( 100dvh - 32px );
}
@media ( max-width: 782px ) {
    .admin-bar .oi-offcanvas-panel {
        top: 46px;
        height: calc( 100dvh - 46px );
    }
}

/* Direction variants */
.oi-offcanvas-panel--right {
    right:     0;
    width:     min( 360px, 90vw );
    transform: translateX(100%);
}
.oi-offcanvas-panel--left {
    left:      0;
    width:     min( 360px, 90vw );
    transform: translateX(-100%);
}
.oi-offcanvas-panel--top {
    top:        0;
    left:       0;
    right:      0;
    width:      100%;
    height:     auto;
    max-height: 90dvh;
    transform:  translateY(-100%);
}
.oi-offcanvas-panel--bottom {
    bottom:     0;
    top:        auto;
    left:       0;
    right:      0;
    width:      100%;
    height:     auto;
    max-height: 90dvh;
    transform:  translateY(100%);
}


/* Open state */
body.oi-offcanvas-open .oi-offcanvas-panel {
    transform:  none;
    visibility: visible;
}

/* ── Backdrop ────────────────────────────────────────────────────────────── */

body.oi-panel-open::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.45);
    z-index:    9998;
    animation:  oi-backdrop-in 0.3s ease forwards;
}

/* Dropdown: backdrop must sit BELOW the header's stacking context (min z-index: 100)
   so the fixed dropdown panel (inside that context) renders above it. */
body.oi-panel-open:has( .oi-nav--dropdown )::before {
    top:        var( --oi-dropdown-top, 60px );
    background: rgba(0, 0, 0, 0.25);
    z-index:    50;
}

@keyframes oi-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}