/* ===================================================================
   Racing theme: "Pit Wall". Loaded after main.css on racing.thegearsports.com only.
   Overrides the shared tokens (html:root beats :root and the inline accent style)
   and adds racing touches: dark nav with a red rule, condensed italic headings,
   timing-sheet tables, a checkered stripe under the hero, sector-numbered cards.
   =================================================================== */
html:root {
  --paper:       #f3f4f6;
  --paper-2:     #e7e9ed;
  --ink:         #0d0e11;
  --ink-soft:    #3b404b;
  --ink-faint:   #59606d;
  --line:        #cfd3da;
  --accent:      #d61f2c;
  --accent-deep: #a3141f;
  --accent-soft: #fbe3e5;
  --gold:        #ffd23f;
  --white:       #ffffff;
  --flag:        #ffd23f;
  --wall:        #15171c;
  --wall-2:      #1b1e25;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --radius:  0px;
}
html:root[data-theme="dark"] {
  --paper:       #0d0e11;
  --paper-2:     #15171c;
  --ink:         #e9eaee;
  --ink-soft:    #b9bcc6;
  --ink-faint:   #9aa0ad;
  --line:        #2a2e37;
  --accent:      #ff4d5a;
  --accent-deep: #ff7a83;
  --accent-soft: #2a1214;
  --white:       #15171c;
}

body { font-size: 1.1rem; }
body::before { display: none; }

/* Headings: condensed, uppercase, italic display like a timing screen */
h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
h1 { font-style: italic; font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.45rem; }
.eyebrow { color: var(--accent-deep); letter-spacing: .14em; }

/* Nav: always the dark pit wall, red rule underneath */
.nav { background: var(--wall); border-bottom: 3px solid var(--accent); backdrop-filter: none; }
html[data-theme="dark"] .nav { background: var(--wall); }
.brand { color: #fff; font-style: italic; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .01em; }
.brand .rev { color: #ff4d5a; }
.brand__mark { background: var(--accent); color: #fff; border-radius: 0; transform: skewX(-12deg) translateY(2px); }
.brand:hover .brand__mark { transform: skewX(-12deg) translateY(2px); }
.brand__sub { color: #9aa0ad; }
.nav__links a { color: #e9eaee; font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--flag); }
.nav__cta { background: var(--flag); color: #0d0e11 !important; }
.nav__cta:hover { background: #fff; }
.nav__toggle span { background: #fff; }
.nav .iconbtn { background: transparent; border-color: #3a3f4a; color: #e9eaee; }
.nav .iconbtn:hover { color: var(--flag); border-color: var(--flag); }
@media (max-width: 1120px) {
  .nav__links { background: var(--wall); border-bottom-color: #2a2e37; }
  .nav__links a { border-bottom-color: #2a2e37; }
}

/* Hero: dark band with a checkered stripe in place of the orb */
.hero { background: var(--wall-2); color: #fff; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 10px; aspect-ratio: auto; transform: none; border-radius: 0;
  background: repeating-linear-gradient(90deg, #fff 0 24px, #0d0e11 24px 48px);
  opacity: 1; filter: none;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 .spin { color: #ff4d5a; }
.hero h1 .hero__brand { color: var(--flag); font-family: var(--mono); font-style: normal; font-size: .28em; letter-spacing: .12em; }
.hero .lede { color: #c9ccd4; }
.hero .btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero .btn--ghost { border-color: #4a4f5c; color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: #0d0e11; }
.hero__media { border-radius: 0; border-color: #2a2e37; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }

/* Buttons */
.btn { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }

/* Cards: sector-numbered tiles */
.card { border-top: 3px solid var(--ink); }
.card::before { width: auto; right: 0; bottom: auto; height: 3px; top: -3px; transform: scaleX(0); transform-origin: left; }
.card:hover::before { transform: scaleX(1); }
.card__num { color: var(--accent-deep); font-weight: 500; }
a.card > .card__num::before { content: "S"; }
.card h3 { font-size: 1.6rem; }
.card__tag { font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .06em; }

/* Section headings: red rule */
.shead { border-bottom: 3px solid var(--accent); }

/* Callouts (Get trained, How we recommend): flag-yellow marshal board */
.callout { background: #fff7d6; border: 0; border-left: 6px solid var(--flag); }
.callout .eyebrow { color: #6b5200; }
html[data-theme="dark"] .callout { background: #2a2410; }
html[data-theme="dark"] .callout .eyebrow { color: var(--flag); }

/* Tables: timing sheets */
.facts thead th { background: #0d0e11; color: #fff; border-bottom: 3px solid var(--accent); }
.facts tbody tr:nth-child(even) td { background: var(--paper-2); }
.facts td:first-child { font-weight: 600; }
html[data-theme="dark"] .facts thead th { background: #000; }

/* Gear boxes */
.gearline { border-left: 6px solid var(--accent); }
.gearline__t { font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .06em; }

/* Footer: checkered rule on top, flag-yellow headings */
.footer { background: #0d0e11; border-top: 10px solid transparent; border-image: repeating-linear-gradient(90deg, #fff 0 24px, #0d0e11 24px 48px) 10; }
.footer__brand { font-style: italic; text-transform: uppercase; }
.footer h4 { color: var(--flag); }
.disclosure strong { color: var(--ink); }

/* QA fixes: the footer is always dark, so its text must not follow the dark-mode tokens */
.footer, .footer a, .footer__bottom a { color: #e9eaee; }
.hero .eyebrow { color: var(--flag); }
/* QA fix: keep the logo on one line beside the full nav at laptop widths */
.brand { white-space: nowrap; font-size: 1.3rem; }
@media (max-width: 1380px) { .brand__sub { display: none; } }
/* Buying-guide pick buttons in racing red (fixed shade: white text passes in light and dark) */
.pick__cta .btn--solid { background: #d61f2c; border-color: #d61f2c; color: #fff; }
.pick__cta .btn--solid:hover { background: #0d0e11; border-color: #0d0e11; }