/* ===================================================================
   RC Racing theme: "Track Map". Loaded after main.css on rc.thegearsports.com only.
   RC tracks are tight, twisting circuits watched from a raised driver stand, so the look is
   a track seen from above: a dark asphalt nav and hero, a winding track drawn in a band below
   the hero text with a start line, lap-counter numbers on the cards. Hi-vis lime is a mark
   colour on dark only; a deep lime-green carries links on light. The track is not to scale
   and is no real circuit.
   =================================================================== */
html:root {
  --paper:       #f5f6f1;
  --paper-2:     #e9ebe3;
  --ink:         #15171a;
  --ink-soft:    #3a3e37;
  --ink-faint:   #5c6158;
  --line:        #d8dbd1;
  --accent:      #3d6a0f;   /* deep lime-green for text on light: links and eyebrows */
  --accent-deep: #2e5209;
  --accent-soft: #eef4e2;
  --white:       #ffffff;
  --asphalt:     #16181c;
  --asphalt-2:   #1d2024;
  --hivis:       #c6f432;   /* marks on dark only */
  --display: 'Russo One', 'Arial Black', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;
  --mono:    'Share Tech Mono', ui-monospace, monospace;
  --radius:  4px;
}
html:root[data-theme="dark"] {
  --paper:       #0f1113;
  --paper-2:     #16191b;
  --ink:         #eef0ea;
  --ink-soft:    #c7cbc1;
  --ink-faint:   #9aa095;
  --line:        #282c27;
  --accent:      #b6e35a;
  --accent-deep: #d3f08f;
  --accent-soft: #1e2a12;
  --white:       #16191b;
}

body { font-size: 1.05rem; }
body::before { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h1 { line-height: 1.04; }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.12rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
.eyebrow { color: var(--accent); font-family: var(--mono); letter-spacing: .1em; }

/* Nav: asphalt with a hi-vis line */
.nav { background: var(--asphalt); border-bottom: 3px solid var(--hivis); backdrop-filter: none; }
html[data-theme="dark"] .nav { background: #0b0c0e; }
.brand { color: #f2f4ef; white-space: nowrap; }
.brand .rev { color: var(--hivis); }
.brand__mark { background: var(--hivis); color: var(--asphalt); }
.brand__sub { color: #aeb3a8; }
.nav__links a { color: #f2f4ef; font-weight: 600; font-size: .95rem; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--hivis); }
.nav__cta { background: var(--hivis); color: var(--asphalt) !important; }
.nav__cta:hover { background: #f2f4ef; color: var(--asphalt) !important; }
.nav__toggle span { background: #f2f4ef; }
.nav .iconbtn { background: transparent; border-color: #34383f; color: #f2f4ef; }
.nav .iconbtn:hover { color: var(--hivis); border-color: var(--hivis); }
@media (max-width: 1120px) {
  .nav__links { background: var(--asphalt); border-bottom-color: #34383f; }
  .nav__links a { border-bottom-color: #23262b; }
}

/* Hero: asphalt, with a winding track and a start line in a band below the text */
.hero {
  background-color: var(--asphalt-2); color: #f2f4ef;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath d='M100 74 H520 C555 74 555 56 590 56 H690 C725 56 725 74 760 74 H1100 C1150 74 1150 16 1100 16 H760 C725 16 725 34 690 34 H590 C555 34 555 16 520 16 H100 C50 16 50 74 100 74 Z' fill='none' stroke='%232f333a' stroke-width='13' stroke-linejoin='round'/%3E%3Cpath d='M100 74 H520 C555 74 555 56 590 56 H690 C725 56 725 74 760 74 H1100 C1150 74 1150 16 1100 16 H760 C725 16 725 34 690 34 H590 C555 34 555 16 520 16 H100 C50 16 50 74 100 74 Z' fill='none' stroke='%23f2f4ef' stroke-width='2' stroke-dasharray='10 8' stroke-linejoin='round'/%3E%3Crect x='298' y='63' width='5' height='22' fill='%23c6f432'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1d2024 0%, #16181c 100%);
  background-size: min(100%, 1200px) 90px, 100% 100%;
  background-position: center calc(100% - 16px), 0 0;
  background-repeat: no-repeat;
  padding-bottom: calc(clamp(2.5rem,6vw,4rem) + 96px);
}
html[data-theme="dark"] .hero { background-color: #121417; }
.hero::after { display: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #ffffff; }
.hero h1 .spin { color: var(--hivis); }
.hero h1 .hero__brand { color: #cdd1c7; font-family: var(--mono); font-size: .2em; letter-spacing: .2em; text-transform: uppercase; }
.hero .eyebrow { color: var(--hivis); }
.hero .lede { color: #e1e4dc; }
.hero .btn--solid { background: var(--hivis); border-color: var(--hivis); color: var(--asphalt); }
.hero .btn--solid:hover { background: #f2f4ef; border-color: #f2f4ef; }
.hero .btn--ghost { border-color: #f2f4ef; color: #f2f4ef; }
.hero .btn--ghost:hover { background: #f2f4ef; color: var(--asphalt); }

.btn { font-weight: 700; }

/* Cards: lap-counter numbers */
.card::before { display: none; }
.card:hover { border-color: var(--accent); }
a.card > .card__num { display: inline-grid; place-items: center; align-self: flex-start; justify-self: start; width: auto; min-width: 3.2rem; height: 2.3rem; padding: 0 .6rem;
  background: var(--asphalt); color: var(--hivis); border-radius: 2px; border-bottom: 3px solid var(--hivis);
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: .12em; line-height: 1; }
html[data-theme="dark"] a.card > .card__num { background: #0b0c0e; }
.card__tag { color: var(--accent); font-weight: 700; }

/* Section headings: a small track corner */
.shead { border-bottom: 2px solid var(--line); }
.shead h2::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .5em; vertical-align: .02em;
  border: 3px solid var(--accent); border-right: 0; border-bottom: 0; border-top-left-radius: 70%; }

/* Callouts: the safety box must be seen */
.callout { background: var(--accent-soft); border: 0; border-left: 4px solid var(--accent); }

/* Tables: asphalt headers with a hi-vis line, like a timing screen */
.facts thead th { background: var(--asphalt); color: #f2f4ef; border-bottom: 3px solid var(--hivis); letter-spacing: .02em; }
html[data-theme="dark"] .facts thead th { background: #1c2024; }
.facts tbody tr:nth-child(even) td { background: #f0f2eb; }
html[data-theme="dark"] .facts tbody tr:nth-child(even) td { background: #14171a; }

/* Gear box */
.gearline { background: var(--white); border: 2px solid var(--asphalt); border-bottom: 6px solid var(--accent); }
html[data-theme="dark"] .gearline { border-color: #34383f; }
.gearline__t { color: var(--asphalt); }
html[data-theme="dark"] .gearline__t { color: #eef0ea; }
.gearline a.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .gearline a.btn { color: #141a0c; }

.footer { background: var(--asphalt); border-top: 3px solid var(--hivis); }
.footer, .footer a, .footer__bottom a { color: #dfe2da; }
.footer__brand .rev { color: var(--hivis); }
.footer h4 { color: var(--hivis); }

.pick__cta .btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick__cta .btn--solid:hover { background: var(--asphalt); border-color: var(--asphalt); }
html[data-theme="dark"] .pick__cta .btn--solid { color: #141a0c; }
