/* ================= SPORTKRANT DESIGN SYSTEM ================= */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root, :root[data-theme="light"] {
  --paper: #f7f4ee; --card: #fffdf8; --ink: #1a1815; --ink-soft: #6b6459;
  --rule: #e2dccf; --rule-strong: #1a1815; --accent: #a33232; --accent-contrast: #fff;
  --accent-text: #a33232;
  --chip: #f2eee3; --shadow: 0 1px 3px rgba(26,24,21,.06);
}
:root[data-theme="dark"] {
  --paper: #171412; --card: #211d19; --ink: #ece6d9; --ink-soft: #9a917f;
  --rule: #35302a; --rule-strong: #ece6d9; --accent: #c05555; --accent-contrast: #fff;
  --accent-text: #c86b6b;
  --chip: #2a2521; --shadow: none;
}
:root {
  --sport-soccer: #2d7a3a; --sport-f1: #c8102e; --sport-hockey: #e87722;
  --sport-rugby: #1d3557; --sport-schaatsen: #3a7ca5; --sport-zwemmen: #0e7490;
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
}

/* The six brand colours above are tuned to sit on a 3px rule, not to be
   read as 12px bold text. Against --paper, hockey managed 2.7:1 and
   speed skating 4.2:1 in the light theme; the dark theme was worse
   across the board, with rugby's navy at 1.5:1 — effectively invisible.
   Lighthouse only ever audits the light theme, so it reported one
   failing element and missed the rest.
   So: keep the brand colour for rules, borders and fills, and use a
   luminance-shifted twin wherever the colour becomes text. Every value
   below clears 4.6:1 on the least forgiving surface in its theme —
   --chip in light, --card in dark — so it holds on every background. */
:root, :root[data-theme="light"] {
  --sport-soccer-text: #2d793a; --sport-f1-text: #c8102e; --sport-hockey-text: #a95312;
  --sport-rugby-text: #1d3557; --sport-schaatsen-text: #347095; --sport-zwemmen-text: #0e7490;
}
:root[data-theme="dark"] {
  --sport-soccer-text: #389949; --sport-f1-text: #f04763; --sport-hockey-text: #e87722;
  --sport-rugby-text: #5a88c8; --sport-schaatsen-text: #438ebd; --sport-zwemmen-text: #1292b5;
}

/* app.js writes --sport-color as an inline style, which cannot react to a
   theme toggle. data-sport can: the mapping lives in CSS, so switching to
   dark re-resolves the text colour with no JS involved. */
:root[data-sport="soccer"]    { --sport-color-text: var(--sport-soccer-text); }
:root[data-sport="f1"]        { --sport-color-text: var(--sport-f1-text); }
:root[data-sport="hockey"]    { --sport-color-text: var(--sport-hockey-text); }
:root[data-sport="rugby"]     { --sport-color-text: var(--sport-rugby-text); }
:root[data-sport="schaatsen"] { --sport-color-text: var(--sport-schaatsen-text); }
:root[data-sport="zwemmen"]   { --sport-color-text: var(--sport-zwemmen-text); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }
a { color: inherit; }
table { font-variant-numeric: tabular-nums; }
.micro-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
}

/* Onzichtbaar voor bezoekers, wél leesbaar door Google/screenreaders */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ================= MASTHEAD ================= */
.masthead {
  padding: 20px 0 0;
}
.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.masthead-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.5px;
  color: var(--ink);
}
.masthead-date {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  border-top: 3px double var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0;
  overflow-x: visible;
}
.mainnav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.mainnav a.active,
.mainnav a[aria-current="page"] {
  color: var(--accent);
}
.theme-toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
}
.theme-toggle:hover {
  color: var(--accent);
}

/* ================= BUTTONS / LINKS ================= */
.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 16px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.btn-accent:hover {
  opacity: 0.9;
}
.link-accent {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.link-accent:hover {
  opacity: 0.8;
}

/* ================= CARDS ================= */
.kcard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  box-shadow: var(--shadow);
  padding: 18px;
}
.kcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
}
.kcard-chip {
  display: inline-block;
  background: var(--chip);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0;
}

/* ================= TABLES ================= */
.ktable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
}
.ktable th,
.ktable td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.ktable th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ktable td.num,
.ktable th.num {
  text-align: right;
  font-weight: 700;
}

/* ================= FOOTER ================= */
.footer {
  border-top: 3px double var(--rule-strong);
  margin-top: 40px;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}
