/*
 * ═══════════════════════════════════════════════════════════════
 *  SATURDAY RACING — NAV, MOBILE DRAWER & FOOTER
 *  /static/css/chrome.css
 *
 *  Sections:
 *    1. Site Nav (desktop)
 *    2. Hamburger button
 *    3. Mobile overlay (backdrop)
 *    4. Mobile drawer
 *    5. Site footer
 *    6. Ticker bar
 *    7. Responsive breakpoints
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   1. SITE NAV (desktop)
───────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(8,8,12,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,175,55,0.14);
  transition: background 0.3s, box-shadow 0.3s;
  /* Prevent nav from being covered by drawer backdrop */
  isolation: isolate;
}

.site-nav.scrolled {
  background: rgba(8,8,12,0.99);
  box-shadow: 0 4px 30px rgba(0,0,0,0.7), 0 1px 0 rgba(212,175,55,0.12);
}

.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Back link */
.site-nav__back {
  font-size: 12px;
  color: var(--c-text-35);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.site-nav__back:hover { color: var(--c-text-75); }

/* Brand */
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}

/* SVG mark — sized to nav height */
.sr-mark--nav {
  width: 26px;   /* viewBox is 44x72, so 26px wide = ~42px tall, fits 60px nav */
  height: 42px;
  flex-shrink: 0;
}
.sr-mark--drawer {
  width: 30px;
  height: 49px;
  flex-shrink: 0;
}
.sr-mark--footer {
  width: 22px;
  height: 36px;
  flex-shrink: 0;
}

/* Wordmark — two-line stacked */
.site-nav__wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.site-nav__wordmark-main {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.10em;
  line-height: 1;
}
.site-nav__wordmark-sub {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  line-height: 1;
}

/* Primary nav links */
.site-nav__links {
  display: flex;
  gap: 2px;
  flex: 1;
}

.site-nav__link {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-55);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--c-text-100); background: rgba(255,255,255,0.05); }
.site-nav__link.active { color: var(--c-gold); background: rgba(212,175,55,0.10); }

/* Right actions */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Pill button */
.site-nav__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--c-text-100);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav__pill:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.2); }

/* Date text */
.site-nav__date {
  font-size: 12px;
  color: var(--c-text-35);
  font-weight: 300;
  white-space: nowrap;
}

/* ── Desktop auth links (Login / Sign out) ── */
.site-nav__auth-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-55);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.site-nav__auth-link:hover {
  color: var(--c-text-100);
  background: rgba(255,255,255,0.05);
}

/* ── Desktop "Join as Cub" register button ── */
.site-nav__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(200,169,81,0.12);
  border: 1px solid var(--c-border-gold);
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav__auth-btn:hover {
  background: rgba(200,169,81,0.2);
  border-color: var(--c-gold);
}

/* CTA badge */
.site-nav__badge {
  background: var(--c-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(192,57,43,0.35);
}
.site-nav__badge:hover { background: var(--c-red-lt); transform: translateY(-1px); }
/* site-nav__badge--gold replaced by site-nav__join-btn */

/* ─────────────────────────────────────────────────────────────
   2. HAMBURGER BUTTON
   Three-bar → X transform on open
───────────────────────────────────────────────────────────── */
.site-nav__hamburger {
  display: none;           /* shown via media query below */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.site-nav__hamburger:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(200,169,81,0.3);
}

.site-nav__hamburger[aria-expanded="true"] {
  background: rgba(200,169,81,0.12);
  border-color: rgba(200,169,81,0.4);
}

.hamburger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-text-75);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity   0.2s ease,
              background 0.2s;
}

/* Animate bars into X when open */
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--c-gold);
}
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--c-gold);
}

