/* F1 background image */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  max-width: 100%;
}

:root {
  --radius: 0.5rem;
  --font-display: "Bebas Neue", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-border: var(--border);

  /* F1 design tokens */
  --f1-bg: #0a0a0a;
  --f1-red: #dc0000;
  --f1-red-glow: #ff1e1e;
  --f1-surface-1: #111111;
  --f1-surface-2: #1a1a1a;
  --f1-surface-deep: #0d0d0d;
  --f1-footer: #050505;
  --f1-muted: #888888;

  --background: #0a0a0a;
  --foreground: #ffffff;
  --card: #111111;
  --card-foreground: #ffffff;
  --popover: #111111;
  --popover-foreground: #ffffff;
  --primary: #dc0000;
  --primary-foreground: #ffffff;
  --secondary: #1a1a1a;
  --secondary-foreground: #ffffff;
  --muted: #1a1a1a;
  --muted-foreground: #888888;
  --accent: #1a1a1a;
  --accent-foreground: #ffffff;
  --destructive: #dc0000;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #dc0000;
}

* {
  border-color: var(--color-border);
}
html,
body {
  color: #ffffff;
  font-family: var(--font-sans);
}

/* === F1 Premium Background — Living Smoke (pure CSS) === */
body {
  position: relative;
  background-color: #050505;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(220, 0, 0, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 70%, rgba(180, 0, 0, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(220, 30, 30, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, #060607 0%, #020203 50%, #060607 100%);
  background-attachment: fixed;
}

