/* legacy-override.css — force Terminal palette over pages with inline :root cream/gold vars
   Applied globally via head.html partial.
   Target: calculator, dashboard, legacy SEO pages, legal pages — all pages that embed
   their own :root custom vars (--cream, --gold, --navy-deep, --terracotta).
*/

:root,
html[data-variant="editorial"] {
  --cream: #e8e8e8 !important;
  --cream-light: #f5f5f5 !important;
  --cream-dark: #a8b8ac !important;
  --navy: #111 !important;
  --navy-deep: #0a0a0a !important;
  --terracotta: #FF6A6A !important;
  --terracotta-light: #FF8080 !important;
  --gold: #7CFF9E !important;
  --gold-bright: #9EFFB6 !important;
  --copper: #7CFF9E !important;
}

/* Hide legacy chrome elements that duplicate with Terminal masthead/footer */
body > nav:not(.masthead) .nav-inner { display: none !important; }
.kente-stripe { display: none !important; }
.kente-divider { display: none !important; }
body > nav .lang-switcher,
body > nav .hamburger { display: none !important; }

/* Legacy pages embed their own footer — hide it since partials/footer.html is injected */
body > footer:not(.page-footer) { display: none !important; }

/* Legacy hero patterns (background radial gold glow etc.) → neutralize */
.hero::before,
section.hero::before { display: none !important; }

/* Bring body text color back in line if inline styles forced old cream on black sections */
body { color: var(--ink); background: var(--bg); }

/* ============================================================
   READABILITY BOOST for legacy SEO pages (micro-drama-apps,
   vertical-drama-guide, dramabox-revenue-2026, etc.)
   These pages embed wall-of-text in mono — make them scannable.
   ============================================================ */

/* Constrain body content width + breathe */
body main,
body main.container,
body .container,
body .wrap {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Body paragraphs: generous line-height, larger, max 68ch for optical rhythm */
body main p,
body main li,
body .container p,
body .container li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 68ch !important;
  color: var(--ink) !important;
  margin-bottom: 20px !important;
}

/* Legacy intro/lead paragraphs bigger */
body main p.lead,
body main p.intro,
body main p:first-of-type,
body .container p.lead,
body .container p.intro {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
}

/* H1/H2/H3 hierarchy — clear visual tiers */
body main h1,
body .container h1 {
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  line-height: 1.1 !important;
  margin: 48px 0 16px !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
body main h2,
body .container h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.9rem) !important;
  line-height: 1.2 !important;
  margin: 56px 0 16px !important;
  color: var(--ink) !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border) !important;
}
body main h3,
body .container h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem) !important;
  line-height: 1.3 !important;
  margin: 36px 0 12px !important;
  color: var(--accent) !important;
}

/* Lists: breathing room + bullets visible */
body main ul,
body main ol,
body .container ul,
body .container ol {
  padding-left: 24px !important;
  margin: 16px 0 24px !important;
}
body main ul li,
body .container ul li {
  margin-bottom: 12px !important;
  list-style: none !important;
  position: relative;
  padding-left: 20px !important;
}
body main ul li::before,
body .container ul li::before {
  content: "▸" !important;
  color: var(--accent) !important;
  position: absolute;
  left: 0;
  top: 0;
}
body main ol li,
body .container ol li {
  margin-bottom: 12px !important;
}

/* Tables: spaced, alt rows, borders */
body main table,
body .container table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  font-size: 14px !important;
}
body main table th,
body .container table th {
  text-align: left !important;
  padding: 12px 14px !important;
  background: var(--surface) !important;
  border-bottom: 2px solid var(--accent) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body main table td,
body .container table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
}
body main table tr:nth-child(even) td,
body .container table tr:nth-child(even) td {
  background: rgba(124, 255, 158, 0.03) !important;
}

/* Stats / KPI rows — typical "331 apps / 60% / 65 companies" header strip */
body .stat-value,
body main .stat-value,
body .hero-stat,
body main .hero-stat {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* Callouts / blockquotes */
body main blockquote,
body .container blockquote {
  border-left: 3px solid var(--accent) !important;
  background: var(--surface) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  color: var(--ink) !important;
  max-width: 68ch !important;
}

/* TL;DR block on legacy pages (often a div with 'tldr' or 'summary' class) */
body main .tldr,
body main .summary-box,
body main .key-takeaways,
body .container .tldr {
  background: var(--surface) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  max-width: 72ch !important;
}
body main .tldr p,
body main .tldr li {
  max-width: none !important;
}

/* Cards */
body main .card,
body main .feature-card,
body main .report-card,
body .container .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
}

/* Code */
body main code,
body main pre {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 2px 6px !important;
  font-size: 0.9em !important;
  color: var(--accent-strong) !important;
}

/* Images + figures — full width within max-width */
body main img,
body main figure {
  max-width: 100% !important;
  height: auto !important;
  margin: 24px 0 !important;
}

/* Strong emphasis */
body main strong,
body main b {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
body main em { color: var(--ink-soft) !important; }