/* ════════════════════════════════════════════════════════════════════════════
   CCWP public component library (SPEC §3.3) — consumed by every public page
   (county, elections, plats, jobs, meetings, Document Center).

   RULES OF THIS FILE
   - Every color comes from tokens.css custom properties. Zero raw hex here.
   - Exactly four breakpoints: 480 / 768 / 1024 / 1280 (see tokens.css).
   - No `overflow-x: hidden` band-aids; no 100vw breakout tricks.
   - Body/UI text never drops below 1rem (kickers/badges use --fs-meta 15px
     uppercase, which is label typography, not body text).
   - Focus rings are never removed; :focus-visible is styled everywhere.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-surface);
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
img { border-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); font-weight: var(--fw-bold); }
h4, h5, h6 { font-size: var(--fs-2); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-4); }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }

/* Links in prose stay underlined (WCAG 1.4.1 — color is never the only cue) */
nav a, .btn, .card a, .task-chip, .hero-chip, .quicklink-row, .doc-link,
.section-head__more, .site-brand, .social-disc,
.news-card__title a, .event-row__title a { text-decoration: none; }
.news-card__title a:hover, .event-row__title a:hover { text-decoration: underline; }
.prose a, main p a, main li a, .page-banner__lede a,
main a[href^="tel:"], main a[href^="mailto:"] { text-decoration: underline; }
/* Prose inside .card must stay underlined too — .card a (0,1,1) otherwise
   out-specifies main p a (0,0,3) and leaves color-only links (axe
   link-in-text-block, WCAG 1.4.1). Card-title/whole-card links are not
   inside <p>/<li>, so their styling is unchanged. */
.card p a, .card li a { text-decoration: underline; }
.prose a:hover, main p a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

::selection { background: var(--cc-navy); color: var(--color-text-invert); }

/* ── 2. Focus (WCAG 2.4.7 — ring never removed) ─────────────────────────── */

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.utility-bar :focus-visible, .site-header :focus-visible,
.primary-nav :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .band-navy :focus-visible,
.alert-bar--urgent :focus-visible, .alert-bar--closure :focus-visible,
.mobile-menu__button:focus-visible {
  box-shadow: var(--focus-ring-dark);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-alpha-25), 0 0 0 1px var(--cc-navy);
  border-color: var(--cc-navy);
}

/* ── 3. Utilities ───────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100vh; left: var(--space-2);
  z-index: 200;
  background: var(--cc-navy-dark);
  color: var(--color-text-invert);
  font-weight: var(--fw-bold);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus, .skip-link:focus-visible {
  top: 0;
  color: var(--color-text-invert);
  box-shadow: var(--focus-ring-dark);
}

.icon {
  width: 1.25em; height: 1.25em;
  vertical-align: -0.25em;
  flex: none;
}

.kicker {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-gold-text);
  margin: 0 0 var(--space-2);
}

/* Merriweather section headings with the gold rule accent */
.has-rule {
  position: relative;
  padding-bottom: var(--space-3);
}
.has-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3.5rem; height: 3px;
  background: var(--cc-gold);
  border-radius: var(--radius-full);
}

.empty-note {
  color: var(--color-text-muted);
  background: var(--color-surface-tint);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* ── 4. Utility bar ─────────────────────────────────────────────────────── */

.utility-bar {
  background: var(--cc-navy-dark);
  color: var(--color-text-invert);
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-2);
}
.utility-bar p { margin: 0; }
.utility-bar__contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
}
.utility-bar a { color: var(--color-text-invert); }
.utility-bar a:hover { color: var(--cc-gold-bright); }
.utility-bar .icon { color: var(--cc-gold-bright); margin-right: var(--space-1); }
.utility-bar__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
}
.utility-bar__espanol {
  background: var(--cc-gold-bright);
  color: var(--cc-navy-dark);              /* 5.4:1 on gold-bright ✓ */
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  padding: 0 var(--space-3);
}
@media (min-width: 768px) {
  .utility-bar__inner { justify-content: space-between; }
}

/* ── 5. Sticky header ───────────────────────────────────────────────────── */

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-2);
}

.site-header {
  background: var(--grad-header);
  border-bottom: 3px solid var(--cc-gold);
  color: var(--color-text-invert);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-invert);
  min-width: 0;
}
.site-brand__seal {
  width: 56px; height: 56px;
  filter: drop-shadow(0 2px 4px var(--shadow-color-deep));
  transition: transform var(--transition);
}
.site-brand:hover .site-brand__seal { transform: scale(1.04); }
.site-brand__text { display: flex; flex-direction: column; min-width: 0; }
.site-brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
  color: var(--color-text-invert);
}
.site-brand__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-meta);
  color: var(--cc-gold-light);             /* on header gradient ≥ 9.4:1 ✓ */
}
@media (min-width: 768px) {
  .site-brand__seal { width: 72px; height: 72px; }
}

.header-search {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.header-search input {
  width: 240px;
  background: var(--white-alpha-18);
  border: 1px solid var(--white-alpha-35);
  border-radius: var(--radius-full);
  color: var(--color-text-invert);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-0);
  transition: background var(--transition), border-color var(--transition);
}
.header-search input::placeholder { color: var(--white-alpha-70); }
.header-search input:focus { background: var(--white-alpha-10); border-color: var(--cc-gold-bright); }
.header-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--grad-gold-btn);
  color: var(--cc-navy-dark);              /* on gold 4.7:1+ ✓ */
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.header-search__btn:hover { transform: scale(1.05); box-shadow: var(--shadow-2); }
@media (min-width: 1024px) {
  .header-search { display: flex; }
}

