/* Fortified Networks — shared mobile navigation drawer.

   Same interaction contract as #booking-drawer in drawer.css (backdrop fade,
   focus trap + Escape + body-scroll-lock + Lenis-stop in the JS side, focus
   restore on close) so the accessibility work only had to be solved once —
   but its own class names, not drawer.css's, since that file's rules are
   scoped to the #booking-drawer id specifically and reusing its class names
   under a different id wouldn't pick up any of them.

   Slides from the RIGHT, matching where its own trigger (.nav-toggle) sits
   in the header at every width the drawer is reachable from (hero.css:
   header-row collapses to "brand toggle" with the toggle in the right grid
   area below 1339px). A drawer opening from the edge opposite its trigger
   reads as disconnected from the tap that opened it -- the panel should
   feel like it's erupting from the button, not from nowhere. #booking-drawer
   (drawer.css) already opens from the right for the same reason; this just
   brings the nav drawer in line with it instead of deliberately opposing
   it. */

.nav-drawer { position: fixed; inset: 0; z-index: 60; }
.nav-drawer[hidden] { display: none; }

.nav-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(1, 3, 20, 0);
  transition: background 280ms var(--ease-in-out);
}
.nav-drawer.is-open .nav-drawer-backdrop { background: rgba(1, 3, 20, .55); }

.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 84vw;
  background: var(--ink);
  color: #f7f8fa;
  overflow-y: auto;
  /* Same fix as #booking-drawer .drawer-panel in drawer.css -- a scrollable
     region nested inside this drawer's position:fixed ancestor can fail to
     respond to touch scroll at all on iOS Safari without this. Preventive
     here (nav list is short enough to rarely need it), but it's the same
     structural pattern that broke the booking drawer on a real device. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(100%);
  box-shadow: -30px 0 70px rgba(1, 3, 20, .4);
  transition: transform 320ms var(--ease-drawer);
  display: flex;
  flex-direction: column;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-head {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-drawer-head .wordmark img {
  height: 19px;
  width: auto;
  display: block;
}

/* Was .1em -- see hero.css main-nav a for why this is now .18em: one
   shared tracking value for every 11px all-caps mono label site-wide. */
.nav-drawer-close {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 12px;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nav-drawer-close:hover { background: rgba(255, 255, 255, .12); }

.nav-drawer-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
}
.nav-drawer-list a {
  display: block;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-drawer-list a:hover { color: #f7f8fa; background: rgba(255, 255, 255, .05); }
/* The current page in the drawer, mirroring [aria-current] usage in the
   inline .main-nav on every subpage. */
.nav-drawer-list a[aria-current] { color: #f7f8fa; background: rgba(255, 255, 255, .07); }

.nav-drawer-actions {
  margin-top: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.nav-drawer-actions .cta-solid { justify-content: center; }
/* A bare left-aligned text link sitting alone under a full-width solid
   button read as an orphaned scrap, not a second action — the same bug as
   .hero-incident/.close-incident (hero.css) at the same breakpoint. Bordered
   and stretched to match the button above it, so the pair reads as one
   primary/secondary group instead of a button plus a stray line of text. */
.nav-drawer-incident {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-drawer-incident:hover {
  color: #f7f8fa;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .05);
}

/* ---------- the trigger ---------- */
.nav-toggle {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: inherit;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle-bars::before { transform: translate(-50%, calc(-50% - 5px)); }
.nav-toggle-bars::after { transform: translate(-50%, calc(-50% + 5px)); }

/* Bars-to-X on open, driven by the button's own aria-expanded rather than a
   JS-toggled class — one less thing for the JS side to keep in sync.
   The middle bar hides via `background: transparent`, not `opacity: 0` —
   opacity on .nav-toggle-bars composites its ::before/::after with it, so
   fading the middle bar to 0 would have taken the top and bottom bars down
   with it instead of leaving them to form the X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* The header's own toggle sits at z-index:5 (hero.css), under the drawer's
   z-index:60 backdrop but still visible through it — rgba(1,3,20,.55) is
   translucent, not opaque. Left as-is, its bars-to-X state doubles the
   drawer's own "Close" button: two close affordances reading as one
   redundant, inelegant pair. Fading it out (visibility, not just opacity,
   so it also drops out of the tab order rather than sitting as an invisible
   stop) once the drawer is open leaves exactly one way to close it: the
   drawer's own labelled button, plus backdrop-click and Escape underneath. */
.nav-toggle[aria-expanded="true"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), visibility 0ms linear 160ms;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer-backdrop,
  .nav-drawer-panel,
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition-duration: 1ms; }
}