/* ── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --white: #1c1c20;
    --off-white: #18181c;
    --light-gray: #242428;
    --mid-gray: #2e2e34;
    --gray: #a8a8b0;
    --dark-blue: #f0f0f2;
    --surface: #111114;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --box-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] body {
    background-color: #111114;
    color: #f0f0f2;
}

/* ── Header ───────────────────────────────────────────────── */
[data-theme="dark"] #site-header {
    background-color: rgba(17, 17, 20, 0.97);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-menu li a,
[data-theme="dark"] a {
    color: #d4d4da;
}

[data-theme="dark"] a:hover {
    color: var(--primary-bright);
}

[data-theme="dark"] .dropdown-menu {
    background-color: #1c1c20;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .dropdown-menu li a {
    color: #d4d4da;
}

[data-theme="dark"] .mobile-menu-toggle span {
    background-color: #d4d4da;
}

/* ── Buttons ──────────────────────────────────────────────── */
[data-theme="dark"] .btn-secondary {
    background-color: #d4d4da;
    border-color: #d4d4da;
    color: #111114;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: transparent;
    color: #d4d4da;
}

/* ── Hero — reduce overlay so text stays readable ─────────── */
[data-theme="dark"] .hero-section::before {
    background: linear-gradient(
        105deg,
        rgba(10, 10, 12, 0.55) 0%,
        rgba(50, 20, 70, 0.25) 55%,
        rgba(0, 0, 0, 0.0) 100%
    );
}

[data-theme="dark"] .hero-section::after {
    background: linear-gradient(to top, rgba(10, 10, 12, 0.15), transparent);
}