/* ── 6. Primary nav + mega panels ───────────────────────────────────────── */

.nav-row {
  position: relative;
  background: var(--cc-navy-mid);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.primary-nav { display: none; flex: 1; }
@media (min-width: 1024px) {
  .primary-nav { display: block; }
}
.primary-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.nav-item { position: static; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-invert);         /* on navy-mid 8.1:1 ✓ */
  font-weight: var(--fw-medium);
  font-size: var(--fs-0);
  padding: var(--space-3) var(--space-4);
  border-bottom: 3px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.nav-link:hover, .nav-item.is-open .nav-link {
  background: var(--cc-navy);
  color: var(--cc-gold-light);             /* on navy 9.4:1 ✓ */
}
.nav-link.is-active, .nav-link[aria-current] {
  border-bottom-color: var(--cc-gold-bright);
}
.nav-link__chevron { width: 1em; height: 1em; opacity: 0.75; }
.js .nav-link__chevron { display: none; }  /* the real toggle button takes over */
.nav-toggle {
  border: 0;
  background: transparent;
  color: var(--color-text-invert);
  padding: 0 var(--space-2);
  cursor: pointer;
}
.nav-toggle .icon { transition: transform var(--transition); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Panels — no-JS fallback: open on hover/:focus-within (fully keyboard-
   reachable); top-level links navigate to their hub pages. When public.js
   runs (html.js) the pure-CSS behavior is disabled and .is-open (managed by
   JS: click, hover-intent, Escape, outside-click, aria-expanded) is the ONLY
   open state, so state can never disagree with the ARIA. */
.mega-panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--color-surface);
  border-top: 3px solid var(--cc-gold);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-3);
  z-index: 90;
}
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel,
.nav-item.is-open .mega-panel { display: block; }
.js .nav-item:not(.is-open):hover .mega-panel,
.js .nav-item:not(.is-open):focus-within .mega-panel { display: none; }

.mega-panel__inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.mega-panel__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.mega-panel__featured {
  display: block;
  position: relative;
  background: var(--cc-navy);
  color: var(--color-text-invert);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-2);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mega-panel__featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); color: var(--color-text-invert); }
.mega-panel__featured .kicker { color: var(--cc-gold-bright); }
.mega-panel__featured-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  margin-bottom: var(--space-1);
}
.mega-panel__featured-desc { display: block; color: var(--cc-navy-light); }
.mega-panel__featured-arrow { position: absolute; right: var(--space-4); bottom: var(--space-4); color: var(--cc-gold-bright); }

.mega-panel__links {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: var(--space-6);
}
@media (min-width: 1280px) {
  .mega-panel__links { columns: 3; }
}
.mega-panel__links li { break-inside: avoid; margin-bottom: var(--space-2); }
.mega-panel__links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-link);
}
.mega-panel__links a:hover { background: var(--cc-navy-light); color: var(--cc-navy); }
.mega-link__label { display: block; font-weight: var(--fw-semibold); }
.mega-link__desc { display: block; color: var(--color-text-muted); }

/* Elections compact nav: same bar, no panels */
.primary-nav--compact .nav-link { font-size: var(--fs-0); }

/* ── 7. Mobile menu (native <details> sheet WITH search) ────────────────── */

.mobile-menu { display: block; }
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}
.mobile-menu__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  color: var(--color-text-invert);
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
}
.mobile-menu__button::-webkit-details-marker { display: none; }
.mobile-menu__close-icon { display: none; }
.mobile-menu[open] .mobile-menu__close-icon { display: inline; }
.mobile-menu[open] .mobile-menu__open-icon { display: none; }

.mobile-menu__sheet {
  position: fixed;
  inset: 0;
  top: var(--mobile-sheet-top, 0);
  z-index: 150;
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--space-5) var(--container-pad) var(--space-10);
  box-shadow: var(--shadow-4);
}
.mobile-menu__search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.mobile-menu__search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-0);
}
.mobile-menu__list {
  list-style: none;
  margin: 0; padding: 0;
}
.mobile-menu__list > li { border-bottom: 1px solid var(--color-border); }
.mobile-menu__link,
.mobile-menu__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--cc-navy);
  cursor: pointer;
  min-height: 48px;
}
.mobile-menu__group summary { list-style: none; }
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary .icon { transition: transform var(--transition); color: var(--cc-gold-text); }
.mobile-menu__group[open] > summary .icon { transform: rotate(180deg); }
.mobile-menu__group ul {
  list-style: none;
  margin: 0; padding: 0 0 var(--space-3) var(--space-4);
}
.mobile-menu__group ul a {
  display: block;
  padding: var(--space-2);
  color: var(--color-link);
  border-radius: var(--radius-sm);
}
.mobile-menu__group ul a:hover { background: var(--cc-navy-light); }

/* ── 8. Alert bars ──────────────────────────────────────────────────────── */

.alert-bar { border-bottom: 1px solid var(--white-alpha-18); }
.alert-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.alert-bar__text { margin: 0; flex: 1; }
.alert-bar__icon .icon { width: 1.4em; height: 1.4em; }
.alert-bar__dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  min-width: 36px; min-height: 36px;
}
.alert-bar__dismiss:hover { background: var(--white-alpha-18); }
.alert-bar a { color: inherit; text-decoration: underline; font-weight: var(--fw-semibold); }

