/* ==================================================================
   V3.6.6 — Final mobile navigation layer model
   This stylesheet is deliberately enqueued AFTER theme.css. It replaces
   the accumulated historical mobile drawer overrides with one explicit
   stacking order. The drawer remains inside the header's stacking context,
   so the backdrop can never sit above its links or dim its content.
   ================================================================== */
@media (max-width: 900px) {
  .utility-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1300 !important;
    isolation: isolate;
  }

  .site-header,
  body.nav-open .site-header {
    position: sticky !important;
    top: 30px !important;
    z-index: 1302 !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header .header-inner {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }

  /* The dimmer is intentionally below the complete header stacking context. */
  .nav-backdrop {
    position: fixed !important;
    top: 98px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1301 !important;
    display: block !important;
    background: rgba(5, 16, 25, .50) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    touch-action: manipulation;
    transition: opacity .2s ease, visibility .2s ease !important;
  }

  body.nav-open .nav-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* The drawer lives within .site-header, therefore it paints above the dimmer. */
  .site-header .site-nav,
  .site-nav {
    position: fixed !important;
    top: 98px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: min(390px, calc(100% - 28px)) !important;
    max-width: calc(100% - 28px) !important;
    height: calc(100dvh - 98px) !important;
    margin: 0 !important;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    contain: none !important;
    background: #fff !important;
    color: #152432 !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translate3d(105%, 0, 0) !important;
    transition: transform .24s ease, visibility 0s linear .24s !important;
    will-change: transform;
  }

  body.nav-open .site-header .site-nav,
  body.nav-open .site-nav {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .24s ease !important;
  }

  /* Every interactive child must explicitly receive the tap target. */
  .site-header .site-nav a,
  .site-header .site-nav button,
  .site-nav a,
  .site-nav button {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

@media (max-width: 540px) {
  .site-header .site-nav,
  .site-nav {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    padding-inline: 16px !important;
  }
}


/* ==================================================================
   V3.8.3 — Mobile menu visible close button when opened mid-scroll
   Keeps the close icon always visible in the viewport.
   ================================================================== */
@media (max-width: 900px) {
  body.nav-open .menu-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 40px) !important;
    right: 14px !important;
    z-index: 1405 !important;
    box-shadow: 0 10px 24px rgba(6, 27, 43, .20) !important;
  }
  body.nav-open .menu-toggle__open { display: none !important; }
  body.nav-open .menu-toggle__close { display: block !important; }
}
@media (max-width: 540px) {
  body.nav-open .menu-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 38px) !important;
    right: 10px !important;
  }
}