/* One stylesheet for the whole site: the generated directory pages, apply.html
   and es/index.html all link it, so the tokens below are the single source and
   no page redefines them. (Until 8/28 apply.html carried its own :root with a
   different --muted and line-height; the two drifted apart on screen.)
   Sizes hold the accessibility floors: 17px body, nothing under 14px,
   underlined links, 44px touch targets, visible focus, 4.5:1 contrast. */
:root {
  --ink: #1f2933;
  --muted: #4b5563;
  --line: #d9dee4;
  --panel: #ffffff;
  --page: #f3f5f7;
  --accent: #0b5394;
  --accent-ink: #ffffff;
  --flag-bg: #fff5db;
  --flag-ink: #6b4900;
  --flag-line: #ecd28a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--page);
}
a { color: var(--accent); text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--ink); padding: 12px 16px;
  border: 2px solid var(--accent); border-radius: 0 0 8px 0; z-index: 2000;
}
.skip:focus { left: 0; }

.top {
  display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 10px 20px;
}
.brand {
  font-weight: 700; font-size: 20px; text-decoration: none; color: var(--ink);
  min-height: 44px; display: inline-flex; align-items: center;
}
.mainnav { display: flex; flex-wrap: wrap; gap: 2px 4px; flex: 1; }
.mainnav a {
  font-size: 16px; text-decoration: none; color: var(--ink);
  padding: 10px 10px; min-height: 44px; border-radius: 8px;
  display: inline-flex; align-items: center;
}
.mainnav a:hover { background: #eef2f5; text-decoration: underline; }
.mainnav a[aria-current="page"] {
  color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent);
}
.topact { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tel {
  font-size: 16px; font-weight: 600; white-space: nowrap;
  padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center;
}
.top .check {
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); border-radius: 8px;
  padding: 11px 16px; min-height: 44px; display: inline-flex; align-items: center;
}
.top .check:hover { background: #094478; }
.top .check .sm { display: none; }

.crumbs {
  max-width: 820px; margin: 0 auto; padding: 14px 20px 0;
  font-size: 14px; color: var(--muted);
}
.crumbs a {
  color: var(--muted); display: inline-block; padding: 8px 0; min-height: 34px;
}
/* The one-column reading column. Deliberately a class, not the `main` element:
   apply.html's <main> is the 460px app panel inside a flex row, and an element
   selector would fight it. */
.page {
  max-width: 820px; margin: 0 auto; padding: 8px 20px 48px;
}
h1 { font-size: 30px; line-height: 1.25; margin: 14px 0 12px; }
h2 { font-size: 21px; line-height: 1.3; margin: 32px 0 10px; }
p { margin: 0 0 14px; }
.lede { font-size: 19px; }
.note {
  background: var(--flag-bg); border: 1px solid var(--flag-line);
  color: var(--flag-ink); border-radius: 8px; padding: 12px 14px;
}

.tablewrap { overflow-x: auto; margin: 0 0 8px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--panel); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 16px; }
th { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.flag {
  display: inline-block; font-size: 14px; background: var(--flag-bg);
  color: var(--flag-ink); border: 1px solid var(--flag-line);
  border-radius: 999px; padding: 1px 9px; margin-left: 6px; white-space: nowrap;
}

.muni-list, .county-list { list-style: none; padding: 0; margin: 0 0 18px; }
.muni-list li, .county-list li {
  border-bottom: 1px solid var(--line); padding: 0;
}
.muni-list a, .county-list a {
  display: inline-block; padding: 12px 0; min-height: 44px;
}
.count { color: var(--muted); font-size: 15px; margin-left: 8px; }
.county-list { columns: 2; column-gap: 32px; }
.county-list li { break-inside: avoid; }

/* The three-program strip: what is on offer, before anybody types anything.
   Money first, because that is the question the visitor arrived with. The
   grant/loan word is spelled out on every row - never signalled by colour
   alone, and never blurred, because two of the three are loans. */
.offer { list-style: none; margin: 0 0 16px; padding: 0; }
.offer > li {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--panel);
  padding: 11px 14px; margin: 0 0 8px;
}
.offer .amt {
  display: block; font-size: 20px; font-weight: 700; color: var(--accent);
  line-height: 1.25;
}
.offer .nm { display: block; font-size: 16px; font-weight: 600; margin-top: 1px; }
/* The grant-or-loan word. Global, not scoped to the strip: it has to read the
   same everywhere a program is named, and on /programs it sits inside an h3. */
