/* ============================================
   ORLAND PARK RECORD — ACCESSIBILITY OVERRIDE
   Large text for all readers, LIGHT theme enforced sitewide
   ============================================ */

/* ── OVERRIDE DARK CSS VARIABLES ────────────────────────────
   Pages built with dark :root variables (--bg, --dark, --ink-dark, --charcoal)
   get fully neutralized here so the entire cascade flips to light.
   ──────────────────────────────────────────────────────────── */
:root {
  --bg:       #ffffff !important;
  --bg2:      #f8f5ef !important;
  --bg3:      #ede9e0 !important;
  --dark:     #ffffff !important;
  --void:     #ffffff !important;
  --deep:     #f8f5ef !important;
  --space:    #f0ece4 !important;
  --panel:    #f8f5ef !important;
  --ink-dark: #1a1a1a !important;
  --charcoal: #1a1a1a !important;
  --cream:    #1a1a1a !important;
  --white:    #1a1a1a !important;  /* dark pages used --white for text */
}

/* ── FORCE NAV/FOOTER GREEN SITEWIDE ───────────────────────── */
nav, nav.nav, .nav, header nav, .site-nav {
  background: #1a5c2e !important;
  color: #fff !important;
  backdrop-filter: none !important;
}
nav a, .nav a, .nav-links a { color: #fff !important; }
nav a:hover, .nav a:hover, .nav-links a:hover { color: #f8d56b !important; }

/* ── KILL ALL DARK CLASS BACKGROUNDS ────────────────────────── */
/* Pekau/dynasty dark panels */
.dodge-panel, .dynasty-panel, .tb-item, .oma-box, .vdime-box,
.fb-post, .dr-item, .sc, .src, .ptp-wrap, .park-stats-band,
/* Scandal page */
.fact-box, .scandal, .bio-card,
/* Charcoal sections */
.chapter.charcoal, .chapter.dark, .sidebar-box,
/* TOC dark */
.toc-section,
/* Infrastructure */
.stat-card, .corridor-map,
/* Screen bar */
.screen-bar,
/* Key box animations */
.key-box {
  background: #f8f5ef !important;
  color: #1a1a1a !important;
  border-color: #d0d0d0 !important;
}
.dodge-panel::before, .dodge-panel .dodge-record {
  color: #1a5c2e !important;
}
.dodge-quote { color: #1a1a1a !important; border-left-color: #1a5c2e !important; }
.park-stats-band { background: #e8f4ed !important; }
.screen-bar { background: #1a5c2e !important; color: #fff !important; }
.corridor-map { color: #1a5c2e !important; font-size: .85rem !important; }

/* BASE SIZE — everything scales from here */
html { font-size: 19px !important; }

/* BODY */
body {
  font-size: 1rem;
  line-height: 1.85;
  color: #1a1a1a !important;
  background: #ffffff !important;
}

/* PARAGRAPHS — main reading text */
p, li, dd, td, th { font-size: 1rem; line-height: 1.9; color: #1a1a1a; }

/* ARTICLE / NARRATIVE TEXT — boost further */
.narrative p, article p, .content p, .sec-body p,
.article-text p, .entry p, section p {
  font-size: 1.1rem !important;
  line-height: 1.95 !important;
  color: #1a1a1a !important;
}

/* SOURCE SERIF body text */
.source-serif, [style*="Source Serif"] {
  font-size: 1.1rem;
  line-height: 1.95;
}

/* ── NAV ──────────────────────────────────────────────────── */
/* Standard nav — keep green */
.nav { background: #1a5c2e !important; }

/* Dark-theme pages had their own nav classes — convert to green */
.nav-logo { color: #fdf3d8 !important; }
.nav-links a,
.nav a { color: rgba(253,243,216,.8) !important; font-size: 14px !important; padding: .55rem .75rem !important; }
.nav-links a:hover, .nav a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* ── HEADINGS ──────────────────────────────────────────────── */
.sec-h2, h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; color: #1a1a1a !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important; color: #1a1a1a !important; }
h4 { font-size: 1.15rem !important; color: #1a1a1a !important; }
h1 { color: #1a1a1a !important; }

/* ── CARDS & SECTIONS ─────────────────────────────────────── */
.card-h, .card h3, .card h2 { font-size: 1.15rem !important; font-weight: 700; color: #1a1a1a !important; }
.card p, .card-body { font-size: 1rem !important; line-height: 1.85 !important; color: #1a1a1a !important; }

/* Kill dark card/panel backgrounds */
.card, .panel, .stat-card, .tax-card, .timeline-card,
.fact-card, .entry, .data-card, .section-card {
  background: #fff !important;
  color: #1a1a1a !important;
  border-color: #e8e4da !important;
}

/* ── STAT BAR ──────────────────────────────────────────────── */
.stat-l { font-size: .78rem !important; }
.stat-n, .stat-number { color: #1a5c2e !important; }

/* ── TABLES ────────────────────────────────────────────────── */
table td, table th { font-size: .95rem !important; padding: .7rem .8rem !important; color: #1a1a1a !important; }
table { background: #fff !important; }

/* ── KILL INLINE DARK BACKGROUNDS (attribute selectors) ─────── */
[style*="background:#06060a"],
[style*="background: #06060a"],
[style*="background:#0a0a0a"],
[style*="background:#1a1a1a"],
[style*="background:#222222"],
[style*="background:#222;"],
[style*="background: #222"],
[style*="background:#333"],
[style*="background:#2d2d2d"],
[style*="background:#111"],
[style*="background: #111"],
[style*="background:#0d0d"],
[style*="background:rgba(4,3,0"],
[style*="background:rgba(10,10,10"],
[style*="background:rgba(0,0,0,.9"],
[style*="background:rgba(0,0,0,0.9"] {
  background: #f8f5ef !important;
  color: #1a1a1a !important;
}

/* Fix inline white text that now sits on white bg */
[style*="color:#fff"][style*="background"],
[style*="color: #fff"][style*="background"] {
  color: #1a1a1a !important;
}

/* ── SECTION BACKGROUNDS ───────────────────────────────────── */
section, .section, .section-inner, .sec-inner,
.main-content, main, .page-content, .content-wrap {
  background: #fff !important;
}
.section.alt, section:nth-child(even) { background: #f8f5ef !important; }

/* ── ENSURE CONTRAST ───────────────────────────────────────── */
.text3, .muted { color: #555 !important; }
.cream, [class*="cream"] { color: #1a1a1a !important; }

/* ── LINKS ─────────────────────────────────────────────────── */
a { font-weight: 600; }
a:not(.btn):not(.nav-links a):not(.nav a) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn { font-size: .88rem !important; }

/* ── HERO (intentionally dark green — keep it) ─────────────── */
.hero, .page-hero { background: #1a5c2e !important; }
.hero-p { font-size: clamp(1.05rem, 2vw, 1.18rem) !important; line-height: 1.85 !important; }
.hero *, .page-hero * { color: #fff; }
.hero h1, .page-hero h1,
.hero-h1, .hero-sub, .hero-kicker { color: #fff !important; }
.hero-p, .hero .prose { color: rgba(255,255,255,.9) !important; }

/* ── BREAKING BAR ──────────────────────────────────────────── */
.breaking-txt { font-size: 1rem !important; }
.breaking { background: #7f1d1d !important; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer, .footer { background: #1a5c2e !important; color: #fdf3d8 !important; }
footer *, .footer * { color: rgba(253,243,216,.85) !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE & RESPONSIVE — SITEWIDE
   Every page loads this file so these rules apply universally.
   Target: phones 320px–480px, small tablets up to 768px.
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL OVERFLOW SAFETY ─────────────────────────────────── */
html, body { max-width: 100vw; overflow-x: hidden !important; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* ── TABLES: ALWAYS SCROLLABLE ON MOBILE ────────────────────── */
/* Applies to every table on every page */
table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  white-space: nowrap;
}
/* Re-allow wrapping in description cells */
table td:last-child, table td:nth-child(5), table td:nth-child(6) {
  white-space: normal;
  min-width: 120px;
}

/* ── TOUCH TARGETS — all tappable elements ≥ 44px ──────────── */
.nav-links a,
.ql,
.btn,
.gif-tab,
.political-links a,
.toc-bar a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── TABLET: max-width 768px ────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 17px !important; }

  /* Sections — reduce padding */
  .section { padding: 2.2rem 0 !important; }
  .section-inner { padding: 0 1rem !important; }
  .cards-inner { padding: 0 1rem !important; }

  /* Prose / narrative — full width */
  .prose, .intro-prose, .narrative-inner, .sec-desc,
  .political-inner { max-width: 100% !important; }

  /* Stat bar — wrap into 2 columns */
  .statbar { flex-wrap: wrap !important; justify-content: center !important; }
  .stat {
    flex: 0 0 48% !important;
    min-width: 140px !important;
    border-right: none !important;
    border-bottom: 1px solid #ede9e0 !important;
  }

  /* Stat bar at top of inner pages (dark green) */
  .stat-bar-inner { gap: .6rem 1.5rem !important; }
  .stat-item { min-width: 100px; }

  /* Card grids — single column */
  .grid,
  .founders-grid,
  .family-grid,
  .eth-grid,
  .legacy-grid,
  .research-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Chief cards, department grids */
  [style*="grid-template-columns: repeat(auto-fill, minmax(3"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Nav links — bigger touch targets */
  .nav-links a {
    font-size: 13px !important;
    padding: .6rem .7rem !important;
  }

  /* Hero */
  .hero { min-height: 55vh !important; padding: 3.5rem 1rem 2.5rem !important; }
  .page-hero { padding: 2.8rem 1rem 2.2rem !important; }
  .hero-btns { gap: .5rem !important; }
  .hero-btns a { padding: .6rem 1.1rem !important; font-size: .78rem !important; }

  /* Quick links strip */
  .quick { padding: .7rem 1rem !important; gap: .3rem !important; }
  .ql { font-size: .78rem !important; padding: .4rem .6rem !important; }

  /* Ticker — slow down slightly, allow wrap on very narrow */
  .ticker-inner { font-size: .75rem !important; }

  /* TOC bar */
  .toc-bar { padding: .6rem 1rem !important; }
  .toc-bar a { font-size: .7rem !important; padding: .35rem .6rem !important; margin-right: .25rem !important; }

  /* Breaking bar */
  .breaking { padding: .5rem 1rem !important; }
  .breaking-txt { font-size: .88rem !important; }

  /* Cards inner padding */
  .card { padding: 1.1rem 1.1rem !important; }
  .fam-head, .fc-head, .fam-body, .founder-card-body { padding: 1rem 1.1rem !important; }

  /* Political strip */
  .political { padding: 1.8rem 1rem !important; }
  .political-links { gap: .4rem !important; }
  .political-links a { font-size: .78rem !important; padding: .45rem .75rem !important; }

  /* Footer */
  .footer { padding: 2rem 1rem !important; }
  .footer-links { gap: .2rem .6rem !important; }
  .footer-links a { font-size: .68rem !important; }

  /* Timeline / interactive history */
  .timeline-entry, .tl-entry { padding: 1rem !important; }

  /* Price era / deal tables */
  .pe-head { flex-direction: column !important; gap: .4rem !important; }
  .pe-badge { align-self: flex-start !important; }

  /* Stat bar on inner pages (dark version) */
  .stat-bar { padding: .9rem 1rem !important; }

  /* Two-column grids → single column */
  .two-col, [style*="display:grid;grid-template-columns:1fr 1fr"],
  [style*="display: grid; grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Fire dept comparison box */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* GIF tabs */
  .gif-tab { font-size: .7rem !important; padding: .55rem .3rem !important; }
  .gif-bar { padding: .45rem 1rem !important; flex-direction: column !important; gap: .2rem !important; }

  /* Section sub-headers */
  .sec-sub { font-size: .78rem !important; }

  /* Highlight boxes */
  .hl { flex-direction: column !important; gap: .4rem !important; }
  .hl-icon { margin-top: 0 !important; }
}

/* ── PHONE: max-width 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 16px !important; }

  /* Headings scale down further */
  h1, .hero-h1, .ph-h1 { font-size: clamp(1.6rem, 8vw, 2.8rem) !important; }
  h2, .sec-h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }

  /* Stat bar numbers */
  .stat-n, .stat-number { font-size: 1.5rem !important; }
  .stat { flex: 0 0 46% !important; min-width: 120px !important; padding: .8rem .5rem !important; }

  /* Quick links smaller */
  .ql { font-size: .74rem !important; padding: .38rem .5rem !important; }

  /* Nav — more compact */
  .nav-top { padding: .45rem 1rem .35rem !important; }
  .nav-logo { font-size: .95rem !important; }
  .nav-sub { display: none !important; }
  .nav-links a { font-size: 12px !important; padding: .55rem .6rem !important; }

  /* Hero */
  .hero { min-height: 50vh !important; padding: 3rem .9rem 2rem !important; }
  .hero-p { font-size: .94rem !important; }
  .hero-btns { flex-direction: column !important; align-items: center !important; }
  .hero-btns a { width: 100% !important; text-align: center !important; padding: .75rem 1rem !important; }

  /* Cards full width */
  .card { padding: 1rem !important; }
  .card-ico { font-size: 1.4rem !important; }
  .card-h { font-size: .97rem !important; }
  .card-d { font-size: .84rem !important; }

  /* Footer more compact */
  .footer-logo { font-size: 1.1rem !important; }
  .footer-links a { font-size: .65rem !important; }

  /* Breaking bar */
  .breaking { flex-direction: column !important; gap: .4rem !important; }
  .breaking-txt { font-size: .85rem !important; }

  /* TOC / quick-scroll bars */
  .toc-bar a { font-size: .67rem !important; padding: .3rem .5rem !important; }

  /* Map widgets — ensure visible */
  #gm-wrap { margin: 0 !important; border-radius: 0 !important; }
  #gm-map-wrap { height: 220px !important; }
  #map { min-height: 250px !important; }

  /* Section padding */
  .section { padding: 1.8rem 0 !important; }
  .section-inner { padding: 0 .9rem !important; }

  /* Tables — more aggressive handling on tiny screens */
  table td, table th { font-size: .82rem !important; padding: .5rem .65rem !important; }

  /* Family/founder cards */
  .fam-name, .fc-name { font-size: 1.15rem !important; }

  /* Ethnic grid cards */
  .eth-grid { grid-template-columns: 1fr !important; }

  /* Price eras */
  .pe-title { font-size: 1rem !important; }
  .pe-badge { font-size: .9rem !important; padding: .35rem .7rem !important; }
}

/* ── VERY SMALL PHONES: max-width 360px ─────────────────────── */
@media (max-width: 360px) {
  html { font-size: 15px !important; }
  .stat { flex: 0 0 100% !important; } /* 1 column on tiny phones */
  .nav-links a { font-size: 11.5px !important; padding: .5rem .55rem !important; }
  h1, .hero-h1, .ph-h1 { font-size: 1.6rem !important; }
}

/* ── LANDSCAPE PHONE ────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero, .page-hero { min-height: 80vw !important; }
  #gm-wrap { max-height: 50vh !important; }
}