/* ============================================================================
   nav.css — the site nav, extracted from home.css.

   ⚠ IT LIVED IN home.css AND ONLY home.css, which is why extracting the
   MARKUP alone would not have been enough: six documents would have injected
   a nav and rendered it unstyled. The rules below are moved verbatim — no
   redesign rode along with the move, so a diff of this file against the block
   that left home.css is empty of intent.

   Depends on base.css for .btn, .wrap and --nav-h, so every document that
   loads this one must load that one first. privacy.html and terms.html gained
   base.css for exactly that reason; their own <style> still follows it and so
   still wins on everything it sets.
   ========================================================================== */

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--nav-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.brand img { width: 30px; height: auto; }
.brand__word {
  font-size: 1.3rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.nav__tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
}
.navtab {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.navtab:hover { color: var(--text); background: var(--surface-sunken); }

/* Search: a real-looking field that opens the overlay. */
.nav__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  margin-left: auto;
  padding: 9px var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__search:hover { border-color: var(--line-strong); background: var(--bg); }
.nav__search svg { flex: 0 0 auto; width: 17px; height: 17px; }
.nav__search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.nav__iconbtn {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--text);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease);
}
.nav__iconbtn:hover { background: var(--surface-sunken); }
.nav__iconbtn svg { width: 21px; height: 21px; }

/* TWO breakpoints, not one, because two different things run out of room.
   
   <=1000px — the TABS collapse into the menu overlay and the inline search bar
   gives way to the icon. Raised from 900 after the Download button landed: the
   search bar is the only flex-grow item in the row, so it absorbed the entire
   cost and measured 92px at 901px and 131px at 940px, against a 140px floor.
   It clears that floor at ~949px, so 1000 leaves margin rather than sitting on
   the edge.

   <=900px — the nav DOWNLOAD button goes too. Below that the row simply does
   not fit: at 390px it needed 439px of 390, a 49px overflow and a horizontal
   scrollbar on every phone. The button is not lost, it moves into the menu
   overlay, and the hero carries one regardless. Nav returns to
   logo - search - Fetch+ - burger, which is the configuration that passed. */
/* ⚠ 1030px, DERIVED FROM THE ROW'S OWN CONTENT — not a device breakpoint,
   and NOT the 1000px this used to be. Measured at 1600px, where nothing is
   compressed:

     wrap padding                     24 + 24 =  48
     brand                                        93
     tabs (Forecast/Maps/Guides/About)           302
     search field, at its FLOOR                  167
     nav end (theme, download, sign in, Fetch+)  356
     three 20px gaps between the four children    60
                                                ----
                                                1026  ->  1030

   THE SEARCH FLOOR IS THE BINDING CONSTRAINT, and it is content too. The
   field is 61px of chrome (16 + 16 padding, 12 gap, 17 icon) plus its
   placeholder. The full placeholder is 231px of text; the smallest
   truncation that still NAMES what it searches is "Search spots…" at 106px,
   so 106 + 61 = 167. Below that it degrades to "Search…", which names
   nothing — and at that point the icon-only button IS the better control,
   which is exactly what the fallback nav uses.

   So 1000px was slightly too low: between 1000 and 1026 the tabs showed
   while the search sat under its own floor. */
@media (max-width: 1030px) {
  .nav__tabs,
  .nav__search,
  /* Account joins the burger at the same width the sign-in button does — it
     is the same kind of control (a destination, not a map affordance) and the
     bar has no room for another button once the tabs collapse. The mobile
     menu carries it; see index.html's menu-list. */
  .nav__account,
  .nav__signin { display: none; }
  .nav__iconbtn { display: grid; }
  .nav__end { margin-left: auto; }
}
@media (max-width: 900px) {
  .nav__download { display: none; }
}
@media (max-width: 380px) {
  .brand__word { display: none; }
}

/* ── Theme toggle ─────────────────────────────────────────────────────────
   ⚠ SHOWN AT EVERY WIDTH — it is the ONLY theme control above 1000px, where
   the burger that opens the menu (and its labelled segmented control) is
   display:none. The .nav__iconbtn rule hides icon buttons on desktop, so this
   one opts back in rather than inheriting that. */
