/* ============================================================
   UK Tax Drag - Content dark-mode overrides
   - Loaded AFTER inline <style> blocks on Sessions 5-14 pages
   - Forces dark-mode legibility on hardcoded light-mode colours
   - Uses !important strategically because the inline styles
     don't have CSS custom properties to override
   ============================================================ */

html[data-theme="dark"] body {
  background: #16231d !important;
  color: #e8e0c9 !important;
}

/* Hero stays dark - already correct; just refine */
html[data-theme="dark"] .hero,
html[data-theme="dark"] header.hero {
  background: linear-gradient(135deg, #050d09 0%, #16231d 60%, #1d2a23 100%) !important;
  color: #f2ead6 !important;
}
html[data-theme="dark"] .hero h1 em,
html[data-theme="dark"] .hero__tag {
  color: #d8bb79 !important;
}
html[data-theme="dark"] .hero p {
  color: rgba(242, 234, 214, 0.82) !important;
}

/* Content cards (the white .section boxes) */
html[data-theme="dark"] .section,
html[data-theme="dark"] .notes-card,
html[data-theme="dark"] .panel {
  background: #1c2a23 !important;
  border-color: #2d3a32 !important;
  color: #e8e0c9 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .section h2,
html[data-theme="dark"] .section h3,
html[data-theme="dark"] .section h4,
html[data-theme="dark"] .notes-card h2,
html[data-theme="dark"] .panel h2 {
  color: #f2ead6 !important;
}

html[data-theme="dark"] .section p,
html[data-theme="dark"] .section li,
html[data-theme="dark"] .notes-card p,
html[data-theme="dark"] .notes-card li {
  color: #c6bca0 !important;
}

html[data-theme="dark"] .section strong,
html[data-theme="dark"] .notes-card strong {
  color: #f2ead6 !important;
}

html[data-theme="dark"] .section a,
html[data-theme="dark"] .notes-card a {
  color: #d8bb79 !important;
}

/* Headline answer (gold-bordered box at top) */
html[data-theme="dark"] .headline-answer,
html[data-theme="dark"] .standout {
  background: linear-gradient(180deg, #1c2a23 0%, #15221c 100%) !important;
  border-color: #c9a961 !important;
  color: #e8e0c9 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .headline-answer p,
html[data-theme="dark"] .standout strong {
  color: #f2ead6 !important;
}
html[data-theme="dark"] .headline-answer strong {
  color: #d8bb79 !important;
}
html[data-theme="dark"] .standout span {
  color: #d8bb79 !important;
}

/* Data tables */
html[data-theme="dark"] .bd-table,
html[data-theme="dark"] table.bd-table {
  color: #d8cfb5 !important;
}
html[data-theme="dark"] .bd-table th {
  background: #0f1d17 !important;
  color: #d8bb79 !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .bd-table td {
  border-color: #2d3a32 !important;
  color: #d8cfb5 !important;
}
html[data-theme="dark"] .bd-table tr.total td {
  color: #f2ead6 !important;
  border-top-color: #d8bb79 !important;
}
html[data-theme="dark"] .bd-table tr.row-spike td,
html[data-theme="dark"] .bd-table tr.row-bad td {
  background: rgba(139, 36, 36, 0.18) !important;
}
html[data-theme="dark"] .bd-table tr.row-good td {
  background: rgba(45, 90, 69, 0.22) !important;
}

/* Warning / playbook / example / fact boxes */
html[data-theme="dark"] .warning-box {
  background: rgba(139, 36, 36, 0.16) !important;
  color: #f0d4d4 !important;
  border-left-color: #d44 !important;
}
html[data-theme="dark"] .warning-box strong {
  color: #ff8a8a !important;
}

html[data-theme="dark"] .playbook-box {
  background: rgba(45, 90, 69, 0.25) !important;
  color: #d4ebd9 !important;
  border-left-color: #3d7259 !important;
}
html[data-theme="dark"] .playbook-box strong {
  color: #c9a961 !important;
}

html[data-theme="dark"] .example-box {
  background: #1c2a23 !important;
  border-color: #2d3a32 !important;
  color: #d8cfb5 !important;
}
html[data-theme="dark"] .example-box h4 {
  color: #d8bb79 !important;
}
html[data-theme="dark"] .example-box p,
html[data-theme="dark"] .example-box li {
  color: #c6bca0 !important;
}

html[data-theme="dark"] .fact-box {
  background: #1f2c25 !important;
  border-color: #2d3a32 !important;
  color: #d8cfb5 !important;
}
html[data-theme="dark"] .fact-box strong {
  color: #d8bb79 !important;
}

/* Q&A boxes (divorce + self-employed mortgage pages) */
html[data-theme="dark"] .qa-box {
  background: #1c2a23 !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .qa-box .q {
  color: #d8bb79 !important;
}
html[data-theme="dark"] .qa-box .a {
  color: #c6bca0 !important;
}

/* Timeline component (Session 5-14 pages) */
html[data-theme="dark"] .timeline {
  border-left-color: #c9a961 !important;
}
html[data-theme="dark"] .timeline-item strong {
  color: #f2ead6 !important;
}
html[data-theme="dark"] .timeline-item span {
  color: #d8bb79 !important;
}

/* Chart wrappers */
html[data-theme="dark"] .chart-wrap {
  background: #1c2a23 !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .chart-wrap h4 {
  color: #f2ead6 !important;
}
html[data-theme="dark"] .chart-caption {
  color: #b0a78f !important;
}
/* SVG fills inside chart - light backgrounds become dark */
html[data-theme="dark"] .chart-wrap svg rect[fill="#faf6ee"],
html[data-theme="dark"] .chart-wrap svg rect[fill="#fff"] {
  fill: #0f1d17 !important;
}
html[data-theme="dark"] .chart-wrap svg .s-box,
html[data-theme="dark"] .chart-wrap svg .s-text {
  fill: #d8cfb5 !important;
}

/* CTA box (already dark background - fine) */
html[data-theme="dark"] .cta-box {
  background: #0a1f17 !important;
}

/* Citation / methodology / embed boxes (hero assets) */
html[data-theme="dark"] .cite-box {
  background: #0a1f17 !important;
  color: #f2ead6 !important;
}
html[data-theme="dark"] .cite-box .cite-text {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f2ead6 !important;
  border-left-color: #c9a961 !important;
}
html[data-theme="dark"] .cite-box .cite-meta {
  color: rgba(242, 234, 214, 0.6) !important;
}

html[data-theme="dark"] .method-box {
  background: #1f2c25 !important;
  border-color: #2d3a32 !important;
  color: #d8cfb5 !important;
}
html[data-theme="dark"] .method-box strong {
  color: #d8bb79 !important;
}

html[data-theme="dark"] .embed-box {
  background: #050d09 !important;
}
html[data-theme="dark"] .embed-box code {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #c6bca0 !important;
}

/* Letter-box (HMRC template letters page) */
html[data-theme="dark"] .letter-box {
  background: #1c2a23 !important;
  border-color: #c9a961 !important;
  color: #e8e0c9 !important;
}

/* Disclaimer band */
html[data-theme="dark"] .disc-band {
  background: #15221c !important;
  border-color: #2d3a32 !important;
  color: #b0a78f !important;
}
html[data-theme="dark"] .disc-band strong {
  color: #f2ead6 !important;
}

/* Hide the LEGACY .site-nav / .nav-brand wrappers entirely when
   the new mega-nav is present - prevents double-nav showing.
   The inject script replaces them, but for any cached pages this
   is a safety net. */
.tdx-mn ~ nav.site-nav,
nav.site-nav + .tdx-mn,
body > nav.site-nav:has(+ .tdx-mn) {
  display: none !important;
}

/* Calculator panels (interactive calc pages) */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select {
  background: #0f1d17 !important;
  color: #f2ead6 !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .field label {
  color: #b0a78f !important;
}
html[data-theme="dark"] .hint {
  color: #908875 !important;
}
html[data-theme="dark"] .result-hero {
  background: linear-gradient(180deg, #0a1f17 0%, #050d09 100%) !important;
}
html[data-theme="dark"] .metric {
  background: #1c2a23 !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .metric .label {
  color: #b0a78f !important;
}
html[data-theme="dark"] .metric .value {
  color: #f2ead6 !important;
}
html[data-theme="dark"] .callout {
  background: linear-gradient(180deg, #1c2a23 0%, #15221c 100%) !important;
  border-color: #2d3a32 !important;
}
html[data-theme="dark"] .callout h3 {
  color: #d8bb79 !important;
}
html[data-theme="dark"] .callout p {
  color: #c6bca0 !important;
}

/* Footer */
html[data-theme="dark"] .site-footer {
  background: #050d09 !important;
}