.footer a {
  color: var(--ink-soft);
  text-decoration: underline;
}
/* The sport links had no rule at all, so they were 12px inline anchors
   sitting on default line boxes — roughly 16px tall and touching each
   other once they wrapped on a phone. Give each one a 44px target and
   real spacing between them. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.footer-nav .footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  .mainnav {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .mainnav::-webkit-scrollbar {
    display: none;
  }
}

/* ================= HOME PAGE (sportkrant) ================= */
.home {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.home-top {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 20px;
}
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  background: var(--ink) var(--hero-img) center/cover no-repeat;
  text-decoration: none;
}
.home-hero-overlay {
  width: 100%;
  padding: 70px 24px 22px;
  background: linear-gradient(180deg, transparent, rgba(12,10,8,.92));
  color: #f7f4ee;
}
.home-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e8b04b;
  margin-bottom: 8px;
}
.home-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 8px;
}
.home-hero-sub {
  font-size: 14px;
  color: #f7f4ee;
  margin-bottom: 16px;
  opacity: .92;
}
.home-upcoming {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 14px;
}
.home-upcoming-head {
  margin-bottom: 8px;
}
.home-upcoming-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.home-upcoming-row:last-child {
  border-bottom: none;
}
.home-upcoming-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.home-upcoming-text {
  font-size: 13px;
  line-height: 1.4;
}
.home-upcoming-text small {
  color: var(--ink-soft);
}
.home-status-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-section-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-section-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-soft);
}
.home-section-head.is-live .dot {
  background: #c0392b;
  animation: home-live-pulse 2s ease-in-out infinite;
}
.home-section-head.is-live { color: #c0392b; }
.home-section-head.is-upcoming .dot { background: var(--accent); }
@keyframes home-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-grid > *:only-child {
  grid-column: 1 / -1;
}
.home-finished-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.finished-highlight {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.finished-winner {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.home-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sport-color, var(--accent));
  text-decoration: none;
  color: var(--ink);
}
.home-strip-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.home-strip-body {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.home-strip-body small {
  color: var(--ink-soft);
}
.home-strip-arrow {
  font-weight: 700;
  color: var(--sport-color-text, var(--accent-text));
}
.home-seo-block {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
/* The page's single <h1>. The hero above it is a rotating fixture
   promo, so it carries an <h2> instead — the heading that describes
   the page has to be stable. */
.home-seo-block h1 {
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}
@media (max-width: 768px) {
  .home-top {
    grid-template-columns: 1fr;
  }
  .home-hero {
    min-height: 220px;
    background-image: var(--hero-img-mobile, var(--hero-img));
  }
  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= SPORT PAGES (sportkrant) ================= */

/* ---- Hero ---- */
.hero {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  box-shadow: var(--shadow);
  padding: 26px 24px;
  margin-top: 20px;
}
.hero--home {
  display: none;
}
.hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.hero-flag {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 8px;
}
.hero-champion {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1;
  margin-bottom: 8px;
}
.hero-detail {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.hero-year {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  background: var(--chip);
  padding: 4px 10px;
  margin-bottom: 16px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-cta-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 8px 14px;
}
.hero-cta-btn:hover {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Next event banner ---- */
.next-event-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--chip);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 13px;
}
.neb-icon {
  font-size: 15px;
}
.neb-label {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
}
.neb-name {
  font-weight: 600;
}
.neb-dot,
.neb-date,
.neb-when {
  color: var(--ink-soft);
}

/* ---- Stats bar ---- */
.stats-bar {
  margin-top: 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.stats-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
}

/* ---- Sub-tabs: pill-less newspaper tabs ---- */
.subtab-select {
  display: none;
}
.subtab-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtab-bar::-webkit-scrollbar {
  display: none;
}
.subtab-btn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 10px 1px;
  border-bottom: 2px solid transparent;
}
.subtab-btn:hover {
  color: var(--sport-color-text, var(--accent-text));
}
.subtab-btn.active {
  color: var(--sport-color-text, var(--accent-text));
  border-bottom-color: var(--sport-color, var(--accent));
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.search-input,
.decade-select {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 10px;
}
.search-input {
  flex: 1;
  min-width: 180px;
}
.search-input:focus,
.decade-select:focus {
  outline: 1px solid var(--sport-color, var(--accent));
}
.results-count {
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: auto;
  white-space: nowrap;
}

/* ---- Section header ---- */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 24px;
  margin-bottom: 14px;
}
.section-intro {
  flex: 1 0 100%;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 2px;
}
.section-intro:empty {
  display: none;
}
.section-title {
  font-size: clamp(19px, 2.4vw, 25px);
  min-width: 0;
}
.section-count {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---- Cards grid ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
/* Grid items default to min-width:auto, i.e. their content's intrinsic
   minimum width — a wide nowrap table would otherwise force the grid
   track (and the page) wider than the viewport instead of scrolling
   inside .table-section's own overflow-x. min-width:0 lets tracks
   shrink to the container so the internal scroll actually applies. */
.cards-grid > * {
  min-width: 0;
}
.cards-grid > .table-section,
.cards-grid > .upcoming-section,
.cards-grid > .afstand-year-block,
.cards-grid > .race-calendar-grid,
.cards-grid > .race-detail-page,
.cards-grid > .home-page,
.cards-grid > .home,
.cards-grid > .jump-nav,
.cards-grid > .empty-state {
  grid-column: 1 / -1;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  box-shadow: var(--shadow);
  padding: 18px;
}
.card.skeleton {
  background: var(--chip);
  border-top-color: var(--rule);
  min-height: 150px;
}
.card-nth {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.card-year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.card-champion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.card-flag {
  font-size: 28px;
  line-height: 1;
}
.card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.card-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.card-note {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
}
.card-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
}
.tag {
  flex-shrink: 0;
  min-width: 58px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}
.empty-icon {
  font-size: 34px;
  margin-bottom: 10px;
}

/* ---- Jump-to-section navigation (long schedule/poule pages) ---- */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.jump-chip {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.jump-chip:hover {
  background: var(--sport-color-text, var(--accent-text));
  color: var(--paper);
  border-color: var(--sport-color-text, var(--accent-text));
}

/* ---- Tables (data-table + variants) ---- */
.table-section {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  padding: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-margin-top: 16px;
}
.table-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13.5px;
}
.data-table th,
.data-table td {
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.data-table th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--sport-color, var(--accent));
}
.data-table td.match-teams,
.data-table td.pts,
.data-table td.score {
  white-space: normal;
}
.data-table .pts,
.data-table .score {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.data-table .match-teams {
  font-weight: 600;
}
.data-table .stadium {
  color: var(--ink-soft);
  font-size: 12px;
}
.data-table tr.highlight {
  background: var(--chip);
}
.data-table tr.result-pos-1,
.data-table tr.result-pos-2,
.data-table tr.result-pos-3 {
  font-weight: 700;
}
.no-results-msg {
  padding: 20px 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

/* ---- F1 race calendar ---- */
.race-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.race-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  padding: 16px;
  font-size: 13px;
}
.race-card.race-clickable {
  cursor: pointer;
}
.race-card.race-clickable:hover {
  border-color: var(--sport-color, var(--accent));
}
.race-card.race-done {
  opacity: 0.8;
}
.race-card.race-next {
  box-shadow: 0 0 0 1px var(--accent);
}
.race-status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 7px;
}
.race-badge-done {
  background: var(--chip);
  color: var(--ink-soft);
}
.race-badge-next {
  background: var(--accent);
  color: var(--accent-contrast);
}
.race-round {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.race-flag {
  font-size: 24px;
  margin-bottom: 4px;
}
.race-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}
.race-circuit,
.race-city {
  font-size: 12px;
  color: var(--ink-soft);
}
.race-date {
  font-size: 12px;
  margin-top: 8px;
}
.race-winner {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.race-uitslag-hint {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
}

/* ---- F1 race detail ---- */
.race-detail-page {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sport-color, var(--accent));
  padding: 20px;
}
.race-detail-back {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.race-detail-back:hover {
  color: var(--accent);
}
.race-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.race-detail-flag {
  font-size: 36px;
}
.race-detail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.race-detail-sub,
.race-detail-date {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---- Upcoming tournament cards ---- */
.upcoming-section {
  margin-top: 4px;
}
.upcoming-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
/* Was a bare <h3> with the raw brand colour inlined, which broke both the
   heading order under the page <h1> and the contrast ratio. It carries no
   size of its own once promoted, so set one here. */
.home-faq-title {
  font-size: 20px;
  margin-bottom: 12px;
}
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.upcoming-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sport-color, var(--accent));
  padding: 12px 14px;
  font-size: 12.5px;
}
.upcoming-card.afgelopen {
  opacity: 0.65;
}
.upcoming-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.upcoming-name {
  font-weight: 700;
  margin-bottom: 6px;
}
.upcoming-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 11.5px;
}
.upcoming-detail {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* ---- Schaatsen afstanden / shorttrack per-distance cards ---- */
.afstand-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.afstand-card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-align: center;
}
.afstand-distance {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.afstand-flag {
  font-size: 22px;
  margin-bottom: 4px;
}
.afstand-champion {
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- Records section ---- */
.records-section {
  margin-top: 36px;
  border-top: 3px double var(--rule-strong);
  padding-top: 22px;
}
.records-section h2 {
  font-size: 22px;
  margin-bottom: 16px;
}
.records-section h2 span {
  color: var(--accent);
}
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.record-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sport-color, var(--accent));
  padding: 14px;
}
.record-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.record-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}
.record-detail {
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---- FAQ page ---- */
.home-page {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.home-intro {
  margin-bottom: 2px;
}
.home-headline {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
}
.home-subline {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 640px;
}
.home-faq-section {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.home-faq-section h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin-bottom: 14px;
}
.home-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}
.faq-q {
  font-weight: 700;
  margin-bottom: 6px;
}
.faq-a {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--card);
  border-top: 3px double var(--rule-strong);
  box-shadow: 0 -2px 10px rgba(26, 24, 21, 0.12);
}
.cookie-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-text {
  flex: 1;
  min-width: 240px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cookie-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--ink);
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.cookie-accept {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* ================= SPORT PAGES — MOBILE ================= */
@media (max-width: 768px) {
  .cards-grid,
  .race-calendar-grid,
  .upcoming-grid,
  .records-grid,
  .afstand-cards-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    align-items: stretch;
  }
  .results-count {
    margin-left: 0;
  }
  .cookie-inner {
    padding: 14px 16px;
  }
  /* Tighter tables on phones so more columns fit before horizontal scroll. */
  .data-table {
    font-size: 12.5px;
  }
  .data-table th,
  .data-table td {
    padding: 7px 6px;
  }
  .table-section {
    padding: 14px 12px;
  }
}