/* The header, and ONLY the header. Loaded first by every page on the marketing
   site — index.html via site.css's neighbours, and the field guide / legal pages
   via doc.css's.

   WHY IT IS ITS OWN FILE. index.html had the full nav (brand + How it works /
   Features / Pricing / Pin guide + Log in / Get started) while every /learn/
   chapter, privacy and terms had a brand-only header defined separately in
   doc.css. Walking into the Pin guide therefore dropped the navigation and both
   CTAs, with no way back except the browser button or the footer. Two headers in
   two stylesheets also drifted: doc.css still sized .brand img at 22x29, the old
   map-pin aspect, which letterboxes the square badge mark — the exact bug that
   was fixed in site.css and nowhere else.

   One file, one header, no drift. Page stylesheets must not redefine header,
   nav, .brand, .navlinks, .navcta or .btn. */

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px) saturate(1.3);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; gap:14px; height:68px}

.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em;
  font-size:17.5px; text-decoration:none; color:var(--text)}
/* The mark is drawn in a SQUARE viewBox with the badge centred, so the box is square.
   It used to be 23x30, the old map pin's aspect; forcing that on the badge letterboxes
   it and quietly shrinks it. The glow was rgba(178,34,34) = CSS firebrick, a colour that
   appears nowhere in the real artwork -- it is the brand red now. */
.brand img{width:30px; height:30px; display:block;
  filter:drop-shadow(0 2px 8px rgba(120,36,28,.55))}
.brand b{color:var(--gold)}

.navlinks{display:flex; gap:28px; margin-left:30px; font-size:14.5px; color:var(--muted)}
.navlinks a{text-decoration:none; color:inherit; transition:color .15s}
.navlinks a:hover{color:var(--text)}
/* The page you are already on should not look like somewhere to go. Set with
   aria-current="page" so it is announced, not merely coloured. */
.navlinks a[aria-current="page"]{color:var(--gold)}

.navcta{margin-left:auto; display:flex; gap:10px; align-items:center}

@media(max-width:820px){ .navlinks{display:none} .navcta .ghost{display:none} }

.btn{display:inline-block; border-radius:12px; padding:11px 20px; font-size:14.5px;
  font-weight:650; text-decoration:none; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); cursor:pointer;
  transition:transform .14s, border-color .14s, box-shadow .14s}
.btn:hover{border-color:var(--gold); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#ffdd7d,var(--gold));
  border-color:var(--gold); color:var(--gold-ink); font-weight:750;
  box-shadow:0 6px 22px rgba(255,210,87,.22)}
.btn.primary:hover{box-shadow:0 10px 30px rgba(255,210,87,.34)}
.btn.lg{padding:15px 30px; font-size:16.5px; border-radius:14px}

/* Keyboard users must be able to see where they are. The header is the first
   thing tabbed into on every page, so it is the worst place to lose the ring. */
.brand:focus-visible, .navlinks a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  .btn, .navlinks a{transition:none}
  .btn:hover{transform:none}
}