/* ─────────────────────────────────────────────────────────────
   3. MOBILE OVERLAY (backdrop)
───────────────────────────────────────────────────────────── */
.mob-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(5,8,18,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.mob-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ─────────────────────────────────────────────────────────────
   4. MOBILE DRAWER
   Slides in from the right. Full-height panel, branded design.
───────────────────────────────────────────────────────────── */
.mob-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: min(340px, 88vw);
  background: #0E0E16;
  border-left: 1px solid rgba(212,175,55,0.16);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  /* Slide-in from right */
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.32s cubic-bezier(0.4,0,0.2,1);

  /* No shadow when closed — `transform: translateX(100%)` moves the
     box off-screen but the box-shadow is rendered relative to that
     transformed position, so a -16px / 70px-blur shadow still leaks
     ~86px back onto the visible page from the right edge. Keep the
     atmospheric glow but only paint it when the drawer is OPEN
     (see `.mob-drawer.open` below). */
  box-shadow: none;
}

/* Subtle vertical grid texture */
.mob-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(200,169,81,0.03) 39px,
      rgba(200,169,81,0.03) 40px
    );
  pointer-events: none;
}

/* Atmospheric glow blob bottom-right */
.mob-drawer::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,15,50,0.35), transparent 70%);
  pointer-events: none;
}

.mob-drawer.open {
  transform: translateX(0);
  /* Paint the atmospheric glow only when the drawer is on-screen,
     so it shadows the page content the user just covered up — not
     the right edge of every page when the drawer is closed. */
  box-shadow: -16px 0 70px rgba(0,0,0,0.55),
              -1px 0 0 rgba(212,175,55,0.15),
              inset 1px 0 0 rgba(255,255,255,0.04);
}

/* ── Drawer: Head ── */
.mob-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(212,175,55,0.12);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mob-drawer__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.mob-drawer__wordmark-main {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.10em;
  line-height: 1;
}
.mob-drawer__wordmark-sub {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  line-height: 1;
}

.mob-drawer__close {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--c-text-55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.mob-drawer__close:hover {
  background: rgba(200,169,81,0.12);
  border-color: rgba(200,169,81,0.3);
  color: var(--c-gold);
}

/* ── Drawer: This Week pill ── */
.mob-drawer__race-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(200,169,81,0.06);
  border-bottom: 1px solid rgba(212,175,55,0.12);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__race-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

.mob-drawer__race-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-text-35);
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-drawer__race-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.mob-drawer__race-name:hover { color: var(--c-gold-lt); }

/* ── Drawer: Nav links ── */
.mob-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.mob-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  color: var(--c-text-75);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mob-drawer__link:last-child { border-bottom: none; }

.mob-drawer__link:hover,
.mob-drawer__link:focus-visible {
  background: rgba(255,255,255,0.07);
  color: var(--c-text-100);
}

/* Gold left-bar on hover */
.mob-drawer__link::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 2px;
  background: var(--c-gold);
  border-radius: 1px;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.mob-drawer__link:hover::before,
.mob-drawer__link:focus-visible::before { transform: scaleY(1); }

/* Featured link (Grand National) gets gold treatment */
.mob-drawer__link--featured {
  background: rgba(212,175,55,0.07);
}
.mob-drawer__link--featured::before { background: var(--c-gold); }
.mob-drawer__link--featured .mob-drawer__link-text { color: var(--c-gold-lt); }
.mob-drawer__link--featured:hover { background: rgba(212,175,55,0.12); }

.mob-drawer__link-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.mob-drawer__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
  line-height: 1.2;
}

/* Sub-label under link text */
.mob-drawer__link-sub {
  font-size: 11px;
  color: var(--c-text-35);
  font-weight: 400;
  line-height: 1;
}

/* Year/edition tag */
.mob-drawer__link-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--c-gold);
  color: var(--c-midnight);
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Chevron arrow */
.mob-drawer__link-arrow {
  font-size: 20px;
  color: var(--c-text-35);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.mob-drawer__link:hover .mob-drawer__link-arrow {
  transform: translateX(3px);
  color: var(--c-text-55);
}

/* ── Drawer: Divider ── */
.mob-drawer__divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(200,169,81,0.2) 30%,
    rgba(200,169,81,0.2) 70%,
    transparent
  );
  margin: 4px 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Drawer: CTA group ── */
