/* ─────────────────────────────────────────────────────────────────────────
   AssurePort — Mobile hamburger nav (Sprint 4.5)

   Shared across 9 marketing pages: marketing, tools, docs, wiki, blog, faq,
   changelog, status, feedback, positioning. Each page already has a
   <header class="nav"> + <div class="nav-links">. We layer this on top.

   Strategy:
     - Hamburger button (.nav-toggle) sits inside .nav-inner, after .brand.
     - <720px:  hamburger visible, .nav-links collapses into slide-down panel.
     - ≥720px:  hamburger hidden, .nav-links displays as before (no override).
     - Drawer = position:fixed below header so we don't shift layout.
     - Touch target ≥44px (Apple HIG); focus-visible ring for keyboard users.
     - aria-expanded + aria-controls on the toggle; .nav-links gets an id.
     - Click outside / Esc / link-click closes the menu.

   No JS dependency at load — the JS adds .is-open / aria-expanded; CSS does
   the rest. If JS is blocked, .nav-toggle still visible but inert (graceful
   degradation — links remain reachable via "skip to main" links upstream).
   ───────────────────────────────────────────────────────────────────────── */

/* Toggle button — hidden by default (desktop); shown via media query. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background .12s, border-color .12s;
}
.nav-toggle:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--primary, #7C5CFF);
  outline-offset: 2px;
}
.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .18s ease, top .18s ease;
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after  { top:  6px; }

/* Open state: hamburger morphs into an X. */
.nav-toggle[aria-expanded="true"] .bar {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .bar::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile breakpoint: ≤720px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Re-style nav-inner so brand + toggle align on a tight row. */
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* The drawer — full-width panel below the header.
     We override the original "display:none for non-.btn anchors" rule from
     marketing.html by re-displaying them inside the drawer.
     `display: block !important` is needed because some pages have
     `.nav-links a:not(.btn) { display: none }` at higher specificity. */
  .nav-links {
    /* Override desktop horizontal layout */
    display: none !important;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 0 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
  }
  .nav-links.is-open {
    display: flex !important;
  }
  .nav-links a,
  .nav-links a:not(.btn),
  .nav-links select {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.3;
    border-radius: 6px;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(255, 255, 255, .04);
  }
  .nav-links a:focus-visible {
    outline: 2px solid var(--primary, #7C5CFF);
    outline-offset: -2px;
  }
  /* Buttons (.btn ghost / .btn primary) keep their original look but go to
     full width inside the drawer, with a small separator above. */
  .nav-links .btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
  .nav-links .btn + .btn {
    margin-top: 4px;
  }
  /* Language switcher: full-width pill rather than a tiny dropdown. */
  .nav-links select#lang-switcher {
    width: 100%;
    margin-top: 10px;
  }
}

/* Prefer-reduced-motion users get an instant toggle. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   WCAG 2.1 AA — site-wide a11y baseline (Sprint 4.5)

   Loaded on every public page via assets/mobile-nav.css. Keep these rules
   conservative so they don't override per-page styles unexpectedly.
   ───────────────────────────────────────────────────────────────────────── */

/* Visible focus ring for keyboard users — never for mouse/touch.
   Uses brand --primary token. Fallback to Sentinel Edge purple. */
*:focus-visible {
  outline: 2px solid var(--primary, #7C5CFF);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary, #7C5CFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .18);
}

/* Skip-to-main link — invisible until focused. Pages can include
   <a href="#main" class="skip-link">Skip to main content</a> at body top. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: var(--primary, #7C5CFF);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 16px;
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}