/* Site navigation bar — the one copy, written to landing_page/assets/nav.css
   by scripts/site/build_nav.py and loaded by every marketing page. Edit here,
   never in landing_page/assets/. The markup lives next door in nav.html; the
   two move together.

   Tokens (--ink-2, --cream-2, --sage, --border-l) are defined by each page's
   own :root — identical hexes on both sides, per landing_page/CLAUDE.md
   "Style parity with the app". */

/* Published so a page's own sticky rows (the crop hub's search + chip bar)
   can sit exactly under the nav instead of guessing its height. The
   Download cap is the tallest child, so this only moves when it does. */
:root { --nav-h: 68px; }

nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 243, 238, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-l);
}
/* Follows each page's own content column so the brand never sits off the
   page grid: the crop library wraps at 1080px, the home page at 1180px. */
nav.top .inner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px; max-width: var(--nav-w, 1080px); margin: 0 auto;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font-weight: 800; font-size: 22px; letter-spacing: -.2px; color: var(--ink);
}
.brand svg { width: 30px; height: 30px; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block; padding: 8px 12px; border-radius: 100px;
  font-size: 14px; font-weight: 700; letter-spacing: -.1px; color: var(--ink-2);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--cream-2); }
.nav-links a[aria-current] { color: var(--sage); background: var(--sage-mist); }

/* The Download cap is pinned here rather than left to each page's .btn.sm —
   the home page and the crop library size and shadow that class differently,
   and the nav is the one place both are on screen back to back. */
nav.top .btn.sm { padding: 9px 16px; font-size: 13px; box-shadow: 0 4px 0 0 var(--sage-dark); }
nav.top .btn.primary { background: var(--sage); }
nav.top .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--sage-dark); }
nav.top .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--sage-dark); }

/* Six links need the room; below this the bar is brand + Download. */
@media (max-width: 960px) {
  .nav-links { display: none; }
}
@media (max-width: 520px) {
  :root { --nav-h: 63px; }
  nav.top .inner { padding: 12px 18px; }
  .brand { font-size: 19px; }
  .brand svg { width: 26px; height: 26px; }
  nav.top .btn.sm { padding: 9px 14px; font-size: 12.5px; }
}