.alert-bar--info    { background: var(--alert-info-bg);    color: var(--alert-info-fg); }
.alert-bar--warning { background: var(--alert-warning-bg); color: var(--alert-warning-fg); }
.alert-bar--warning .alert-bar__icon { color: var(--alert-warning-accent); }
.alert-bar--urgent  { background: var(--alert-urgent-bg);  color: var(--alert-urgent-fg); }
.alert-bar--success { background: var(--alert-success-bg); color: var(--alert-success-fg); }
.alert-bar--closure { background: var(--alert-closure-bg); color: var(--alert-closure-fg); }
.alert-bar--closure .alert-bar__icon { color: var(--alert-closure-accent); }
.alert-bar--warning .alert-bar__dismiss:hover,
.alert-bar--info .alert-bar__dismiss:hover,
.alert-bar--success .alert-bar__dismiss:hover { background: var(--navy-alpha-15); }

/* ── 9. Page banner (breadcrumbs + single thin gold/red stripe) ─────────── */

.page-banner {
  position: relative;
  background:
    var(--scrim-navy-grad),
    var(--img-courthouse-banner) center 30% / cover no-repeat,
    var(--cc-navy-dark);
  color: var(--color-text-invert);
}
.page-banner::after {          /* the flag stripe — used ONCE per page */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(180deg, var(--cc-gold) 0 62%, var(--cc-red) 62% 100%);
}
.page-banner__inner { padding-block: var(--space-7) var(--space-8); }
.page-banner__title {
  color: var(--color-text-invert);
  font-size: var(--fs-5);
  margin: 0;
  text-wrap: balance;
}
.page-banner__lede {
  margin: var(--space-3) 0 0;
  max-width: 46rem;
  font-size: var(--fs-1);
}
/* The pale-blue lede tint is validated against the navy banner ONLY — scope
   it there so a stray use on the white page body inherits dark text instead
   of rendering 1.15:1 (axe color-contrast blocker on the jobs pages). */
.page-banner .page-banner__lede { color: var(--cc-navy-light); }
/* Lede paragraph for white page-body content (jobs summary): muted gray-600
   on white is a pre-validated 7.0:1 pairing (tokens.css). */
.page-lede {
  margin: var(--space-5) 0 var(--space-4);
  max-width: 46rem;
  font-size: var(--fs-1);
  color: var(--color-text-muted);
}

.breadcrumbs { margin-bottom: var(--space-4); }
.breadcrumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-0);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--cc-gold-bright);
  margin-inline: var(--space-1);
}
.breadcrumbs a { color: var(--cc-navy-light); }
.breadcrumbs a:hover { color: var(--color-text-invert); }
.breadcrumbs [aria-current="page"] { color: var(--color-text-invert); font-weight: var(--fw-semibold); }

.page-plain-head { padding-top: var(--space-6); }

/* ── 10. Page content column ────────────────────────────────────────────── */

main { display: block; }
.page-content { padding-block: var(--space-6) var(--space-10); }
.page-content > .block {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.page-content > .block + .block { margin-top: var(--space-6); }
.page-content > .block--full {
  max-width: none;
  padding-inline: 0;
}
.page-content > .block-hero-banner:first-child { margin-top: calc(-1 * var(--space-6)); }
/* Imported legacy html blocks (admin escape hatch): long unbroken tokens
   (emails, URLs) wrap instead of forcing 320 px page overflow, and media
   never exceeds the column. Scoped to .block-html so designed blocks keep
   their own rules. overflow-wrap inherits into the legacy markup. */
.block-html { overflow-wrap: anywhere; }
.block-html img, .block-html figure, .block-html iframe, .block-html video { max-width: 100%; height: auto; }
.block-html figure { margin-inline: 0; }
/* Legacy .site design-token aliases for imported html blocks. The migrated
   vendor/.site markup references custom properties from the OLD stylesheet;
   an unresolved var() falls back to transparent/inherit, which produced
   white-on-white buttons/badges and invisible text on published pages
   (real WCAG 1.4.3 failures). Each alias maps to the nearest token that is
   ACCESSIBLE in the position the legacy content uses it. Remove alongside
   the SPEC §13.4 html-block cleanup pass. */
.block-html {
  --cc-blue: var(--cc-navy-mid);
  --cc-blue-mid: var(--cc-navy-mid);
  --cc-blue-light: var(--cc-navy-light);
  --cc-gold: var(--cc-gold-text);      /* legacy gold TEXT sits on white */
  --cc-gray: var(--cc-gray-100);      /* legacy uses it ONLY as a light wash bg */
  --cc-gray-mid: var(--cc-gray-300);  /* legacy border gray */
  --cc-text-light: var(--color-text-muted);
  --text-light: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --em-red: var(--cc-red);
  --em-red-light: var(--cc-red-light);
  --shadow: var(--shadow-1);
}
/* Links in legacy prose must not rely on color alone (WCAG 1.4.1) — the
   legacy stylesheet underlined them; imported markup depends on that. */
.block-html a:not(.btn) { text-decoration: underline; }
/* Legacy navy hero panels (sheriff crime-prevention set): restore the navy
   field their on-navy inline colors (--cc-gold-bright links, white text)
   assume — without it they render on white and fail contrast. */
.block-html .cp-hero {
  background: var(--cc-navy);
  color: var(--color-text-invert);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius);
}
/* Headings inside the navy hero must invert too — the site-wide navy heading
   color would otherwise sit navy-on-navy. Inline legacy colors still win. */
