/* ==========================================================================
   SOUTHERN PULLERS ASSOCIATION: the flyer system on the website
   --------------------------------------------------------------------------
   From the SPA Event Flyer System (brand & production guide): off-white
   ground, deep navy structure, steel blue accent, charcoal body text,
   Roboto Condensed for headlines and labels, Noto Sans for body copy. Square
   and upright: no italics, no slanted blocks. The trucks and event photos
   supply the colour; the page frames them.

   Loaded after theme.css (through partials/head-brand) and only re-points its
   tokens plus the few places the dark theme could not express with them.
   Take the one <link> out and the site is back to the dark theme.
   ========================================================================== */

:root {
  /* The brand palette, as the guide names it */
  --sp-navy:    #183247;   /* primary structure */
  --sp-steel:   #5a86ac;   /* secondary accent */
  --sp-off:     #f1f2f1;   /* primary background */
  --sp-char:    #20252a;   /* body text */
  --sp-navy-2:  #22425c;   /* navy, a step lighter, for hover on navy */
  --sp-steel-d: #3f6a8f;   /* steel blue dark enough for small text on white */
  --sp-live:    #c8102e;   /* LIVE and errors only: a function, not decoration */

  /* theme.css tokens, re-pointed. The names describe the dark theme's colours,
     but what they do is: black = the ground, panel = cards, white = headings
     and strong type, body = copy, grey = quieter copy, red = the accent. */
  --black:   var(--sp-off);
  --panel:   #ffffff;
  --panel-2: #f7f8f7;
  --panel-3: #e7ebee;
  --white:   var(--sp-navy);
  --body:    var(--sp-char);
  --grey-1:  #34404a;
  --grey-2:  #56626c;
  --grey-3:  #6d7882;
  --grey-4:  #9aa3ab;
  --rule:    rgba(24,50,71,0.14);
  --rule-2:  rgba(24,50,71,0.30);
  --red:      var(--sp-steel);
  --red-dark: var(--sp-navy);
  --red-tint: rgba(90,134,172,0.14);
  --blue:     var(--sp-navy);
  --blue-dark:#0f2233;
  --green:    #1d7a45;
  --gold:     #b3830a;

  --danger:      var(--sp-live);
  --danger-soft: rgba(200,16,46,0.08);
  --live-soft:   rgba(29,122,69,0.10);

  --f-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-cond:    "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-text:    "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --slant: 0px;   /* theme.css cuts filled blocks on a slant; the flyer is square */
  color-scheme: light;
}

/* ---------------------------------------------------------------- type */
body { font-family: var(--f-text); color: var(--body); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; line-height: 1.02; }
/* Upright everywhere: the dark theme's italic display face is not part of this system */
*, *::before, *::after { font-style: normal !important; }
em, i { font-style: italic !important; }

/* ---------------------------------------------------------------- navy areas
   The title bands and the footer are the flyer's navy blocks. Inside them the
   tokens flip back to light type, so every rule in theme.css that reads
   --white or --grey-* is right there without being restated. */
