/* Trails — site menu, v5. One bar for the homepage, /routes/ and /plan/.
   Figma 979:1188 "Top nav", 1900 wide: 100 tall, 200 side padding, wordmark
   72x45, links from x392 with 60 gaps, 14px LT Pro italic (bold italic when
   current), a 305x40 search pill at the right edge, 1px black-6% hairline
   under the bar. Fractions of that frame so it lands on those numbers at
   1900 and scales down. The Figma bar has no fill; the rider asked for
   translucent paper with a blur, so that stays. */
:root {
  --nav-h:        clamp(64px, 5.263vw, 100px);   /* 100/1900 */
  --nav-edge:     clamp(20px, 10.526vw, 200px);  /* 200/1900 */
  --nav-logo-w:   clamp(52px, 3.789vw, 72px);    /*  72/1900 */
  --nav-gap:      clamp(20px, 3.158vw, 60px);    /*  60 */
  --nav-links-x:  clamp(32px, 6.316vw, 120px);   /* 272 -> 392 */
  --nav-search-w: clamp(180px, 16.053vw, 305px); /* 305 */
  --nav-search-h: 40px;
  --paper: #FFFEED;
  --paper-glass: rgba(255, 254, 237, 0.72);
  --ink-2: #4F4F4F;   /* Figma "Gray 2" — the nav's text colour */
  --hn: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center;
  height: var(--nav-h);
  padding: 0 var(--nav-edge);
  /* White glass, not paper: over the routes' and planner's maps the cream
     tint read as dirty (rider 2026-09-11). The homepage clears it anyway. */
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--hn); color: var(--ink-2);
}
/* Over a hero the stack gives back its own height (see .topstack). */
.topstack { position: sticky; top: 0; z-index: 40; }
.topstack--over { margin-bottom: calc(-1 * var(--stackh, 100px)); }
.topstack .tnav { position: static; }

.tnav__brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.tnav__logo { display: block; width: var(--nav-logo-w); height: auto; }

.tnav__links { display: flex; align-items: center; gap: var(--nav-gap); margin-left: var(--nav-links-x); }
.tnav__links a {
  display: flex; align-items: center; height: 40px;
  font-size: 14px; line-height: 16px; font-style: italic; font-weight: 400;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
/* Hover thickens the strokes without touching the metrics, so the row never
   shifts (a weight change re-flows every link beside it). */
.tnav__links a:hover { -webkit-text-stroke: 0.35px currentColor; }
.tnav__links a[aria-current="page"] { font-weight: 700; }

/* Search pill: 305x40, radius 80, hairline only — no fill in the Figma. */
.tnav__search {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  width: var(--nav-search-w); height: var(--nav-search-h);
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 80px;
  background: none;
  transition: border-color .18s ease;
}
.tnav__search:focus-within { border-color: rgba(0, 0, 0, 0.3); }
.tnav__search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--hn); font-size: 14px; line-height: 16px; font-style: italic; color: var(--ink-2);
}
.tnav__search input::placeholder { color: var(--ink-2); opacity: 0.5; }
.tnav__search input::-webkit-search-decoration,
.tnav__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tnav__searchbtn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; color: #000;
}
.tnav__searchbtn svg { width: 16px; height: 16px; display: block; }
/* Safari gives a search input a minimum width of its own; without this the
   collapsed pill grew past the screen edge on phones. */
.tnav__search input { -webkit-appearance: none; appearance: none; }

/* Menu button: only on narrow screens, where the links fold into a panel. */
.tnav__menubtn {
  display: none; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; margin-left: 10px;
  padding: 0; border: 0; background: none; cursor: pointer; color: #000;
}
.tnav__menubtn svg { width: 22px; height: 22px; display: block; }
.tnav__menubtn .x { display: none; }
.tnav__menubtn[aria-expanded="true"] .bars { display: none; }
.tnav__menubtn[aria-expanded="true"] .x { display: block; }

.tnav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px var(--nav-edge) 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.tnav__panel a { font-size: 17px; line-height: 40px; font-style: italic; color: var(--ink-2); text-decoration: none; }
.tnav__panel a[aria-current="page"] { font-weight: 700; }
.tnav__panel[hidden] { display: none; }

@media (max-width: 1100px) { :root { --nav-edge: clamp(20px, 5vw, 100px); } }
@media (max-width: 900px) {
  .topstack .tnav { position: relative; }
  .tnav__links { display: none; }
  .tnav__menubtn { display: grid; }
  .tnav__search { width: clamp(150px, 40vw, 260px); }
}
@media (max-width: 700px) {
  :root { --nav-h: 64px; --nav-logo-w: 56px; }
}
@media (max-width: 560px) {
  :root { --nav-h: 60px; --nav-logo-w: 52px; }
  .tnav__search { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; overflow: hidden; }
  .tnav__searchbtn { width: 40px; height: 40px; }
  .tnav__searchbtn svg { width: 22px; height: 22px; }   /* same size and ink as the menu glyph */
  .tnav__search input { position: absolute; opacity: 0; width: 0; pointer-events: none; }
  .tnav__search.is-open { position: absolute; left: 16px; right: 16px; width: auto; max-width: calc(100vw - 32px);
    min-width: 0; padding: 0 12px 0 20px; overflow: hidden;
    border-color: rgba(0,0,0,0.06); background: var(--paper); z-index: 2; }
  /* Safari sizes a search input to its placeholder unless it is told to flex
     from zero — that is what pushed the open pill past the screen edge. */
  .tnav__search.is-open input { position: static; opacity: 1; width: 0; flex: 1 1 0; min-width: 0; pointer-events: auto; }
}