/* ==========================================================================
   ExplainItSimply — Brand Consistency Layer (2026)
   Loaded LAST on every page. Does NOT change the brand — re-applies the
   site's OWN canonical tokens (from css/styles.css) everywhere, overriding
   drift introduced by 50+ legacy patch stylesheets
   (eits-final-polish, eits-fresh-look-2026, eits-launch-polish, stylesOLD...).
   Goal: every page uses the same navy/orange palette, same type scale,
   same card/button/section treatment, consistently.
   ========================================================================== */

:root {
  /* Re-affirm canonical brand tokens in case a patch file redefined them */
  --primary:        #1a3a6b;
  --primary-dark:   #0d2650;
  --primary-light:  #eef2fa;
  --accent:         #f97316;
  --accent-hover:   #ea6800;

  --bg:             #ffffff;
  --bg-subtle:      #f0f4fb;
  --bg-card:        #f6f8fc;
  --fg:             #0d1b3e;
  --muted:          #5a6a85;
  --border:         rgba(26, 58, 107, 0.12);

  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'Plus Jakarta Sans', system-ui, sans-serif;

  --radius:         12px;
  --radius-lg:      20px;
  --radius-full:    999px;

  --shadow-sm:      0 2px 8px rgba(26, 58, 107, 0.07);
  --shadow-md:      0 4px 20px rgba(26, 58, 107, 0.10);
  --shadow-lg:      0 8px 32px rgba(26, 58, 107, 0.14);

  --header-h:       82px;
}

/* ---- Base typography, locked to canonical scale --------------------- */
body {
  font-family: var(--font-body) !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--primary) !important;
  font-variant: normal !important;
  text-transform: none !important;
}

a:link, a:visited { color: var(--primary); }
a:hover { color: var(--accent); }

.section-label {
  font-family: var(--font-body) !important;
  color: var(--accent) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

p { color: var(--muted); line-height: 1.7; }

/* ---- Header: some pages inherited old solid/box-shadow header styles -- */
.header, header.header {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav-link { color: var(--primary) !important; font-weight: 600 !important; }
.nav-link:hover { color: var(--accent) !important; }
.dropdown, .mega-panel {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ---- Buttons: unify pill style across all pages ------------------------ */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; }

.btn-ghost {
  background: transparent !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 700 !important;
}
.btn-ghost:hover { background: var(--primary) !important; color: #fff !important; }

/* ---- Hero: normalize height/padding drift between pages ---------------- */
.hero {
  background: var(--primary) !important;
  min-height: unset !important;
  padding: 120px 0 88px !important;
}
.hero-badge {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: .78rem;
  font-weight: 700;
}
.hero h1, .hero .accent { color: #fff !important; }
.hero .accent { color: #ffd8b0 !important; }
.hero p { color: rgba(255,255,255,.85) !important; }
.hero-wave path { fill: var(--bg) !important; }

/* ---- Cards: unify border/shadow/radius across every card variant ------- */
.topic-card, .eits-card, .about-feature-card, .about-value-card,
.about-process-card, .about-faq-card, .about-author-card, .value-tile,
.eis-member-point {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.topic-card:hover, .eits-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent) !important;
}
/* Legacy per-card rainbow classes (.blue/.green/.purple/.orange/.teal)
   made cards look randomly colored page to page — normalize to one accent */
.topic-card.blue, .topic-card.green, .topic-card.purple,
.topic-card.orange, .topic-card.teal {
  background: var(--bg-card) !important;
  border-top: 3px solid var(--accent) !important;
}
.topic-card .topic-icon {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-radius: var(--radius) !important;
}
.topic-card h3 { color: var(--primary) !important; }
.topic-card .topic-foot span:last-child { color: var(--accent) !important; }

.counter-strip .counter-card {
  background: var(--primary-light) !important;
  border-radius: var(--radius) !important;
}
.counter-strip .counter-card strong { color: var(--accent) !important; }

.eis-member-value {
  background: var(--primary) !important;
  border-radius: var(--radius-lg) !important;
  color: #fff;
}
.eis-member-value h2, .eis-member-value .section-label { color: #fff !important; }
.eis-member-value p { color: rgba(255,255,255,.8) !important; }

.section.eits-standout, .home-real-life-section, .eits-feature-band {
  background: var(--bg-subtle) !important;
}

/* ---- Article body: consistent reading typography everywhere ------------ */
.article-body, .article-content {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--fg);
}
.article-body h2, .article-content h2 {
  font-family: var(--font-display) !important;
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 8px;
  margin-top: 2.2em;
}
.article-body blockquote, .article-content blockquote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--primary);
  border-left: 4px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
}
.article-img img { border-radius: var(--radius); }

/* ---- Footer: unify across pages that had drifted footer treatments ---- */
.footer, footer.footer {
  background: var(--primary-dark) !important;
  color: rgba(255,255,255,.72) !important;
}
.footer a { color: rgba(255,255,255,.88) !important; }
.footer a:hover { color: #ffd8b0 !important; }
.footer h3, .footer h4, .footer strong { color: #fff !important; }

/* ---- Forms ---------------------------------------------------------- */
input, select, textarea {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: 2px solid var(--primary-light) !important;
}

/* ---- Mobile: uniform breakpoints across all pages ----------------------- */
@media (max-width: 980px) {
  .hero { padding: 104px 0 64px !important; }
  .topics-grid, .eits-five-grid,
  .eits-feature-band .eits-card-grid.three,
  .home-real-life-section .value-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  .section { padding: 48px 0 !important; }
}