/* ===================================================================
   Cycling theme: "Velodrome". Loaded after main.css on cycling.thegearsports.com only.
   Clean paper and race black with jersey yellow, a hero of pale velodrome boards
   with the track's blue band and black, red and blue lines along its base, and
   bib-number card markers. Yellow is a fill colour only; text uses a dark gold.
   =================================================================== */
html:root {
  --paper:       #f7f6f1;
  --paper-2:     #eeece4;
  --ink:         #16181d;
  --ink-soft:    #43464d;
  --ink-faint:   #6b6e75;
  --line:        #dcd9cf;
  --accent:      #8a6500;   /* dark gold: link and eyebrow text on paper (4.9:1) */
  --accent-deep: #6b4f00;
  --accent-soft: #fbf0c4;
  --white:       #ffffff;
  --jersey:      #f5c400;   /* fills only: never text on paper */
  --black:       #111317;
  --track-blue:  #1d5fa7;
  --track-red:   #c8202b;
  --azur:        #8ec5e8;
  --display: 'Big Shoulders Display', Impact, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;
  --radius:  4px;
}
html:root[data-theme="dark"] {
  --paper:       #121317;
  --paper-2:     #1a1c21;
  --ink:         #f1f0ea;
  --ink-soft:    #cfcdc5;
  --ink-faint:   #a3a19a;
  --line:        #2d3037;
  --accent:      #ffd23f;
  --accent-deep: #ffe07a;
  --accent-soft: #2b2610;
  --white:       #1a1c21;
}

body { font-size: 1.04rem; }
body::before { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .005em; text-transform: uppercase; }
h1 { line-height: .95; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; }
h3 { font-size: 1.35rem; line-height: 1.05; }
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); font-weight: 500; letter-spacing: .12em; }

