/* McL Zone — Bootstrap 5 theme override
   Papaya orange (#FF8000) on near-black, condensed racing headings (Oswald)
   + clean body copy (Inter). Only edit colours here — never in HTML. */

:root {
  --mcl-orange: #FF8000;
  --mcl-orange-dark: #cc6600;
  --mcl-bg: #111111;
  --mcl-bg-alt: #1a1a1a;
  --mcl-bg-card: #1e1e1e;
  --bs-body-bg: var(--mcl-bg);
  --bs-body-color: #eaeaea;
  --bs-link-color: var(--mcl-orange);
  --bs-link-hover-color: #ffa940;
  --bs-primary: #FF8000;
  --bs-primary-rgb: 255, 128, 0;
  --mcl-navbar-h: 57px;
  --mcl-pos-up: #3ddc84;
  --mcl-pos-down: #ff5c5c;
  --mcl-gold: #e8c25a;
}

body.mcl-body {
  background-color: var(--mcl-bg);
  color: #eaeaea;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.mcl-heading {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

.text-mcl { color: var(--mcl-orange) !important; }
.border-mcl { border: 1px solid var(--mcl-orange) !important; }

.mcl-empty-icon { width: 96px; height: auto; opacity: 0.85; }

/* Navbar */
.mcl-navbar {
  background-color: rgba(17,17,17,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #2a2a2a;
}
.mcl-navbar .nav-link { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; }
.mcl-navbar .nav-link.active { color: var(--mcl-orange); }
.mcl-navbar .nav-link.is-live-now { color: #ff3b3b; }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b3b; margin-right: 6px; vertical-align: middle;
  margin-bottom: 2px; animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Non-animated grey variant — shown in the nav when something's upcoming
   but nothing is live right now. */
.live-dot.live-dot-upcoming {
  background: #8a8a8a;
  animation: none;
}

/* Hero */
.mcl-hero {
  background: linear-gradient(180deg, var(--mcl-bg-alt) 0%, var(--mcl-bg) 100%);
  border-bottom: 3px solid var(--mcl-orange);
}

/* Homepage "next event" teaser — event.upcoming_image, rendered as the
   card's own top image (live-card.html show_image=true) when there's no
   live event but one's scheduled. Fixed height regardless of the
   uploaded image's aspect ratio, so it pads out the card predictably
   rather than however tall the source file happens to be. */
.mcl-upcoming-image { width: 100%; height: 220px; object-fit: cover; }

/* Coming soon splash — standalone page, no nav/footer */
html:has(body.mcl-body-coming-soon), body.mcl-body-coming-soon { height: 100%; margin: 0; overflow: hidden; }
.mcl-coming-soon {
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: radial-gradient(circle at 50% 30%, var(--mcl-bg-alt) 0%, var(--mcl-bg) 70%);
  border-bottom: 3px solid var(--mcl-orange);
  overflow: hidden;
}
.mcl-coming-soon-inner { max-width: 560px; }
.mcl-coming-soon-logo { height: 72px; }

/* 404 page fills the viewport below the navbar so it reads as centred,
   not just a small block at the top of a long empty page. */
.mcl-404 { min-height: calc(100vh - var(--mcl-navbar-h)); }

/* Homepage standings — blurred out with an "Off Season" overlay when
   site.current_season is unset. */
.mcl-standings-wrap { position: relative; }
/* Lines the "{season} Standings" heading up with the text inside the card
   below it, rather than sitting flush with the card's outer edge — 1rem
   matches Bootstrap's default .card-body padding. */
.mcl-standings-heading { padding-left: 1rem; }
.mcl-standings-offseason .mcl-standings-content {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.mcl-standings-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Live event header stays visible, pinned just below the sticky navbar */
.mcl-live-hero {
  position: sticky;
  top: var(--mcl-navbar-h);
  z-index: 1015;
}

/* Match the sizing used by the live-card on the homepage/catalogue —
   plain badge (no fs-6/px-3/py-2), h5-scale title, small description. */
.mcl-live-hero .badge { font-size: 0.75em; padding: 0.35em 0.65em; }
.mcl-live-hero .small { font-size: 0.875em; }
.mcl-live-hero h1.mcl-heading { font-size: 1.25rem; }

/* Shrink the sticky live header on mobile so it doesn't eat the whole
   viewport — badge, live dot, date, title and description all scale down. */
@media (max-width: 767.98px) {
  .mcl-live-hero .badge { font-size: 0.7rem !important; padding: 0.25rem 0.5rem !important; }
  .mcl-live-hero .live-dot { width: 6px !important; height: 6px !important; margin-right: 4px !important; }
  .mcl-live-hero .small { font-size: 0.7rem; }
  .mcl-live-hero h1.mcl-heading { font-size: 1.1rem; margin-bottom: 0.25rem; }
}

/* Watch & listen sidebar stays on screen while the live blog is scrolled,
   pinned just below the sticky hero (offset set by main.js to match its
   rendered height, since that varies per event). */
@media (min-width: 992px) {
  .mcl-live-sidebar {
    position: sticky;
    z-index: 1005;
    align-self: flex-start;
  }
}

/* Collapsible watch/listen cards — start closed, click header to expand */
.mcl-stream-toggle {
  background: transparent;
  border: 0;
  color: inherit;
}
.mcl-stream-toggle:hover, .mcl-stream-toggle:focus { color: inherit; }
.mcl-stream-chevron { transition: transform .2s ease; }
.mcl-stream-toggle[aria-expanded="true"] .mcl-stream-chevron { transform: rotate(180deg); }

/* Cards */
.mcl-card {
  background-color: var(--mcl-bg-card);
  border: 1px solid #2a2a2a;
  transition: transform .15s ease, border-color .15s ease;
}
.mcl-card:hover { transform: translateY(-3px); border-color: var(--mcl-orange); }

/* Upcoming events aren't clickable — see live-card.html — so the card
   shouldn't invite a click (no hover lift, default cursor). */
.mcl-card-static:hover { transform: none; border-color: #2a2a2a; }
.mcl-card-static { cursor: default; }

.btn-mcl {
  background-color: var(--mcl-orange); border-color: var(--mcl-orange); color: #111; font-weight: 600;
}
.btn-mcl:hover { background-color: #ffa940; border-color: #ffa940; color: #111; }

/* "Support the site" footer link — same papaya as .btn-mcl, but the footer
   is otherwise all muted grey text, so this gets a glow + lift on hover to
   stand out as the one thing there worth clicking. */
.btn-mcl-support {
  background-color: var(--mcl-orange);
  border: 1px solid var(--mcl-orange);
  color: #111;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-mcl-support:hover, .btn-mcl-support:focus {
  background-color: #ffa940;
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(255, 128, 0, 0.35);
}

/* Forms (contact page, etc) — Bootstrap's default .form-control border
   (--bs-border-color) is a light grey meant for light backgrounds, so it
   needs the same dark-chip treatment as everything else on this theme. */
.mcl-form-label {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #b8b8b8;
  margin-bottom: 0.4rem;
}
.mcl-form-control {
  background-color: var(--mcl-bg-alt);
  border: 1px solid #2a2a2a;
  color: #eaeaea;
  border-radius: 3px;
  padding: 0.6rem 0.85rem;
}
.mcl-form-control:focus {
  background-color: var(--mcl-bg-alt);
  color: #eaeaea;
  border-color: var(--mcl-orange);
  box-shadow: 0 0 0 0.2rem rgba(255, 128, 0, 0.25);
}
.mcl-form-control::placeholder { color: #6a6a6a; }
.mcl-form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--mcl-bg-alt) inset;
  -webkit-text-fill-color: #eaeaea;
}
textarea.mcl-form-control { resize: vertical; }
.mcl-form-alert {
  background-color: var(--mcl-bg-card);
  border: 1px solid var(--mcl-pos-down);
  color: var(--mcl-pos-down);
  border-radius: 3px;
  padding: 0.75rem 1rem;
}

/* Real stream embed code (iframe from YouTube/Twitch/etc) — keep it from
   overflowing the sidebar card and give it a sensible default aspect ratio. */
.mcl-stream-embed iframe, .mcl-stream-embed embed, .mcl-stream-embed object {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.mcl-stream-embed audio { width: 100%; }

/* Image / audio placeholders (no real imagery available yet) */
.img-placeholder, .audio-placeholder {
  background-color: #232323;
  background-image: repeating-linear-gradient(45deg, #2a2a2a 0 12px, #262626 12px 24px);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #3a3a3a;
}
.img-placeholder span, .audio-placeholder span {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem; color: #8a8a8a; background: rgba(17,17,17,0.7);
  padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em;
}
.audio-placeholder { min-height: 90px; }

/* Logo shown inside .img-placeholder when an article has no hero_image */
.mcl-logo-mark { max-width: 35%; max-height: 35%; opacity: 0.55; }

/* Homepage featured-article card — fixed height matching the title/tagline/
   buttons block it replaces, so it never makes the hero row taller. */
.mcl-featured-card { height: 225px; overflow: hidden; }
.mcl-featured-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Live blog */
.live-timeline { border-left: 2px solid #2a2a2a; padding-left: 1.25rem; }

/* Static "waiting for the feed" state — shown before JS's first fetch
   resolves, and left in place indefinitely if the feed is genuinely empty
   (main.js only touches the DOM once the update count actually changes).
   Centred and de-indented since there's no timeline rail to align with. */
.live-timeline:has(.mcl-feed-placeholder) { border-left: none; padding-left: 0; }
.mcl-feed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  text-align: center;
}
.mcl-feed-placeholder-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mcl-orange);
  animation: pulse 1.4s infinite;
}
.mcl-feed-placeholder-text {
  color: var(--mcl-orange);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}

/* Homepage teaser for a live, non-race event (race: no) — same feed/JS as
   the full timeline, just capped to roughly the height the driver-cards
   block takes up on race events, with a fade hinting there's more to read
   on the full live blog page. */
.mcl-timeline-compact {
  max-height: 200px;
  overflow: hidden;
  position: relative;
  /* .live-entry::before sits at left: -1.56rem, further left than the
     1.25rem padding-left inherited from .live-timeline — without extra
     room here, overflow: hidden (needed for the max-height cap) clips the
     dots. This padding keeps them inside the box so clipping is safe. */
  padding-left: 1.75rem;
}
.mcl-timeline-compact::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--mcl-bg-alt));
  pointer-events: none;
}
.live-entry { position: relative; }
.live-entry::before {
  content: ""; position: absolute; left: -1.56rem; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--mcl-orange);
}
.live-time { min-width: 4.5rem; font-family: "Oswald", sans-serif; }
.live-lap { margin-top: 2px; text-transform: none; letter-spacing: normal; }
/* Preserve line breaks typed into the event dashboard's update textarea —
   textContent keeps the feed injection-safe, this just stops the browser
   from collapsing the \n characters it already contains. */
.live-entry p { white-space: pre-line; }

/* Driver position cards — McLaren grid/current/finish tracker shown above
   the live blog on race events (rendered by mclRenderDriverCards in
   main.js). Semantic up/down colors are kept separate from the papaya
   accent (--mcl-pos-up / --mcl-pos-down, defined in the :root above). */
.driver-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .driver-cards { grid-template-columns: 1fr; }
}
.driver-card {
  background: var(--mcl-bg-card);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.2rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.driver-card:hover { border-color: var(--mcl-orange); transform: translateY(-2px); }
.driver-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.driver-number {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 50%;
  background: var(--mcl-orange); color: #111;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.driver-id .name {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 1.05rem; line-height: 1.15;
}
.driver-id .team { color: #8a8a8a; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.driver-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.driver-stat-row-double { grid-template-columns: 1fr 1fr; }
.driver-stat, .driver-practice-stat {
  background: var(--mcl-bg-alt); border: 1px solid #2a2a2a; border-radius: 3px;
  padding: 0.55rem 0.4rem 0.6rem; text-align: center;
}
.driver-practice-stat { padding: 0.7rem 0.4rem 0.75rem; }
.driver-stat .driver-stat-label, .driver-practice-stat .driver-stat-label {
  display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: #8a8a8a; margin-bottom: 0.3rem;
}
.driver-stat .driver-stat-value {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1.4rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.driver-practice-stat .driver-stat-value {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--mcl-orange);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.driver-stat.is-current .driver-stat-value, .driver-stat.is-finish .driver-stat-value { color: var(--mcl-orange); }
.driver-delta {
  display: inline-flex; align-items: center; gap: 2px; font-size: 0.68rem; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 0.3rem;
}
.driver-delta.up { color: var(--mcl-pos-up); }
.driver-delta.down { color: var(--mcl-pos-down); }
.driver-delta.same { color: #8a8a8a; }

/* Qualifying cards (race: "quali") — Q1/Q2/Q3 stat row plus a status pill
   summarising elimination/advancement in words, since three small numbers
   don't read fast enough on their own during a live blog. */
.driver-card.is-out { border-color: #3a2222; }
.driver-card.is-pole { border-color: var(--mcl-gold); }
.status-pill {
  display: inline-block; font-family: "Oswald", sans-serif; font-weight: 600;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 3px; padding: 0.28rem 0.55rem; margin-bottom: 0.9rem;
}
.status-pill.neutral { background: var(--mcl-bg-alt); border: 1px solid #2a2a2a; color: #8a8a8a; }
.status-pill.live { background: rgba(255, 128, 0, 0.12); border: 1px solid var(--mcl-orange); color: var(--mcl-orange); }
.status-pill.advanced { background: rgba(61, 220, 132, 0.1); border: 1px solid var(--mcl-pos-up); color: var(--mcl-pos-up); }
.status-pill.out { background: rgba(255, 92, 92, 0.1); border: 1px solid var(--mcl-pos-down); color: var(--mcl-pos-down); }
.status-pill.pole { background: rgba(232, 194, 90, 0.14); border: 1px solid var(--mcl-gold); color: var(--mcl-gold); }
.driver-stat.is-live { border-color: var(--mcl-orange); }
.driver-stat.is-live .driver-stat-value { color: var(--mcl-orange); }
.driver-stat.is-final .driver-stat-value { color: var(--mcl-orange); }
.driver-stat.is-pole .driver-stat-value { color: var(--mcl-gold); }
.driver-stat.is-eliminated .driver-stat-value { color: var(--mcl-pos-down); }
.driver-stat.is-out { opacity: 0.45; }
.driver-stat.is-out .driver-stat-value { font-size: 1rem; color: var(--mcl-pos-down); }

/* Tag badge — Bootstrap's bg-secondary-subtle is a light pastel meant for
   light backgrounds, so it looked washed out/wrong against the dark theme.
   A dark card-toned chip with a papaya-tinted border reads correctly here. */
.live-tag-badge {
  background-color: var(--mcl-bg-card);
  color: #eaeaea;
  border: 1px solid #3a3a3a;
  font-weight: 500;
}

/* Calendar "Cancelled" status — same dark-chip approach as .live-tag-badge
   (Bootstrap's subtle variants wash out on the dark theme), tinted with the
   existing --mcl-pos-down red instead of a new color. The row/card itself is
   dimmed and struck through so a cancelled round reads as inactive at a
   glance, not just via the badge. */
.badge-cancelled {
  background-color: var(--mcl-bg-card);
  color: var(--mcl-pos-down);
  border: 1px solid var(--mcl-pos-down);
  font-weight: 500;
}
tr.is-cancelled { opacity: 0.5; }
tr.is-cancelled td.fw-semibold { text-decoration: line-through; }
.card.is-cancelled { opacity: 0.6; }
.card.is-cancelled h3 { text-decoration: line-through; }

/* "Updating…" indicator shown above the timeline for the duration of the
   live feed (see main.js mclPollLiveFeed) — stays visible the whole time
   the page is polling, so it's a constant reassurance the blog is live. */
.mcl-live-refresh {
  display: inline-flex; align-items: center; gap: 6px;
}
.mcl-live-refresh-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mcl-orange); animation: pulse 1s infinite;
}

/* Tables */
.mcl-table { --bs-table-bg: transparent; }
.mcl-table thead { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 0.8rem; color: var(--mcl-orange); }

/* Accordion (tracks) */
.mcl-accordion .accordion-item { background: var(--mcl-bg-card); border: 1px solid #2a2a2a; }
.mcl-accordion .accordion-button { background: var(--mcl-bg-card); color: #fff; font-family: "Oswald", sans-serif; text-transform: uppercase; }
.mcl-accordion .accordion-button:not(.collapsed) { color: var(--mcl-orange); background: #221a10; box-shadow: none; }
.mcl-accordion .accordion-button:focus { box-shadow: none; }
.mcl-spec-list li { border-bottom: 1px dashed #2a2a2a; padding: 4px 0; }

.footer-link { color: #cfcfcf; }
.footer-link:hover { color: var(--mcl-orange); }
.mcl-footer { background: var(--mcl-bg-alt); border-top: 1px solid #2a2a2a; }

.mcl-article-body { line-height: 1.75; }
.mcl-article-body h2 { font-family: "Oswald", sans-serif; margin-top: 2rem; }