.block-html .cp-hero :is(h1, h2, h3, h4, p, li) { color: inherit; }
/* Legacy navy promo band (sheriff inmate-search panel): its inline-styled
   white text and white-bordered outline button assume the navy field the old
   stylesheet painted — without it they render white-on-white (WCAG 1.4.3). */
.block-html .inmate-promo {
  background: var(--cc-navy);
  color: var(--color-text-invert);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-4);
}
.block-html .inmate-promo :is(h2, h3, h4, p) { color: inherit; }
/* Links on the navy band: the global navy link color would sit navy-on-navy.
   The legacy gold CTA gets the validated CCWP gold-button pairing. */
.block-html .inmate-promo a { color: inherit; }
.block-html .inmate-promo .btn-gold {
  background: var(--grad-gold-btn);
  color: var(--cc-navy-dark); /* 4.7:1+ ✓ (same pairing as .btn--gold) */
}
/* Legacy inline-styled grids (style="display:grid;grid-template-columns:
   repeat(3,1fr)…") cannot fit a phone viewport and force horizontal scroll
   (WCAG 1.4.10). Until the SPEC §13.4 cleanup pass rewrites them as real
   blocks, collapse them to one column at phone widths only — desktop
   rendering is untouched. !important is required to beat the inline style. */
@media (max-width: 480px) {
  .block-html [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* a trailing full-bleed band sits flush against the footer */
.page-content:has(> .block--full:last-child) { padding-bottom: 0; }

.prose { max-width: var(--content-width); overflow-wrap: anywhere; /* nbsp-glued legacy runs must not force 320px overflow */ }
/* Long-token safety net (WCAG 1.4.10 reflow-320) for the OTHER containers
   that render author/migrated text outside .prose: page-banner H1s and
   breadcrumb trails repeat migrated news titles ("Tax Assessor/Collector's…"
   is one unbreakable token wider than a 320px viewport), the news-article
   summary <p><strong> carries bare URLs, and jobs/meetings detail sections
   render author text directly. `anywhere` only breaks a token that would
   otherwise overflow its line — normal text is untouched. Container-level
   per SPEC §8: never page-level overflow-x clipping. */
.page-banner__title,
.breadcrumbs li,
.page-plain-head h1,
.news-article,
.meeting-next__body,
.page-content section {
  overflow-wrap: anywhere;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-1); }
.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-5);
  border-left: 4px solid var(--cc-gold);
  background: var(--color-surface-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cc-gray-700);
}
.prose--invert, .prose--invert a { color: var(--color-text-invert); }

/* ── 11. Hero (homepage / landing — NO carousel) ────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;             /* clips the Ken Burns zoom, not the page */
  color: var(--color-text-invert);
  min-height: clamp(430px, 58vh, 620px);
  display: flex;
  align-items: center;
}
.hero--compact { min-height: clamp(300px, 38vh, 420px); }
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  animation: hero-kenburns 32s var(--ease-out) alternate infinite;
}
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero-grad); }
.hero__seal {
  position: absolute;
  right: -4rem; bottom: -5rem;
  width: 24rem; height: 24rem;
  background: var(--img-seal) center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-10) var(--container-pad);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-6);
  line-height: var(--lh-display);
  color: var(--color-text-invert);
  margin: 0 0 var(--space-3);
  max-width: 18em;
  text-wrap: balance;
  text-shadow: 0 2px 12px var(--shadow-color-deep);
}
.hero__lede {
  font-size: var(--fs-2);
  color: var(--cc-gold-light);             /* on navy scrim ≥ 9.4:1 ✓ */
  font-family: var(--font-display);
  font-style: italic;
  margin: 0 0 var(--space-6);
  max-width: 34em;
}
.hero__search {
  display: flex;
  gap: var(--space-2);
  max-width: 40rem;
  margin-bottom: var(--space-5);
}
.hero__search input {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-1);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--white-alpha-35);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-3);
}
.hero__chips {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white-alpha-18);
  border: 1px solid var(--white-alpha-35);
  color: var(--color-text-invert);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  font-weight: var(--fw-semibold);
  backdrop-filter: blur(4px);
  transition: background var(--transition), transform var(--transition);
}
.hero-chip:hover { background: var(--cc-gold-bright); color: var(--cc-navy-dark); transform: translateY(-1px); }
.hero-chip .icon { color: var(--cc-gold-bright); }
.hero-chip:hover .icon { color: var(--cc-navy-dark); }

/* ── 12. Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--grad-navy-btn); color: var(--color-text-invert); }
.btn--primary:hover { color: var(--color-text-invert); }
.btn--gold { background: var(--grad-gold-btn); color: var(--cc-navy-dark); } /* 4.7:1+ ✓ */
.btn--gold:hover { color: var(--cc-navy-dark); }
.btn--outline {
  background: transparent;
  border-color: var(--cc-navy);
  color: var(--cc-navy);
}
.btn--outline:hover { background: var(--cc-navy); color: var(--color-text-invert); }
.btn--white {
  background: var(--white-alpha-18);
  border-color: var(--white-alpha-35);
  color: var(--color-text-invert);
  backdrop-filter: blur(4px);
}
.btn--white:hover { background: var(--color-surface); color: var(--cc-navy); }
.btn--sm { padding: var(--space-2) var(--space-4); min-height: 36px; }
.btn--lg { padding: var(--space-4) var(--space-7); font-size: var(--fs-1); }

