/* ============================================================
   SAINTS U RADIO — SHARED HEADER
   ============================================================

   One definition of the header bar, loaded by index.html,
   about.html and support.html.

   WHY THIS FILE EXISTS
   The station and the inner pages grew separate headers with
   separate inline CSS. Every rule had drifted — bar height,
   wordmark size and case, nav gaps, button size, divider
   height, theme-dot size — so the bar visibly jumped on every
   page change. These are the station's numbers, applied to all
   three pages.

   THE ONE RULE
   index.html is canonical. If a header measurement needs to
   change, change it HERE and nowhere else. Do not add header
   sizing back into a page's inline <style>, and do not put it
   back into membership.js — that is exactly how the drift
   started.

   SPECIFICITY
   Everything is scoped under `header`, which outranks the bare
   `.hbar` / `.station` / `.join` rules still sitting in each
   page's inline CSS. That is deliberate: it means this file
   wins without needing every page's stylesheet gutted first.

   WIDTH RANGE
   Only min-width:1001px. Below that the three pages collapse
   differently on purpose — the station swaps to a burger menu
   it has markup for and the inner pages do not — so this file
   deliberately stops before that point rather than half-apply
   a menu that cannot open. See HANDOVER note.
   ============================================================ */

/* ---------- join button: two labels, one width ---------- */
/* OUTSIDE the media query on purpose: header.js builds these two spans at
   every width, so width-gating these rules left the labels side by side
   below the breakpoint and ballooned the button to 229px.

   Note what this does NOT do: it never sets `display` on .join. An earlier
   version used inline-grid, which outranked the station's own
   @media(max-width:1000px){.join{display:none}} and made the button
   reappear next to the burger menu. The member label is taken out of flow
   and centred over the button instead, so the page keeps full control of
   whether the button shows at all. */
header .join.join-dual { position: relative; }
header .join.join-dual > .join-alt:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Out of flow, so it adds no width; the sizer above sets the button's size
   in both states. */
header .join.join-dual > .join-alt:last-child {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

@media (min-width: 1001px) {

  /* ---------- the bar ---------- */
  /* Height 74px + the 1px border below = the station's 75px.
     Container sizing lives here rather than on .wrap, because
     the inner pages do not put .wrap on their header row. */
  header .hbar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 74px;
    max-width: 1180px;   /* index's --maxw, hardcoded: the inner
                            pages never define that variable */
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ---------- crest lockup ---------- */
  header .mark { display: flex; align-items: center; gap: 7px; flex: none; text-decoration: none; }
  header .mark .crest { width: 34px; height: 40px; }
  header .mark .name {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: .01em;
  }

  /* ---------- divider ---------- */
  /* Its own margin, or the tightened .hbar gap leaves the rule
     almost touching the crest and the wordmark. */
  header .hdiv { width: 1px; height: 34px; flex: none; margin: 0 5px; }

  /* ---------- wordmark ---------- */
  /* Uppercase is the station's treatment; the inner pages were
     rendering it mixed-case, which was the most obvious jump.
     margin-right is the bar's only free slack — nav carries
     margin-left:auto, so this gap absorbs whatever is spare.
     It was 16px until the Join button needed 5px more width. */
  header .station {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .012em;
    text-transform: uppercase;
    text-decoration: none;
    flex: none;
    margin-right: 11px;
  }

  /* ---------- nav ---------- */
  header nav { display: flex; gap: 15px; margin-left: auto; flex: none; }
  header nav a {
    font-size: 11.5px;
    line-height: 1.6;   /* pinned: the station's body sets 1.6 and the inner
                           pages set 1.7, which made their links 1.1px taller
                           than the station's off nothing but inheritance */
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
    border-bottom: 0;   /* the inner pages underlined the active
                           link with a 2px border, which made
                           their link boxes 2px taller than the
                           station's. Same indicator below, via
                           ::after, so the geometry matches. */
  }
  /* currentColor, not a fixed maroon: the station's hover colour
     and the inner pages' gold both come out right, and neither
     page needs its palette touched. */
  header nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 1.5px;
    background: currentColor;
    transition: right .25s;
  }
  header nav a:hover::after,
  header nav a.on::after { right: 0; }

  /* ---------- theme dots ---------- */
  header .themes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
  }
  header .th-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.16);
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform .16s, box-shadow .16s;
  }
  header .th-dot:hover { transform: scale(1.16); }
  /* --cream is defined on the station but not on the inner
     pages, hence the fallback. */
  header .th-dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--cream, #FBF7F0), 0 0 0 3.5px var(--maroon);
  }

  /* ---------- sign-in link ---------- */
  /* Sizing only. The station injects this element from
     membership.js and the inner pages have it in markup with
     their own show/hide logic, so display is left alone. */
  header .sur-acct {
    /* The inner pages default this to display:none and reveal it from their
       own script; the station's is created already visible. Deciding it here
       means one rule for all three, and the JS never touches display — which
       is what let the 900px hide rule below keep working. */
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    letter-spacing: 0;
    padding: 7px 9px;
    margin-right: 4px;
    white-space: nowrap;
    flex: none;
  }

  /* ---------- join button ---------- */
  header .join {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-size: 11px;
    line-height: 1.6;   /* pinned, same inheritance trap as the nav links */
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 11.5px;
    border: 0;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
  }

  /* ---------- 1180 and below ---------- */
  /* The wordmark and the button give up size before anything
     starts overlapping. */
  @media (max-width: 1180px) {
    header .station { font-size: 17px; }
    header .join { font-size: 10px; letter-spacing: .09em; gap: 6px; }
  }

  /* Below 900 the bar is too tight for it, on every page. */
  @media (max-width: 900px) {
    header .sur-acct { display: none; }
  }

  /* ---------- 1100 and below ---------- */
  /* Here it is the seven gaps in the bar that no longer fit,
     not the items themselves, so close the gaps rather than
     drop a control. The crest plus the wordmark still carries
     the branding, so the stacked name steps aside. */
  @media (max-width: 1100px) {
    header .hbar { gap: 7px; }
    header nav { gap: 9px; }
    header nav a { font-size: 11px; letter-spacing: .08em; }
    header .station { font-size: 17px; letter-spacing: .03em; }
    header .join { padding: 11px 10px; letter-spacing: .05em; }
    header .sur-acct { padding: 6px 8px; font-size: 12px; }
    header .mark .name { display: none; }
  }
}