.mob-drawer__cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-gold);
  color: var(--c-midnight);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: var(--r-sm);
  text-align: center;
  transition: background 0.2s, transform 0.15s;
}
.mob-drawer__cta-btn:hover {
  background: var(--c-gold-lt);
  transform: translateY(-1px);
}

.mob-drawer__cta-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-text-75);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  text-align: center;
  transition: all 0.2s;
}
.mob-drawer__cta-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--c-text-100);
}

/* ── Drawer: Footer ── */
.mob-drawer__footer {
  padding: 14px 24px 28px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mob-drawer__footer p {
  font-size: 11px;
  color: var(--c-text-35);
  line-height: 1.5;
  opacity: 0.55;
}

/* Stagger nav link entrance when drawer opens */
.mob-drawer.open .mob-drawer__link {
  animation: slideInRight 0.3s ease both;
}
.mob-drawer.open .mob-drawer__link:nth-child(1) { animation-delay: 0.06s; }
.mob-drawer.open .mob-drawer__link:nth-child(2) { animation-delay: 0.10s; }
.mob-drawer.open .mob-drawer__link:nth-child(3) { animation-delay: 0.14s; }
.mob-drawer.open .mob-drawer__link:nth-child(4) { animation-delay: 0.18s; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
  /* On iOS, prevent rubber-band scroll bleeding through */
  position: fixed;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   5. SITE FOOTER
───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   SITE FOOTER  (.sf prefix — scoped to footer partial)
   Structure:
   sf            → outer <footer>
   sf__shell     → max-width container
   sf__top       → brand · tagline · contact
   sf__nav-grid  → 4-column link columns
   sf__features  → product highlight strip
   sf__base      → legal + gamble aware + copyright
═══════════════════════════════════════════════════════════ */

.sf {
  position: relative;
  background: #060709;
  border-top: 1px solid rgba(212,175,55,0.10);
  margin-top: auto;
  overflow: hidden;
}

/* Ambient background glow */
.sf__aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%,  rgba(34,60,151,0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 50%, rgba(114,25,40,0.06), transparent 55%);
  pointer-events: none;
}

.sf__shell {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* ── TOP ROW ── */
.sf__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Brand */
.sf__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.sf__mark {
  width: 28px;
  height: 46px;
  flex-shrink: 0;
}

.sf__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.sf__wordmark-main {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: 0.12em;
  line-height: 1;
}

.sf__wordmark-sub {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  line-height: 1;
}

/* Tagline */
.sf__tagline {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  color: rgba(236,238,245,0.40);
  line-height: 1.45;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}

.sf__tagline em {
  font-style: italic;
  color: var(--c-gold);
  opacity: 0.7;
}

/* Contact */
.sf__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}

.sf__contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-35);
}

.sf__contact-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.8;
}

.sf__contact-email:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── NAV COLUMNS ── */
.sf__nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sf__nav-heading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.7;
  margin: 0 0 14px;
}

.sf__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sf__nav-list a {
  font-size: 13px;
  color: var(--c-text-35);
  text-decoration: none;
  transition: color 0.18s;
  line-height: 1.3;
}

.sf__nav-list a:hover {
  color: var(--c-text-75);
}

/* ── PRODUCT FEATURE STRIP ── */
.sf__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sf__feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}

.sf__feature-card:hover {
  border-color: rgba(212,175,55,0.22);
  background: rgba(212,175,55,0.04);
  transform: translateY(-2px);
}

.sf__feature-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.sf__feature-card strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-75);
  margin-bottom: 2px;
  line-height: 1.2;
}

.sf__feature-card span {
  display: block;
  font-size: 11px;
  color: var(--c-text-35);
  line-height: 1.4;
}

/* ── BASE STRIP ── */
.sf__base {
  padding: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.sf__legal {
  font-size: 11px;
  line-height: 1.65;
  color: rgba(236,238,245,0.18);
  margin: 0;
  max-width: 68ch;
}

.sf__gamble-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.sf__gamble-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.18s;
}

