/* ============================================================
   nw-simracing.com: the shop's public website.

   A different room from the app. The app is a timing screen,
   dark end to end, neon green, dense. The website is the front
   door the old WordPress site was: a full-bleed dark hero with
   the shop moving behind it, then daylight, wide measure, and
   one hot pink accent over a soft red glow.

   EVERY rule in this file is scoped to `.site`, because the
   asset pipeline serves all stylesheets on every page and this
   one must not reach the boards. theme.css loads after this one
   alphabetically, so the scoping is also what wins the cascade:
   `body.site` outranks its bare `body`.
   ============================================================ */

body.site {
  /* The app's own palette (theme.css): the website is the front door to
     the boards, so it wears the same neon green on the same dark ground.
     The green needs dark ink on top of it and a dark ground under it, which
     is why the light body the old WordPress site had is gone. */
  --site-accent: #bceb21;
  --site-accent-deep: #8fb51a;
  --site-accent-ink: #1a1d0f;
  --site-ink: #e8ebef;
  --site-ink-muted: #9aa3af;
  --site-ink-faint: #6e7275;
  --site-line: #20242b;
  --site-dark: #0f1114;
  --site-dark-2: #14171c;
  --site-dark-line: #303743;
  --site-dark-ink: #e8ebef;
  --site-dark-muted: #9aa3af;
  --site-glow: rgba(188, 235, 33, 0.16);

  --site-display: "Kanit", "Rajdhani", "Barlow", system-ui, sans-serif;
  --site-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  background-color: #08090b;
  background-image: none;
  color: var(--site-ink);
  font-family: var(--site-text);
  font-size: 16px;
  line-height: 1.6;
}

.site h1, .site h2, .site h3, .site h4 {
  font-family: var(--site-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
}

.site ::selection { background: var(--site-accent); color: var(--site-accent-ink); }
.site :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }

.site-shell {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-shell--narrow { max-width: 780px; }

/* Consecutive sections each pay this, so the gap between two of them is twice
   what it reads as here. Kept modest for that reason. */
.site-section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-section--tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

/* The soft red bloom the old site put behind its headline text. Sits in its
   own layer so it never tints an image or a table. */
/* overflow: clip, not visible: the bloom is deliberately wider than its
   section, and without clipping that width is a horizontal scrollbar on a
   phone. clip rather than hidden so this never becomes a scroll container. */
.site-glow { position: relative; isolation: isolate; overflow: clip; }
.site-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(46rem, 120%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--site-glow) 0%, rgba(188, 235, 33, 0) 70%);
  opacity: 0.28;
  pointer-events: none;
}

/* ---------- the bar ---------- */

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--site-dark-line);
  color: var(--site-dark-ink);
}

/* On the home page the bar rides over the video instead of sitting on top of
   it, which is what makes the hero read as full screen. */
.site-topbar--over-hero {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

.site-topbar__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.site-wordmark { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.site-wordmark img { height: 1.75rem; width: auto; display: block; }
.site-wordmark span {
  font-family: var(--site-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--site-dark-muted);
}

.site-nav { display: none; align-items: center; gap: 1.35rem; margin-inline: auto; }
.site-nav a {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--site-dark-ink); }
.site-nav a[aria-current] { color: #fff; border-bottom-color: var(--site-accent); }

.site-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

/* The phone menu is a disclosure, not a script: no JavaScript on this site
   beyond the app's own bundle, and a <details> cannot get stuck open. */
.site-menu { margin-left: auto; }
.site-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  color: var(--site-dark-muted);
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu[open] > summary { color: #fff; }
/* Fully opaque, not 98%: the bar above it carries a backdrop-filter, and a
   panel with any transparency at all composites against that blur, so the
   page shows through the open menu as a smear. */
.site-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--site-dark);
  border-block: 1px solid var(--site-dark-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  padding: 0.75rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
}
.site-menu__panel a {
  padding-block: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--site-dark-line);
}
.site-menu__panel a:last-child { border-bottom: 0; }
.site-menu__panel a:hover { color: #fff; }

@media (min-width: 62rem) {
  .site-nav { display: flex; }
  .site-menu { display: none; }
}

/* On a narrow phone the wordmark, the Book now pill and the hamburger add up
   to more than the shell is wide, and the overflow is a horizontal scrollbar
   on every page. "Sim Racing" is the part that can go: the mark still says
   whose site this is. */
@media (max-width: 30rem) {
  .site-topbar__row { gap: 0.75rem; }
  .site-wordmark span { display: none; }
  .site-topbar__end .site-btn { padding-inline: 0.95rem; font-size: 0.7rem; }
}

/* ---------- buttons ---------- */

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--site-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-btn--primary { background: var(--site-accent); color: var(--site-accent-ink); }
.site-btn--primary:hover { background: var(--site-accent-deep); }
.site-btn--ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.site-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-btn--quiet { border-color: var(--site-line); color: var(--site-ink); }
.site-btn--quiet:hover { border-color: var(--site-accent); color: var(--site-accent); }

/* ---------- hero ---------- */

.site-hero {
  position: relative;
  min-height: min(100svh, 46rem);
  display: flex;
  flex-direction: column;
  background-color: var(--site-dark);
  color: var(--site-dark-ink);
  overflow: hidden;
}

.site-hero__poster,
.site-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* The video paints over the still once it has frames. */
.site-hero__poster { z-index: 0; }
.site-hero__video { z-index: 1; }

/* The dark wash that makes white type readable over a moving picture. */
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 9, 11, 0.72) 0%, rgba(8, 9, 11, 0.45) 45%, rgba(8, 9, 11, 0.88) 100%);
  z-index: 2;
  pointer-events: none;
}

