/* ============================================================================
   ls_navmobile.css — the mobile/tablet hamburger nav, for EVERY page.

   OWNER (issue #98): "the hamburger icon is only available on the homepage
   ... if I navigate to any other page, the hamburger icon disappears [which]
   makes it very difficult to navigate around the website. Please ensure that
   the hamburger icon appears on every page of every device size that is not
   desktop."

   THE BUG THIS FIXES
   Every DG4 family stylesheet hides the desktop nav at <=980px
   (`#hw-solar .hw-nav { display: none }`, and the identical rule in
   ls_landing / ls_grid / ls_latest / ls_pass / ls_homepage plus the 53
   inline-CSS stragglers). Only the homepage put anything back: the
   `.hw-nav-toggle` + `.hw-mobile-nav` pair, declared solely under `#hw-dg4`
   in ls_homepage.css and marked up solely in html/homepage/index.html. So on
   the other 1,365 header-bearing pages a phone or portrait tablet got NO
   navigation at all — not a broken menu, none.

   WHY A SITEWIDE SHEET + A SCRIPT, NOT 1,365 PAGE EDITS
   Same reasoning as ls_notice.css and ls_account.css: the thing every page
   must carry is stamped in by `copy_page()` in
   website/cloudflare/build_site.py, so a page cannot be authored without it
   and no fleet-wide HTML rewrite is needed. The markup is built at view time
   by /assets/js/navmobile.js from the links already in that page's own
   `<nav class="hw-nav">`, which is what keeps each page's own `hw-nav-here`
   current-page marker correct without a per-family template.

   ⚠️ THIS SHEET IS UNPREFIXED ON PURPOSE. Page wrappers differ by family
   (#hw-solar 1,280 pages, #hw-stpage 52, #hw-topic 25, #hw-pass 5, plus
   #hw-topics / #hw-states / #hw-latest / #hw-dg4 one each), so an ID-scoped
   rule would reach exactly one family. Everything here is class-scoped to
   `.hw-nav-toggle` / `.hw-mobile-nav`, which no other stylesheet declares
   outside `#hw-dg4`.

   ⚠️ WHY THE !important. Host pages reset with ID selectors —
   `#hw-solar, #hw-solar * { margin: 0; padding: 0 }` and
   `#hw-solar a { color: inherit }` — and an ID beats any number of classes,
   so a plain `.hw-mobile-nav a { padding: 14px 0 }` collapses to zero
   padding and the menu renders as unreadable stacked text. Exactly the trap
   ls_account.css documents. Every !important below is defending against a
   host page's ID selector.

   ⚠️ `display` and `position` are DELIBERATELY NOT !important. That leaves
   `#hw-dg4 .hw-nav-toggle { display: none / inline-flex }` in ls_homepage.css
   the authority on the homepage's own toggle (identical values, same 980px
   breakpoint), so the live homepage is not hijacked by this file — it keeps
   behaving exactly as it did. Nothing else in the repo declares
   `display`/`position` on these classes, so the plain rules win everywhere
   else.

   ⚠️ PX ONLY, NEVER REM — the retired Ghost screen.css still ships on 1,541
   pages with html{font-size:62.5%}, so a rem renders at 62.5% of what you
   meant.

   ⚠️ THE DISCLAIMER BAR IS NOT NEGOTIABLE. The open menu is
   `position: absolute` under the header at z-index 20; the frozen legal
   notice is `position: sticky; top: 0; z-index: 2000` (ls_notice.css) and
   sits ABOVE the header in the document, so the menu can neither cover it
   nor push it off screen. Never raise this z-index past it.

   Design authority: .claude/skills/design-director/SKILL.md (§1 tokens,
   §3 rule 17, §5 header contract). Values below are copied from the live
   homepage's `#hw-dg4` block so the two are visually identical.
   ========================================================================= */

/* ── the button ──────────────────────────────────────────────────────── */
.hw-nav-toggle {
  display: none;                 /* revealed in the media query below */
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: none !important;
  background: none !important;
  border: none !important;
  color: rgba(244, 241, 233, 0.92) !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;  /* host resets zero every margin */
}
/* No :hover and no custom :focus-visible here on purpose. This sheet also
   loads on the homepage, and the brief for issue #98 was explicit that the
   homepage's existing hamburger must not change — so every declaration in
   this file either matches ls_homepage.css's `#hw-dg4` block exactly or is
   defensive-only. The browser's own focus ring is left intact (nothing here
   sets `outline: none`), so keyboard users are no worse off than today. */