.sf__gamble-link:hover { opacity: 1; text-decoration: underline; }

.sf__gamble-link--dim {
  color: var(--c-text-35);
  font-weight: 400;
}

.sf__gamble-sep {
  color: rgba(255,255,255,0.12);
  font-size: 11px;
}

.sf__copyright {
  font-size: 11px;
  color: rgba(255,255,255,0.14);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sf__top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    padding: 28px 0 24px;
  }

  .sf__tagline {
    grid-column: 1 / -1;
    text-align: left;
    order: 3;
  }

  .sf__contact { text-align: left; }

  .sf__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .sf__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sf__shell { padding: 0 var(--space-5); }

  .sf__top {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .sf__tagline { order: unset; }
  .sf__contact { text-align: left; }

  .sf__nav-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sf__features {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sf__gamble-row { flex-direction: column; gap: 6px; }
}

@media (max-width: 400px) {
  .sf__nav-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   6. TICKER BAR
───────────────────────────────────────────────────────────── */
.ticker-bar {
  background: #0D0D14;
  border-top: 1px solid rgba(212,175,55,0.10);
  border-bottom: 1px solid rgba(212,175,55,0.10);
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-bar__badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--c-red);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid rgba(0,0,0,0.35);
}
.ticker-bar__track { flex: 1; overflow: hidden; }
.ticker-bar__inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 55s linear infinite;
}
@keyframes ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-bar__item { font-size: 12px; color: rgba(234,234,240,0.5); padding: 0 22px; }
.ticker-bar__item strong { color: var(--c-text-100); font-weight: 600; }
.ticker-bar__item--urgent { color: rgba(255,155,155,0.88); }
.ticker-bar__item--urgent strong { color: #ffcccc; }
.ticker-bar__sep { color: var(--c-gold); opacity: 0.35; font-size: 9px; }


/* ─────────────────────────────────────────────────────────────
   MOBILE DRAWER AUTH SECTION
   Same items as desktop right actions
───────────────────────────────────────────────────────────── */
.mob-drawer__auth {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Login link — subtle blue tint */
.mob-drawer__link--login .mob-drawer__link-icon  { opacity: 0.8; }
.mob-drawer__link--login .mob-drawer__link-text  { color: var(--c-text-75); }

/* Register / Join as Cub — gold highlight */
.mob-drawer__link--register {
  background: rgba(200,169,81,0.07);
}
.mob-drawer__link--register::before {
  background: var(--c-gold);
}
.mob-drawer__link--register .mob-drawer__link-text { color: var(--c-gold-lt); }
.mob-drawer__link--register:hover { background: rgba(200,169,81,0.12); }

/* Cub profile — gold tint */
.mob-drawer__link--auth {
  background: rgba(200,169,81,0.05);
}
.mob-drawer__link--auth .mob-drawer__link-text { color: var(--c-gold-lt); }

/* Sign out — muted red tint on hover */
.mob-drawer__link--signout .mob-drawer__link-text { color: var(--c-text-55); }
.mob-drawer__link--signout:hover { background: rgba(200,0,30,0.08); }
.mob-drawer__link--signout:hover .mob-drawer__link-text { color: rgba(255,130,130,0.9); }
.mob-drawer__link--signout .mob-drawer__link-arrow { color: var(--c-text-35); }

/* Hide desktop-only auth items on mobile */
@media (max-width: 900px) {
  .site-nav__auth-link { display: none; }
  .site-nav__auth-btn  { display: none; }
}


/* ── Cub profile pill (authenticated state) ── */
.site-nav__pill--cub {
  background: rgba(200,169,81,0.14);
  border-color: var(--c-border-gold);
  color: var(--c-gold);
  font-weight: 600;
}
.site-nav__pill--cub:hover {
  background: rgba(200,169,81,0.22);
  border-color: var(--c-gold);
}

/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────────── */

/* Hide desktop links at tablet width */
@media (max-width: 1024px) {
  .site-nav__links { display: none; }
}

/* Hide race badge + date when primary links are visible (they already show it) */
@media (min-width: 1025px) {
  .site-nav__badge { display: none; }
  .site-nav__date  { display: none; }
}

/* Show hamburger below 900px */
@media (max-width: 900px) {
  .site-nav__hamburger { display: flex; }

  /* Hide action pills on small screens — they're in the drawer */
  .site-nav__pill   { display: none; }
  .site-nav__badge  { display: none; }
  .site-nav__date   { display: none; }
}

/* Footer stack on mobile */
@media (max-width: 600px) {
  /* site-footer legacy rules removed — footer now uses .sf partial */
}

/* ── Join Free nav link — highlighted ─────────────────────── */
.site-nav__link--join {
  color: var(--c-gold) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: var(--r-pill);
  padding: 5px 14px !important;
  transition: background 0.18s, border-color 0.18s;
}
.site-nav__link--join:hover {
  background: rgba(212,175,55,0.1);
  border-color: var(--c-gold);
}
.mob-drawer__link--join {
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--r-md);
  margin: 4px 0;
}

/* ── Big Race nav link — gold trophy treatment ───────────── */
.site-nav__link--race {
  color: var(--c-gold) !important;
  font-weight: 600 !important;
}
.site-nav__link--race:hover {
  background: rgba(212,175,55,0.1);
  color: var(--c-gold-lt) !important;
}

/* ── Join Free CTA in mobile auth section ────────────────── */
.mob-drawer__link--join-cta {
  background: rgba(200,169,81,0.1);
  border-left: 2px solid var(--c-gold);
}
.mob-drawer__link--join-cta .mob-drawer__link-text { color: var(--c-gold-lt); }
.mob-drawer__link--join-cta:hover { background: rgba(200,169,81,0.16); }
.mob-drawer__link--join-cta::before { background: var(--c-gold); }

/* ── Gold Join Free badge in desktop right actions ───────── */
.site-nav__badge--gold {
  background: linear-gradient(135deg, rgba(200,169,81,0.2), rgba(200,169,81,0.12));
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--c-gold);
  box-shadow: 0 0 12px rgba(200,169,81,0.15);
}
.site-nav__badge--gold:hover {
  background: rgba(200,169,81,0.28);
  border-color: var(--c-gold);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP NAV — RIGHT ACTIONS REFRESH
───────────────────────────────────────────────────────────── */

/* Live dot before date */
.site-nav__date {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav__date-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* Vertical separator between race context and auth */
.site-nav__sep {
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ── Join Free button — gold pill ── */
.site-nav__join-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(200,169,81,0.22), rgba(200,169,81,0.12));
  border: 1px solid rgba(212,175,55,0.5);
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 0 14px rgba(200,169,81,0.12);
  letter-spacing: 0.01em;
}
.site-nav__join-btn:hover {
  background: rgba(200,169,81,0.28);
  border-color: var(--c-gold);
  box-shadow: 0 0 20px rgba(200,169,81,0.22);
  transform: translateY(-1px);
  color: var(--c-gold-lt);
}

/* ── Login button — subtle pill ── */
.site-nav__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-text-75);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: all 0.2s;
}
.site-nav__login-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  color: var(--c-text-100);
}
.site-nav__login-btn .site-nav__auth-icon {
  font-size: 14px;
  opacity: 0.7;
}

