/* ==========================================================================
   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: #d1292c;   /* headings, wordmark, 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: #f0575a; }

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;
}

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;
}

/* ----------------------------------------------------------------- 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;
}