/* ==========================================================================
   iGPFun league site
   Single stylesheet. Palette and type carried over from the old WordPress
   Stackable theme: black background, red masthead, Abel throughout.

   HOUSE RULE: no `em` units anywhere in this file. Use rem, px, %, vw/vh, ch.
   Check with:  grep -rnE '[0-9.]+em\b' website/assets/css/
   ========================================================================== */

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/abel-400.woff2') format('woff2');
}

:root {
  --red-bar: #dd1f1f;      /* masthead, carried from s_header_bg_color */
  --red-accent: #e8b425;   /* headings, links (card titles, h2, plain links) */
  --red-deep: #ac2d2f;     /* hover, borders */

  --bg: #000;
  --bg-raised: #131315;    /* cards, tables */
  --bg-sunken: #0a0a0b;
  --fg: #fff;
  --muted: #cfcfcf;
  --line: #2a2a2e;

  --masthead-h: 64px;
  --measure: 68ch;
  --radius: 4px;

  --font: 'Abel', 'Trebuchet MS', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.25rem;       /* old site ran 20px body copy */
  line-height: 1.65;
  letter-spacing: 0.01rem;
}

/* --------------------------------------------------------------- masthead */

/* Sticky, not fixed. The old site used position:fixed plus a hardcoded body
   padding-top, which breaks the moment the nav wraps to a second line. A sticky
   header occupies its own space in flow, so it stays pinned while scrolling and
   can be any height without ever overlapping the content. */
.masthead {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 170;             /* same stacking value as the old site */
  background: var(--red-bar);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.masthead__inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--masthead-h);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.wordmark__igp { color: #fff; }
.wordmark__fun { color: #2a0000; }
.masthead .wordmark:hover .wordmark__fun { color: #000; }

.nav { margin-left: auto; }
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  /* Must beat the --measure clamp further down, which would otherwise cap this
     list at 68ch and force the last item onto a second row. */
  max-width: none;
}
.nav a {
  display: block;
  padding: 0.45rem 0.6rem;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.nav a:hover,
.nav a:focus-visible { background: rgba(0, 0, 0, 0.28); }
.nav a[aria-current="page"] {
  background: rgba(0, 0, 0, 0.38);
  font-weight: 700;
}

/* The nav is a plain wrapping list. A <details> disclosure was tried first and
   rejected: when closed, browsers hide its non-summary children in a way an
   author stylesheet cannot reliably override, so the desktop nav vanished.
   Wrapping needs no JavaScript and cannot break. */
@media (max-width: 1100px) {
  .masthead__inner {
    flex-wrap: wrap;
    padding: 0.5rem 1rem 0.6rem;
    gap: 0.4rem 1rem;
  }
  .nav { margin-left: 0; width: 100%; }
  .nav ul { gap: 0.15rem 0.3rem; }
  .nav a { padding: 0.35rem 0.5rem; font-size: 0.98rem; }
  /* A wrapped two row nav pinned to the top eats too much of a phone screen,
     so below this width it scrolls away with the page instead. */
  .masthead { position: static; }
  :target { scroll-margin-top: 1.5rem; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  /* The gradient IS the old site's 50% black overlay. No extra element. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../img/hero-race.jpg');
  background-size: cover;
  /* Framed on the cars, which sit in the lower two thirds of the photo.
     This image deliberately has no branding baked into it: hero-sfl-2024.jpg
     does, and that wordmark collided with the page heading at the viewport
     sizes where the cover crop leaves it in frame. Our own wordmark is already
     in the masthead on every page. */
  background-position: center 65%;
  border-bottom: 3px solid var(--red-bar);
}
.hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 1.25rem;
  text-align: center;
}
.hero h1 { margin: 0 0 0.75rem; }
.hero__tagline {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 1.4rem;
  color: #f0f0f0;
}

.hero--slim .hero__inner { padding: 3rem 1.25rem 2.5rem; }

@media (max-width: 700px) {
  .hero__inner { padding: 3.5rem 1.25rem; }
  .hero__tagline { font-size: 1.25rem; }
}

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
}
h1 { font-size: clamp(2.5rem, 6vw, 4rem); }   /* 4rem = the old 64px h1 */
h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  color: var(--red-accent);
  margin-top: 3rem;
}
h3 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin-top: 2rem; }
h4 { font-size: 1.25rem; margin-top: 1.5rem; }

h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol, table { max-width: var(--measure); }
p { margin: 0 0 1.15rem; }

