/* Site header + legal footer, shared by all three fan pages.
   One stylesheet rather than three inline copies: the chrome has to be identical
   on /shows, an event page and a program page, and three copies drift. */
/* ── HEADER GEOMETRY ─────────────────────────────────────────────────────────
   Every number below is measured off the live concertdome.co Wix header at a
   1512px viewport (see tests/test_site_chrome_geometry.py, which reads THIS file
   and fails if any of them drifts from the capture). Do not "tidy" them into
   round values — the whole point is that the two headers line up when a fan
   crosses from the marketing site into /shows.
     header height   59px          logo ink   230 x 24.7 at x=53
     nav             16px / 400    last link box ends 41px from the right    */
.sitehdr {
  position: relative; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 59px;
  padding: 0 clamp(1rem, 2.71vw, 41px) 0 clamp(1rem, 3.51vw, 53px);
  background: #000; border-bottom: 1px solid rgba(244, 243, 241, 0.10);
}
.sitehdr-logo { display: inline-flex; align-items: center; flex: none; }
/* Width, not height, is pinned: the wordmark's ink IS the PNG (no bearing), so
   `width` is the dimension a reader compares across the two sites. */
.sitehdr-logo img { width: min(230px, 42vw); height: auto; }

.sitehdr-nav { display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-end; }
.sitehdr-nav a {
  color: #f4f3f1; text-decoration: none; font-size: 16px; font-weight: 400;
  line-height: 30px; padding: 0 12.5px; white-space: nowrap; opacity: 0.86;
  /* 44px tap target, same floor as every button on the site. The 30px line box
     stays so the wordmark alignment is untouched; the hit area grows around it. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.sitehdr-nav a:hover { opacity: 1; }
.sitehdr-nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 0 #e61d2a; }
.sitehdr-nav a:focus-visible { outline: 2px solid #ff9b12; outline-offset: 3px; border-radius: 4px; }

/* On a phone the four links wrap under the wordmark rather than shrinking to
   unreadable — the header is navigation, not decoration. The fixed 59px height
   is a desktop fact and has to go here, or the wrapped nav is clipped. */
@media (max-width: 520px) {
  .sitehdr { flex-direction: column; align-items: flex-start; gap: 0.6rem;
             height: auto; padding-block: 0.7rem; }
  .sitehdr-nav { justify-content: flex-start; margin-left: -12.5px; }
}

.sitefoot {
  border-top: 1px solid rgba(244, 243, 241, 0.10);
  padding: 1.4rem clamp(1rem, 4vw, 2.5rem) calc(1.4rem + env(safe-area-inset-bottom));
  text-align: center; background: #000;
}
.sitefoot p { margin: 0; color: rgba(244, 243, 241, 0.52); font-size: 0.8rem; }