.front-hero, .members-hero, .detail-hero, .signup-hero, .event-hero, .site-footer {
  --white:  #ffffff;
  --body:   #e9eef2;
  --grey-1: #d4dde5;
  --grey-2: #aebfcd;
  --grey-3: #8fa3b4;
  --red:    #9dbcd8;          /* steel blue lifted to read on navy */
  --rule:   rgba(255,255,255,0.14);
  --rule-2: rgba(255,255,255,0.28);
  /* theme.css's older names for the same roles are fixed at the root, so they are restated here too */
  --text: var(--body);   --text-dim: var(--grey-1); --text-mute: var(--grey-2);
  --ink:  var(--body);   --ink-2: var(--grey-1);    --ink-3: var(--grey-2);    --ink-4: var(--grey-3);
  --steel: var(--grey-2); --line: var(--rule);      --line-soft: var(--rule);  --amber: var(--red);
  --spot: var(--red);
  color: var(--body);
}
.front-hero, .members-hero, .detail-hero, .signup-hero, .event-hero {
  background: var(--sp-navy);
  border-bottom: 4px solid var(--sp-steel);
}
.masthead-title { letter-spacing: 0.005em; }
.masthead-kicker { letter-spacing: 0.2em; }
.site-footer { background: var(--sp-navy); border-top: 0; }
.site-footer .footer-note, .site-footer .footer-note * { color: var(--grey-2); }
.site-footer .footer-contact a { color: #ffffff; }

/* ---------------------------------------------------------------- header
   The flyer's identity strip: light, small, spaced, over a thin rule. */
.site-header { background: #ffffff; border-bottom: 1px solid var(--rule-2); }
.desktop-menu > li > a { color: var(--sp-navy); }
.desktop-menu > li > a:hover, .desktop-menu > li > a.activePage { color: var(--sp-steel-d); }
.nav-more { background: linear-gradient(90deg, transparent, #ffffff 55%); }

/* ---------------------------------------------------------------- buttons
   Filled blocks are navy or steel blue with white type; the dark theme's
   token for that type is navy now, so it is set outright. */
.btn-primary, .btn-solid, .btn-red, .btn-results, .checkout-btn, .results-spotlight-btn,
.prereg-card-btn, .reg-btn, .register-btn { color: #ffffff !important; }
.btn-primary:hover, .btn-solid:hover, .btn-red:hover, .btn-results:hover, .checkout-btn:hover,
.results-spotlight-btn:hover { background: var(--sp-navy); border-color: var(--sp-navy); color: #ffffff; }
.btn, .btn-outline { color: var(--sp-navy); border-color: var(--rule-2); }
.btn:hover, .btn-outline:hover { background: var(--sp-navy); color: #ffffff; border-color: var(--sp-navy); }
.tag, .tag-points, .tag-nonpoints, .upcoming-badge, .card-class-pill, .profile-class-pill, .night-tag { color: #ffffff; }

/* ---------------------------------------------------------------- live: the one red
   LIVE is a state, not decoration, so it keeps a real red. */
.live-alert-bar { background: var(--sp-live); color: #ffffff; }
.live-alert-bar * { color: #ffffff; }
.live-alert-btn { background: #ffffff !important; color: var(--sp-live) !important; }
.live-alert-btn:hover { background: var(--sp-navy) !important; color: #ffffff !important; }
.nav-live-chip { background: var(--sp-live); color: #ffffff !important; }
.nav-live-chip:hover { background: var(--sp-navy); }
.desktop-menu > li > a.nav-live-chip { color: #ffffff; }
.live-badge { background: var(--sp-live); color: #ffffff; }
.error, .error-banner, .error-msg { color: var(--sp-live); }

/* ---------------------------------------------------------------- cards
   White on the off-white ground, a thin navy rule, the steel edge where the
   dark theme had its red one. */
.ev-class-row, .profile-about, .archive-links a, .prereg-card, .site-notice {
  background: #ffffff; border: 1px solid var(--rule-2); color: var(--body);
}
.ev-class-row, .profile-about, .prereg-card { border-left: 5px solid var(--sp-steel); }
.archive-links a { border-left: 4px solid var(--sp-steel); color: var(--sp-navy); }
.archive-links a:hover { border-color: var(--sp-navy); }
.prereg-card:hover { background: #ffffff; border-color: var(--sp-navy); }
.ev-class-meta, .profile-sponsors span, .archive-year-label, .prereg-card-note { color: var(--grey-2); }
.ev-class-desc, .profile-bio, .home-intro, .prereg-card-nights { color: var(--grey-1); }
.profile-sponsors, .prereg-night b { color: var(--sp-navy); }
.prereg-card-kicker { color: var(--sp-steel-d); }
.prereg-card-btn { background: var(--sp-navy); }
.prereg-card:hover .prereg-card-btn { background: var(--sp-steel-d); }
.site-notice { border-left: 5px solid var(--sp-navy); }
.site-notice.is-warning { border-left-color: #b3830a; }
.site-notice.is-urgent { background: var(--sp-live); color: #ffffff; border-left-color: #8e0b20; }
.sponsor-strip { background: #ffffff; }
.results-overall-table tbody tr:nth-child(even) { background: rgba(24,50,71,0.035); }

/* ---------------------------------------------------------------- date badges
   The dark theme's white date tiles come out navy with light type, the flyer's
   date panel in small. Their quieter lines flip with them. */
.upcoming-card-date-badge, .rs-date { --grey-2: #b9c8d5; --grey-3: #a7b8c7; }
.sched-row.is-past .rs-date { background: var(--panel-3); color: var(--sp-navy); --grey-3: #56626c; }
td.rt-date { color: var(--grey-2); }   /* member page: its own style has a light #999 */

/* ---------------------------------------------------------------- headline weight
   The dark theme set its one-weight display face at 400 everywhere. Roboto
   Condensed has real weights, and the flyer headlines are bold. This list is every
   rule in theme.css that uses the display face. */
h1,
h2,
h3,
h4,
.stat-val,
.cs-val,
.ssm-val,
.ucd-day,
.site-desktop-title,
.desktop-menu > li > a,
.nav-live-chip,
.live-alert-btn,
.members-hero-title,
.signup-hero-title,
.pg-title,
.members-page-title,
.event-hero-name,
.masthead-title,
.section_title,
.section_title_red,
.event_date_td,
.event_place_span,
.live-badge,
.tag,
.tag-points,
.tag-nonpoints,
.upcoming-badge,
.card-class-pill,
.profile-class-pill,
.night-tag,
.card-member-badge,
.profile-member-badge,
.upcoming-card-name,
.upcoming-directions-link,
.rs-date .ucd-day,
.results-spotlight-name,
.result_class_title,
.round-tab-nav-link,
.btn,
.btn-primary,
.btn-solid,
.btn-red,
.btn-outline,
.btn-results,
.checkout-btn,
.results-spotlight-btn,
.add-entry-btn,
.class-nav a,
.class-nav-bar a,
.class-section-title,
.no-results-title,
.empty-title,
.card-driver,
.profile-driver,
.login-header,
.spotlight-pos-num,
.spotlight-driver,
.signup-toast-driver,
.signup-toast-draw,
.stat-line b,
.rules-pdf-title,
.rules-doc h1,
.rules-doc h2,
.rules-doc h3,
.rules-doc h4,
.sched-row.is-latest .sched-name,
.sched-name,
.ev-fact-v.is-big,
.ev-fact-v b,
.login-title,
.sponsor-name,
.ev-class-name,
.prereg-card-title { font-weight: 700; }
/* figures in tables: the same face, a medium weight so a long table is not all shouting */
.results-table td,
.draw-table td,
.history-table td,
.results-overall-table td,
.distance-cell,
.position-cell,
.draw-num,
.speed-cell,
.col-dist,
.col-total,
.col-pos,
.col-rank,
.ht-dist,
.rt-dist { font-weight: 500; }
.order-total-amount, .spotlight-distance { font-weight: 700; }
.desktop-menu > li > a { font-family: var(--f-cond); font-weight: 600; letter-spacing: 0.06em; }
.section_title, .section_title_red { font-weight: 700; }

/* ---------------------------------------------------------------- faces named outright
   A few rules in theme.css name the old faces instead of the tokens. */
.prereg-card-title, .ev-class-name { font-family: var(--f-display); font-weight: 700; }
.site-footer .footer-note, .ev-class-meta, .profile-sponsors, .archive-year-label, .site-notice,
.archive-links a { font-family: var(--f-cond); }

/* ---------------------------------------------------------------- spacing and square edges */
.prereg-card-wrap { margin-top: 22px; }
.section_title::before, .section_title_red::before { transform: none; width: 5px; }

/* ---------------------------------------------------------------- event page
   Its own <style> paints the title band with an older surface colour and comes
   after this file, so these carry one more selector to win. */
body .event-hero { background: var(--sp-navy); border-bottom: 4px solid var(--sp-steel); }
body .event-hero-back { color: #ffffff; border-color: rgba(255,255,255,0.35); }
body .event-hero-back:hover { color: #ffffff; border-color: #ffffff; }
/* the floating hook counter: a navy pill, its quieter words lifted to read on it */
body #show-progress-pill {
  background: rgba(24,50,71,0.95); border-color: rgba(90,134,172,0.7);
  --ink-3: #d4dde5; --ink-4: #aebfcd; --amber: #9dbcd8;
}

/* ==========================================================================
   PHONES
   A menu button beside Sign Up opens the menu under the header, the way
   thesouthernpullers.com does, instead of a strip that scrolls sideways. The
   type and spacing come down a step so a phone shows more than a few lines at
   a time. Desktop is untouched: all of this is inside the 620px query.
   ========================================================================== */
.nav-burger { display: none; }
@media (max-width: 620px) {
  .site-header { position: sticky; }
  .top-bar { height: 56px; padding: 0 10px 0 14px; gap: 8px; position: static; }
  .top-bar-right { position: static; }
  .site-brand img { height: 38px; }

  /* the menu: hidden until the button opens it, then a plain list under the header */
  .menu-scroll {
    display: none; position: absolute; top: 56px; left: 0; right: 0; z-index: 80;
    background: #ffffff; border-top: 1px solid var(--rule); border-bottom: 3px solid var(--sp-steel);
    box-shadow: 0 12px 24px rgba(24,50,71,0.18);
  }
  .site-header.nav-open .menu-scroll { display: block; }
  .menu-scroll .desktop-menu {
    display: block; overflow: visible; max-width: none; padding: 6px 0;
    mask-image: none; -webkit-mask-image: none;
  }
  .menu-scroll .desktop-menu > li { display: block; }
  .menu-scroll .desktop-menu > li > a {
    display: block; padding: 12px 20px; font-size: 16px; letter-spacing: 0.06em;
    border-left: 4px solid transparent; white-space: normal;
  }
  .menu-scroll .desktop-menu > li > a.activePage { border-left-color: var(--sp-steel); background: var(--panel-2); color: var(--sp-navy); }
  .menu-scroll .desktop-menu > li > a.nav-live-chip { display: inline-flex; margin: 6px 20px; padding: 8px 14px; border-left: 0; }
  .nav-more { display: none !important; }

  .nav-cta { margin-right: 0; height: 34px; padding: 2px 12px 0; font-size: 14px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; flex: 0 0 auto;
    background: transparent; border: 1px solid var(--rule-2); cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; background: var(--sp-navy); transition: transform 0.2s, opacity 0.2s; }
  .site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* live bar: one compact line */
  .live-alert-bar { padding: 6px 12px; gap: 10px; }
  .live-alert-label { font-size: 12px; letter-spacing: 0.05em; line-height: 1.25; }
  .live-alert-btn { font-size: 12px !important; padding: 6px 10px !important; white-space: nowrap; flex: 0 0 auto; }

  /* title band */
  .front-hero, .members-hero, .detail-hero, .signup-hero { padding-top: 18px; padding-bottom: 16px; }
  .masthead-kicker { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 4px; }
  .masthead-title { font-size: 30px; line-height: 1.02; }
  .masthead-meta, .meta-line, .pg-subtitle, .event-hero-meta { font-size: 12.5px; letter-spacing: 0.04em; }

  /* sign-up card */
  .prereg-card-wrap { margin-top: 14px; margin-bottom: 14px; }
  .prereg-card { padding: 12px; gap: 10px; }
  .prereg-card-kicker { font-size: 11px; }
  .prereg-card-title { font-size: 22px; margin: 2px 0 6px; }
  .prereg-card-nights { font-size: 14px; gap: 4px 12px; }
  .prereg-card-note { font-size: 12.5px; margin-top: 6px; }
  .prereg-card-btn { height: 40px; font-size: 15px; }

  /* schedule and results lists */
  .section_title, .section_title_red { font-size: 22px; }
  .sched-row { padding: 10px 12px 10px 10px; }
  .sched-name { font-size: 18px; line-height: 1.1; }
  .rs-date { padding: 5px 6px 4px; }
  .rs-date .ucd-day { font-size: 22px; }
  .sched-row .btn, .sched-row .btn-results, .sched-row .btn-primary,
  .sched-row .results-spotlight-btn { font-size: 14px; padding: 7px 12px 5px; }

  .site-footer { font-size: 12px; padding: 20px 14px; }

  /* event results: half the side margin, rows a phone can show several of */
  .event_results_section, .event_results { padding-left: 8px; padding-right: 8px; }
  .results-table th { padding: 8px 8px; font-size: 11px; letter-spacing: 0.06em; }
  .results-table td { padding: 9px 8px; font-size: 15px; }
}