.block-button--center { text-align: center; }

/* ── 13. Cards & tiles ──────────────────────────────────────────────────── */

.card-grid, .people-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--space-4);
  /* minmax(0, 1fr): a bare 1fr track's min-size is auto, so a card whose
     content has a wide min-content (long words, badges) blows the track past
     the viewport at 320 px. Clamp the min to 0 and let text wrap. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
  .card-grid, .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid--3, .people-grid.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4, .people-grid.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Flex-row (icon chip beside body) belongs ONLY to the cards-block variant.
   Plain .card is a stacked box: feature routes (jobs, foreclosures, plats)
   and imported legacy html blocks use .card as a generic container with many
   children — a flex-row default laid those children out horizontally and
   forced page-level horizontal scroll at 320 px (WCAG 1.4.10). */
.card--cards {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--cc-gold);
}
.card--tiles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--color-surface);
}
.card-title { font-size: var(--fs-2); font-weight: var(--fw-bold); margin: 0 0 var(--space-1); font-family: var(--font-ui); }
.card-title a { color: var(--cc-navy); }
/* whole-card click without a giant link name */
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-desc { margin: 0; color: var(--color-text-muted); }

/* Duotone icon chips (navy stroke on gold-tinted disc) */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--cc-gold-light), var(--gold-alpha-25));
  border: 1px solid var(--gold-alpha-25);
  color: var(--cc-navy);
}
.icon-chip .icon { width: 26px; height: 26px; }
.card:hover .icon-chip { background: var(--cc-navy); color: var(--cc-gold-bright); }

/* People cards */
.person-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.person-card__photo { margin-bottom: var(--space-3); }
.person-card__img, .person-card__placeholder {
  width: 112px; height: 112px;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: inline-block;
  border: 3px solid var(--cc-gold-light);
}
.person-card__placeholder {
  background: var(--cc-navy-light) var(--img-seal) center / 60% no-repeat;
  opacity: 0.7;
}
.person-card__name { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-2); margin: 0; color: var(--cc-navy); }
.person-card__role { color: var(--cc-gold-text); font-weight: var(--fw-semibold); margin: var(--space-1) 0 var(--space-2); }
.person-card__contact { margin: 0; }

/* Fact cards (county facts band — reuses card striping) */
.fact-card {
  background: var(--color-surface-brand);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
}
.fact-card__number {
  display: block;
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-4);
  color: var(--cc-navy);
}
.fact-card__label { color: var(--color-text-muted); }

/* ── 14. Figures / image blocks ─────────────────────────────────────────── */

.figure { margin: 0; }
.figure img { border-radius: var(--radius); box-shadow: var(--shadow-2); }
.figure--small { max-width: 24rem; }
.figure--content { max-width: var(--content-width); }
.figure figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-0);
}
.figure-credit { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em; }

.image-text {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .image-text { grid-template-columns: 1fr 1fr; }
  .image-text--left .image-text__media { order: -1; }
  .image-text--right .image-text__media { order: 1; }
}
.image-text__img { border-radius: var(--radius); box-shadow: var(--shadow-2); width: 100%; object-fit: cover; }

/* ── 15. Callouts & navy band ───────────────────────────────────────────── */

.callout {
  display: flex;
  gap: var(--space-3);
  border-radius: var(--radius);
  padding: var(--space-5);
  border-left: 4px solid;
  max-width: var(--content-width);
}
.callout__icon .icon { width: 1.5em; height: 1.5em; }
.callout__title { font-weight: var(--fw-bold); margin: 0 0 var(--space-1); font-size: var(--fs-1); }
.callout__body > .prose { max-width: none; }
.callout__cta { margin: var(--space-3) 0 0; }
.callout--info    { background: var(--alert-info-bg);    border-color: var(--cc-navy-mid); color: var(--cc-navy-dark); }
.callout--info .callout__icon { color: var(--cc-navy-mid); }
.callout--warning { background: var(--alert-warning-bg); border-color: var(--cc-gold); color: var(--cc-gray-900); }
.callout--warning .callout__icon, .callout--warning .callout__title { color: var(--alert-warning-accent); }
.callout--urgent  { background: var(--cc-red-light); border-color: var(--cc-red); color: var(--cc-gray-900); }
.callout--urgent .callout__icon, .callout--urgent .callout__title { color: var(--cc-red); }
.callout--success { background: var(--alert-success-bg); border-color: var(--cc-green); color: var(--cc-gray-900); }
.callout--success .callout__icon, .callout--success .callout__title { color: var(--cc-green); }

.band-navy {
  background:
    radial-gradient(60rem 60rem at 110% 120%, var(--navy-alpha-15), transparent),
    var(--color-surface-dark);
  color: var(--color-text-invert);
  padding-block: var(--section-pad);
  position: relative;
  overflow: hidden;
}
.band-navy::before {           /* faint seal watermark */
  content: "";
  position: absolute;
  left: -6rem; top: -6rem;
  width: 22rem; height: 22rem;
  background: var(--img-seal) center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.band-navy__inner {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}
.band-navy__title {
  color: var(--color-text-invert);
  font-size: var(--fs-4);
  margin-bottom: var(--space-3);
}
.band-navy__body { max-width: 44rem; margin-inline: auto; }
.band-navy .callout__cta, .band-navy__inner .callout__cta { margin-top: var(--space-5); }

/* ── 16. Accordion ──────────────────────────────────────────────────────── */

.accordion { max-width: var(--content-width); }
.accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-1);
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  color: var(--cc-navy);
  min-height: 48px;
  border-radius: var(--radius);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { background: var(--color-surface-tint); }
