/* Shared top navigation, linked by index.html, live/index.html and merch.html so
   the bar's styling lives in exactly one place. The small <nav> markup stays in
   each page because the links differ: the homepage uses in-page anchors, the
   sub-pages point back to the homepage. On the homepage the bar starts
   transparent over the hero and a script adds .scrolled on scroll; the sub-pages
   render it solid from the start with class="sitenav scrolled".

   Self-contained on purpose: it brings its own font and colours (not the page's
   CSS variables) so it looks identical on every page. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');

.sitenav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px clamp(18px, 4vw, 40px);
  background: transparent;
  transition: background .25s ease, border-color .25s ease, padding .25s ease;
  border-bottom: 1px solid transparent;
}
.sitenav.scrolled {
  background: rgba(13,6,8,0.86);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom-color: rgba(255,215,0,0.16);
  padding-top: 11px;
  padding-bottom: 11px;
}

.sitenav .nav-mark {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F2EADC;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
  white-space: nowrap;
}

.sitenav .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.sitenav .nav-links a {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F2EADC;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
  transition: color .15s ease;
}
.sitenav .nav-links a:hover,
.sitenav .nav-links a:focus-visible { color: #E5B777; }

/* Phone: drop the wordmark and centre the five links on one row. */
@media (max-width: 560px) {
  /* "BOB DAVIS" as text needs ~90px and a phone has about 19px spare, so on a
     phone the wordmark becomes the BD mark instead of disappearing. Every page
     keeps a way back to the homepage at every width, which is the point. The
     text stays in the DOM for screen readers and is pushed out of view, so the
     link still announces itself as "Bob Davis" rather than as an unlabelled
     image. The url() is relative to THIS stylesheet, not to the page, so the
     same path works from /live/ and merch.html without a second copy. */
  .sitenav { justify-content: space-between; padding: 12px 8px; }
  .sitenav .nav-mark {
    display: block;
    flex: 0 0 auto;
    width: 34px;
    height: 24px;
    background: url('images/bd-mark-nav.png') left center / contain no-repeat;
    text-indent: -200px;
    overflow: hidden;
    white-space: nowrap;
  }
  .sitenav .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px 9px;
  }
  .sitenav .nav-links a { font-size: 14px; letter-spacing: 0.04em; }
}

/* Phones, continued. The BD mark above costs 34px plus its gap, which pushed the
   five links to a second row at 320, 360 and 390. A two-row bar is 66px against a
   52px body.nav-offset, so it would sit over the sub-pages' content: the mark has
   to be paid for out of link spacing, not out of the offset. Type size is held at
   13px as long as possible because Bob asked for BIGGER phone nav text, so the
   gap and tracking are spent first. */
@media (max-width: 430px) {
  .sitenav { padding-left: 6px; padding-right: 6px; }
  .sitenav .nav-links { gap: 6px 7px; }
  .sitenav .nav-links a { font-size: 13px; letter-spacing: 0.01em; }
}

/* Below 375px the gap and tracking are spent, so the type gives up the last
   half point. Still the largest the row can be and stay on one line. */
@media (max-width: 374px) {
  .sitenav .nav-mark { width: 30px; height: 22px; }
  .sitenav .nav-links { gap: 6px 6px; }
  .sitenav .nav-links a { font-size: 12.5px; letter-spacing: 0; }
}

/* 320px, the smallest screen still in real use. */
@media (max-width: 340px) {
  .sitenav { padding-left: 4px; padding-right: 4px; }
  .sitenav .nav-mark { width: 26px; height: 19px; }
  .sitenav .nav-links a { font-size: 11.5px; }
}

html { scroll-behavior: smooth; scroll-padding-top: 66px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sub-pages render the bar solid from the top, so their content clears the fixed
   bar. The homepage omits this (its hero sits under the transparent bar). */
body.nav-offset { padding-top: 52px; }