/* Animated drifting smoke layer 1 — red */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 30% at 25% 35%, rgba(220, 0, 0, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 75% 65%, rgba(255, 40, 40, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 60% 20%, rgba(180, 0, 0, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 30% 80%, rgba(220, 0, 0, 0.16) 0%, transparent 55%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: smoke-drift 28s ease-in-out infinite alternate;
}

/* Animated drifting smoke layer 2 — grey haze + scanlines */
body::after {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 30% at 70% 30%, rgba(180, 190, 210, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 20% 70%, rgba(160, 170, 200, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 30% 20% at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
  filter: blur(50px);
  mix-blend-mode: screen;
  animation: smoke-drift-rev 36s ease-in-out infinite alternate;
}

@keyframes smoke-drift {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
}
@keyframes smoke-drift-rev {
  0%   { transform: translate3d(0%, 0%, 0) scale(1.05); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.1); }
}



/* Keep content above background overlays */
main,
header,
footer,
section {
  position: relative;
  z-index: 1;
}

/* === F1 Utilities === */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.section-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  letter-spacing: 0.25em;
  line-height: 1;
  padding-left: 1rem;
  border-left: 4px solid var(--f1-red);
  color: #fff;
}



/* Carbon fiber overlay */
.carbon-fiber {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.4) 0px,
      rgba(0, 0, 0, 0.4) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* Diagonal hero speed streaks */
@keyframes diag-streak {
  0% {
    transform: translate(-30%, 30%) rotate(-25deg);
    opacity: 0;
  }
  20% {
    opacity: 0.18;
  }
  100% {
    transform: translate(120%, -120%) rotate(-25deg);
    opacity: 0;
  }
}
.diag-streak {
  position: absolute;
  height: 2px;
  width: 60%;
  right: 0;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  animation: diag-streak 4s linear infinite;
  pointer-events: none;
}

.red-glow-hover {
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
.red-glow-hover:hover {
  border-color: var(--f1-red);
  box-shadow:
    0 0 0 1px var(--f1-red),
    0 12px 30px -10px rgba(220, 0, 0, 0.45);
}

.driver-lift {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  border-bottom: 2px solid transparent;
}
.driver-lift:hover {
  transform: translateY(-6px);
  border-bottom-color: var(--f1-red);
  box-shadow: 0 18px 40px -16px rgba(220, 0, 0, 0.55);
}

/* Marquee ticker */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Hero speed lines */
@keyframes speed-lines {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.speed-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 0, 0, 0.7),
    transparent
  );
  animation: speed-lines 3s linear infinite;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.7s ease-out both;
}

/* Hide scrollbars for horizontal scrollers */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* FAQ component */
.f1-faq { background:#050505; border-top:1px solid #1a1a1a; padding:64px 0 0; }
.f1-faq__inner { max-width:900px; margin:0 auto; padding:0 24px; }
.f1-faq__header { text-align:center; margin-bottom:44px; }
.f1-faq__label { display:block; font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:3px; color:#DC0000; text-transform:uppercase; margin-bottom:10px; }
.f1-faq__title { font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,5vw,50px); color:#fff; letter-spacing:2px; text-transform:uppercase; margin:0 0 14px; }
.f1-faq__divider { height:2px; width:40px; background:#DC0000; margin:0 auto; }
.f1-faq__list { border-top:1px solid #1a1a1a; }
.f1-faq__item { border-bottom:1px solid #1a1a1a; }
.f1-faq__btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; gap:16px; }
.f1-faq__q { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:1px; text-transform:uppercase; color:#fff; transition:color .2s; }
.f1-faq__btn.open .f1-faq__q { color:#DC0000; }
.f1-faq__chev { width:18px; height:18px; flex-shrink:0; transition:transform .3s; }
.f1-faq__btn.open .f1-faq__chev { transform:rotate(180deg); }
.f1-faq__a { padding:0 0 20px; font-family:Inter,system-ui,sans-serif; font-size:14px; color:rgba(255,255,255,0.6); line-height:1.75; }

html.light .f1-faq { background:#f8f8f8; border-top:1px solid #e5e5e5; }
html.light .f1-faq__list { border-top:1px solid #e5e5e5; }
html.light .f1-faq__item { border-bottom:1px solid #e5e5e5; }
html.light .f1-faq__title { color:#0a0a0a; }
html.light .f1-faq__q { color:#0a0a0a; }
html.light .f1-faq__btn.open .f1-faq__q { color:#DC0000; }
html.light .f1-faq__a { color:rgba(0,0,0,0.65); }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Premium F1 paddock daylight
   Mirrors dark theme's energy: living gradient bg, smoke drift, red accents,
   carbon-fiber overlays, glow hovers, but on a crisp pearl-white canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

html.light {
  color-scheme: light;
  background: #f4f5f7;

  --background: #f7f7f9;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #dc0000;
  --primary-foreground: #ffffff;
  --secondary: #eef0f3;
  --secondary-foreground: #0a0a0a;
  --muted: #eef0f3;
  --muted-foreground: #5a5a5a;
  --accent: #eef0f3;
  --accent-foreground: #0a0a0a;
  --border: rgba(0, 0, 0, 0.08);
  --input: rgba(0, 0, 0, 0.12);
  --ring: #dc0000;

  --f1-bg: #f7f7f9;
  --f1-surface-1: #ffffff;
  --f1-surface-2: #f0f1f4;
  --f1-surface-deep: #e9eaee;
  --f1-footer: #ffffff;
  --f1-muted: #5a5a5a;
}

html.light body {
  background-color: #eef0f3 !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(220, 0, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 70%, rgba(220, 0, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(220, 30, 30, 0.06) 0%, transparent 65%),
    linear-gradient(180deg, #f7f7f9 0%, #eaecef 50%, #f5f5f7 100%) !important;
  color: #0a0a0a !important;
}

html.light body::before {
  background:
    radial-gradient(ellipse 40% 30% at 25% 35%, rgba(220, 0, 0, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 75% 65%, rgba(255, 40, 40, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 60% 20%, rgba(180, 0, 0, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 30% 80%, rgba(220, 0, 0, 0.10) 0%, transparent 55%) !important;
  mix-blend-mode: multiply !important;
  filter: blur(40px) !important;
}

html.light body::after {
  background:
    radial-gradient(ellipse 45% 30% at 70% 30%, rgba(60, 80, 120, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 20% 70%, rgba(80, 90, 120, 0.05) 0%, transparent 60%) !important;
  mix-blend-mode: multiply !important;
  filter: blur(50px) !important;
}

/* Carbon fiber overlay → faint silver weave on light */
html.light .carbon-fiber {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px) !important;
}

/* ── Header / footer — frosted white ── */
html.light header {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 20px -10px rgba(0,0,0,0.08);
}
html.light footer {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── Surface mapping — Tailwind dark utilities → light layers ── */
html.light [class*="bg-black"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#0a0a0a]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#0A0A0A]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#0d0d0d]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#050505]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#0b0b0b]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light [class*="bg-[#101010]"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]) {
  background-color: #ffffff !important;
  background-image: none !important;
}

html.light [class*="bg-[#111111]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#111]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#161616]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#1a1a1a]"]:not([data-hero] *):not([data-card-dark] *) {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}

/* Inline styles dark hex → light surfaces */
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(10, 10, 10)"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(5, 5, 5)"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(13, 13, 13)"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(17, 17, 17)"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(22, 22, 22)"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="rgb(26, 26, 26)"] {
  background-color: #ffffff !important;
}

/* Borders */
html.light [class*="border-white"]:not([data-hero] *):not([data-card-dark] *) {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* ── Text on light surfaces ── */
html.light [class*="text-white"]:not([data-hero] *):not([data-hero]):not([data-card-dark] *):not([data-card-dark]),
html.light .text-white:not([data-hero] *):not([data-card-dark] *) {
  color: #0a0a0a !important;
}
html.light [class*="text-white/30"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/40"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/50"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/60"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/65"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/70"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/80"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-white/90"]:not([data-hero] *):not([data-card-dark] *) {
  color: #4a4a4a !important;
}

html.light [class*="text-[#888"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#666"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#555"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#444"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#aaa"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#ccc"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#cfcfcf"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#CCC"]:not([data-hero] *):not([data-card-dark] *) {
  color: #4a4a4a !important;
}

/* Inline white text → dark */
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(255, 255, 255)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color:rgb(255, 255, 255)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: #fff"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color:#fff"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: #ffffff"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color:#ffffff"] {
  color: #0a0a0a !important;
}

html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(136, 136, 136)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(102, 102, 102)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(85, 85, 85)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(204, 204, 204)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(170, 170, 170)"] {
  color: #4a4a4a !important;
}

html.light h1:not([data-hero] *):not([data-card-dark] *),
html.light h2:not([data-hero] *):not([data-card-dark] *),
html.light h3:not([data-hero] *):not([data-card-dark] *),
html.light h4:not([data-hero] *):not([data-card-dark] *) {
  color: #0a0a0a !important;
}

/* ── Hero & dark cards stay dark — premium contrast ── */
html.light [data-hero] {
  background-color: transparent !important;
}
html.light [data-card-dark] {
  background-color: #0a0a0a !important;
}
html.light [data-hero] *,
html.light [data-card-dark] * {
  /* leave native styling intact */
}
html.light [data-hero] [class*="text-white"],
html.light [data-card-dark] [class*="text-white"],
html.light [data-hero] h1, html.light [data-hero] h2, html.light [data-hero] h3,
html.light [data-card-dark] h1, html.light [data-card-dark] h2,
html.light [data-card-dark] h3, html.light [data-card-dark] h4 {
  color: #ffffff !important;
}

/* ── Red accents ── */
html.light [class*="text-[#DC0000]"],
html.light [class*="text-[#dc0000]"],
html.light [style*="color: rgb(220, 0, 0)"] {
  color: #c80000 !important;
  text-shadow: 0 0 1px rgba(220,0,0,0.15);
}
html.light [class*="bg-[#DC0000]"]:not([data-card-dark] *):not([data-hero] *),
html.light [class*="bg-[#dc0000]"]:not([data-card-dark] *):not([data-hero] *) {
  background-color: #dc0000 !important;
  box-shadow: 0 4px 14px -4px rgba(220,0,0,0.45);
}

/* Red glow hover — softer on light */
html.light .red-glow-hover:hover {
  border-color: #dc0000 !important;
  box-shadow: 0 0 0 1px #dc0000, 0 14px 32px -10px rgba(220, 0, 0, 0.35) !important;
}
html.light .driver-lift:hover {
  box-shadow: 0 18px 40px -16px rgba(220, 0, 0, 0.40) !important;
}

/* Section heading on light */
html.light .section-heading {
  color: #0a0a0a !important;
  border-left-color: #dc0000 !important;
}

/* Inputs */
html.light input,
html.light textarea {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: #888 !important;
}

/* Theme toggle button on light */
html.light header button[aria-label*="theme"],
html.light header button[aria-label*="Search"],
html.light header button[aria-label*="menu"] {
  border-color: rgba(0,0,0,0.10) !important;
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}

html.light ::selection {
  background-color: rgba(220, 0, 0, 0.22);
  color: #0a0a0a;
}

/* ── Race calendar cards in light mode — pearl with red accent ── */
html.light article[data-round] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 20px -10px rgba(0,0,0,0.08) !important;
}
html.light article[data-round]:hover {
  border-color: rgba(220, 0, 0, 0.5) !important;
  box-shadow: 0 12px 30px -8px rgba(220, 0, 0, 0.18), 0 8px 24px -10px rgba(0,0,0,0.12) !important;
}
/* "Next" race card stays pearl-white but with red border + red glow */
html.light article[data-round][style*="2px solid"] {
  background: linear-gradient(160deg, #fff5f5 0%, #ffe8e8 100%) !important;
  border-color: #dc0000 !important;
  box-shadow: 0 0 24px rgba(220, 0, 0, 0.20), 0 8px 30px -8px rgba(220, 0, 0, 0.25) !important;
}
html.light article[data-round] span[style*="background: rgb(51, 51, 51)"],
html.light article[data-round] span[style*="background:#333"] {
  background: #e8e8ec !important;
  color: #888 !important;
}
html.light article[data-round] [style*="border: 1px solid rgba(255, 255, 255"] {
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* "Done" badge dark grey on light */
html.light [style*="background: #333"],
html.light [style*="background:#333"] {
  background: #e8e8ec !important;
}

/* Constructors standings rows hover */
html.light .group\/row:hover {
  background-color: #f4f5f8 !important;
}
html.light [class*="bg-[#161616]"]:hover,
html.light [class*="hover\\:bg-\\[\\#161616\\]"]:hover {
  background-color: #f4f5f8 !important;
}

/* Progress bar track on light */
html.light [class*="bg-[#1a1a1a]"][class*="h-[3px]"],
html.light [class*="bg-[#1a1a1a]"][class*="h-[2px]"] {
  background-color: #e4e6ea !important;
}

/* Skeleton loaders on light */
html.light [class*="animate-pulse"][class*="bg-[#111"] {
  background-color: #eaecef !important;
}

/* Footer links / quick nav */
html.light footer a {
  color: #2a2a2a !important;
}
html.light footer a:hover {
  color: #dc0000 !important;
}

/* Small chips/pills with red tinted bg keep contrast */
html.light [style*="background: rgba(220, 0, 0, 0.1)"],
html.light [style*="background:rgba(220,0,0,0.1)"] {
  background: rgba(220, 0, 0, 0.10) !important;
  color: #c80000 !important;
}

/* News card image overlays / category labels */
html.light .driver-lift {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}

/* Section divider lines that were white */
html.light [class*="bg-white/5"],
html.light [class*="bg-white/10"],
html.light [class*="bg-white/20"] {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Page-level dark section wrappers (e.g. NextRace wrapper) */
html.light section[style*="rgb(10, 10, 10)"],
html.light section[style*="rgb(5, 5, 5)"],
html.light section[style*="rgb(13, 13, 13)"],
html.light section[style*="background"][style*="linear-gradient"][style*="rgb(10"],
html.light section[style*="background"][style*="linear-gradient"][style*="rgb(13"],
html.light section[style*="background"][style*="linear-gradient"][style*="#0a"],
html.light section[style*="background"][style*="linear-gradient"][style*="#0d"] {
  background: linear-gradient(180deg, #f7f7f9 0%, #eef0f3 100%) !important;
}

/* Force inline-style dark backgrounds on common wrappers to white */
html.light div[style*="background-color: rgb(10, 10, 10)"],
html.light div[style*="background-color:rgb(10, 10, 10)"],
html.light div[style*="background-color: rgb(17, 17, 17)"],
html.light div[style*="background-color: rgb(13, 13, 13)"] {
  background-color: #ffffff !important;
}

/* ── Catch inline linear-gradient dark backgrounds on regular wrappers ── */
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#141414"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#0a0a0a"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#0d0d0d"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#161616"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#111111"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#1a0a0a"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="linear-gradient"][style*="#110808"] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Missing bg-[] class selectors ── */
html.light [class*="bg-[#141414]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#141]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#0f0f0f]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#080808]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#0c0c0c]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="bg-[#070707]"]:not([data-hero] *):not([data-card-dark] *) {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ── Page header dark inline background (radial+linear with dark hex) ── */
html.light header[style*="#0f0f0f"],
html.light header[style*="#080808"],
html.light header[style*="#0a0a0a"] {
  background: linear-gradient(180deg, #f7f7f9 0%, #eef0f3 100%) !important;
}

/* ── Missing muted text classes ── */
html.light [class*="text-[#d4d4d4]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#ddd]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#bbb]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#999]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="text-[#777]"]:not([data-hero] *):not([data-card-dark] *) {
  color: #3a3a3a !important;
}
html.light [class*="text-[#333]"]:not([data-hero] *):not([data-card-dark] *) {
  color: #888 !important;
}

/* ── Inline style color overrides for dark text values ── */
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(212, 212, 212)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(187, 187, 187)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(153, 153, 153)"],
html.light :not([data-hero] *):not([data-card-dark] *)[style*="color: rgb(119, 119, 119)"] {
  color: #3a3a3a !important;
}

/* ── Article / page content light theme ── */
html.light .f1-article,
html.light .f1-page-content {
  color: #1a1a1a !important;
}
html.light .f1-article h2,
html.light .f1-article h3,
html.light .f1-page-content h2,
html.light .f1-page-content h3 {
  color: #0a0a0a !important;
}
html.light .f1-article a,
html.light .f1-page-content a { color: #c80000 !important; }
html.light .f1-article blockquote { background: linear-gradient(90deg,#fff0f0,#fff5f5) !important; color: #0a0a0a !important; }

/* ── Border colors ── */
html.light [class*="border-[#1a1a1a]"]:not([data-hero] *):not([data-card-dark] *),
html.light [class*="border-[#222]"]:not([data-hero] *):not([data-card-dark] *) {
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Search dropdown on light ── */
html.light [data-search-results] {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 30px -8px rgba(0,0,0,0.18) !important;
}
html.light [data-search-results] [style*="color:#fff"],
html.light [data-search-results] [style*="color: #fff"] { color: #0a0a0a !important; }
html.light [data-search-results] [style*="color:#888"] { color: #666 !important; }
html.light [data-search-results] a:hover { background: rgba(0,0,0,0.04) !important; }

/* ── Template section/div with dark bg-color inline ── */
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background:#111"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background: #111"] {
  background: #ffffff !important;
}
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background:#0a0a0a"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background: #0a0a0a"] {
  background: #f7f7f9 !important;
}

/* ── Stats/info panels ── */
html.light [style*="background:rgba(255,255,255,0.03)"],
html.light [style*="background: rgba(255,255,255,0.03)"],
html.light [style*="background:rgba(255,255,255,0.05)"],
html.light [style*="background: rgba(255,255,255,0.05)"] {
  background: rgba(0,0,0,0.04) !important;
}

/* Inline background-color dark hex on any tag */
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background:#0a0a0a"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background: #0a0a0a"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background:#111111"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background: #111111"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background:#161616"],
html.light :not([data-hero]):not([data-card-dark]):not([data-hero] *):not([data-card-dark] *)[style*="background: #161616"] {
  background: #ffffff !important;
}

/* Page-level outer wrapper bg-[#0a0a0a] on routes — let body show through */
html.light .min-h-screen[class*="bg-[#0a0a0a]"] {
  background-color: transparent !important;
}

/* Borders of dark hex */
html.light [class*="border-[#1a1a1a]"],
html.light [class*="border-[#222"],
html.light [class*="border-[#222222]"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* News hero band that uses dark inline gradient — kill */
html.light section[style*="linear-gradient"][style*="#0a"],
html.light section[style*="linear-gradient"][style*="#111"],
html.light section[style*="linear-gradient"][style*="#141"] {
  background: linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%) !important;
}

/* Ensure h1/h2/h3 sitting inside auto-lightened cards become dark */
html.light [style*="linear-gradient"][style*="#141414"] h1,
html.light [style*="linear-gradient"][style*="#141414"] h2,
html.light [style*="linear-gradient"][style*="#141414"] h3,
html.light [style*="linear-gradient"][style*="#0a0a0a"] h1,
html.light [style*="linear-gradient"][style*="#0a0a0a"] h2,
html.light [style*="linear-gradient"][style*="#0a0a0a"] h3 {
  color: #0a0a0a !important;
}

/* ── Page hero headers with combined radial+linear gradients ── */
html.light header[style*="radial-gradient"][style*="rgba(220, 0, 0"],
html.light header[style*="radial-gradient"][style*="#0f0f0f"],
html.light header[style*="radial-gradient"][style*="#080808"] {
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(220, 0, 0, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html.light header[style*="radial-gradient"] h1,
html.light header[style*="radial-gradient"] h2 {
  color: #0a0a0a !important;
}

/* Skeleton loaders need visible bg on light */
html.light .animate-pulse[class*="bg-[#111"],
html.light .animate-pulse[class*="bg-[#1a"],
html.light [class*="animate-pulse"] {
  background-color: #e4e6ea !important;
}

/* Results podium cards — keep dramatic dark with red glow even in light mode */
html.light a[style*="linear-gradient(135deg, rgba(220, 0, 0, 0.18)"],
html.light a[style*="linear-gradient(135deg, rgba(255, 255, 255, 0.04)"] {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}
html.light a[style*="linear-gradient(135deg, rgba(220, 0, 0, 0.18)"] {
  background: linear-gradient(135deg, rgba(220,0,0,0.35) 0%, #0a0a0a 70%) !important;
}
html.light a[style*="linear-gradient(135deg, rgba(220, 0, 0, 0.18)"] *,
html.light a[style*="linear-gradient(135deg, rgba(255, 255, 255, 0.04)"] * {
  color: inherit;
}
html.light a[style*="linear-gradient(135deg, rgba(220, 0, 0, 0.18)"] [class*="text-white"],
html.light a[style*="linear-gradient(135deg, rgba(255, 255, 255, 0.04)"] [class*="text-white"] {
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════
   NEXT RACE section in light mode — premium pearl with red accents
   ════════════════════════════════════════════════════════════ */
html.light section[style*="rgba(220, 0, 0, 0.12)"][style*="rgba(100, 0, 0, 0.08)"],
html.light section[style*="radial-gradient"][style*="#0f0f0f"][style*="#080808"] {
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(220, 0, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(220, 0, 0, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-top-color: #dc0000 !important;
}

/* Countdown number boxes — light pearl with strong red glow */
html.light .group\/box[style*="linear-gradient(135deg, rgb(26, 26, 26)"],
html.light .group\/box[style*="#1a1a1a"][style*="#111111"] {
  background: linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(220, 0, 0, 0.35) !important;
  box-shadow: 0 8px 24px -10px rgba(220, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Countdown labels (DAYS/HRS/MIN/SEC) on light */
html.light .group\/box span[style*="color: rgb(119, 119, 119)"],
html.light .group\/box .text-\[\#777\] {
  color: #4a4a4a !important;
}

/* Right-side track stats card on light */
html.light section [style*="background: rgba(255, 255, 255, 0.03)"] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10) !important;
}

/* Track map container — keep dark for circuit visibility */
html.light div[style*="linear-gradient(135deg, rgb(13, 13, 13)"][style*="rgb(17, 17, 17)"] {
  background: linear-gradient(135deg, #0d0d0d 0%, #111 50%, #0a0a0a 100%) !important;
}

/* Stat cells inner borders on light */
html.light section [style*="border-top: 1px solid rgba(255, 255, 255"],
html.light section [style*="border-left: 1px solid rgba(255, 255, 255"],
html.light section [style*="border-right: 1px solid rgba(255, 255, 255"],
html.light section [style*="border-bottom: 1px solid rgba(255, 255, 255"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ════════════════════════════════════════════════════════════
   RACE CALENDAR cards in light mode — improved card text/badges
   ════════════════════════════════════════════════════════════ */
/* Card country name & date — make dark on light */
html.light article[data-round] span.text-white,
html.light article[data-round] [class*="text-white"] {
  color: #0a0a0a !important;
}

/* Short race name (text-[#666]) on light */
html.light article[data-round] span[style*="color"][class*="text-\\[\\#666\\]"],
html.light article[data-round] .text-\[\#666\] {
  color: #6a6a6a !important;
}

/* Round badge "R05" pill — keep red */
html.light article[data-round] span[style*="background: rgba(220, 0, 0, 0.1)"] {
  background: rgba(220, 0, 0, 0.12) !important;
  color: #c80000 !important;
}

/* Done badge on finished races */
html.light article[data-round] span[style*="background: rgb(51, 51, 51)"] {
  background: #e4e6ea !important;
  color: #777 !important;
}

/* Flag border + shadow on light */
html.light article[data-round] img[alt*="flag"] {
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

/* Scroller arrow buttons on light */
html.light button[aria-label="Scroll left"],
html.light button[aria-label="Scroll right"] {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #0a0a0a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}
html.light button[aria-label="Scroll left"]:hover,
html.light button[aria-label="Scroll right"]:hover {
  background: #dc0000 !important;
  color: #ffffff !important;
  border-color: #dc0000 !important;
}

/* Calendar header right meta text */
html.light h2 + span.text-white\/40,
html.light [class*="text-white/40"]:not([data-hero] *):not([data-card-dark] *) {
  color: #888 !important;
}


/* ════════════════════════════════════════════════════════════
   LIGHT THEME — round of fixes (nav hover, news hover, SPA-rendered cards)
   ════════════════════════════════════════════════════════════ */

/* 1) Header nav hover — let red hover win over the global white→dark override */
html.light header nav a span,
html.light header nav a span[class*="text-white"] {
  color: #0a0a0a !important;
  transition: color 0.2s ease;
}
html.light header nav a:hover span,
html.light header nav a:hover span[class*="text-white"],
html.light header nav a .group-hover\:text-\[\#DC0000\] {
  /* overridden below on hover */
}
html.light header nav a:hover span {
  color: #dc0000 !important;
}
/* underline accent on hover */
html.light header nav a {
  position: relative;
}
html.light header nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: #dc0000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
html.light header nav a:hover::after {
  transform: scaleX(1);
}

/* Active nav item already red — make sure it stays red */
html.light header nav a span.text-\[\#DC0000\] {
  color: #dc0000 !important;
}

/* 2) News list hover — light hover instead of black */
html.light .hover\:bg-\[\#141414\]:hover,
html.light a.hover\:bg-\[\#141414\]:hover,
html.light [class*="hover:bg-[#141414]"]:hover,
html.light [class*="hover:bg-[#0a0a0a]"]:hover,
html.light [class*="hover:bg-[#111"]:hover,
html.light [class*="hover:bg-[#161616]"]:hover {
  background-color: #f4f5f8 !important;
}
html.light .hover\:bg-\[\#141414\]:hover *,
html.light [class*="hover:bg-[#141414]"]:hover [class*="text-white"],
html.light [class*="hover:bg-[#141414]"]:hover h1,
html.light [class*="hover:bg-[#141414]"]:hover h2,
html.light [class*="hover:bg-[#141414]"]:hover h3,
html.light [class*="hover:bg-[#141414]"]:hover h4 {
  color: #0a0a0a !important;
}

/* 3) SPA-rendered cards: React serializes inline styles to rgb(...) form.
   Catch normalized linear-gradient values for driver/team/news cards. */
html.light a[style*="rgb(22, 22, 22)"][style*="rgb(10, 10, 10)"],
html.light a[style*="linear-gradient"][style*="rgb(22, 22, 22)"],
html.light a[style*="linear-gradient"][style*="rgb(13, 13, 13)"],
html.light a[style*="linear-gradient"][style*="rgb(10, 10, 10)"],
html.light div[style*="linear-gradient"][style*="rgb(22, 22, 22)"][style*="rgb(10, 10, 10)"],
html.light div[style*="linear-gradient"][style*="rgb(13, 13, 13)"][style*="rgb(17, 17, 17)"] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}

/* Inner hero block of cards (rgb(13,13,13) bg with team color overlay) */
html.light a[style*="rgb(22, 22, 22)"] > div[style*="rgb(13, 13, 13)"],
html.light a[style*="linear-gradient"] > div[style*="rgb(13, 13, 13)"],
html.light div[style*="linear-gradient"] > div[style*="rgb(13, 13, 13)"] {
  background: linear-gradient(135deg, #f7f7f9 0%, #eef0f3 100%) !important;
}

/* Card text inside lightened cards */
html.light a[style*="linear-gradient"][style*="rgb(22, 22, 22)"] [class*="text-white"],
html.light a[style*="linear-gradient"][style*="rgb(13, 13, 13)"] [class*="text-white"],
html.light div[style*="linear-gradient"][style*="rgb(22, 22, 22)"] [class*="text-white"] {
  color: #0a0a0a !important;
}

/* Rank/code chips on cards (inline #0a0a0a bg or normalized) */
html.light span[style*="background: rgb(10, 10, 10)"],
html.light span[style*="background:#0a0a0a"] {
  background: #ffffff !important;
  color: #4a4a4a !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* Pagination buttons normalized */
html.light button[style*="background: rgb(13, 13, 13)"],
html.light button[style*="background:#0d0d0d"] {
  background: #ffffff !important;
  color: #4a4a4a !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* Borders normalized rgb(34, 34, 34) → light */
html.light [style*="border: 1px solid rgb(34, 34, 34)"],
html.light [style*="border-color: rgb(34, 34, 34)"],
html.light [style*="1px solid rgb(26, 26, 26)"] {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* 4) News page — featured article body (dark gradient that wasn't caught) */
html.light [class*="bg-[#0a0a0a]"]:not([data-hero]):not([data-card-dark]) h1,
html.light [class*="bg-[#0a0a0a]"]:not([data-hero]):not([data-card-dark]) h2,
html.light [class*="bg-[#0a0a0a]"]:not([data-hero]):not([data-card-dark]) h3 {
  color: #0a0a0a !important;
}

/* 5) Calendar map containers that came back dark on SPA — keep dark intentionally
   but make sure surrounding card text is dark */
html.light article[data-round] * {
  /* nothing, handled above */
}

/* 6) Results page — table rows with dark inline styles after SPA navigation */
html.light tr[style*="rgb(10, 10, 10)"],
html.light tr[style*="rgb(13, 13, 13)"],
html.light td[style*="rgb(10, 10, 10)"] {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}

/* 7) Universal safety net: any anchor/div with the exact dark gradient pair
   that React normalizes (handles both team & driver cards everywhere) */
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #0a0a0a !important;
}
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] [class*="text-white"],
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] h1,
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] h2,
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] h3,
html.light *[style*="160deg, rgb(22, 22, 22) 0%, rgb(10, 10, 10) 100%"] h4 {
  color: #0a0a0a !important;
}

/* 8) Driver & Team detail pages — InfoCard / CareerStat dark gradients
   React normalizes #141414 → rgb(20,20,20) and #0a0a0a → rgb(10,10,10) */
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"],
html.light *[style*="160deg,rgb(20, 20, 20) 0%,rgb(10, 10, 10) 100%"] {
  background: linear-gradient(160deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] .text-white,
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="text-white"],
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] h1,
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] h2,
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] h3,
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] h4,
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] p {
  color: #0a0a0a !important;
}
/* Muted labels inside those cards stay readable */
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#666]"],
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#777]"],
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#888]"],
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#999]"] {
  color: #6a6a6a !important;
}
/* Inner borders inside those cards */
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="border-[#1a1a1a]"],
html.light *[style*="160deg, rgb(20, 20, 20) 0%, rgb(10, 10, 10) 100%"] [class*="border-[#222"] {
  border-color: rgba(0,0,0,0.08) !important;
}

/* 9) Calendar page — race cards & next-round hero
   135deg gradients with #111/#0a0a0a/#0d0d0d/#14080a get normalized to rgb()  */
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"],
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"],
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] {
  background: linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}
/* Next-round hero gets a soft red wash */
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"],
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] {
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(220,0,0,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
}
/* Text inside calendar race cards */
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] .text-white,
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] [class*="text-white"],
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] h1,
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] h2,
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] h3,
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] h4,
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] p,
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] .text-white,
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] [class*="text-white"],
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] h1,
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] h2,
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] h3,
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] .text-white,
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] [class*="text-white"],
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] h1,
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] h2,
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] h3 {
  color: #0a0a0a !important;
}
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#666]"],
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#777]"],
html.light *[style*="135deg, rgb(17, 17, 17) 0%, rgb(10, 10, 10) 100%"] [class*="text-[#888]"],
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] [class*="text-[#666]"],
html.light *[style*="135deg, rgba(220, 0, 0, 0.1) 0%, rgb(13, 13, 13) 60%"] [class*="text-[#777]"],
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] [class*="text-[#666]"],
html.light *[style*="135deg, rgb(20, 8, 10) 0%, rgb(10, 10, 10) 60%"] [class*="text-[#777]"] {
  color: #6a6a6a !important;
}

/* 10) Results page — podium cards & previous race rows
   135deg gradients with rgba(220,0,0,0.18) / rgba(255,255,255,0.04) and #111111 */
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"],
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] {
  background: linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}
/* P1 podium gets red wash */
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(220,0,0,0.14) 0%, transparent 65%),
    linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
}
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] .text-white,
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] [class*="text-white"],
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] h1,
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] h2,
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] h3,
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] h4,
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] p,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] .text-white,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] [class*="text-white"],
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] h1,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] h2,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] h3,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] h4,
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] p {
  color: #0a0a0a !important;
}
html.light *[style*="135deg, rgba(220, 0, 0, 0.18) 0%, rgb(17, 17, 17) 60%"] [class*="text-[#"],
html.light *[style*="135deg, rgba(255, 255, 255, 0.04) 0%, rgb(17, 17, 17) 60%"] [class*="text-[#"] {
  color: #6a6a6a !important;
}
html.light tr[style*="rgba(220, 0, 0, 0.06)"] {
  background-color: rgba(220,0,0,0.06) !important;
  color: #0a0a0a !important;
}
html.light .border-\[\#161616\],
html.light [class*="border-[#161616]"] {
  border-color: rgba(0,0,0,0.08) !important;
}

/* 11) Results — broader fallback for podium gradients (no % anchor)
   and Previous Races dark wrapper bg-[#0f0f0f] */
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"],
html.light *[style*="rgba(255, 255, 255, 0.04)"][style*="rgb(17, 17, 17)"] {
  background: linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10);
}
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"] {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(220,0,0,0.14) 0%, transparent 65%),
    linear-gradient(135deg, #ffffff 0%, #f4f5f8 100%) !important;
}
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"] *:not(svg):not(path),
html.light *[style*="rgba(255, 255, 255, 0.04)"][style*="rgb(17, 17, 17)"] *:not(svg):not(path) {
  color: #0a0a0a !important;
}
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"] [class*="text-[#666]"],
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"] [class*="text-[#777]"],
html.light *[style*="rgba(220, 0, 0, 0.18)"][style*="rgb(17, 17, 17)"] [class*="text-[#888]"],
html.light *[style*="rgba(255, 255, 255, 0.04)"][style*="rgb(17, 17, 17)"] [class*="text-[#666]"],
html.light *[style*="rgba(255, 255, 255, 0.04)"][style*="rgb(17, 17, 17)"] [class*="text-[#777]"],
html.light *[style*="rgba(255, 255, 255, 0.04)"][style*="rgb(17, 17, 17)"] [class*="text-[#888]"] {
  color: #6a6a6a !important;
}

/* Previous Races accordion wrapper */
html.light .bg-\[\#0f0f0f\],
html.light [class*="bg-[#0f0f0f]"] {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}
html.light [class*="bg-[#0f0f0f]"] .text-white,
html.light [class*="bg-[#0f0f0f]"] [class*="text-white"] {
  color: #0a0a0a !important;
}
html.light [class*="bg-[#0f0f0f]"] [class*="text-[#666]"],
html.light [class*="bg-[#0f0f0f]"] [class*="text-[#777]"],
html.light [class*="bg-[#0f0f0f]"] [class*="text-[#888]"] {
  color: #6a6a6a !important;
}

/* ════════════════════════════════════════════════════════════
   Hall of Fame / Tracks / H2H — light-theme polish
   ════════════════════════════════════════════════════════════ */

html.light select {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
html.light select option {
  background-color: #ffffff;
  color: #0a0a0a;
}

/* Champion crown badge — semi-black bg becomes ivory in light */
html.light span[style*="rgba(0,0,0,0.6)"][style*="rgba(255,215,0,0.35)"],
html.light span[style*="rgba(0, 0, 0, 0.6)"][style*="rgba(255, 215, 0, 0.35)"] {
  background: rgba(255, 248, 220, 0.95) !important;
  color: #b8860b !important;
  border-color: rgba(184, 134, 11, 0.45) !important;
}

/* Year chips with gold text on near-black */
html.light span[style*="background: #0a0a0a"][style*="color: rgb(255, 215, 0)"] {
  background: #fffbe6 !important;
  color: #a37700 !important;
  border-color: rgba(184, 134, 11, 0.30) !important;
}

/* Hall of Fame portrait gradient panel → pearl in light mode */
html.light div[style*="rgba(220,0,0,0.18)"][style*="linear-gradient(180deg, #141414"],
html.light div[style*="rgba(220, 0, 0, 0.18)"][style*="linear-gradient(180deg, #141414"] {
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(220, 0, 0, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #f4f5f8 0%, #e9eaee 100%) !important;
}


/* Logo: reserve identical space across themes so layout never shifts */
.site-logo {
  padding: 4px 10px;
  border-radius: 999px;
  box-sizing: content-box;
  background: transparent;
  transition: background 200ms ease;
}
html.light .site-logo {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0606 100%);
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ════════════════════════════════════════════════════════════
   WP CONTENT — styles for WP REST API post body HTML
   ════════════════════════════════════════════════════════════ */
.wp-content {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #d4d4d4;
}
.wp-content p { margin-bottom: 1.25rem; }
.wp-content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-left: 0.875rem;
  border-left: 3px solid #dc0000;
}
.wp-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.wp-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  border-left: 3px solid #dc0000;
  background: #111;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.5;
}
.wp-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #dc0000;
}
.wp-content ul,
.wp-content ol { margin: 1.5rem 0; padding-left: 0; list-style: none; }
.wp-content ul li,
.wp-content ol li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.wp-content ul li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: #dc0000;
  flex-shrink: 0;
  margin-top: 10px;
}
.wp-content ol { counter-reset: wp-ol; }
.wp-content ol li { counter-increment: wp-ol; }
.wp-content ol li::before {
  content: counter(wp-ol) ".";
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  color: #dc0000;
  min-width: 20px;
  margin-top: 2px;
}
.wp-content a { color: #dc0000; text-decoration: underline; text-underline-offset: 3px; }
.wp-content a:hover { color: #ff2020; }
.wp-content img, .wp-content figure img { width: 100%; height: auto; margin: 1.5rem 0; }
.wp-content figure { margin: 1.5rem 0; }
.wp-content figcaption { font-size: 12px; color: #666; text-align: center; margin-top: 0.5rem; }
.wp-content strong { color: #ffffff; font-weight: 700; }
.wp-content em { font-style: italic; color: #bbb; }
.wp-content hr { border: none; border-top: 1px solid #1a1a1a; margin: 2.5rem 0; }

html.light .wp-content { color: #2a2a2a; }
html.light .wp-content h2,
html.light .wp-content h3 { color: #0a0a0a; }
html.light .wp-content blockquote { background: #f4f5f8; color: #0a0a0a; }
html.light .wp-content strong { color: #0a0a0a; }
html.light .wp-content em { color: #4a4a4a; }
html.light .wp-content hr { border-top-color: rgba(0,0,0,0.10); }

/* ── Filter pills & sort pills (inline border-color) ── */
html.light [style*="border-color:rgba(255,255,255,0.1)"],
html.light [style*="border-color: rgba(255,255,255,0.1)"],
html.light [style*="border-color:rgba(255, 255, 255, 0.1)"] {
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #444 !important;
}
html.light [style*="border-color:rgba(255,255,255,0.1)"] .rounded-full,
html.light [style*="border-color: rgba(255,255,255,0.1)"] .rounded-full {
  /* dot inside chip stays team-colored, no override needed */
}

/* ── Contact Form 7 / generic WP forms — dark theme ─────────── */
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=number],
.wpcf7 textarea,
.wpcf7 select,
.f1-page-content input[type=text],
.f1-page-content input[type=email],
.f1-page-content textarea {
  width: 100% !important;
  background: #111 !important;
  color: #ddd !important;
  border: 1px solid #222 !important;
  padding: 10px 14px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color .2s !important;
  margin-bottom: .5rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #DC0000 !important;
}
.wpcf7 input[type=submit],
.wpcf7 button[type=submit] {
  background: #DC0000 !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.wpcf7 input[type=submit]:hover {
  background: #ff1a1a !important;
}
html.light .wpcf7 input[type=text],
html.light .wpcf7 input[type=email],
html.light .wpcf7 input[type=tel],
html.light .wpcf7 input[type=number],
html.light .wpcf7 textarea,
html.light .wpcf7 select {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: rgba(0,0,0,.15) !important;
}
html.light .wpcf7 input::placeholder,
html.light .wpcf7 textarea::placeholder {
  color: #999 !important;
}

/* ── Comment heading + wrapper — light theme ─────────────────── */
html.light .f1-article-comments h3,
html.light .f1-article-comments .comment-author b,
html.light .f1-article-comments .comment-content p { color: #0a0a0a !important; }
html.light .f1-article-comments .comment-meta,
html.light .f1-article-comments .comment-metadata { color: #777 !important; }
html.light .f1-article-comments .comment-form label { color: #333 !important; }
html[lang="ar"] .absolute.bottom-14 {
 display:none !important;
}


html[lang="fa"] .absolute.bottom-14 {
 display:none !important;
}

/* F1 article mini tables */
.f1-article table {
  width: 100%;
  margin: 28px 0 34px;
  border: 1px solid rgba(220, 0, 0, 0.42);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(7, 7, 9, 0.78);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #d9d9d9;
  font-size: 15px;
  line-height: 1.55;
}

.f1-article table th,
.f1-article table td {
  padding: 13px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: top;
  text-align: left;
}

.f1-article table th:last-child,
.f1-article table td:last-child {
  border-right: 0;
}

.f1-article table tbody tr:last-child td {
  border-bottom: 0;
}

.f1-article table thead th {
  background: linear-gradient(180deg, rgba(220, 0, 0, 0.24), rgba(80, 0, 0, 0.28));
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
}

.f1-article table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.035);
}

.f1-article table tbody td:first-child {
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

.f1-article table caption {
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 800;
  text-align: left;
}

html.light .f1-article table {
  border-color: rgba(220, 0, 0, 0.34);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08), inset 0 0 0 1px rgba(10, 10, 10, 0.04);
  color: #202020;
}

html.light .f1-article table th,
html.light .f1-article table td {
  border-color: rgba(10, 10, 10, 0.14);
}

html.light .f1-article table thead th {
  background: linear-gradient(180deg, rgba(220, 0, 0, 0.12), rgba(220, 0, 0, 0.06));
  color: #111111;
}

html.light .f1-article table tbody tr:nth-child(even) td {
  background: rgba(10, 10, 10, 0.035);
}

html.light .f1-article table tbody td:first-child {
  color: #111111;
}

@media (max-width: 640px) {
  .f1-article table {
    display: block;
    overflow-x: auto;
    font-size: 14px;
  }

  .f1-article table th,
  .f1-article table td {
    min-width: 140px;
    padding: 11px 13px;
  }
}