.accordion__chevron { color: var(--cc-gold-text); transition: transform var(--transition); }
.accordion__item[open] > .accordion__summary { border-bottom: 1px solid var(--color-border); border-radius: var(--radius) var(--radius) 0 0; }
.accordion__item[open] > .accordion__summary .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { padding: var(--space-4) var(--space-5); }

/* ── 17. Tables ─────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  /* contain:content — Chromium leaks a wide table's overflow through the
     scroll container into the viewport's scrollable region (page scrolls
     sideways to blank space at 320 px). Paint containment stops the leak;
     the internal scrolling is unaffected. */
  contain: content;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  background: var(--color-surface);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-0);
}
.data-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-weight: var(--fw-bold);
  color: var(--cc-navy);
  font-family: var(--font-display);
  font-size: var(--fs-2);
}
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table thead th {
  background: var(--cc-navy);
  color: var(--color-text-invert);        /* 11.6:1 ✓ */
  font-weight: var(--fw-semibold);
  border-top: 0;
  white-space: nowrap;
}
.data-table tbody th { background: var(--color-surface-tint); font-weight: var(--fw-semibold); }
.data-table tbody tr:nth-child(even) td { background: var(--color-surface-tint); }
.data-table tbody tr:hover td, .data-table tbody tr:hover th { background: var(--cc-navy-light); }

/* ── 18. Document lists ─────────────────────────────────────────────────── */

.doc-list {
  list-style: none;
  margin: 0; padding: 0;
  max-width: var(--content-width);
}
.doc-item + .doc-item { margin-top: var(--space-2); }
.doc-link {
  display: flex;
  flex-wrap: wrap;              /* long titles + nowrap meta wrap at 320 px */
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--cc-navy-mid);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.doc-link:hover {
  border-left-color: var(--cc-gold);
  transform: translateX(2px);
  box-shadow: var(--shadow-1);
}
.doc-link__icon { color: var(--cc-navy-mid); align-self: center; }
.doc-link__label { font-weight: var(--fw-semibold); color: var(--color-link); }
.doc-link__meta { color: var(--color-text-muted); white-space: nowrap; font-size: var(--fs-meta); }

/* Folder-linked lists group by subfolder (e.g. sample ballots by election). */
.doc-group + .doc-group { margin-top: var(--space-5); }
.doc-list__title + .doc-group { margin-top: var(--space-4); }
.doc-group__title {
  font-size: var(--fs-2);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.doc-list__more { margin: var(--space-4) 0 0; }
.doc-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
}
.doc-more-link__icon { flex: none; }

/* ── 19. Quick links / task chips ───────────────────────────────────────── */

.quicklinks { list-style: none; margin: 0; padding: 0; }
.quicklinks--chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.task-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-brand);
  color: var(--cc-navy);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  font-weight: var(--fw-semibold);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.task-chip:hover { background: var(--cc-navy); color: var(--cc-gold-light); transform: translateY(-1px); }
.task-chip .icon { color: var(--cc-gold-text); }
.task-chip:hover .icon { color: var(--cc-gold-bright); }

.quicklinks--list { max-width: var(--content-width); }
.quicklinks--list li + li { margin-top: var(--space-2); }
.quicklink-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.quicklink-row:hover { border-color: var(--cc-gold); box-shadow: var(--shadow-1); }
.quicklink-row__icon { color: var(--cc-gold-text); margin-top: 0.15em; }
.quicklink-row__label { font-weight: var(--fw-semibold); color: var(--color-link); display: block; }
.quicklink-row__desc { display: block; color: var(--color-text-muted); }

/* ── 20. Contact card ───────────────────────────────────────────────────── */

