/* ============================================================
   SusuFlex — Flat look for content subpages
   Extracted from light-theme-patch.css so the homepage can use
   depth (glass, device frames) while subpages stay flat.
   Loaded ONLY by non-homepage pages, after phase0-fixes.css.
   ============================================================ */

* {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ============================================================
   Contrast audit fixes (subpages) — 2026-06-12
   ============================================================ */
/* Subpage footer is a DARK footer (light text) that lost its background
   in the light-theme migration -> white-on-white. Restore the dark panel. */
.site-footer { background: #0B1220 !important; }

/* Semantic colors that fail on white in any OS mode (audit):
   emerald #10B981 (2.54:1) and slate #94A3B8 (2.45:1). */
.result-amount, .time-value, .econ-value, .status-yes, .policy-list-yes,
.savings-positive, .stat-positive, .metric-positive {
  color: #047857 !important;
}
.save-badge, .shield-badge, .badge-success, .winner-badge {
  background: #047857 !important; color: #ffffff !important;
}
.calc-disclaimer, .calc-info-label, .calc-note, .muted-note {
  color: #475569 !important;
}

/* OS dark-mode neutralizer: several pages carry
   @media(prefers-color-scheme:dark) rules that recolor cards via --gray-*
   vars that only remap under [data-theme=dark]; under the media query the
   vars stay at light values, giving dark-on-dark cards and light-on-white
   text for visitors whose OS is in dark mode. The site is intentionally
   light, so force these content cards back to a readable light scheme.
   (html body ... beats the page-level !important media rules on specificity.) */
@media (prefers-color-scheme: dark) {
  html body .alert-card, html body .timeline-card, html body .chargeback-card,
  html body .policy-card, html body .summary-card, html body .support-card,
  html body .important-notice, html body .chargeback-intro, html body .info-box,
  html body .feature-box, html body .highlight-box, html body .notice-box {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
  }
  html body .alert-card *, html body .timeline-card *, html body .chargeback-card *,
  html body .policy-card *, html body .summary-card *, html body .support-card *,
  html body .important-notice *, html body .chargeback-intro *, html body .info-box *,
  html body .feature-box *, html body .highlight-box *, html body .notice-box * {
    color: #1F2937 !important;
  }
  /* legal article body text: keep dark + links blue under OS dark */
  html body .legal-page p, html body .legal-page li, html body .legal-page td,
  html body .legal-page h1, html body .legal-page h2, html body .legal-page h3,
  html body .legal-page h4, html body .legal-page h5, html body .legal-page strong {
    color: #1F2937 !important;
  }
  html body .legal-page a, html body .alert-card a, html body .chargeback-card a { color: #1D4ED8 !important; }
}

/* footer text must be light on the dark footer (logo-word/tagline were dark) */
.site-footer { color: #CBD5E1 !important; }
.site-footer .logo-word, .site-footer h3, .site-footer h4, .site-footer strong, .site-footer .footer-heading { color: #F8FAFC !important; }
.site-footer p, .site-footer li, .site-footer a, .site-footer .footer-legal, .site-footer .footer-legal-small, .site-footer .disclaimer, .site-footer span { color: #CBD5E1 !important; }
.site-footer a:hover { color: #FFFFFF !important; }

/* per-page status colors that vary (tax-information uses lighter set) */
.status-maybe { color: #B45309 !important; }
.status-no { color: #B91C1C !important; }
.timeline-marker, .winner-tag, .badge-now { background: #047857 !important; color: #fff !important; }
/* emerald check-list items on white */
.benefit-list li, .checklist li, .feature-list-positive li { color: #047857 !important; }

/* OS dark: catch the intro/title light-text-on-white missed above (wrapper-independent) */
@media (prefers-color-scheme: dark) {
  html body [class*="chargeback-intro"], html body [class*="chargeback-intro"] *,
  html body [class*="-intro-title"], html body [class*="-section-title"] {
    color: #1F2937 !important;
  }
}

/* emerald (--secondary #10B981) failed on white (2.54:1); deepen on subpages
   for AA — also strengthens white-on-emerald badges. */
:root { --secondary: #047857; }
.econ-label, .calc-stat-label, .metric-label, .stat-sublabel, .calc-info-label { color: #475569 !important; }
.time-label { color: #475569 !important; }
.calc-preset.active, .preset-active { background: #4F46E5 !important; color: #fff !important; }

.term-origin, .term-region { color: #475569 !important; }

/* Comprehensive OS dark-mode neutralizer: subpages are intentionally light,
   but several carry @media(prefers-color-scheme:dark) rules that darken
   content cards/tables/steps via --gray-* vars (only remapped under the
   [data-theme] attribute), giving dark-on-dark. Force content surfaces light
   + text dark under OS dark. (main-scoped so dark heroes are untouched.) */
@media (prefers-color-scheme: dark) {
  html body main [class*="card"], html body main [class*="-box"],
  html body main [class*="flow-step"], html body main [class*="-step"],
  html body main [class*="notice"], html body main [class*="alert"],
  html body main [class*="-intro"], html body main [class*="panel"],
  html body main table, html body main thead tr, html body main tbody tr,
  html body main td, html body main th {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
  }
  html body main [class*="card"] *, html body main [class*="-box"] *,
  html body main [class*="flow-step"] *, html body main [class*="-step"] *,
  html body main [class*="notice"] *, html body main [class*="alert"] *,
  html body main [class*="-intro"] *, html body main [class*="panel"] *,
  html body main td, html body main th {
    color: #1F2937 !important;
  }
  html body main a[class*="card"], html body main [class*="card"] a { color: #1D4ED8 !important; }
}

/* final stragglers */
.quarter-status.done, .quarter-status-done { color: #047857 !important; }
.live-badge, .refer-live-badge, .badge-live { background: #047857 !important; color: #fff !important; }
.badge-red, .badge-indigo, .badge-blue, .badge-purple, .badge-green { color: #fff !important; }

/* compliance badges: dark text on saturated bg -> white (beat .badge.badge-X) */
.badge.badge-red, .badge.badge-indigo, .badge.badge-blue, .badge.badge-purple { color: #fff !important; }
/* blog-post footer inline links on black footer */
.footer-links-inline a, .footer-bottom a, .footer-legal-small a { color: #CBD5E1 !important; }
.footer-links-inline a:hover, .footer-bottom a:hover { color: #fff !important; }
/* blog red callout box: bright white text + underlined links on the red bg */
.cta-box, .cta-box p, .cta-box strong, .cta-box small, .cta-box li, .cta-box h2, .cta-box h3 { color: #fff !important; }
.cta-box a { color: #fff !important; text-decoration: underline; }

/* compliance saturated badges: deepen mid-tone backgrounds to their -600/-700
   shades so white badge text clears AA (indigo-500 #6366F1 gave only 4.47). */
.badge.badge-indigo { background: #4F46E5 !important; }
.badge.badge-blue   { background: #2563EB !important; }
.badge.badge-purple { background: #7C3AED !important; }
.badge.badge-red    { background: #DC2626 !important; }
/* note: .badge-green uses DARK text by design and already passes on its
   original (lighter) background — do not darken it. */