.nav__theme { display: grid; }
.nav__theme svg { width: 20px; height: 20px; }
/* Which glyph shows is CSS keyed off the theme: no JS branch to fall out of
   step with the page, and it is correct on the very first paint because the
   inline <head> seed has already set data-theme. */
.nav__theme-moon { display: none; }
:root[data-theme='dark'] .nav__theme-sun { display: none; }
:root[data-theme='dark'] .nav__theme-moon { display: block; }

/* ── Nav hover menus ──────────────────────────────────────────────────────
   The panel is positioned against a host wrapper rather than the tab itself,
   so the tab keeps its place in the flex row and the panel can overhang
   without pushing anything. Trigger and panel are ONE hover region — see the
   grace period in js/nav-menus.js — so there is deliberately no gap between
   them for the pointer to fall through. */
.navtab-host { position: relative; display: inline-flex; }
.navmenu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  width: max-content; min-width: 260px; max-width: min(92vw, 420px);
  /* ⚠ PADDING, NOT MARGIN — the 6px used to be margin-top, which left a
     6px band belonging to NEITHER the trigger nor the panel. Measured:
     trigger bottom 54, panel top 60, and a pointer at y=58 hovering
     nothing at all. Crossing it fired the trigger's leave with no
     matching panel enter, so the menu depended on the grace timer to
     survive an ordinary downward move. As padding the panel's box starts
     at the trigger's edge: the two touch, and the grace period goes back
     to covering only what it was for — diagonal travel. */
  padding: 14px 8px 8px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E3E9F0);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.14);
}
:root[data-theme='dark'] .navmenu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.navmenu[hidden] { display: none; }

.navmenu__modes { display: flex; gap: 4px; margin-bottom: 8px; }
.navmenu__mode {
  flex: 1 1 0; padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--line, #E3E9F0); background: var(--bg, #fff);
  font: 600 13px/1 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-2, #5B6B7C); cursor: pointer;
}
.navmenu__mode[aria-selected='true'] {
  background: var(--accent, #12A594); border-color: var(--accent, #12A594); color: #fff;
}

/* ⚠ THE SEARCH IS PINNED AND THE RESULTS SCROLL UNDER IT. A deep region list
   that scrolls the whole panel takes the field off screen, and then typing to
   filter means scrolling back up first — the moment a filter stops being
   useful. */
.navmenu__panel-inner { display: flex; flex-direction: column; min-height: 0; }
.navmenu__search {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--line, #E3E9F0); border-radius: var(--r-md, 10px);
  background: var(--surface-sunken, #F4F7FA); color: var(--text-1, #16202C);
  font: 500 14px/1.2 var(--font-sans, "Inter", system-ui, sans-serif);
}
.navmenu__search:focus-visible { outline: 2px solid var(--accent, #12A594); outline-offset: 1px; }
.navmenu__results {
  overflow-y: auto; max-height: min(52vh, 420px);
  overscroll-behavior: contain; min-height: 0;
}

.navmenu__row {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  box-sizing: border-box;
  padding: 8px 10px; border: 0; border-radius: var(--r-md, 10px);
  background: none; text-align: left; text-decoration: none; cursor: pointer;
  color: inherit; font: inherit;
}
.navmenu__row:hover, .navmenu__row:focus-visible { background: var(--surface-sunken, #F4F7FA); }
.navmenu__row:focus-visible { outline: 2px solid var(--accent, #12A594); outline-offset: -2px; }
.navmenu__row[aria-disabled='true'] { opacity: 0.55; cursor: default; }

/* The Favorites destination sits below the region content, set off by a rule
   so it reads as a link out of the menu rather than another region row. */
.navmenu__rule { height: 1px; background: var(--line, #E3E9F0); margin: 6px 8px; }
.navmenu__fav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
}
.navmenu__fav:hover, .navmenu__fav:focus-visible { background: var(--surface-sunken, #F4F7FA); }
.navmenu__fav:focus-visible { outline: 2px solid var(--accent, #12A594); outline-offset: -2px; }
.navmenu__fav-name { font-weight: 600; color: var(--text); }
.navmenu__fav-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.navmenu__row-name {
  font: 600 14px/1.3 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-1, #16202C);
}
.navmenu__row-sub {
  font: 500 12px/1.3 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-2, #5B6B7C);
}
.navmenu__empty {
  margin: 0; padding: 10px;
  font: 500 13px/1.4 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--text-2, #5B6B7C);
}