.contact-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--cc-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  max-width: var(--content-width);
}
.contact-photo {
  width: 128px; height: 128px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--cc-gold-light);
}
.contact-card__main { flex: 1; min-width: 16rem; }
.contact-card__dept { margin: 0; color: var(--cc-gold-text); font-weight: var(--fw-semibold); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; }
.contact-card__name { margin: var(--space-1) 0 0; font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-3); color: var(--cc-navy); }
.contact-card__role { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.contact-card__rows { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.contact-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.contact-row .icon { color: var(--cc-navy-mid); margin-top: 0.2em; }
/* Long unbroken values (emails, URLs) shrink + wrap instead of widening the card */
.contact-row__text { min-width: 0; overflow-wrap: anywhere; }
.contact-row__label {
  display: block;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
}
.contact-map-link { white-space: nowrap; }

/* ── 21. Embeds ─────────────────────────────────────────────────────────── */

.embed { margin: 0; max-width: var(--content-width); }
.embed__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--cc-navy-dark);
}
.embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.embed figcaption { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ── 22. Dividers ───────────────────────────────────────────────────────── */

.divider--line { max-width: var(--content-width); margin-inline: 0; }
.divider--space { height: var(--space-8); }
.divider--flourish {
  height: var(--space-6);
  background: var(--img-seal) center / auto 100% no-repeat;
  opacity: 0.25;
}

/* ── 23. Section head + news / events / meeting (auto blocks) ───────────── */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.section-head > :first-child { margin-bottom: 0; }
.section-head__more {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.section-head__more::after { content: " →"; }

.news-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid--featured .news-card--featured { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid--featured { grid-template-columns: 2fr 1fr 1fr; }
  .news-grid--featured .news-card--featured { grid-column: auto; grid-row: span 2; }
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.news-card__media { aspect-ratio: 16 / 9; background: var(--cc-navy-light); }
.news-card__img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.news-card__title { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-2); margin: 0; }
.news-card__title a { color: var(--cc-navy); }
.news-card__title a:hover { color: var(--cc-gold-text); }
.news-card__summary { margin: 0; color: var(--color-text-muted); }
.news-card__date { color: var(--color-text-muted); font-size: var(--fs-meta); margin-top: auto; }
.news-card--featured .news-card__title { font-size: var(--fs-3); font-family: var(--font-display); font-weight: var(--fw-black); }

.event-list { list-style: none; margin: 0; padding: 0; max-width: var(--content-width); }
.event-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-1);
}
.event-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px; height: 64px;
  background: var(--cc-navy);
  color: var(--color-text-invert);
  border-radius: var(--radius);
  line-height: 1.1;
}
.event-row__month { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-gold-bright); font-weight: var(--fw-bold); }
.event-row__day { font-size: var(--fs-3); font-weight: var(--fw-heavy); font-family: var(--font-ui); }
.event-row__title { font-family: var(--font-ui); font-size: var(--fs-1); font-weight: var(--fw-bold); margin: 0 0 var(--space-1); }
.event-row__meta { margin: 0; color: var(--color-text-muted); }

/* Next-meeting hero card (SPEC §5) */
.meeting-next {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--cc-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: var(--space-6);
  max-width: var(--content-width);
}
.meeting-next--cancelled { border-top-color: var(--cc-red); }
.meeting-next__body p { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-3); }
.meeting-next__body .icon { color: var(--cc-navy-mid); align-self: center; }
.meeting-next__when { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--cc-navy); }
.meeting-next__countdown { color: var(--cc-gold-text); font-weight: var(--fw-semibold); }
.meeting-next__posted { color: var(--cc-green); font-weight: var(--fw-semibold); }
.meeting-next__posted .icon { color: var(--cc-green); }
.meeting-next__posted--pending { color: var(--color-text-muted); }
.meeting-next__posted--pending .icon { color: var(--color-text-muted); }
.meeting-next__status--cancelled { color: var(--cc-red); font-weight: var(--fw-bold); }
.meeting-next__status--cancelled .icon { color: var(--cc-red); }
.meeting-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.meeting-next__archive { margin: var(--space-4) 0 0; }

/* ── 24. Forms (labels, errors, focus — SPEC §3.3) ──────────────────────── */

.field { margin-bottom: var(--space-5); max-width: 32rem; }
.field label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--cc-navy-dark);
  margin-bottom: var(--space-1);
}
.field__hint { color: var(--color-text-muted); margin: 0 0 var(--space-2); }
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], select, textarea {
  font-family: var(--font-ui);
  font-size: max(16px, 1em);   /* prevents iOS zoom-on-focus */
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.header-search input, .hero__search input, .mobile-menu__search input,
.toolbar input, .toolbar select { width: auto; }
textarea { min-height: 8rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--cc-red);
  box-shadow: 0 0 0 3px var(--cc-red-light);
}
.field-error {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--cc-red);                    /* 6.5:1 on white ✓ */
  font-weight: var(--fw-semibold);
  margin-top: var(--space-1);
}
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); margin: 0 0 var(--space-5); }
legend { font-weight: var(--fw-bold); color: var(--cc-navy); padding-inline: var(--space-2); }

/* ── 25. Badges ─────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 0 var(--space-3);
  min-height: 24px;
  border: 1px solid currentColor;          /* non-color cue (1.4.1) */
}
.badge--navy    { color: var(--cc-navy);       background: var(--cc-navy-light); }
.badge--gold    { color: var(--cc-gold-text);  background: var(--cc-gold-light); }
.badge--red     { color: var(--cc-red);        background: var(--cc-red-light); }
.badge--green   { color: var(--cc-green);      background: var(--cc-green-light); }
.badge--neutral { color: var(--cc-gray-600);   background: var(--cc-gray-100); }

/* ── 26. Toolbar / filter rail (plats, news, jobs, meetings archive) ────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.toolbar__search { display: flex; gap: var(--space-2); flex: 1 1 16rem; min-width: 0; }
.toolbar__search input { flex: 1; min-width: 0; }
.toolbar__count {
  margin: 0 0 0 auto;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-5); padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-0);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.chip:hover { background: var(--cc-navy-light); }
.chip[aria-pressed="true"], .chip.is-selected, .chip[aria-current] {
  background: var(--cc-navy);
  border-color: var(--cc-navy);
  color: var(--color-text-invert);
}

.filter-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .filter-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}
.filter-rail {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.filter-rail h2, .filter-rail h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.filter-rail .field { margin-bottom: var(--space-4); max-width: none; }

/* ── 27. Pagination ─────────────────────────────────────────────────────── */

.pagination { display: flex; justify-content: center; margin-block: var(--space-6); }
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0; padding: 0;
}
.pagination a, .pagination [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-weight: var(--fw-semibold);
}
.pagination a:hover { background: var(--cc-navy-light); border-color: var(--cc-navy-mid); }
.pagination [aria-current="page"] {
  background: var(--cc-navy);
  border-color: var(--cc-navy);
  color: var(--color-text-invert);
}