/* ── Sign out link — keep it subtle ── */
.site-nav__auth-link .site-nav__auth-icon {
  font-size: 13px;
  opacity: 0.6;
}

/* Hide new auth buttons on mobile — drawer handles it */
@media (max-width: 900px) {
  .site-nav__join-btn  { display: none; }
  .site-nav__login-btn { display: none; }
  .site-nav__sep       { display: none; }
}

/* ═══════════════════════════════════════════════════════
   VIRTUAL DROPDOWN — desktop nav
═══════════════════════════════════════════════════════ */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-trigger {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
}

.site-nav__caret {
  width: 10px; height: 6px;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.site-nav__dropdown.open .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: rgba(8,10,18,0.97);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}

/* Small triangle pointer */
.site-nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(212,175,55,0.2);
}
.site-nav__dropdown-menu::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(8,10,18,0.97);
}

.site-nav__dropdown.open .site-nav__dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 7px;
  text-decoration: none; color: var(--c-text-75);
  transition: background 0.15s, color 0.15s;
  font-size: 13px;
}

.site-nav__dropdown-item:hover,
.site-nav__dropdown-item.active {
  background: rgba(212,175,55,0.09);
  color: var(--c-text-100);
}

.site-nav__dropdown-item.active .site-nav__di-name {
  color: var(--c-gold);
}