.kind {
  display: inline-block; font-size: 14px; font-weight: 600; margin-left: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px;
  color: var(--muted); background: var(--page); white-space: nowrap;
  vertical-align: middle; text-transform: lowercase; letter-spacing: .01em;
}
.offer .for { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; }
.offer-head { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.offer-foot { font-size: 15px; color: var(--muted); margin: 0 0 18px; }
/* Once an address has been checked, the answer is the offer. */
.verdict.show ~ .offer-head,
.verdict.show ~ .offer,
.verdict.show ~ .offer-foot { display: none; }

/* /programs and the other prose pages. */
.prog {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 18px 20px; margin: 0 0 18px;
}
.prog h3 { font-size: 20px; margin: 0 0 2px; line-height: 1.35; }
.prog h3 .kind { background: #fff; }
.prog .amt { font-size: 22px; font-weight: 700; color: var(--accent); display: block; }
.prog dl { margin: 12px 0 0; }
.prog dt {
  font-size: 14px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin: 10px 0 1px;
}
.prog dd { margin: 0; font-size: 16px; }
.src { font-size: 15px; color: var(--muted); }

/* The who-we-are block. Shared by /apply and /es, where it is the first thing a
   scam-wary visitor reads. */
.who {
  background: #eef3f8; border: 1px solid #c3d4e6; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 18px; font-size: 15px; color: #24405c;
}
.who strong { color: #16283a; }
.who a { color: #0b5394; }

.cta-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin: 28px 0 18px;
}
.cta-box h2 { margin-top: 0; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 17px; border-radius: 8px; padding: 12px 22px;
}
.back { font-size: 16px; color: var(--muted); }

.foot {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 28px 20px 24px; margin-top: 40px;
}
.footgrid {
  max-width: 820px; margin: 0 auto 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px;
}
.footgrid h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 4px;
}
.footgrid a {
  display: block; font-size: 16px; padding: 10px 0; min-height: 44px;
}
.notgov, .prov {
  max-width: 820px; margin: 0 auto 10px; font-size: 14px; color: var(--muted);
}
.notgov { padding-top: 16px; border-top: 1px solid var(--line); }
.foot p { max-width: 820px; margin: 0 auto 10px; font-size: 14px; color: var(--muted); }

/* On a phone the header is two rows and no more: brand and the phone number on
   the first, the nav on the second. Every row the masthead spends is a row the
   three programs do not get, and the programs are why anyone typed the URL. */
@media (max-width: 760px) {
  .mainnav { order: 3; flex-basis: 100%; flex: none; gap: 0 2px; }
  .mainnav a { font-size: 15px; padding: 10px 8px; }
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 25px; }
  .county-list { columns: 1; }
  .footgrid { grid-template-columns: 1fr; gap: 4px; }
  /* Every pixel above the fold on a phone is contested, and the three programs
     are what the visitor came for. The map tip goes: on a phone the map sits
     below the panel, so there is nothing to click yet. */
  .hint { display: none; }
  .who { padding: 11px 13px; margin: 0 0 14px; }
  .offer > li { padding: 9px 12px; margin: 0 0 6px; }
  .offer .amt { font-size: 19px; }
  .offer .for { font-size: 14.5px; }
  .offer-head { margin: 0 0 6px; }
  .offer-foot { margin: 0 0 14px; }

  /* The check button is the whole point on a phone, so it stays visible. */
  .top { padding: 10px 14px; gap: 6px 8px; }
  .topact { gap: 4px; }
  .tel { font-size: 15px; padding: 10px 4px; }
  .top .check { font-size: 15px; padding: 11px 14px; }
  .top .check .lg { display: none; }
  .top .check .sm { display: inline; }
}