a { color: var(--red-accent); }
a:hover, a:focus-visible { color: #f2c94c; }

strong { font-weight: 700; }
small { font-size: 0.95rem; color: var(--muted); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* --------------------------------------------------------------- layout */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.wrap--narrow { max-width: 900px; }

/* Anchor targets must clear the fixed masthead. */
:target { scroll-margin-top: calc(var(--masthead-h) + 1.5rem); }

.lede {
  font-size: 1.45rem;
  color: #f0f0f0;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- pieces */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
  max-width: none;
}
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red-bar);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; color: var(--red-accent); }
.card p:last-child { margin-bottom: 0; }
.card p { max-width: none; }

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: var(--red-bar);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--red-bar);
  border-radius: var(--radius);
  font-size: 1.15rem;
  transition: background-color 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--red-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--red-bar); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

/* Numbered steps, used by the two "how to join" pages. */
.steps { list-style: none; counter-reset: step; padding: 0; max-width: var(--measure); }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 4rem;
  margin: 0 0 2rem;
  min-height: 3rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--red-bar);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
}
.steps h3 { margin-top: 0; }

.note {
  border-left: 3px solid var(--red-bar);
  background: var(--bg-raised);
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }
.note--warn { border-left-color: #e8b425; }

table {
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  margin: 1.5rem 0;
  font-size: 1.1rem;
}
caption {
  text-align: left;
  color: var(--muted);
  padding-bottom: 0.6rem;
  font-size: 1.05rem;
}
th, td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--bg-raised);
  color: var(--red-accent);
  border-bottom: 2px solid var(--red-bar);
  white-space: nowrap;
}
tbody tr:hover { background: var(--bg-sunken); }

/* The upcoming round on the calendar. */
tbody tr.is-next { background: #1d1416; }
tbody tr.is-next td { border-bottom-color: var(--red-deep); }
tbody tr.is-next td:first-child { box-shadow: inset 3px 0 0 var(--red-bar); }
.cal-flag { color: var(--red-accent); white-space: nowrap; }

/* Wide tables must scroll inside themselves, never the page. */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
.table-scroll table { margin: 0; }

figure { margin: 2rem 0; max-width: 100%; }
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 1rem;
}

/* Opt-in modifier: aligns a figure to the same measure-width text column as
   surrounding paragraphs, instead of centering within the full .wrap. Only
   applied where a page explicitly uses this class, so plain <figure>
   elements elsewhere (track maps, screenshots) are unaffected. */
.figure--measure {
  max-width: var(--measure);
}
.figure--measure img {
  margin: 0 auto;
  border: none;
  border-radius: 0;
}

img { max-width: 100%; height: auto; }

.rule-list > li { margin-bottom: 0.85rem; }

/* Skip link for keyboard users, hidden until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red-bar);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- race briefing */

.briefing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
.briefing-stats li {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red-bar);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

#briefing-target:empty { display: none; }

.briefing-fallback {
  border: 1px solid var(--line);
  border-left: 3px solid #e8b425;
  background: var(--bg-raised);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  max-width: var(--measure);
}
.briefing-fallback p:last-child { margin-bottom: 0; }
.briefing-fallback code {
  background: #000;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ tables (interactive) */

/* Reusable tab / segmented-control switcher for pages that show the
   same data in more than one table (standings today, more later).
   Visually matches .btn / .btn--ghost so it reads as part of the same
   design language, not a separate widget. Toggle the active state in
   JS by setting aria-pressed="true" on the clicked button and
   aria-pressed="false" on the others. */
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 1.5rem;
}
.view-tabs button {
  display: inline-block;
  font-family: var(--font);
  font-size: 1.15rem;
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--red-bar);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.view-tabs button:hover,
.view-tabs button:focus-visible { background: var(--red-deep); }
.view-tabs button[aria-pressed="true"] {
  background: var(--red-bar);
  font-weight: 700;
}

/* Loading / status text shown in a table's output container before a
   view has rendered, or if a fetch fails. */
.view-output-status { color: var(--muted); }

/* Result-grid cell states (standings-grid-view.js). One cell per
   race per driver: scored, ran-but-didn't-score, or didn't run.
   Deliberately green/red/neutral rather than the site's red or amber
   accents, so these states read as their own thing and don't compete
   with page branding. */
.standings-grid-table td.grid-scored {
  background: rgba(58, 168, 100, 0.16);
  color: #8fe3ab;
  font-weight: 700;
}
.standings-grid-table td.grid-not-scored {
  background: rgba(214, 69, 69, 0.16);
  color: #f29a9a;
}
.standings-grid-table td.grid-no-run {
  color: var(--muted);
  text-align: center;
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 3px solid var(--red-bar);
  background: var(--bg-sunken);
  padding: 2.5rem 1.25rem;
  margin-top: 4rem;
}
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 1.05rem;
}
.footer a { color: var(--fg); }
.footer a:hover { color: var(--red-accent); }
.footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  max-width: none;
}