/* Visualized Missouri Public Schools — shared styles */
/* Sibling of the Four-Day School Week Resource Center template.
   Distinct accent: deep slate blue (#1C3D5A) primary, goldenrod (#C6851E) kickers,
   azure (#2F80C4) accent/hover. Same fonts, neutrals, and section patterns. */
* { box-sizing: border-box; }
/* Smooth scrolling only for in-page interaction — keeps load-time anchor jumps instant and reliable */
html:focus-within { scroll-behavior: smooth; }
/* Keep anchored sections clear of the sticky header */
[id] { scroll-margin-top: 92px; }
body { margin: 0; background: #FBFAF8; font-family: 'Libre Franklin', sans-serif; color: #1a1416; }
a { color: inherit; text-decoration: none; }
.serif { font-family: 'Newsreader', serif; font-weight: 500; }
.lnk { transition: color .15s ease; }
.lnk:hover { color: #2F80C4 !important; }
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.09); }
.wrap { max-width: 1280px; margin: 0 auto; background: #FBFAF8; }

/* Masthead */
.masthead { display:flex; align-items:center; justify-content:space-between; padding:20px 56px; border-bottom:1px solid #ECE7E2; position:sticky; top:0; background:rgba(251,250,248,0.92); backdrop-filter:blur(8px); z-index:20; }
.masthead .logo-box { width:38px; height:38px; background:#1C3D5A; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Newsreader',serif; font-weight:600; font-size:20px; line-height:1; }
.masthead .site-name { font-weight:700; font-size:14px; letter-spacing:0.06em; color:#1a1416; line-height:1.15; }
.masthead .site-sub { font-size:11px; letter-spacing:0.18em; color:#9a8f8f; line-height:1.5; margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:20px; font-size:13.5px; font-weight:500; color:#3a3335; }
.nav-links .btn { background:#1C3D5A; color:#fff; padding:9px 16px; border-radius:5px; font-weight:600; }
.nav-links a.active { color:#1C3D5A; font-weight:700; }
/* Header logo image (PNG lockup) — keep original proportions, never distorted */
/* line-height:0 must apply to the PNG lockup only — when it leaked onto the text
   masthead it collapsed the "STATE-BY-STATE DATA" line into the site name. */
.masthead .logo-link { display:block; }
.masthead .logo-link > .site-logo { line-height:0; }
.masthead .site-logo { display:block; height:52px; width:auto; max-width:100%; object-fit:contain; }
@media (max-width:600px) { .masthead .site-logo { height:38px; } }

/* Page hero */
.page-hero { padding: 58px 56px 40px; border-bottom:1px solid #ECE7E2; }
.page-hero .kicker { font-size:12.5px; font-weight:700; letter-spacing:0.16em; color:#2F80C4; margin-bottom:14px; }
.page-hero h1 { font-family:'Newsreader',serif; font-weight:500; font-size:44px; line-height:1.08; letter-spacing:-0.01em; margin:0 0 16px; }
.page-hero p.lede { font-size:17px; line-height:1.6; color:#4a4245; max-width:760px; margin:0; }

/* Sections */
.section { padding: 54px 56px; }
.section.sand { background:#F4EFEA; border-top:1px solid #ECE7E2; border-bottom:1px solid #ECE7E2; }
.section h2 { font-family:'Newsreader',serif; font-weight:500; font-size:30px; margin:0 0 10px; }
.section .kicker { font-size:12.5px; font-weight:700; letter-spacing:0.14em; color:#C6851E; margin-bottom:12px; }
.section p, .section li { font-size:15px; line-height:1.65; color:#3a3335; }
.section .lede { font-size:16.5px; line-height:1.6; color:#4a4245; max-width:760px; }

/* Tableau / chart embed slots */
.embed-slot { margin-top:26px; border:2px dashed #C3CEDA; border-radius:14px; background:#fff; background-image:linear-gradient(#F6F8FB 1px, transparent 1px), linear-gradient(90deg, #F6F8FB 1px, transparent 1px); background-size:34px 34px; min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 32px; }
.embed-slot .es-glyph { width:64px; height:64px; border-radius:14px; background:#1C3D5A; color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:20px; }
.embed-slot .es-tag { font-size:11.5px; font-weight:700; letter-spacing:0.16em; color:#C6851E; margin-bottom:10px; }
.embed-slot .es-title { font-family:'Newsreader',serif; font-size:23px; line-height:1.28; color:#1a1416; max-width:560px; margin-bottom:12px; }
.embed-slot .es-help { font-size:13.5px; line-height:1.6; color:#7a726f; max-width:520px; }
.embed-slot .es-help code { background:#F1EEE9; border-radius:4px; padding:1px 6px; font-size:12.5px; color:#1C3D5A; }
/* When a real embed is present, let it fill the slot cleanly */
.embed-slot.filled { display:block; padding:0; border-style:solid; border-color:#ECE7E2; background:#fff; background-image:none; overflow:hidden; }
.embed-slot.filled iframe { width:100%; min-height:640px; border:0; display:block; }

/* Live Tableau embed frame (used when a real dashboard replaces a placeholder slot) */
.viz-embed { margin-top:26px; border:1px solid #ECE7E2; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.05); position:relative; }
/* Scroll shield: covers the map so page-scroll works; click to interact, mouse-out to release */
.viz-shield { position:absolute; top:0; left:0; right:0; bottom:0; z-index:5; cursor:pointer; background:transparent; display:flex; align-items:flex-start; justify-content:center; }
.viz-embed.viz-active .viz-shield { pointer-events:none; opacity:0; }
.viz-shield-hint { margin-top:16px; background:rgba(28,61,90,0.9); color:#fff; font-size:12px; font-weight:600; letter-spacing:0.03em; padding:7px 14px; border-radius:20px; opacity:0; transition:opacity .18s ease; box-shadow:0 4px 14px rgba(0,0,0,0.18); }
.viz-embed:hover .viz-shield-hint { opacity:1; }
.viz-reset { position:absolute; left:12px; bottom:52px; z-index:7; background:rgba(255,255,255,0.96); color:#1C3D5A; border:1px solid #cdd6de; border-radius:20px; font-size:12px; font-weight:600; padding:6px 13px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.14); font-family:inherit; opacity:0; transition:opacity .18s ease; }
.viz-embed:hover .viz-reset { opacity:1; }
.viz-reset:hover { background:#1C3D5A; color:#fff; border-color:#1C3D5A; }

/* Dime test calculator */
.dime-calc { margin-top:40px; background:#fff; border:1px solid #ECE7E2; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.05); padding:30px 30px 34px; }
.dc-kicker { font-size:12.5px; font-weight:700; letter-spacing:0.14em; color:#C6851E; margin-bottom:8px; }
.dc-controls { display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; margin-bottom:26px; }
.dc-field { display:flex; flex-direction:column; gap:6px; }
.dc-field label { font-size:13px; font-weight:600; color:#5a5250; }
.dc-field select { padding:10px 12px; font-size:14.5px; border:1px solid #cdd6de; border-radius:8px; background:#fff; color:#1a1416; font-family:inherit; }
.dc-levy { grid-column:1 / -1; }
.dc-levy input[type=range] { width:100%; accent-color:#1C3D5A; margin-top:6px; }
.dc-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.dc-card { background:#EAF0F6; border-radius:12px; padding:22px 24px; }
.dc-name { font-size:13px; font-weight:700; letter-spacing:0.04em; color:#1C3D5A; text-transform:uppercase; margin-bottom:10px; min-height:32px; line-height:1.2; }
.dc-big { font-family:'Newsreader',serif; font-weight:600; font-size:40px; color:#1C3D5A; line-height:1; }
.dc-big .cent { color:#2F80C4; }
.dc-sub { font-size:13.5px; color:#5a5250; margin-top:7px; }
.dc-meta { font-size:12.5px; color:#7a726f; margin-top:12px; border-top:1px solid #d3dde6; padding-top:10px; line-height:1.5; }
.dc-compare { margin-top:18px; background:#1C3D5A; color:#fff; border-radius:10px; padding:16px 20px; font-size:15.5px; line-height:1.55; }
.dc-compare strong { color:#EAF7FA; }
@media (max-width:700px) { .dc-controls { grid-template-columns:1fr; } }
.viz-embed .tableauPlaceholder { width:100% !important; }
.viz-embed iframe { width:100%; min-height:640px; border:0; display:block; }
.viz-caption { font-size:13px; line-height:1.55; color:#7a726f; margin-top:12px; }
.subhead { font-family:'Newsreader',serif; font-weight:600; font-size:19px; color:#1C3D5A; margin-top:26px; }

/* "What this page means for you" — audience lenses */
.means { background:#1C3D5A; color:#fff; padding:54px 56px; }
.means .kicker { font-size:12.5px; font-weight:700; letter-spacing:0.14em; color:#E9B44C; margin-bottom:12px; }
.means h2 { font-family:'Newsreader',serif; font-weight:500; font-size:30px; margin:0 0 10px; color:#fff; }
.means .lede { font-size:16.5px; line-height:1.6; color:#C7D5E2; max-width:760px; margin:0 0 30px; }
.means-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:stretch; }
.means-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:24px 24px 22px; }
.means-card .mc-who { font-size:11.5px; font-weight:700; letter-spacing:0.12em; color:#E9B44C; margin-bottom:12px; text-transform:uppercase; }
.means-card p { font-size:14.5px; line-height:1.6; color:#E4ECF3; margin:0 0 12px; }
.means-card p:last-child { margin-bottom:0; }
.means-card strong { color:#fff; }
.means-ask { margin-top:30px; background:rgba(0,0,0,0.18); border-left:4px solid #E9B44C; border-radius:8px; padding:24px 26px; }
.means-ask .ma-title { font-size:12.5px; font-weight:700; letter-spacing:0.12em; color:#E9B44C; margin-bottom:14px; text-transform:uppercase; }
.means-ask ul { margin:0; padding-left:20px; }
.means-ask li { font-size:14.5px; line-height:1.65; color:#E4ECF3; margin-bottom:9px; }
.means-ask li:last-child { margin-bottom:0; }
@media (max-width:760px) { .means-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .means { padding:40px 22px; } }

/* Browse-by-theme cards (home page) */
.theme-card { display:block; background:#fff; border:1px solid #ECE7E2; border-radius:14px; padding:26px 26px 24px; }
.theme-card .tc-kicker { font-size:11.5px; font-weight:700; letter-spacing:0.12em; color:#C6851E; margin-bottom:12px; }
.theme-card .tc-title { font-size:22px; line-height:1.2; color:#1a1416; margin-bottom:10px; }
.theme-card .tc-desc { font-size:14px; line-height:1.55; color:#5a5250; margin-bottom:16px; }
.theme-card .tc-go { font-size:13.5px; font-weight:700; color:#2F80C4; }

/* Stat chips (placeholder key figures) */
.stat-band { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.stat-chip { background:#fff; border:1px solid #ECE7E2; border-radius:12px; padding:22px 24px; }
.stat-chip .num { font-family:'Newsreader',serif; font-weight:600; font-size:34px; color:#1C3D5A; line-height:1; }
.stat-chip .num .accent { color:#2F80C4; }
.stat-chip .lab { font-size:13.5px; color:#5a5250; line-height:1.5; margin-top:10px; }
.stat-chip .src { font-size:11.5px; color:#a79f9c; letter-spacing:0.04em; margin-top:8px; text-transform:uppercase; }

/* Resource / link rows */
.res-list { display:grid; gap:14px; margin-top:24px; }
.res-row { display:flex; gap:18px; align-items:flex-start; border:1px solid #ECE7E2; border-radius:10px; padding:20px 22px; background:#fff; }
.res-row .glyph { width:42px; height:42px; flex:0 0 auto; background:#EAF0F6; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#1C3D5A; font-weight:700; font-size:17px; }
.res-row .t { font-weight:700; font-size:15.5px; color:#1a1416; margin-bottom:3px; }
.res-row .d { font-size:13.5px; color:#7a726f; line-height:1.5; }

/* Callout box */
.callout { background:#fff; border:1px solid #ECE7E2; border-left:4px solid #1C3D5A; border-radius:8px; padding:22px 26px; margin-top:22px; font-size:14.5px; line-height:1.65; color:#4a4245; }

/* Footer */
footer { background:#1a1416; color:#9a8f8f; padding:36px 56px; display:flex; align-items:center; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:14px; }
footer a { color:#AEC2D6; }

/* Contact band */
.contact-band { padding:56px; background:#F4EFEA; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* Responsive */
@media (max-width: 960px) {
  .nav-links { display:none !important; }
  .grid-2, .grid-3, .hero-grid { grid-template-columns:1fr !important; display:grid !important; }
  .hero-media { min-height:300px !important; }
  .masthead, .section, .page-hero, .contact-band, footer { padding-left:24px !important; padding-right:24px !important; }
  h1.hero { font-size:40px !important; }
  .page-hero h1 { font-size:34px; }
  .stat-band { grid-template-columns:1fr !important; }
}

/* Home-page "find your district" search */
.hp-find { margin:34px 0 0; max-width:640px; }
.hp-find-lab { font-size:12px; font-weight:700; letter-spacing:0.14em; color:#C6851E; margin-bottom:10px; }
.hp-find-sub { font-size:13.5px; line-height:1.55; color:#8b8480; margin-top:10px; }
.hp-search { position:relative; }
.hp-input { width:100%; box-sizing:border-box; font-family:'Libre Franklin',sans-serif; font-size:17px;
  padding:16px 18px; border:2px solid #D9D2CB; border-radius:10px; background:#fff; color:#1a1416; }
.hp-input:focus { outline:none; border-color:#2F80C4; box-shadow:0 0 0 4px rgba(47,128,196,0.12); }
.hp-menu { position:absolute; z-index:50; top:100%; left:0; right:0; margin-top:6px; background:#fff;
  border:1px solid #E5DFD8; border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,0.13);
  max-height:320px; overflow-y:auto; display:none; text-align:left; }
.hp-menu.open { display:block; }
.hp-opt { padding:11px 16px; font-size:15px; cursor:pointer; border-bottom:1px solid #F3EFEA; }
.hp-opt:last-child { border-bottom:none; }
.hp-opt:hover, .hp-opt.sel { background:#EFF5FA; }
.hp-opt .hp-sub { display:block; font-size:12.5px; color:#8b8480; margin-top:2px; }
.hp-none { padding:14px 16px; font-size:14px; color:#8b8480; }

/* ===== National additions (Visualized American Public Schools) ===== */
.usmap-frame { position:relative; margin-top:28px; background:#fff; border:1px solid #ECE7E2; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.05); padding:26px; }
.usmap-frame path.st { stroke:#FBFAF8; stroke-width:1.1; cursor:pointer; transition:filter .12s ease, transform .12s ease; }
.usmap-frame path.st:hover { filter:brightness(1.18) saturate(1.1); }
.usmap-tip { position:fixed; z-index:60; pointer-events:none; background:#1a1416; color:#fff; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:6px; opacity:0; transition:opacity .1s ease; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.st-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; margin-top:26px; }
.st-chip { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #ECE7E2; border-radius:10px; padding:13px 16px; }
.st-dot { width:16px; height:16px; border-radius:5px; flex:0 0 auto; }
.st-nm { font-size:14.5px; font-weight:600; color:#1a1416; flex:1; }
.st-go { color:#a79f9c; font-weight:700; }
.dmap-fallback { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 32px; }
#dmap .leaflet-container, #dmap { background:#FBFAF8; border-radius:14px; }