.site-nav__di-icon { font-size: 16px; flex-shrink: 0; }

.site-nav__di-body {
  display: flex; flex-direction: column; gap: 2px;
}

.site-nav__di-name {
  font-weight: 700; font-size: 13px; line-height: 1.2;
  color: var(--c-text-100);
}

.site-nav__di-sub {
  font-size: 10px; color: var(--c-text-35);
  letter-spacing: 0.03em;
}

/* Divider between items */
.site-nav__dropdown-item + .site-nav__dropdown-item {
  border-top: 1px solid rgba(255,255,255,0.05);
  border-radius: 0;
}
.site-nav__dropdown-item:first-child { border-radius: 7px 7px 0 0; }
.site-nav__dropdown-item:last-child  { border-radius: 0 0 7px 7px; border-top: 1px solid rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════════════════════
   VIRTUAL ACCORDION — mobile drawer
═══════════════════════════════════════════════════════ */
.mob-drawer__accordion-trigger {
  width: 100%;
  background: none; border: none; cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  justify-content: flex-start;
}

.mob-drawer__acc-caret {
  width: 10px; height: 6px;
  margin-left: auto; flex-shrink: 0;
  transition: transform 0.22s ease;
  color: var(--c-text-35);
}

.mob-drawer__accordion.open .mob-drawer__acc-caret {
  transform: rotate(180deg);
}

.mob-drawer__accordion-body {
  max-height: 0;
  overflow: hidden;
  /* max-height driven by JS scrollHeight for reliability */
  transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1);
  background: rgba(212,175,55,0.03);
  border-left: 2px solid rgba(212,175,55,0.2);
  margin-left: 20px;
  border-radius: 0 0 6px 6px;
}

.mob-drawer__link--sub {
  padding-left: 16px;
  font-size: 13px;
}

.mob-drawer__link--sub .mob-drawer__link-icon { font-size: 15px; }


/* ═══════════════════════════════════════════════════════
   NOTIFICATION SYSTEM
   — nav dot on Cubs trigger
   — count badges inside dropdown items
   — global dismissible banner
═══════════════════════════════════════════════════════ */

/* ── Desktop: pulsing dot on Cubs button ── */
.site-nav__notif-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  margin: 0 2px 5px 3px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: notifPulse 2.4s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── Desktop: count badge inside dropdown item name ── */
.site-nav__di-name { display: flex; align-items: center; gap: 6px; }
.site-nav__di-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--c-gold); color: #03040a;
  font-size: 10px; font-weight: 900;
  line-height: 1; flex-shrink: 0;
}

/* ── Mobile: dot on Cubs accordion trigger ── */
.mob-drawer__notif-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-gold); margin-left: 6px;
  vertical-align: middle;
  animation: notifPulse 2.4s ease-in-out infinite;
}

/* ── Mobile: count badge on sub-links ── */
.mob-drawer__notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--c-gold); color: #03040a;
  font-size: 10px; font-weight: 900;
  margin-left: 6px; vertical-align: middle; flex-shrink: 0;
}