/* ============================================================
   ULTRA — the header bar
   ------------------------------------------------------------
   In Ultra the bar is dark burgundy, but the wordmark, crest and
   Join button are all painted with --maroon (#6E1120) and the
   button's label with --paper (#3A0E1A). Dark red on dark
   burgundy, and dark burgundy text on top of that: the bar was
   effectively unreadable.

   The cause is that --gold is deliberately bronzed to #84641C so
   it can be read on Ultra's cream PAGE. That same token cannot
   also serve the dark bar, so the bar gets literal colours here.

   Scoped to html[data-theme="ultra"] and, being in header.css,
   applies to Home, About and Support identically. Classic and
   Team Spirit are not touched.
   ============================================================ */

/* White, not gold. The crest, wordmark and Join button were all painted
   with --maroon, which is dark red on a dark burgundy bar. Gold was the
   first fix; white was asked for and is the stronger contrast of the two —
   #FFFFFF on #3A0E1A is roughly 15:1, against about 9:1 for the gold.
   The active-link underline stays gold, as the one accent. */
html[data-theme="ultra"] header .mark .crest{ color:#FFFFFF; --cx:#2A0810; }
html[data-theme="ultra"] header .mark .name{ color:#FFFFFF; }
html[data-theme="ultra"] header .station{ color:#FFFFFF; }
html[data-theme="ultra"] header .hdiv{ background:rgba(255,255,255,.34); }

/* index.html leaves nav links on --ink-soft, which is near-black. */
html[data-theme="ultra"] header nav a{ color:#F2E7DE; }
/* The underline is gold on both, so the active item still reads as chosen
   without a second colour doing the same job. */
html[data-theme="ultra"] header nav a:hover,
html[data-theme="ultra"] header nav a.on{ color:#FFFFFF; }
html[data-theme="ultra"] header nav a::after{ background:#E6C071; }

/* Gold fill with dark text, matching the buttons on the two pages. */
/* Solid white fill with the deep burgundy back as the label — the inverse
   of the bar, which is what makes it read as the one thing to press. */
html[data-theme="ultra"] header .join{
  background:#FFFFFF;
  color:#3A0E1A;
  border:1px solid #FFFFFF;
}
html[data-theme="ultra"] header .join:hover{ background:#F2E7DE; border-color:#F2E7DE; }
html[data-theme="ultra"] header .sur-acct{
  color:#FFFFFF;
  border-color:rgba(255,255,255,.5);
}
html[data-theme="ultra"] header .sur-acct:hover{ background:rgba(255,255,255,.14); }
html[data-theme="ultra"] header .themes{ border-color:rgba(255,255,255,.3); }
/* The bar itself. index.html sets its own Ultra rule keeping the home
   header CREAM, while about.html and support.html set --nav-bg to dark
   burgundy — so the bar changed colour between pages, and the white type
   above vanished on the home page. This makes all three dark, matching the
   value about/support already use. header.css loads after each page's
   inline CSS, so it wins at equal specificity. */
html[data-theme="ultra"] header{
  background:linear-gradient(180deg,#38101C,#2A0810);
  border-bottom-color:rgba(255,255,255,.18);
}

/* ============================================================
   THE MOBILE MENU
   ------------------------------------------------------------
   Below 1000px the nav is hidden on all three pages. The burger
   on index.html was never wired to anything, and about.html and
   support.html had no burger at all — so a phone had no way to
   reach Magazine, About, Support or Store from any page.

   header.js builds the drawer by cloning the page's own nav
   links, account link and Join button, so hrefs and labels stay
   correct per page and per sign-in state without any duplicated
   markup.

   One breakpoint, 1000px, for all three pages. about.html and
   support.html were hiding their nav at 900px, which left a
   100px band where they had no nav and no burger either.
   ============================================================ */

@media (max-width: 1000px) {
  header nav { display: none; }
  header .burger { display: block; }
  /* The account link moves into the drawer rather than competing for room in
     a bar that is already tight. */
  header .sur-acct { display: none; }

  /* THIS is what pushes the trailing group to the right edge. On desktop the
     nav carries margin-left:auto and does that job; hiding the nav takes the
     auto margin with it, so the themes, the button and the burger collapsed
     back against the wordmark and sat in the middle of the bar. index.html
     had its own version of this rule, about.html and support.html never did
     — which is why only those two looked wrong. .themes is the first item
     after the nav on all three pages, so it inherits the job. */
  /* display forced too, not just the margin. about.html and support.html
     hide .themes below 620px, and the auto margin vanished with it — which
     is why the burger slid back to the middle at exactly that width, and
     further left again below 400px as the wordmark went too. Keeping the
     one anchor element on screen at every width is more reliable than
     chasing the margin from element to element as each one hides, and it
     has the side benefit that the theme switcher survives on a phone. */
  header .themes { display: inline-flex !important; margin-left: auto; }

  /* The Join button stays in the bar on all three pages. index.html was
     hiding it below 1000px while the other two kept it, so the same header
     offered the main call to action on two pages and not the third. */
  header .join { display: inline-flex; }
}

/* Below 520px the crest, dots, button and burger stop fitting side by side,
   so the button steps aside — it is still the first thing in the drawer. */
@media (max-width: 520px) {
  header .join { display: none; }
}

@media (min-width: 1001px) {
  header .burger { display: none; }
  .sur-drawer { display: none !important; }
}

.burger {
  display: none;
  margin-left: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 3px 0;
  border-radius: 2px;
}
html[data-theme="spirit"] .burger span,
html[data-theme="ultra"] .burger span { background: #F2E7DE; }
html[data-theme="spirit"] .burger,
html[data-theme="ultra"] .burger { border-color: rgba(255,255,255,.32); }

/* ---------- the drawer ---------- */
/* FIXED, not sticky. A sticky drawer lives at its position in the document —
   near the top — so once you had scrolled down to the rack it opened
   thousands of pixels above the viewport. Fixed pins it to the screen at any
   scroll position. `top` is set from JS to the header's real bottom edge, so
   it sits flush under the bar whatever height that bar happens to be on this
   page at this width. */
.sur-drawer {
  position: fixed;
  top: 74px;                 /* JS overwrites this with the measured value */
  left: 0;
  right: 0;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 55;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -22px rgba(40,8,16,.5);
  padding: 10px 32px 18px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.sur-drawer.open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sur-drawer { transition: none; }
}

.sur-drawer-nav { display: flex; flex-direction: column; }
.sur-drawer-nav a {
  display: block;
  padding: 13px 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav-ink, var(--ink-soft));
  border-bottom: 1px solid var(--line-soft);
}
.sur-drawer-nav a:last-child { border-bottom: 0; }
.sur-drawer-nav a:hover,
.sur-drawer-nav a.on { color: var(--gold); }

.sur-drawer-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* Styled here in full, not inherited. Everything that shapes these two in
   the bar is scoped `header .x`, and the drawer sits outside the header — so
   without this the Join button rendered as bare text and Sign out as a plain
   link. */
.sur-drawer-foot .join {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 18px;
  border-radius: 6px;
  border: 0;
  background: var(--maroon);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sur-drawer-foot .sur-acct {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--maroon);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
html[data-theme="spirit"] .sur-drawer-foot .join{ background:var(--gold); color:#2A0810 }
html[data-theme="spirit"] .sur-drawer-foot .sur-acct{ color:var(--gold); border-color:rgba(255,255,255,.3) }
html[data-theme="ultra"] .sur-drawer-foot .join{ background:#FFFFFF; color:#3A0E1A }
html[data-theme="ultra"] .sur-drawer-foot .sur-acct{ color:#FFFFFF; border-color:rgba(255,255,255,.5) }

/* Ultra: the bar is dark, so the drawer under it must be too. */
html[data-theme="ultra"] .sur-drawer {
  background: linear-gradient(180deg,#2A0810,#240A11);
  border-bottom-color: rgba(255,255,255,.18);
}
html[data-theme="ultra"] .sur-drawer-nav a { color: #F2E7DE; border-bottom-color: rgba(255,255,255,.12); }
html[data-theme="ultra"] .sur-drawer-nav a:hover,
html[data-theme="ultra"] .sur-drawer-nav a.on { color: #FFFFFF; }
html[data-theme="spirit"] .sur-drawer-nav a { border-bottom-color: rgba(255,255,255,.12); }

/* No overflow:hidden lock here. Setting it on html or body destroys
   position:sticky, which unpinned the header the moment the drawer opened —
   the bar jumped to the top of the document and took the drawer with it.
   overscroll-behavior on the drawer above stops scroll chaining instead, and
   a tap outside closes it. */

@media (max-width: 620px) {
  .sur-drawer { padding: 10px 20px 18px; }
}