/* Shared styling for the standalone static content/SEO pages
   (public/f1-live-timing/, public/f1-telemetry-explained/).

   These pages live OUTSIDE the React bundle, so they can't import the app's
   hashed custom.css. Instead this file mirrors the app's design tokens +
   accent/surface presets from src/styles/custom.css, so the pages render
   pixel-consistent with the dashboard — and, because each page runs the same
   theme pre-paint script (reading the f1_accent / f1_surface localStorage keys
   from src/store/themeStore.ts), they also follow a returning visitor's chosen
   theme. Keep the token values below in sync with custom.css :root. */

:root {
  --f1-red: #e10600;
  --f1-danger: #e10600;
  --f1-accent: var(--f1-red);
  --f1-text: #dbddde;
  --f1-bg: #0f0f14;
  --f1-panel: #15151f;
  --f1-panel-2: #1c1c26;
  --f1-panel-3: #23232f;
  --f1-border: #2a2a36;
  --f1-dim: #8a8a93;
  --f1-dim-2: #6e6e76;
  --f1-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f1-font-display: 'Ethnocentric', var(--f1-font);
}

/* ── Accent presets (mirror custom.css) ── */
:root[data-accent="red"]    { --f1-accent: #e10600; }
:root[data-accent="orange"] { --f1-accent: #f26b1d; }
:root[data-accent="amber"]  { --f1-accent: #d99413; }
:root[data-accent="teal"]   { --f1-accent: #0fae9e; }
:root[data-accent="blue"]   { --f1-accent: #2f6bff; }
:root[data-accent="violet"] { --f1-accent: #7c5cff; }
:root[data-accent="pink"]   { --f1-accent: #e0398b; }

/* ── Surface presets (mirror custom.css; all dark, text greys stay constant) ── */
:root[data-surface="midnight"] { --f1-bg:#08080c; --f1-panel:#0f0f16; --f1-panel-2:#16161f; --f1-panel-3:#1e1e2a; --f1-border:#26262f; }
:root[data-surface="graphite"] { --f1-bg:#14141a; --f1-panel:#1c1c23; --f1-panel-2:#24242d; --f1-panel-3:#2d2d38; --f1-border:#37373f; }
:root[data-surface="ocean"]    { --f1-bg:#0a0e17; --f1-panel:#111621; --f1-panel-2:#18202e; --f1-panel-3:#212b3d; --f1-border:#2a3547; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--f1-bg);
  color: var(--f1-text);
  font-family: var(--f1-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--f1-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* Sticky top bar — mirrors the app navbar chrome (translucent, blurred) */
header.site {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--f1-border);
  background: color-mix(in srgb, var(--f1-bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
/* Two-tone wordmark, matching the navbar: "F1" in accent (italic), rest bright. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f1-font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--f1-text);
}
.brand .lg-f1 { color: var(--f1-accent); font-style: italic; letter-spacing: -0.03em; }
.brand .lg-rest { color: var(--f1-text); }
nav.top a { color: var(--f1-text); font-size: .9rem; margin-left: 18px; }
nav.top a:hover { color: #fff; }

.crumb { font-size: .8rem; color: var(--f1-dim); padding: 22px 0 0; }
.crumb a { color: var(--f1-dim); }
h1 { font-family: var(--f1-font-display); font-size: 2rem; line-height: 1.2; color: #fff; margin: 12px 0 10px; }
.lede { font-size: 1.12rem; color: #fff; margin: 0 0 10px; }
h2 { font-family: var(--f1-font-display); font-size: 1.3rem; color: #fff; margin: 38px 0 10px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 16px; padding-left: 20px; }
li { margin: 5px 0; }
dl { margin: 0 0 16px; }
dt { color: #fff; font-weight: 600; margin-top: 14px; }
dd { margin: 2px 0 0; color: var(--f1-text); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--f1-accent);
  color: #fff;
  font-weight: 600;
  font-family: var(--f1-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .9rem;
  padding: 12px 22px;
  border-radius: 8px;
  margin: 10px 0 4px;
}
.cta:hover { text-decoration: none; filter: brightness(1.12); }

/* Related cards — mirror the app's .f1-panel chrome (dark panel, border,
   clipped bottom-right corner). */
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.related a {
  display: block;
  background: var(--f1-panel);
  border: 1px solid var(--f1-border);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  font-weight: 600;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: border-color .15s ease, background .15s ease;
}
.related a:hover { text-decoration: none; border-color: var(--f1-accent); background: var(--f1-panel-2); }
.related a span { display: block; color: var(--f1-dim); font-size: .85rem; font-weight: 400; margin-top: 4px; }

footer.site {
  border-top: 1px solid var(--f1-border);
  margin-top: 48px;
  padding: 24px 0 44px;
  color: var(--f1-dim-2);
  font-size: .8rem;
}
footer.site a { color: var(--f1-dim); }
footer.site p { margin: 0 0 8px; }

@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  .related { grid-template-columns: 1fr; }
}