.site-hero__body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  margin-bottom: auto;
  padding-block: 7rem 4rem;
  text-align: center;
}

.site-hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.site-hero__tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.86);
}

.site-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* "SWIPE DOWN", set on its side the way the old site had it. */
.site-hero__cue {
  position: relative;
  z-index: 3;
  padding-bottom: 2rem;
  display: none;
  justify-content: center;
}
.site-hero__cue span {
  writing-mode: vertical-rl;
  font-family: var(--site-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.site-hero__cue span::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.5rem;
  margin: 0.75rem auto 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
}
@media (min-height: 40rem) { .site-hero__cue { display: flex; } }

/* A page that is not the home page still opens dark, but short. */
.site-banner {
  background: var(--site-dark);
  color: var(--site-dark-ink);
  padding-block: clamp(3rem, 8vw, 5rem);
  border-bottom: 1px solid var(--site-dark-line);
}
.site-banner h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  text-transform: uppercase;
}
.site-banner p { margin-top: 0.85rem; color: var(--site-dark-muted); max-width: 46rem; }

.site-eyebrow {
  font-family: var(--site-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--site-accent);
}

.site-lede { font-size: 1.1rem; color: var(--site-ink-muted); max-width: 46rem; }

/* The block every section opens with: eyebrow, heading, a paragraph or two.
   One class rather than a style attribute per page, so the rhythm of the site
   is decided here and not seven times over. */