/* Nav: race black with a jersey-yellow line */
.nav { background: var(--black); border-bottom: 3px solid var(--jersey); backdrop-filter: none; }
.brand { color: #f7f6f1; white-space: nowrap; }
.brand .rev { color: var(--jersey); }
.brand__mark { background: var(--jersey); color: var(--black); }
.brand__sub { color: #c9c7bf; }
.nav__links a { color: #f7f6f1; font-weight: 600; font-size: .93rem; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--jersey); }
.nav__cta { background: var(--jersey); color: var(--black) !important; }
.nav__cta:hover { background: #f7f6f1; color: var(--black) !important; }
.nav__toggle span { background: #f7f6f1; }
.nav .iconbtn { background: transparent; border-color: #3a3d44; color: #f7f6f1; }
.nav .iconbtn:hover { color: var(--jersey); border-color: var(--jersey); }
@media (max-width: 1120px) {
  .nav__links { background: var(--black); border-bottom-color: #3a3d44; }
  .nav__links a { border-bottom-color: #2a2d33; }
}

/* Hero: pale velodrome boards, then the blue band and the black, red and blue lines */
.hero {
  background-color: #ead7b4; color: var(--ink);
  background-image:
    repeating-linear-gradient(90deg, rgba(120,85,40,.10) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 30px, transparent 30px 61px),
    linear-gradient(180deg, #efe0c3 0%, #e3cba2 100%);
  padding-bottom: calc(clamp(2.5rem,6vw,4rem) + 46px);
}
html[data-theme="dark"] .hero { background-color: #2a241c; color: #f1f0ea;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 86px),
    linear-gradient(180deg, #332b20 0%, #241e17 100%); }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 46px; aspect-ratio: auto; transform: none; border-radius: 0; opacity: 1; filter: none;
  background: linear-gradient(180deg,
    transparent 0 6px, var(--black) 6px 9px,
    transparent 9px 16px, var(--track-red) 16px 19px,
    transparent 19px 26px, var(--track-blue) 26px 29px,
    transparent 29px 34px, var(--azur) 34px 46px);
}
html[data-theme="dark"] .hero::after {
  background: linear-gradient(180deg,
    transparent 0 6px, #e9e7e0 6px 9px,
    transparent 9px 16px, #ff5a63 16px 19px,
    transparent 19px 26px, #5b9bea 26px 29px,
    transparent 29px 34px, #2f5f80 34px 46px);
}
.hero h1 { color: var(--black); }
html[data-theme="dark"] .hero h1 { color: #f7f6f1; }
.hero h1 .spin { color: var(--black); font-style: normal; background: linear-gradient(transparent 58%, var(--jersey) 58%); }
html[data-theme="dark"] .hero h1 .spin { color: var(--jersey); background: none; }
.hero h1 .hero__brand { color: var(--accent-deep); font-family: var(--mono); font-weight: 500; font-size: .2em; letter-spacing: .24em; text-transform: uppercase; }
html[data-theme="dark"] .hero h1 .hero__brand { color: var(--jersey); }
.hero .lede { color: var(--ink-soft); }
.hero .btn--solid { background: var(--black); border-color: var(--black); color: #f7f6f1; }
.hero .btn--solid:hover { background: var(--jersey); border-color: var(--jersey); color: var(--black); }
.hero .btn--ghost { border-color: var(--black); color: var(--black); }
html[data-theme="dark"] .hero .btn--solid { background: var(--jersey); border-color: var(--jersey); color: var(--black); }
html[data-theme="dark"] .hero .btn--ghost { border-color: #f1f0ea; color: #f1f0ea; }

.btn { font-weight: 700; }

/* Cards: bib-number plates */
.card::before { display: none; }
.card:hover { border-color: var(--black); }
html[data-theme="dark"] .card:hover { border-color: var(--jersey); }
a.card > .card__num { position: relative; display: inline-grid; place-items: center; min-width: 3.1rem; height: 2.3rem; padding: 0 .5rem;
  background: #ffffff; color: var(--black); border: 2px solid var(--black); border-radius: 3px;
  font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: .02em; }
a.card > .card__num::before, a.card > .card__num::after { content: ""; position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #9a9da4; }
a.card > .card__num::before { left: 4px; }
a.card > .card__num::after { right: 4px; }
html[data-theme="dark"] a.card > .card__num { background: #f1f0ea; border-color: #f1f0ea; }
.card__tag { color: var(--accent); font-weight: 500; }

/* Section headings: a jersey-yellow bar */
.shead { border-bottom: 2px solid var(--black); }
html[data-theme="dark"] .shead { border-bottom-color: var(--line); }
.shead h2::before { content: ""; display: inline-block; width: .5em; height: .7em; margin-right: .35em; background: var(--jersey); vertical-align: .02em; }

/* Callouts: the Get training box must be seen */
.callout { background: var(--accent-soft); border: 0; border-left: 5px solid var(--jersey); }
html[data-theme="dark"] .callout { border-left-color: var(--jersey); }

/* Tables: black headers with a yellow line */
.facts thead th { background: var(--black); color: #f7f6f1; border-bottom: 3px solid var(--jersey); letter-spacing: .03em; }
html[data-theme="dark"] .facts thead th { background: #23262c; }
.facts tbody tr:nth-child(even) td { background: #fbfaf6; }
html[data-theme="dark"] .facts tbody tr:nth-child(even) td { background: #17191d; }

/* Gear box */
.gearline { background: var(--white); border: 2px solid var(--black); border-bottom: 6px solid var(--jersey); }
html[data-theme="dark"] .gearline { border-color: #3a3d44; border-bottom-color: var(--jersey); }
.gearline__t { color: var(--black); }
html[data-theme="dark"] .gearline__t { color: #f1f0ea; }
.gearline a.btn { background: var(--jersey); border-color: var(--jersey); color: var(--black); }

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

.pick__cta .btn--solid { background: var(--jersey); border-color: var(--jersey); color: var(--black); }
.pick__cta .btn--solid:hover { background: var(--black); border-color: var(--black); color: #f7f6f1; }