.hw-nav-toggle svg { display: block; }

/* the two icons swap on aria-expanded, so state lives in one attribute */
.hw-nav-toggle .hw-nav-toggle-close { display: none; }
.hw-nav-toggle[aria-expanded="true"] .hw-nav-toggle-open { display: none; }
.hw-nav-toggle[aria-expanded="true"] .hw-nav-toggle-close { display: block; }

/* ── the menu ────────────────────────────────────────────────────────── */
.hw-mobile-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(19, 24, 34, 0.82) !important;   /* --bg-panel */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 18px 40px rgba(4, 5, 8, 0.5) !important;
  z-index: 20;
  flex-direction: column;
  padding: 6px 22px 10px !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
.hw-mobile-nav.hw-open { display: flex; }

.hw-mobile-nav a {
  display: block !important;
  color: rgba(244, 241, 233, 0.92) !important;      /* --ink at header opacity */
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  text-decoration: none !important;                 /* component link, never underlined */
  padding: 14px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;  /* --hairline */
}
.hw-mobile-nav a:last-child { border-bottom: none !important; }
/* the page's own current-page marker, cloned across from .hw-nav */
.hw-mobile-nav a.hw-nav-here { color: #ac7d46 !important; }       /* --gold */
.hw-mobile-nav a:hover,
.hw-mobile-nav a:focus { color: #e0a04c !important; }             /* --gold-bright */

/* ── escaping the hero's clip while the menu is open ─────────────────── */
/* Every family that draws a capitol plate behind the header wraps it in
   `.hw-hero { overflow: hidden }` (ls_evergreen 94, ls_landing 102,
   ls_latest 89, ls_homepage 89, ls_pass 228). On the homepage the hero is
   ~1,100px tall so the open menu fits inside it; on an article or state page
   at 390px the hero ends around 390px and the menu's last item ("Latest")
   was being sliced off — caught in visual QA, not in any static check.
   navmobile.js tags the clipping ancestors only while the menu is open, so
   the hero's own clip is untouched the rest of the time. Nothing can bleed
   out of the released hero: `.hw-hero-bg` and `.hw-hero-grade` are both
   `position: absolute; inset: 0`, so they are sized to the hero, not
   trimmed by it. */
.hw-nav-unclip { overflow: visible !important; }

/* ── the reveal: everything that is not desktop ──────────────────────── */
/* 980px is the site's own breakpoint — the exact width at which every
   family stylesheet hides `.hw-nav`. Keeping the two in lockstep is what
   guarantees a page never shows both, or neither. */
@media (max-width: 980px) {
  /* containing block for the absolutely positioned menu. Scoped inside the
     media query so desktop layout is provably untouched; #hw-dg4 and
     #hw-pass already set this themselves, to the same value. */
  .hw-header { position: relative; }
  .hw-nav-toggle { display: inline-flex; }
}

/* ── room for the button on a phone ──────────────────────────────────── */
/* ls_homepage.css shrinks the homepage's header furniture below 480px
   (gap 12, wordmark 26px/10.5px, Subscribe 10px 14px @11px) — and that,
   not luck, is why the homepage's hamburger has always fitted at 390px.
   No other family stylesheet has a 480px breakpoint at all: their header
   furniture stays full size, and measured at 390px the logo (175px) plus
   .hw-header-right (147px) plus 44px of wrap padding already came to 366 of
   390 available. Adding a 34px button overflowed the flex row, wrapping the
   wordmark to "HOA / A" and doubling the header's height (measured, 41px ->
   68px). Those families were also ALREADY wrapping at 360px before this
   change, with no hamburger involved.

   So the homepage's own 480px treatment is applied to every header, values
   copied verbatim from ls_homepage.css. On the homepage these are identical
   to what #hw-dg4 already computes, so it renders exactly as before;
   everywhere else the header now matches the reference implementation and
   fits the button with room to spare (309px of content at 390px wide).
   Scoped to `.hw-header` so a page's other gold buttons are untouched. */
@media (max-width: 480px) {
  .hw-header .hw-header-right { gap: 12px !important; }
  .hw-header .hw-logo .hw-logo-hoa { font-size: 26px !important; }
  .hw-header .hw-logo .hw-logo-weekly {
    font-size: 10.5px !important;
    letter-spacing: 0.3em !important;
  }
  .hw-header .hw-btn-gold {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
}