/* ── MobileMenu — Base Styles ──────────────────────────────────────────────
   These are the structural styles required for the slide-in behaviour.
   Visual design (colours, typography, sizing) is entirely up to you.

   All rules are scoped to [data-mobile-menu], which the JS adds to the nav
   element only when below the breakpoint. This means styles are automatically
   inactive on desktop — no media queries needed.
   ────────────────────────────────────────────────────────────────────────── */

/* Submenu panels: cover the nav, start off-screen to the right */
[data-mobile-menu] [data-submenu] {
  position: fixed;
  inset: 0;
  transform: translateX(100%) !important;
  transition: transform var(--mm-duration, 0.3s) var(--mm-easing, ease);
  background: white;
  z-index: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 40px;
}

[data-mobile-menu] [aria-hidden="true"] {
  opacity: 0 !important;
}

/* Slide into view when active */
[data-mobile-menu] [data-submenu].is-active {
  transform: translateX(0) !important;
  opacity: 1;
}

[data-mobile-menu] .w-dropdown:has([data-submenu].is-active) {
  z-index: 905;
}

[data-mobile-menu] [data-submenu].w-dropdown-list {
  display: block;
}

[data-mobile-menu] [data-submenu-trigger] {
  cursor: pointer;
}

/* Back button: hidden at root level (no submenu open) */
[data-mobile-menu] [data-mobile-menu-back] {
  visibility: hidden;
  z-index: 999;
  position: relative;
  cursor: pointer;
}

/* Back button: visible when a submenu panel is active */
[data-mobile-menu] [data-mobile-menu-back].is-active {
  visibility: visible;
}