@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
:root {
  --background: #fcfcfc;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #fcfcfc;
  --popover-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #ebebeb;
  --secondary-foreground: #000000;
  --muted: #f5f5f5;
  --muted-foreground: #525252;
  --accent: #ebebeb;
  --accent-foreground: #000000;
  --destructive: #e54b4f;
  --destructive-foreground: #ffffff;
  --border: #e4e4e4;
  --input: #ebebeb;
  --ring: #000000;
  --chart-1: #ffae04;
  --chart-2: #2d62ef;
  --chart-3: #a4a4a4;
  --chart-4: #e4e4e4;
  --chart-5: #747474;
  --sidebar: #fcfcfc;
  --sidebar-foreground: #000000;
  --sidebar-primary: #000000;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #ebebeb;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #ebebeb;
  --sidebar-ring: #000000;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --tracking-normal: 0em;
  --radius: 0.5rem;
  --spacing: 0.25rem;
  --shadow-2xs: 0px 1px 2px 0px rgb(0 0 0 / 0.090);
  --shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.090);
  --shadow-sm: 0px 1px 2px 0px rgb(0 0 0 / 0.180), 0px 1px 2px -1px rgb(0 0 0 / 0.180);
  --shadow: 0px 1px 2px 0px rgb(0 0 0 / 0.180), 0px 1px 2px -1px rgb(0 0 0 / 0.180);
  --shadow-md: 0px 1px 2px 0px rgb(0 0 0 / 0.180), 0px 2px 4px -1px rgb(0 0 0 / 0.180);
  --shadow-lg: 0px 1px 2px 0px rgb(0 0 0 / 0.180), 0px 4px 6px -1px rgb(0 0 0 / 0.180);
  --shadow-xl: 0px 1px 2px 0px rgb(0 0 0 / 0.180), 0px 8px 10px -1px rgb(0 0 0 / 0.180);
  --shadow-2xl: 0px 1px 2px 0px rgb(0 0 0 / 0.450);
}

.dark {
  --background: #000000;
  --foreground: #ffffff;
  --card: #090909;
  --card-foreground: #ffffff;
  --popover: #121212;
  --popover-foreground: #ffffff;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #222222;
  --secondary-foreground: #ffffff;
  --muted: #1d1d1d;
  --muted-foreground: #a4a4a4;
  --accent: #333333;
  --accent-foreground: #ffffff;
  --destructive: #ff5b5b;
  --destructive-foreground: #000000;
  --border: #242424;
  --input: #333333;
  --ring: #a4a4a4;
  --chart-1: #ffae04;
  --chart-2: #2671f4;
  --chart-3: #747474;
  --chart-4: #525252;
  --chart-5: #e4e4e4;
  --sidebar: #121212;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #333333;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #333333;
  --sidebar-ring: #a4a4a4;
}

/* S.O.R look, matched to https://www.sorenduroracing.com/ (black header and sponsor bar, gold #AF8F46, Roboto).
   Light content area in both colour modes so the site matches the customer's existing site. */
:root, .dark {
  --background: #ffffff;
  --foreground: #212121;
  --card: #ffffff;
  --card-foreground: #212121;
  --popover: #ffffff;
  --popover-foreground: #212121;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #f1ede4;
  --secondary-foreground: #212121;
  --muted: #f5f5f5;
  --muted-foreground: #525252;
  --accent: #af8f46;
  --accent-foreground: #ffffff;
  --border: #e1dddd;
  --input: #e1dddd;
  --ring: #af8f46;
  --chart-1: #af8f46;
  --font-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sor-gold: #af8f46;
  --sor-link: #1976d2;
}
html, body { color-scheme: light !important; font-family: var(--font-sans); background: #fff; color: #212121; }
.prose { --tw-prose-body: #212121; --tw-prose-headings: #212121; --tw-prose-bold: #212121; --tw-prose-links: var(--sor-link); }
.prose :where(h1, h2, h3, h4, p, li, strong, em, span):not([style*="color"]) { color: #212121; }

/* header: black bar, banner artwork as the brand, white uppercase menu */
[data-theme-region="header"] {
  --background: #000000; --foreground: #ffffff; --muted: #222222; --border: #000000;
  background: #000 !important; color: #fff !important;
}
[data-theme-region="header"] [data-header-brand] img {
  height: 4.5rem; width: auto; max-width: min(100%, 38rem); object-fit: contain;
}
[data-theme-region="header"] [data-slot="navigation-menu-link"],
[data-theme-region="header"] [data-slot="navigation-menu-trigger"],
[data-theme-region="header"] [data-header-actions] a {
  background: transparent; color: #fff; text-transform: uppercase; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em;
}
[data-theme-region="header"] [data-slot="navigation-menu-link"]:hover,
[data-theme-region="header"] [data-slot="navigation-menu-trigger"]:hover,
[data-theme-region="header"] [data-header-actions] a:hover { background: #222; color: #fff; }
[data-theme-region="header"] [data-header-actions] a:last-child { background: var(--sor-gold); color: #fff; }
@media (max-width: 640px) { [data-theme-region="header"] [data-header-brand] img { height: 3rem; max-width: 70vw; } }

/* page titles: gold bar like the original sub-header */
main > section:has(> div > header > div > h1) { background: var(--sor-gold); padding-block: 0.25rem; }
main > section:has(> div > header > div > h1) h1 { color: #fff; text-align: center; font-size: 1.125rem; font-weight: 400; padding: 0; }
main > section:has(> div > header > div > h1) header > div { max-width: none; width: 100%; }

/* season-support sponsor bar (black, red title, colour logos) and footer link row */
.sor-season-banner { --background: #000; background: #000; color: #fff; padding: 0.75rem 0 0.5rem; margin: 0; }
.sor-season-title { color: #ff0000; font-weight: 700; text-align: center; margin: 0 0 0.25rem; }
.sor-season-banner .sponsor-banner { margin: 0; background: transparent; color: #fff; }
.sor-banner-logo { height: 4.25rem; width: auto; max-width: 12rem; object-fit: contain; }
.sor-banner-text { color: #fff; font-weight: 600; white-space: nowrap; }
.sor-season-banner a { font-size: 0; }
.sor-season-banner a.sor-banner-name { font-size: 1rem; color: #fff; font-weight: 600; white-space: nowrap; }
.sor-season-banner a:hover { opacity: 0.85; }
.sor-footer-links { display: flex; justify-content: center; gap: 1.75rem; padding: 0.875rem 1rem; background: #fff; }
.sor-footer-links a { color: var(--sor-link); text-transform: uppercase; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-decoration: none; }
.sor-footer-links a:hover { text-decoration: underline; }