/* The public site header, shared by every non-Flutter surface that shows it:
   the server-rendered club pages and club directory (functions/clubProfilePage.js)
   and the static showcases page (public/showcases/index.html).

   ONE copy, on purpose. It used to be two, and they drifted exactly the way
   two copies do: the mobile overflow fix landed on the club pages on
   2026-09-04 and the showcases page kept the broken header, which is what
   Nuno saw ("the header needs to be consistent with the other ones"). Same
   reasoning as /shared/tokens.css — the thing genuinely at risk of silent
   drift gets consolidated, everything else stays where it lives. */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid #E4E9F0; }
.nav-inner { max-width:1120px; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:inline-flex; align-items:center; line-height:0; }
.brand img { height:44px; width:auto; display:block; }
.btn-cta { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 11px; border-radius:10px; font-weight:600; font-size:.8rem; border:none; cursor:pointer; background:#C14502; color:#fff; font-family:'Inter',sans-serif; transition:all .18s ease; }
.btn-cta:hover { background:#FD5C04; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-weight: 500; font-size: .95rem; text-decoration: none; }
.nav-links a:hover { color: #FD5C04; }
.nav-links a.active { color: #C14502; font-weight: 600; }
.hide-mobile-nav { display: list-item; }
/* On a phone the header does not fit on one line and never could: the
   wordmark carries the tagline so it is ~270px wide at 44px tall, the two
   surviving links are ~150px, and "Create free account" is another ~150px —
   against 358px of usable width on a 390px screen. Nothing had permission to
   shrink (flex items default to min-width:auto), so the row simply overflowed:
   the page scrolled sideways, the CTA wrapped onto three lines and the logo
   was clipped (2026-09-04, Nuno: "public header bad on mobile").
   So it wraps to two rows instead of pretending to fit on one. Nothing is
   hidden that was not already hidden, and no text is shortened — the links
   and the CTA just move to their own row under the wordmark. */
@media (max-width: 640px) {
  .nav-inner { height: auto; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 9px 12px; }
  .brand img { height: 34px; }
  .nav-links { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .nav-links a { font-size: .8rem; white-space: nowrap; }
  /* nowrap on both: the failure mode here was a control breaking across
     three lines, which reads as broken rather than as tight. */
  .btn-cta { white-space: nowrap; padding: 8px 12px; }
  .hide-mobile-nav { display: none; }
}