/* =======================================================
   CASchoolBudgetData.com — Shared Site Theme
   Applies the landing-page light design to all inner pages.
   Load this AFTER each page's own <style> block so these
   rules win whenever specificity is equal.
   ======================================================= */

/* ── 1. CSS VARIABLES — Landing-page palette ── */
:root {
  --bg:        #e2e5dc;   /* sage grey-green body bg */
  --bg-nav:    #f8f7f5;   /* near-white panels / nav */
  --bg-alt:    #d6d9d0;   /* slightly deeper sage */
  --green-dk:  #1e4a28;   /* deep forest green — primary brand */
  --green-md:  #2a6a3c;   /* medium forest green */
  --blue:      #2e5fa0;   /* cobalt blue — accent */
  --blue-lt:   #6090c8;   /* lighter cobalt */
  --orange:    #cc3818;   /* warm vermillion — CTA */
  --orange-lt: #e06040;
  --gold:      #c8a030;   /* warm gold — decorative */
  --gold-lt:   #a07820;   /* darker gold for light-bg labels */
  --black:     #1a1a18;   /* near-black text */
  --muted:     #52544e;   /* muted secondary text */
  --white:     #ffffff;
  --border:    #b4b8ac;

  /* ── Remap old dark-theme variables to light equivalents ── */
  /* Every existing rule using these vars now gets the light value automatically */
  --teal:      #e2e5dc;   /* was dark teal body bg  → sage green */
  --teal-lt:   #d6d9d0;   /* was dark teal-lt       → alt bg     */
  --cream:     #1a1a18;   /* was cream text          → dark text  */
  --shadow:    0 2px 10px rgba(0,0,0,.08);
}

/* ── 2. BASE — body background & text ── */
html, body {
  background: var(--bg);
  color: var(--black);
}