.site-head { max-width: 48rem; }
.site-head--center { margin-inline: auto; text-align: center; }
.site-head h2 { margin-top: 0.6rem; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.site-head h2:first-child { margin-top: 0; }
.site-head p { margin-top: 1rem; font-size: 1.08rem; color: var(--site-ink-muted); }
.site-head--dark h2 { color: #fff; }
.site-head--dark p { color: var(--site-dark-muted); }

.site-body { margin-top: 2.5rem; }
.site-body--tight { margin-top: 1.5rem; }

.site-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site-actions--center { justify-content: center; }

.site-link { color: var(--site-accent); font-weight: 600; text-decoration: none; }
.site-link:hover { text-decoration: underline; }
.site-meta { margin-top: 0.6rem; }
.site-muted { color: var(--site-ink-muted); }

/* ---------- the photo strip ---------- */

.site-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.site-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
  background: #eceef1;
}
@media (min-width: 45rem) { .site-photos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- numbered blurbs ---------- */

.site-steps { display: grid; gap: 1.75rem; counter-reset: site-step; }
@media (min-width: 52rem) { .site-steps { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 3rem; } }

.site-step { counter-increment: site-step; position: relative; padding-left: 3.75rem; }
.site-step::before {
  content: counter(site-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-family: var(--site-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--site-accent);
  opacity: 0.85;
}
.site-step h3 { font-size: 1.2rem; }
.site-step p { margin-top: 0.5rem; color: var(--site-ink-muted); }
.site-step a { color: var(--site-accent); font-weight: 600; }

/* ---------- cards, tables, lists ---------- */

.site-cards { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .site-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .site-cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .site-cards--4 { grid-template-columns: repeat(4, 1fr); } }

.site-card {
  border: 1px solid var(--site-line);
  border-radius: 0.9rem;
  padding: 1.5rem;
  background: var(--site-dark);
}
.site-card h3 { font-size: 1.15rem; }
.site-card h3 + p { margin-top: 0.5rem; }
.site-card p { color: var(--site-ink-muted); }
.site-card .site-eyebrow + h3 { margin-top: 0.5rem; }
.site-card--dark {
  background: var(--site-dark-2);
  border-color: var(--site-dark-line);
  color: var(--site-dark-ink);
}
.site-card--dark p { color: var(--site-dark-muted); }
.site-card--feature { border-color: var(--site-accent); box-shadow: 0 0 0 1px var(--site-accent); }

.site-price {
  font-family: var(--site-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.site-price small { font-size: 0.85rem; font-weight: 500; color: var(--site-ink-muted); }

.site-list { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.site-list li { display: flex; gap: 0.6rem; color: var(--site-ink-muted); }
.site-list li::before { content: "·"; color: var(--site-accent); font-weight: 700; }

.site-table-scroll { overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.site-table th, .site-table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--site-line);
  vertical-align: top;
}
.site-table th {
  font-family: var(--site-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-ink-faint);
}
.site-table td:last-child, .site-table th:last-child { text-align: right; }
.site-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- this week on the boards ---------- */

.site-board {
  background: var(--site-dark);
  color: var(--site-dark-ink);
  border-radius: 1rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.site-board h2 { color: #fff; }
.site-board__rows { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
@media (min-width: 55rem) { .site-board__rows { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; } }

.site-board__row {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--site-dark-2);
  border: 1px solid var(--site-dark-line);
  border-radius: 0.6rem;
}
.site-board__time {
  font-family: var(--site-display);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--site-accent);
  flex: none;
}
.site-board__who { font-weight: 600; }
.site-board__where { margin-left: auto; text-align: right; font-size: 0.82rem; color: var(--site-dark-muted); }

.site-empty {
  padding: 1rem 0;
  color: var(--site-dark-muted);
}

/* ---------- forms ---------- */

.site-form { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .site-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }

.site-field { display: flex; flex-direction: column; gap: 0.35rem; }
.site-field label {
  font-family: var(--site-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-ink-faint);
}
.site-field input, .site-field textarea {
  font: inherit;
  color: var(--site-ink);
  background: var(--site-dark);
  border: 1px solid var(--site-dark-line);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  width: 100%;
}
.site-field input:focus, .site-field textarea:focus {
  border-color: var(--site-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(188, 235, 33, 0.2);
}
.site-field textarea { min-height: 8rem; resize: vertical; }

/* The honeypot, and the skip link, hidden the same way: clipped to a pixel
   rather than parked at left: -9999px. A far-negative offset is a horizontal
   scrollbar on a phone, which is exactly the bug this pattern usually ships
   with. Not display:none, because a bot that skips hidden fields would skip
   the trap, and a screen reader would skip the skip link. */
.site-trap,
.site-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Out of the way until a keyboard reaches it, then a real button in the
   corner. */
.site-skip:focus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.6rem 1rem;
  background: var(--site-accent);
  color: var(--site-accent-ink);
  border-radius: 0 0 0.5rem 0;
  text-decoration: none;
}

.site-note {
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--site-line);
  background: var(--site-dark);
  color: var(--site-ink-muted);
  font-size: 0.92rem;
}
.site-note--good { border-color: rgba(188, 235, 33, 0.4); background: rgba(188, 235, 33, 0.08); color: var(--site-ink); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--site-dark);
  color: var(--site-dark-muted);
  border-top: 1px solid var(--site-dark-line);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: 0.92rem;
}
.site-footer h2 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--site-dark-ink);
  margin-bottom: 0.75rem;
}
.site-footer a { color: var(--site-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__cols { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } }
.site-footer__hours { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; }
.site-footer__hours dt { color: var(--site-dark-ink); white-space: nowrap; }
.site-footer__links { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__base {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--site-dark-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.82rem;
  color: var(--site-ink-faint);
}

/* ---------- motion ---------- */

/* Somebody who asked their machine for less motion gets the still frame the
   video was going to sit behind, and the video is never played. */
@media (prefers-reduced-motion: reduce) {
  .site-hero__video { display: none; }
}