[data-theme="dark"] .hero-content h1,
[data-theme="dark"] .hero-content p {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

/* ── Stats section ────────────────────────────────────────── */
[data-theme="dark"] .stats-section::before {
    background: rgba(0, 0, 0, 0.38);
}

/* ── Services ─────────────────────────────────────────────── */
[data-theme="dark"] .services-section {
    background-color: #18181c;
}

[data-theme="dark"] .service-card {
    background-color: #1c1c20;
    color: #f0f0f2;
}

/* ── Page intro sections ──────────────────────────────────── */
[data-theme="dark"] .page-intro-section {
    background: linear-gradient(160deg, #1c1c20 0%, #18181c 100%);
    border-bottom-color: #2e2e34;
}

[data-theme="dark"] .page-intro-section h1 {
    color: #f0f0f2;
}

[data-theme="dark"] .page-intro-section p,
[data-theme="dark"] .page-intro-section li,
[data-theme="dark"] .intro-content {
    color: #d4d4da;
}

/* ── About / Connect / Partners home ─────────────────────── */
[data-theme="dark"] .about-section {
    background-color: #111114;
}

[data-theme="dark"] .partners-section {
    background-color: #18181c;
}

/* ── Get Involved — step cards ───────────────────────────── */
[data-theme="dark"] .step-content {
    background-color: #1c1c20;
    color: #f0f0f2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .step-content h3,
[data-theme="dark"] .step-content p {
    color: #f0f0f2;
}

[data-theme="dark"] .step-number {
    background-color: #2e2e34;
    color: #f0f0f2;
}

[data-theme="dark"] .platforms-section {
    background-color: #111114;
}

[data-theme="dark"] .platform-item h4,
[data-theme="dark"] .platform-item p,
[data-theme="dark"] .platform-devices {
    color: #d4d4da;
}

/* ── Partners page ────────────────────────────────────────── */
[data-theme="dark"] .partners-main-section {
    background-color: #111114;
}

[data-theme="dark"] .partner-card {
    background-color: #1c1c20;
    color: #f0f0f2;
}

[data-theme="dark"] .partner-card h3 {
    color: #f0f0f2;
}

[data-theme="dark"] .partner-card p {
    color: #a8a8b0;
}

[data-theme="dark"] .partners-secondary-section {
    background-color: #18181c;
}

[data-theme="dark"] .partners-secondary-section .partner-card {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .special-mentions-section {
    background-color: #111114;
}

[data-theme="dark"] .mention-card {
    background-color: #1c1c20;
    color: #f0f0f2;
}

[data-theme="dark"] .mention-card h3 {
    color: #f0f0f2;
}

[data-theme="dark"] .mention-card p {
    color: #a8a8b0;
}

/* ── Rulebook ─────────────────────────────────────────────── */
[data-theme="dark"] .page-header-section {
    background-color: #111114;
}

[data-theme="dark"] .page-header-section h1 {
    color: #f0f0f2;
}

[data-theme="dark"] .header-desc,
[data-theme="dark"] .header-desc p,
[data-theme="dark"] .last-updated {
    color: #d4d4da;
}

[data-theme="dark"] .rulebook-nav-section {
    background-color: #18181c;
    border-top-color: #2e2e34;
    border-bottom-color: #2e2e34;
}

[data-theme="dark"] .nav-item {
    color: #d4d4da;
}

[data-theme="dark"] .nav-item:hover {
    background-color: rgba(150, 90, 164, 0.12);
    color: var(--primary-bright);
}

[data-theme="dark"] .rulebook-content {
    background-color: #111114;
}

[data-theme="dark"] .rule-section h2 {
    color: #f0f0f2;
}

[data-theme="dark"] .rule-section .rule-content,
[data-theme="dark"] .rule-section .rule-content p,
[data-theme="dark"] .rule-section .rule-content li {
    color: #d4d4da;
}

[data-theme="dark"] .penalties-table-container {
    background-color: #1c1c20;
}

[data-theme="dark"] .penalties-table-container h3 {
    color: #f0f0f2;
}

[data-theme="dark"] .penalty-row {
    background-color: #242428;
}

[data-theme="dark"] .penalty-offense {
    color: #d4d4da;
}

/* ── Incident Guide ───────────────────────────────────────── */
[data-theme="dark"] .guidelines-section {
    background-color: #111114;
}

[data-theme="dark"] .guideline-card {
    background-color: #1c1c20;
    color: #f0f0f2;
}

[data-theme="dark"] .guideline-card h2,
[data-theme="dark"] .guideline-card h3 {
    color: #f0f0f2;
}

[data-theme="dark"] .guideline-content p,
[data-theme="dark"] .guideline-content li,
[data-theme="dark"] .guideline-content ol li {
    color: #d4d4da;
}

[data-theme="dark"] .guideline-number {
    background-color: var(--primary-color);
    color: #ffffff;
}

[data-theme="dark"] .license-points-table .table-header,
[data-theme="dark"] .license-points-table .header-cell {
    background-color: #18181c;
    color: #f0f0f2;
}

[data-theme="dark"] .license-points-table .table-row {
    border-bottom-color: #2e2e34;
}

[data-theme="dark"] .license-points-table .row-cell {
    color: #d4d4da;
}

/* ── Driver Ratings ───────────────────────────────────────── */
[data-theme="dark"] .ratings-hero {
    background-color: #18181c;
    color: #f0f0f2;
}

[data-theme="dark"] .ratings-controls {
    background-color: #1c1c20;
    border-bottom-color: #2e2e34;
}

[data-theme="dark"] .search-wrap input {
    background-color: #111114;
    border-color: #2e2e34;
    color: #f0f0f2;
}

[data-theme="dark"] .search-wrap svg {
    color: #a8a8b0;
}

[data-theme="dark"] .pill {
    background-color: #242428;
    color: #d4d4da;
    border-color: #2e2e34;
}

[data-theme="dark"] .pill.active {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

[data-theme="dark"] .ratings-section {
    background-color: #111114;
}

[data-theme="dark"] .ratings-table thead tr {
    background-color: #18181c;
}

[data-theme="dark"] .ratings-table th {
    color: #a8a8b0;
    border-bottom-color: #2e2e34;
}

[data-theme="dark"] .ratings-table tbody tr {
    background-color: #1c1c20;
    border-bottom-color: #242428;
}

[data-theme="dark"] .ratings-table tbody tr:hover {
    background-color: #242428;
}

[data-theme="dark"] .driver-name,
[data-theme="dark"] .col-points,
[data-theme="dark"] .col-rank {
    color: #f0f0f2;
}

[data-theme="dark"] .points-bar-track {
    background-color: #2e2e34;
}

[data-theme="dark"] .podium-card {
    background-color: #1c1c20;
    color: #f0f0f2;
}

[data-theme="dark"] .results-count,
[data-theme="dark"] .state-message {
    color: #a8a8b0;
}

/* ── Support Us ───────────────────────────────────────────── */
[data-theme="dark"] .support-banner,
[data-theme="dark"] .additional-sponsors {
    background-color: #111114;
}

/* ── Footer ───────────────────────────────────────────────── */
[data-theme="dark"] #site-footer {
    background-color: #0c0c0e;
}

/* ── Dark Mode Toggle Button ──────────────────────────────── */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    color: var(--dark-blue);
    flex-shrink: 0;
    margin-left: 8px;
}

.dark-mode-toggle:hover {
    background-color: rgba(150, 90, 164, 0.12);
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
}

.dark-mode-toggle .icon-moon { display: block; }
.dark-mode-toggle .icon-sun  { display: none; }

[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; }
[data-theme="dark"] .dark-mode-toggle .icon-sun  { display: block; }

[data-theme="dark"] .dark-mode-toggle {
    color: #d4d4da;
}

/* ── Sponsor banner ───────────────────────────────────────── */
[data-theme="dark"] .sponsor-label {
    color: #ffffff;
}

/* ── SimHound logo on home page — fill bg to match section ── */
[data-theme="dark"] .partnership-section .sponsor-logo img {
    background-color: #1c1c20;
    border-radius: 4px;
}

/* ── Stats section — force white text ────────────────────── */
[data-theme="dark"] .stats-title,
[data-theme="dark"] .stat-number,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-plus {
    color: #ffffff;
}

/* ── Get Involved — text on photo backgrounds ─────────────── */
[data-theme="dark"] .racing-title,
[data-theme="dark"] .racing-tagline h3 {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .step-number {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* ── Incident guide header — dark-blue bg becomes light in dark mode ── */
[data-theme="dark"] .guideline-header {
    background-color: #242428;
}

[data-theme="dark"] .guideline-header .guideline-title h2 {
    color: #f0f0f2;
}

[data-theme="dark"] .guideline-number {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* ── Driver Ratings hero — fix gradient using dark-blue variable ── */
[data-theme="dark"] .ratings-hero {
    background: linear-gradient(135deg, #1c1c20 0%, var(--secondary-color) 60%, #1a0a28 100%);
}

[data-theme="dark"] .ratings-hero h1 {
    color: #f0f0f2;
}