/* ── 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;
}

/* ══ 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);
    }

    .admin-bar header.wp-block-template-part:has( .oi-nav--dropdown ) {
        top: 46px;
    }
}

/* ── 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 — shown inline, indented ──────────────────────────────────── */

body.oi-offcanvas-open .oi-nav--dropdown .wp-block-navigation__submenu-container {
    position:   static !important;
    display:    block !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
    .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;
}

/* ── 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; }
}