/* ─── Football / Soccer Theme Overlay ────────────────────────────────────── */

/* Pitch background — dark green with subtle field lines */
body {
  background: #14532d !important;
  color: #f0fdf4;
}
body::before {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  opacity: .4 !important;
}

/* Center circle watermark */
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255,255,255,.03);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Override palette for dark mode readability */
:root {
  --sand-50: #0a1f0d !important;
  --sand-100: #132b16 !important;
  --sand-200: #1e3d22 !important;
  --sand-300: #2d5a32 !important;
  --sand-400: #4caf50 !important;
  --sand-700: #d4edda !important;
  --sand-900: #ffffff !important;
  --ink: #ffffff !important;
  --ink-2: #e2e8f0 !important;
  --ink-3: #cbd5e1 !important;
}

/* ── Cards — dark panels with high-contrast text ── */
.card, .content-block, .stat-card, .ch-card {
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.card:hover {
  background: rgba(0,0,0,.45) !important;
  border-color: #4caf50 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* Card body text — bright white for readability */
.card-body h2 {
  color: #fdd835 !important;
}
.card-body p {
  color: #e2e8f0 !important;
}
.card-arrow {
  color: #81c784 !important;
}

/* Card icon — golden badge */
.card-icon {
  background: rgba(253,216,53,.15) !important;
  border: 1px solid rgba(253,216,53,.35) !important;
}

/* ── Headers ── */
h1, .hero h1 {
  color: #fff !important;
}
h1 span, .hero .sub {
  color: #cbd5e1 !important;
}
.wrapper > header, .hero {
  border-bottom-color: rgba(255,255,255,.1) !important;
}

/* Badge pill */
.badge, .hero .badge {
  background: rgba(253,216,53,.2) !important;
  border-color: rgba(253,216,53,.4) !important;
  color: #fdd835 !important;
}

/* ── Subject tabs — high contrast ── */
.subject-tab {
  color: #cbd5e1 !important;
}
.subject-tab:hover {
  color: #fff !important;
}
.subject-tab.active {
  color: #fdd835 !important;
  border-bottom-color: #fdd835 !important;
}
.subject-tabs {
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/* ── Chapter tabs ── */
.tab {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #e2e8f0 !important;
}
.tab:hover {
  border-color: #4caf50 !important;
  color: #fff !important;
}
.tab.active {
  background: #fdd835 !important;
  color: #0d1b0e !important;
  border-color: #fdd835 !important;
}

/* ── Chapter banners ── */
.ch-banner {
  background: rgba(0,0,0,.3) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.ch-num { color: #fdd835 !important; }
.ch-sub { color: #cbd5e1 !important; }
.ch-title { color: #fff !important; }
.ch-marks-badge { color: #fdd835 !important; }
.ch-marks-badge span { color: #cbd5e1 !important; }

/* ── Section headings ── */
.section-heading {
  color: #fdd835 !important;
}

/* ── Content blocks ── */
.block-head {
  background: #1b5e20 !important;
  color: #fff !important;
}
.block-body {
  color: #e2e8f0 !important;
}
.block-body p {
  color: #e2e8f0 !important;
}

/* ── Tables — readable on dark ── */
.sum-table,
table.sum-table {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.25) !important;
}
.sum-table th,
table.sum-table thead th {
  background: #1b5e20 !important;
  color: #fff !important;
}
.sum-table td,
table.sum-table tbody td {
  background: rgba(0,0,0,.2) !important;
  color: #e2e8f0 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.sum-table td strong,
table.sum-table td strong {
  color: #fdd835 !important;
}
.sum-table tr:hover td,
table.sum-table tr:hover td {
  background: rgba(0,0,0,.35) !important;
}

/* Force dark bg on ANY table inside content blocks */
.content-block table,
.block-body table {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.content-block table th,
.block-body table th {
  background: #1b5e20 !important;
  color: #fff !important;
}
.content-block table td,
.block-body table td {
  background: rgba(0,0,0,.2) !important;
  color: #e2e8f0 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.content-block table td strong,
.block-body table td strong {
  color: #fdd835 !important;
}
.content-block table tr:hover td,
.block-body table tr:hover td {
  background: rgba(0,0,0,.35) !important;
}

/* ── Trick box (tips) ── */
.trick-box {
  background: rgba(253,216,53,.08) !important;
  border-color: rgba(253,216,53,.25) !important;
}
.trick-box h4 { color: #fdd835 !important; }
.trick-box p, .trick-box li { color: #e2e8f0 !important; }

/* ── Mistake box ── */
.mistake-box {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.25) !important;
}
.mistake-box h4 { color: #fca5a5 !important; }
.mistake-box li { color: #fecaca !important; }

/* ── Must-read box ── */
.mustread {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.25) !important;
}
.mustread h4 { color: #fca5a5 !important; }
.mustread ol li { color: #fecaca !important; }
.mustread ol li strong { color: #fff !important; }

/* ── Footer ── */
.site-footer {
  border-top-color: rgba(255,255,255,.1) !important;
  color: #cbd5e1 !important;
}
.site-footer a { color: #e2e8f0 !important; }

/* ── Filter / marks buttons ── */
.filter-btn, .marks-pill {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #e2e8f0 !important;
}
.filter-btn:hover, .marks-pill:hover {
  border-color: #4caf50 !important;
  color: #fff !important;
}
.filter-btn.active, .marks-pill.active {
  background: #fdd835 !important;
  color: #0d1b0e !important;
  border-color: #fdd835 !important;
}

/* ── Source tabs ── */
.source-tabs {
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.source-tab {
  color: #cbd5e1 !important;
}
.source-tab:hover {
  color: #fff !important;
}
.source-tab.active {
  color: #fdd835 !important;
  border-bottom-color: #fdd835 !important;
}

/* ── QA chapter heads ── */
.qb-chapter-head {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.qb-chapter-head:hover {
  background: rgba(0,0,0,.35) !important;
}
.qb-chapter-head .ch-label { color: #fff !important; }
.qb-chapter-head .ch-count { background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,.15) !important; }
.qb-chapter-head .toggle-icon { color: #cbd5e1 !important; }

/* ── QA section heads ── */
.qb-section-head {
  color: #fff !important;
}

/* ── QA / Question cards ── */
.qa-card, .q-card {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
.qa-card:hover, .q-card:hover {
  border-color: rgba(255,255,255,.25) !important;
}
.qa-question, .q-text {
  color: #f0fdf4 !important;
}
.qa-header .qa-id, .q-id {
  background: rgba(255,255,255,.1) !important;
  color: #cbd5e1 !important;
}

/* QA options */
.qa-opt {
  background: rgba(0,0,0,.15) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}

/* QA toggle button */
.qa-toggle {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e2e8f0 !important;
}
.qa-toggle:hover {
  border-color: #4caf50 !important;
  color: #fff !important;
}

/* QA answer box */
.qa-answer {
  background: rgba(21,128,61,.2) !important;
  border-color: rgba(74,222,128,.25) !important;
}
.qa-ans-label {
  color: #4ade80 !important;
}
.qa-explanation {
  color: #cbd5e1 !important;
  border-top-color: rgba(74,222,128,.15) !important;
}

/* QA source badge */
.qa-source {
  background: rgba(74,222,128,.15) !important;
  border-color: rgba(74,222,128,.3) !important;
  color: #4ade80 !important;
}

/* ── Toolbar ── */
.qa-toolbar {
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.qa-toolbar-label { color: #cbd5e1 !important; }
.toolbar-btn {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e2e8f0 !important;
}
.toolbar-btn:hover { border-color: #4caf50 !important; color: #fff !important; }

/* ── Scroll to top ── */
.scroll-top {
  background: #fdd835 !important;
  color: #0d1b0e !important;
}

/* ── Dropdowns ── */
.mobile-select, .filter-mobile {
  background: rgba(0,0,0,.3) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* ── Diagram boxes — keep light for SVG readability ── */
.diagram-box {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.diagram-credit {
  color: #64748b !important;
}

/* ── Back link ── */
.back-link {
  color: #cbd5e1 !important;
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.back-link:hover { color: #fff !important; }

/* ── Loading ── */
.loading { color: #cbd5e1 !important; }

/* ── Formulas ── */
.eq {
  background: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
.fl-eq {
  background: rgba(74,222,128,.1) !important;
  border-color: rgba(74,222,128,.2) !important;
  color: #4ade80 !important;
}
.fl-name { color: #cbd5e1 !important; }
.fl-note { color: #e2e8f0 !important; }

/* ── Tip list ── */
.tip-list li { color: #e2e8f0 !important; }
.tip-icon { color: #fdd835 !important; }

/* ── FiO items (Figure it Out list) ── */
.fio-item {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.fio-item:hover {
  border-color: rgba(255,255,255,.25) !important;
}
.fio-body h3 { color: #fff !important; }
.fio-body p { color: #cbd5e1 !important; }
.fio-badge {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e2e8f0 !important;
}
.fio-num {
  background: rgba(253,216,53,.15) !important;
  border-color: rgba(253,216,53,.3) !important;
  color: #fdd835 !important;
}

/* ── Numerical cards ── */
.num-card {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.nc-q { color: #fff !important; }
.nc-step { color: #e2e8f0 !important; }

/* ── More dropdown ── */
.more-dropdown {
  background: #132b16 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.more-dropdown .tab {
  color: #e2e8f0 !important;
}
.more-dropdown .tab:hover {
  background: rgba(255,255,255,.08) !important;
}
.more-dropdown .tab.active {
  background: #fdd835 !important;
  color: #0d1b0e !important;
}

/* ── Test Pages ── */
.test-q-num { color: #a5d6a7 !important; }
.test-question { color: #fff !important; }
.test-timer { color: #a5d6a7 !important; }

.test-opt {
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.test-opt:hover {
  background: rgba(0,0,0,.45) !important;
  border-color: #4caf50 !important;
}
.test-opt .opt-letter {
  background: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}
.test-opt.correct {
  background: rgba(22,163,74,.2) !important;
  border-color: #4ade80 !important;
  color: #fff !important;
}
.test-opt.correct .opt-letter {
  background: #16a34a !important;
  color: #fff !important;
}
.test-opt.wrong {
  background: rgba(220,38,38,.2) !important;
  border-color: #f87171 !important;
  color: #fff !important;
}
.test-opt.wrong .opt-letter {
  background: #dc2626 !important;
  color: #fff !important;
}
.test-opt.disabled {
  pointer-events: none;
  opacity: .65;
}
.test-explanation {
  background: rgba(22,163,74,.15) !important;
  border-color: rgba(74,222,128,.25) !important;
  color: #e2e8f0 !important;
}
.test-next {
  background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
  color: #fff !important;
  border: 1px solid rgba(253,216,53,.3) !important;
}
.test-next:hover { opacity: .9 }
.progress-bar {
  background: rgba(255,255,255,.1) !important;
}
.progress-fill {
  background: linear-gradient(90deg, #fdd835, #f9a825) !important;
}

/* Chapter selection cards on test page */
.ch-grid .ch-card, .ch-card {
  background: rgba(0,0,0,.3) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.ch-grid .ch-card:hover, .ch-card:hover {
  border-color: #4caf50 !important;
  background: rgba(0,0,0,.4) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
}
.ch-card .ch-no { color: #fdd835 !important; }
.ch-card .ch-name { color: #e2e8f0 !important; }

/* Results card */
.result-card {
  background: rgba(0,0,0,.3) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.result-score { color: #fff !important; }
.result-time { color: #a5d6a7 !important; }
.result-btn {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #e2e8f0 !important;
}
.result-btn:hover { border-color: #4caf50 !important; color: #fff !important; }
.result-btn.primary {
  background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
  border-color: rgba(253,216,53,.3) !important;
  color: #fff !important;
}

/* Review items */
.review-item {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.08) !important;
  border-left: 4px solid #4ade80 !important;
  color: #e2e8f0 !important;
}
.review-item.wrong {
  border-left-color: #f87171 !important;
}
.review-q { color: #fff !important; }
.review-a { color: #a5d6a7 !important; }

/* ── Chapter bar mobile ── */
@media (max-width: 640px) {
  .chapter-bar {
    background: rgba(10,31,13,.95) !important;
    border-bottom-color: rgba(255,255,255,.1) !important;
  }
  .back-link {
    background: rgba(0,0,0,.3) !important;
  }
}