/* ── 28. Toasts (one live-region primitive — SPEC §8 Layer 0) ───────────── */

.toast-region {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(92%, 26rem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--cc-navy-dark);
  color: var(--color-text-invert);
  border-left: 4px solid var(--cc-gold-bright);
  border-radius: var(--radius);
  box-shadow: var(--shadow-4);
  padding: var(--space-3) var(--space-4);
  animation: toast-in var(--transition-slow) var(--ease-out);
}
.toast--success { border-left-color: var(--cc-green); }
.toast--error { border-left-color: var(--cc-red); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
}

/* ── 29. Dialog ─────────────────────────────────────────────────────────── */

dialog {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-4);
  padding: 0;
  width: min(92vw, 34rem);
  color: var(--color-text);
}
dialog::backdrop { background: var(--scrim-navy-soft); }
dialog[open] { animation: dlg-in 0.18s var(--ease-out); }
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(0.4rem) scale(0.98); }
}
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--cc-navy);
  color: var(--color-text-invert);
  padding: var(--space-4) var(--space-5);
}
.dialog__title { margin: 0; color: var(--color-text-invert); font-size: var(--fs-2); font-family: var(--font-ui); font-weight: var(--fw-bold); }
.dialog__close {
  border: 0;
  background: transparent;
  color: var(--color-text-invert);
  cursor: pointer;
  min-width: 40px; min-height: 40px;
  border-radius: var(--radius-sm);
}
.dialog__close:hover { background: var(--white-alpha-18); }
.dialog__body { padding: var(--space-5); }
.dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── 30. Footer ─────────────────────────────────────────────────────────── */

.site-footer { margin-top: 0; } /* .page-content's bottom padding provides the gap */

.footer-photo {
  position: relative;
  min-height: 260px;
  background:
    linear-gradient(180deg, var(--scrim-navy-soft), var(--scrim-navy)),
    var(--img-courthouse) center 40% / cover no-repeat,
    var(--cc-navy-dark);
  display: flex;
  align-items: flex-end;
  border-top: 4px solid var(--cc-gold);
}
.footer-photo__caption {
  width: 100%;
  color: var(--cc-gold-light);
  font-family: var(--font-display);
  padding-block: var(--space-4);
  margin: 0;
}

.site-footer__main {
  background: var(--grad-footer);
  color: var(--cc-navy-light);
  padding-block: var(--space-8);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand img { filter: drop-shadow(0 2px 4px var(--shadow-color-deep)); }
.footer-brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2);
  color: var(--color-text-invert);
  margin: var(--space-2) 0;
}
.footer-brand__address { font-style: normal; line-height: var(--lh-body); }
.site-footer a { color: var(--cc-navy-light); }        /* on navy-dark ≥ 11:1 ✓ */
.site-footer a:hover { color: var(--cc-gold-bright); }
.footer-brand__social { margin-top: var(--space-3); }
.social-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--white-alpha-10);
  border: 1px solid var(--white-alpha-18);
  transition: background var(--transition), color var(--transition);
}
.social-disc:hover { background: var(--cc-gold-bright); color: var(--cc-navy-dark); }
.footer-col__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-gold-bright);            /* on navy-dark 7.3:1 ✓ */
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }

.site-footer__bottom {
  background: var(--cc-navy-dark);
  border-top: 1px solid var(--white-alpha-18);
  color: var(--cc-navy-light);
  padding-block: var(--space-4);
}
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer__textmygov strong { color: var(--cc-gold-bright); }

/* ── 31. Reveal on scroll (enhancement; motion-safe) ────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* External-link icon added by public.js */
.external-icon { width: 0.85em; height: 0.85em; margin-left: 0.25em; vertical-align: baseline; }

/* ── 32. Reduced motion (WCAG 2.3.3) ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .hero__bg { animation: none; }
  .card:hover, .news-card:hover, .btn:hover, .doc-link:hover,
  .person-card:hover, .hero-chip:hover, .task-chip:hover,
  .mega-panel__featured:hover { transform: none; }
}

/* ── 33. Forced colors (Windows High Contrast) ──────────────────────────── */

@media (forced-colors: active) {
  .btn, .chip, .badge, .task-chip, .hero-chip {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: LinkText;
  }
  .page-banner, .hero, .band-navy, .site-footer__main, .footer-photo {
    forced-color-adjust: auto;
  }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .alert-bar { border: 2px solid CanvasText; }
}

/* ── 34. Print ──────────────────────────────────────────────────────────── */

@media print {
  .skip-link, .utility-bar, .header-search, .primary-nav, .mobile-menu,
  .alert-bar__dismiss, .hero__search, .hero__chips, .toast-region,
  .footer-photo, .site-footer__bottom-links, .btn, .pagination { display: none !important; }
  .header-sticky { position: static; box-shadow: none; }
  .site-header, .page-banner, .band-navy, .site-footer__main, .site-footer__bottom {
    background: none !important;
    color: CanvasText;
  }
  .page-banner__title, .band-navy__title, .site-brand__name { color: CanvasText; }
  body { color: CanvasText; background: Canvas; }
  .page-content > .block { padding-inline: 0; }
  .prose a[href^="http"]::after, .doc-link[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  h1, h2, h3 { page-break-after: avoid; }
  .card, .news-card, .accordion__item, .table-scroll { box-shadow: none; }
  .accordion__item > .accordion__panel { display: block; }
}