/* ── Global notification banner ── */
.notif-banner {
  position: relative; z-index: 90;
  background: rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.22);
  /* slides down from behind nav */
  animation: notifSlideDown 0.35s cubic-bezier(0.2, 0, 0.2, 1) both;
}
.notif-banner.notif-banner--dismissed {
  display: none;
}
@keyframes notifSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-7);
  height: 44px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.notif-banner__content {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.notif-banner__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-gold); flex-shrink: 0;
  animation: notifPulse 2.4s ease-in-out infinite;
}
.notif-banner__text {
  font-size: 13px; font-weight: 600;
  color: rgba(212,175,55,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-banner__link {
  color: var(--c-gold); text-decoration: none; font-weight: 800;
  border-bottom: 1px solid rgba(212,175,55,0.3);
  transition: border-color 0.15s;
}
.notif-banner__link:hover { border-color: var(--c-gold); }
.notif-banner__dismiss {
  background: none; border: none; cursor: pointer;
  color: rgba(212,175,55,0.5); font-size: 12px; padding: 6px;
  border-radius: 4px; flex-shrink: 0;
  font-family: var(--font-body);
  transition: color 0.15s, background 0.15s;
}
.notif-banner__dismiss:hover {
  color: var(--c-gold);
  background: rgba(212,175,55,0.1);
}

/* Banner padding compensation — driven by body.has-notif-banner class
   (set server-side in base.html, removed client-side on dismiss via
   site.js). Replaces the earlier :has() rule so older browsers and
   JavaScript-disabled users get the same layout. Primary rule is in
   base.css next to .site-main. */

@media (max-width: 640px) {
  .notif-banner__inner { padding: 0 16px; height: 40px; }
  .notif-banner__text  { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════
   v2 POLISH — keyboard focus parity + reduced motion + safe area
   ══════════════════════════════════════════════════════════════
   Shipped on top of the existing nav/drawer/banner rules.       */

/* ── :focus-visible parity for desktop nav + banner ───────────
   Every interactive element on the site nav now signals state
   to keyboard users the same way it does to mouse users (WCAG
   2.1 AA). Mobile drawer links already had paired focus-visible
   rules — this block closes the desktop gap. */
.site-nav__link:focus-visible,
.site-nav__pill:focus-visible,
.site-nav__auth-link:focus-visible,
.site-nav__auth-btn:focus-visible,
.site-nav__back:focus-visible,
.site-nav__badge:focus-visible,
.site-nav__brand:focus-visible,
.site-nav__join-btn:focus-visible,
.site-nav__login-btn:focus-visible,
.site-nav__hamburger:focus-visible,
.site-nav__dropdown-trigger:focus-visible,
.site-nav__dropdown-item:focus-visible,
.notif-banner__link:focus-visible,
.notif-banner__dismiss:focus-visible,
.mob-drawer__cta-btn:focus-visible,
.mob-drawer__cta-ghost:focus-visible {
  outline: 2px solid var(--c-gold, #D4AF37);
  outline-offset: 2px;
  border-radius: var(--r-sm, 6px);
}

/* ── Safe-area inset compensation ─────────────────────────────
   Mobile drawer extends under the iOS home-bar when opened in
   fullscreen; notif banner sits above the top notch. env()
   gracefully degrades to the fallback value on older browsers. */
.mob-drawer {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}
.notif-banner {
  padding-top: env(safe-area-inset-top, 0);
}

/* ── Global reduced-motion opt-out ────────────────────────────
   Universally honours prefers-reduced-motion: animations run
   ~instant, transitions effectively disabled, smooth-scroll off.
   Matches the pattern recommended by WAI-ARIA + W3C WCAG. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. RACES DROPDOWN — Today · Tomorrow · Big race grouped under
   one trigger. Reuses the existing `.site-nav__dropdown` and
   `.mob-drawer__accordion` patterns; only adds two small variants:
     – `.site-nav__dropdown-item--gold` for the big-race row
     – sub-item `.mob-drawer__link--featured` retains its gold tint
       inside the new accordion body.
───────────────────────────────────────────────────────────── */

.site-nav__dropdown-item--gold .site-nav__di-name { color: var(--c-gold); }
.site-nav__dropdown-item--gold:hover .site-nav__di-name { color: var(--c-gold-lt, #f5d76e); }
.site-nav__dropdown-item--gold .site-nav__di-icon {
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.25));
}