/* ── 3. PAGE HEADER — deep forest green, gold title ── */
/* Keeps the premium header feel while using landing-page brand colors */
.page-header {
  background: linear-gradient(150deg, #0d2a12 0%, #1e4a28 58%, #0a2215 100%);
  border-bottom: 3px solid var(--gold);
}
.page-header h1        { color: var(--gold); }
.page-header .subtitle { color: #e0c870; opacity: .92; }
.page-header .eyebrow  { color: #e8a050; }
.header-rule .rl       { background: var(--gold); opacity: .55; }
.header-rule .st       { color: var(--gold); }

/* ── 4. BACK LINK ── */
.back-link       { color: var(--muted); opacity: 1; }
.back-link:hover { color: var(--green-dk); opacity: 1; }

/* ── 5. BOTTOM NAV — light, matching landing-page top bar ── */
.site-nav {
  background:  var(--bg-nav) !important;
  border-top:  1px solid var(--border) !important;
  box-shadow:  0 -2px 8px rgba(0,0,0,.06) !important;
}
.site-nav a { color: var(--green-dk) !important; }
.site-nav a:hover {
  color:            var(--orange)          !important;
  background:       rgba(30,74,40,.07)     !important;
  border-radius:    16px                   !important;
}
.site-nav a.active {
  color:         var(--white)    !important;
  background:    var(--green-dk) !important;
  border-radius: 16px            !important;
  font-weight:   bold            !important;
}
.site-nav .sep { color: var(--border) !important; }

/* ── 6. SECTION HEADINGS ── */
.section-heading             { border-bottom: 1px solid rgba(30,74,40,.2); }
.section-heading h2          { color: var(--green-dk); }
.section-heading .num        { background: var(--green-dk); color: var(--white); }

/* ── 7. INTRO / BODY TEXT ── */
.intro-text   { color: var(--muted); opacity: 1; }
.panel-lead   { color: var(--muted); }
.why-text     { color: var(--muted); }
.pull-quote   { color: var(--green-dk); border-left-color: var(--green-dk); background: rgba(30,74,40,.05); }

/* ── 8. GENERIC CARD BACKGROUNDS ──
   rgba(255,255,255,.04) is nearly invisible on a light bg;
   we replace with solid near-white panels with a visible border. */
.coming-card,
.explainer-card,
.num-card,
.watch-item,
.fac-card,
.phase-card,
.topic-card {
  background: var(--bg-nav);
  border:     1px solid var(--border);
  color:      var(--black);
}

/* ── 9. HUB CARDS (learn.html) ── */
.hub-card {
  background:    var(--white);
  border:        2px solid var(--border);
  color:         var(--black);
}
.hub-card:hover {
  background:   var(--bg-nav);
  border-color: var(--green-dk);
  transform:    translateY(-2px);
}
.hub-card h2      { color: var(--green-dk); }
.hub-card p       { color: var(--muted); opacity: 1; }
.hub-arrow        { color: var(--orange); }
.hub-badge.free   { background: rgba(30,74,40,.12);  border-color: rgba(30,74,40,.3);  color: var(--green-dk); }
.hub-badge.coming { background: rgba(204,56,24,.1);  border-color: rgba(204,56,24,.3); color: var(--orange); }
.hub-badge.member { background: rgba(200,160,48,.12); border-color: rgba(200,160,48,.4); color: var(--gold); }

/* ── 10. CARD TEXT COLOURS ── */
.coming-card h3         { color: var(--green-dk); }
.coming-card p          { color: var(--muted); opacity: 1; }
.num-card .num-amount   { color: var(--green-dk); }
.num-card .num-label    { color: var(--black); opacity: .88; }
.num-card .num-note     { color: var(--muted); opacity: 1; font-style: italic; }
.watch-item .wi-body h3 { color: var(--green-dk); }
.watch-item .wi-body p  { color: var(--muted); opacity: 1; }
.topic-card h3          { color: var(--green-dk); }
.topic-card p           { color: var(--muted); opacity: 1; }
.topic-card .tc-badge   { background: rgba(30,74,40,.1); border-color: rgba(30,74,40,.25); color: var(--green-dk); }
.fac-card .fac-amt      { color: var(--green-dk); }
.fac-card .fac-label    { color: var(--muted); }

/* ── 11. PHASE CARDS (state-budget.html) ── */
.phase-card .phase-title  { color: var(--green-dk); }
.phase-card .phase-date   { color: var(--muted); opacity: 1; }
.phase-card p             { color: var(--black); opacity: .9; }
.phase-card.current-phase  { background: rgba(30,74,40,.07);  border-left-color: var(--green-dk); }
.phase-card.upcoming-phase { background: rgba(204,56,24,.05); border-left-color: var(--orange);   }

/* ── 12. PROGRAM CARDS (january-proposal-2026.html) ── */
.program-card {
  background:  var(--bg-nav);
  border:      1px solid var(--border);
  border-top:  3px solid var(--green-dk);
  color:       var(--black);
}
.program-card h3         { color: var(--green-dk); }
.program-card .pc-amount { color: var(--muted); }
.program-card p          { color: var(--black); opacity: .87; }

/* ── 13. RESOURCE LINKS (budget-news.html) ── */
.resource-link        { background: var(--bg-nav); border-color: var(--border); color: var(--black); }
.resource-link:hover  { background: rgba(30,74,40,.07); }
.resource-link h3     { color: var(--green-dk); }
.resource-link p      { color: var(--muted); opacity: 1; }
.resource-link .rl-arrow { color: var(--orange); }

/* ── 14. HIGHLIGHT BOX ── */
.highlight-box          { background: rgba(30,74,40,.07); border-left-color: var(--green-dk); color: var(--black); }
.highlight-box strong   { color: var(--green-dk); }

/* ── 15. COUNTDOWN (budget-news + may-revision) ── */
.countdown-box,
.countdown-banner {
  background:   var(--bg-nav);
  border-color: var(--green-dk);
  color:        var(--black);
}
.countdown-box::before,
.countdown-banner::before { background: none; }
.countdown-box:hover        { border-color: var(--green-md); box-shadow: 0 6px 24px rgba(30,74,40,.12); }
.countdown-box h2,
.countdown-banner h2        { color: var(--green-dk); }
.cb-eyebrow                 { color: var(--muted); opacity: 1; }
.cb-target-date,
.countdown-banner .cb-date  { color: var(--orange); }
.cb-link-hint               { color: var(--muted); opacity: 1; }
.cu-num                     { color: var(--green-dk); }
.cu-label                   { color: var(--muted); }

/* ── 16. BUDGET CYCLE TRACKER (state-budget.html) ── */
.cycle-dot               { background: var(--bg-nav); border-color: rgba(30,74,40,.4); }
.cycle-dot.done          { background: var(--green-dk); color: var(--white); border-color: var(--green-dk); }
.cycle-dot.current       { background: var(--orange);   color: var(--white); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(204,56,24,.2); }
.cycle-dot.upcoming      { opacity: .45; }
.cycle-label             { color: var(--black); }
.cycle-date              { color: var(--muted); opacity: 1; }
.cycle-now-badge         { background: var(--orange); color: var(--white); }
.cycle-step:not(:last-child)::after { background: var(--border); opacity: 1; }

/* ── 17. DATA TABLE ── */
.data-table th               { background: rgba(30,74,40,.08); color: var(--green-dk); border-bottom-color: rgba(30,74,40,.2); }
.data-table td               { color: var(--black); border-bottom-color: rgba(0,0,0,.07); }
.data-table .amt             { color: var(--green-dk); }
.data-table .subtotal-row td { background: rgba(30,74,40,.07); }
.data-table tfoot td         { color: var(--muted); }
.badge-ot                    { background: rgba(204,56,24,.12); color: var(--orange); border-color: rgba(204,56,24,.3); }
.badge-og                    { background: rgba(30,74,40,.12);  color: var(--green-dk); border-color: rgba(30,74,40,.25); }

/* ── 18. SOURCE BANNER (january-proposal-2026.html) ── */
.source-banner          { background: rgba(30,74,40,.07); border-color: rgba(30,74,40,.25); color: var(--black); }
.source-banner strong   { color: var(--green-dk); }
.source-banner a        { color: var(--blue); }

/* ── 19. EXECUTIVE SUMMARY BOX ── */
.exec-summary          { background: var(--bg-nav); border-color: var(--green-dk); }
.exec-summary::before  { background: none; }
.exec-summary h2       { color: var(--green-dk); }
.exec-summary p        { color: var(--black); opacity: .92; }
.exec-summary strong   { color: var(--green-dk); }

/* ── 20. BOTTOM CITATION ── */
.bottom-citation        { background: var(--bg-nav); border-color: var(--border); color: var(--muted); }
.bottom-citation strong { color: var(--green-dk); }
.bottom-citation a      { color: var(--blue); }

/* ── 21. RESOURCE LIST (state-budget.html) ── */
.resource-list li a            { background: var(--bg-nav); border-color: var(--border); color: var(--black); }
.resource-list li a:hover      { background: rgba(30,74,40,.08); color: var(--green-dk); }
.resource-list li a .res-desc  { color: var(--muted); opacity: 1; }

/* ── 22. UNION CALLOUT (state-budget.html) ── */
.union-callout      { background: rgba(30,74,40,.06); border-color: rgba(30,74,40,.3); }
.union-callout h3   { color: var(--green-dk); }
.union-callout p    { color: var(--black); opacity: .92; }

/* ── 23. RAINY-DAY BOX (january-proposal-2026.html) ── */
.rainy-day-box          { background: rgba(30,74,40,.07); border-left-color: var(--green-dk); color: var(--black); }
.rainy-day-box strong   { color: var(--green-dk); }

/* ── 24. MEMBERSHIP (membership.html) ── */
.mission-block           { background: var(--bg-nav); border-color: var(--green-dk); }
.mission-block h2        { color: var(--green-dk); }
.mission-block p         { color: var(--black); opacity: 1; }
.cost-strip              { background: var(--bg-nav); border-color: var(--border); }
.cost-item .cs-val       { color: var(--green-dk); }
.cost-item .cs-desc      { color: var(--muted); opacity: 1; }
.cost-divider            { background: var(--border); }
.use-card                { background: var(--bg-nav); border-left-color: var(--green-dk); border-color: var(--border); }
.use-card h3             { color: var(--green-dk); }
.use-card p              { color: var(--muted); opacity: 1; }
.grow-box                { background: var(--bg-nav); border-color: var(--border); }
.grow-box h3             { color: var(--green-dk); }
.grow-row                { border-bottom-color: rgba(0,0,0,.07); color: var(--black); }
.grow-row strong         { color: var(--green-dk); }
.coming-notice           { background: var(--bg-nav); border-color: var(--green-dk); }
.coming-notice h2        { color: var(--green-dk); }
.coming-notice p         { color: var(--black); opacity: 1; }
.coming-notice a         { background: var(--green-dk); color: var(--white); }
.coming-notice a:hover   { background: var(--green-md); color: var(--white); }
.uc-badge                { background: rgba(204,56,24,.1); border-color: rgba(204,56,24,.4); color: var(--orange); }

/* ── 25. FAQ (faq.html) ── */
.faq-item                   { border-color: var(--border); }
.faq-q                      { background: var(--bg-nav); color: var(--black); }
.faq-q:hover                { background: rgba(30,74,40,.07); color: var(--green-dk); }
.faq-item.open .fq-arrow    { color: var(--orange); }
.faq-a-inner                { color: var(--black); opacity: 1; border-top-color: var(--border); }
.faq-a-inner strong         { color: var(--green-dk); }
.submit-box                 { background: var(--bg-nav); border-color: rgba(30,74,40,.3); }
.submit-box h3              { color: var(--green-dk); }
.submit-box p               { color: var(--muted); opacity: 1; }
.submit-box a               { background: var(--green-dk); color: var(--white); }
.submit-box a:hover         { background: var(--green-md); }

/* ── 26. LEGISLATION & TOPIC CARDS (legislation.html) ── */
.level-badge            { background: rgba(30,74,40,.1); border-color: rgba(30,74,40,.3); color: var(--green-dk); }
.mem-callout            { background: var(--bg-nav); border-color: var(--green-dk); }
.mem-callout h3         { color: var(--green-dk); }
.mem-callout p          { color: var(--black); opacity: 1; }
.mem-callout a          { background: var(--green-dk); color: #ffffff; }
.mem-callout a:hover    { background: var(--green-md); }

/* ── 27. UC HERO (budget-news, faq, legislation) ── */
.uc-hero          { background: var(--bg-nav); border-color: var(--green-dk); }
.uc-hero::before  { background: none; }
.uc-hero h2       { color: var(--green-dk); }
.uc-hero p        { color: var(--black); opacity: .9; }

/* ── 28. MAY REVISION (may-revision.html) ── */
.placeholder-section        { background: rgba(204,56,24,.05); border-color: rgba(204,56,24,.3); }
.placeholder-section h3     { color: var(--orange); }
.placeholder-section p      { color: var(--muted); opacity: 1; }

/* ── 29. ABOUT PAGE ── */
.section-heading .num       { background: var(--green-dk); color: var(--white); }
.section-heading h2         { color: var(--green-dk); }

/* ── 30. PORTAL PAGES (labor, admin, parent, board) ── */
.labor-hero, .portal-hero {
  background: linear-gradient(150deg, #0d2a12 0%, #1e4a28 58%, #0a2215 100%);
  border-bottom-color: var(--gold);
}
.labor-hero h1, .portal-hero h1 { color: var(--gold); }
.labor-hero .badge { background: rgba(30,74,40,.25); border-color: rgba(30,74,40,.4); color: var(--gold-lt); }
.portal-card, .feature-card {
  background: var(--bg-nav);
  border-color: var(--border);
  color: var(--black);
}
.portal-card h3, .feature-card h3 { color: var(--green-dk); }
.portal-card p, .feature-card p   { color: var(--muted); opacity: 1; }

/* ── 31. NUMBERS GRID (state-budget, january-proposal) ── */
.numbers-grid .num-card { background: var(--bg-nav); border-color: var(--border); }

/* ── 32. ABOUT SECTION CARDS ── */
.about-card, .info-card, .stat-card {
  background: var(--bg-nav);
  border-color: var(--border);
  color: var(--black);
}

/* ── 33. GENERAL LINK COLOURS ── */
.page-content a:not([class]) { color: var(--blue); }
.page-content a:not([class]):hover { color: var(--green-dk); }

/* ── 34. PAGE FOOTER ── */
.page-footer { color: var(--muted); opacity: 1; border-top-color: var(--border); }

/* ── 35. BADGES ── */
.badge-current  { background: var(--green-dk); }
.badge-upcoming { background: var(--orange); }

/* ── 36. DISTRICT REPORT — color fixes ──
   --teal is remapped to light sage green (#e2e5dc) by this theme file.
   Where district-report.html used var(--teal) as a TEXT color or a
   header background, the text becomes nearly invisible. Restore dark values. */

/* Table header row — restore dark background + light text */
.appt-table thead tr {
  background: #1a3a4a !important;
  color:      #f5f0e6 !important;
}

/* Line-code column (A-1, A-2 …) — was var(--teal) → now light, invisible on white */
.appt-table td.line-code { color: #1a3a4a !important; }

/* Subtotal rows — same variable problem */
.appt-table tr.subtotal-row td        { color: #1a3a4a !important; }
.appt-table tr.subtotal-row td.amount { color: #1a3a4a !important; }

/* Section heading above the table */
.table-section-header h2 { color: #1a3a4a !important; }

/* Context band (source line just below district header) */
.context-band strong      { color: #1a3a4a !important; }
.context-band .data-source { color: #1a3a4a !important; }

/* Summary box values — big bold numbers below the table */
.summary-box .box-value { color: #1a3a4a !important; }

/* "Not found" heading */
.not-found h2 { color: #1a3a4a !important; }