/* Mescal-J6 Fire District – accessible redesign preview.
   Hand-written; mirrors the live YOOtheme design (Verdana, red/dark/gray palette).
   Colour notes (WCAG 2.1 AA):
   - All live brand colours were kept; each text/background pair used here passes 4.5:1.
   - Hero overlay raised from 15% to 45% black so white heading text stays readable on the photo.
   - Live "active" nav colour (#2d2e33 on dark red) failed contrast; active item is white + underline.
   - Live footer/topbar link hover rgba(255,255,255,.7) replaced by underline (no colour-only cue). */

:root {
  --red: #bd2032;          /* top bar, red band, primary buttons */
  --red-dark: #a31c2a;     /* header band */
  --ink: #202022;          /* body text */
  --heading: #2d2e33;
  --dark: #242427;         /* footer, dark buttons, mobile menu */
  --black: #000;
  --muted-bg: #ededed;
  --border: #e5e5e7;
  --gold: #cca749;
  --doc-bg: #fbf0ef;       /* tint of the live download-manager rows */
  --meta: #56565c;         /* 6.3:1 on #fbf0ef, 6.9:1 on #fff */
  --focus: #202022;
  --container: 1200px;
  --gutter: 15px;
  font-size: 100%;
}
@media (min-width: 640px) { :root { --gutter: 20px; } }
@media (min-width: 960px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; font-size: 1rem; line-height: 1.625; color: var(--ink); background: #fff; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--black); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, address, table, figure { margin: 0 0 20px; }
p, li, dd { overflow-wrap: break-word; }
address { font-style: normal; }
a[href^="tel:"] { white-space: nowrap; }
ul ul { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0 0 20px; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, .h3, .h5 { margin: 0 0 20px; font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; font-weight: 600; color: var(--heading); letter-spacing: 1px; line-height: 1.3; }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; letter-spacing: 0; line-height: 1.4; }
h4 { font-size: 1.125rem; letter-spacing: 0; }
.h5, h5 { font-size: 1rem; line-height: 1.4; font-weight: 800; text-transform: uppercase; }
@media (min-width: 960px) {
  h1 { font-size: 2.625rem; }
  h2 { font-size: 2.25rem; }
  h3, .h3 { font-size: 1.5rem; }
}
.center { text-align: center; }
.text-primary { color: var(--red); }
.small { font-size: 0.8125rem; line-height: 1.5; }
.lead { font-size: 1.25rem; line-height: 1.5; }

/* Focus: always visible, colour switches on dark backgrounds */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark, .topbar, .navbar, .hero, .preview-banner { --focus: #fff; }
.subnav, .nav-panel { --focus: #fff; }
.btn-white:focus-visible, .btn-light:focus-visible { outline-color: var(--focus); }
main:focus { outline: none; }

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

.skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; background: #fff; color: var(--black); padding: 12px 18px; font-weight: 700; border: 3px solid var(--black); }
.skip-link:focus { top: 8px; }

.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: calc(900px + 2 * var(--gutter)); }

.icon { width: 20px; height: 20px; flex: none; vertical-align: middle; }

/* ---------- Preview banner ---------- */
.preview-banner { background: #111; color: #fff; font-size: 0.8125rem; line-height: 1.4; text-align: center; padding: 6px var(--gutter); }
.preview-banner p { margin: 0; }
.preview-banner a { color: #fff; font-weight: 700; }

/* ---------- Top bar ---------- */
.topbar { background: var(--red); color: #fff; padding: 10px 0; font-size: 1rem; }
.topbar a { color: #fff; }
.topbar a:hover { text-decoration-thickness: 2px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px 30px; flex-wrap: wrap; }
.topbar p { margin: 0; }
.topbar .sep { margin: 0 4px; }

/* ---------- Header / navigation ---------- */
/* The menu bar sits on the top of the page photo, as on the live site, so the header shows one
   red (the top bar) above the faded photo instead of two reds. Every page starts with a hero, and
   the hero overlay guarantees at least 5.3:1 for white text on any photo (see Hero below), so the
   menu text and focus outline keep their contrast. --nav-h is the bar's height; site.js keeps it
   equal to the bar's real height (larger text, extra spacing), so the hero text is never covered. */
:root { --nav-h: 140px; }
.site-header { position: relative; }
.navbar { background: transparent; color: #fff; position: absolute; left: 0; right: 0; z-index: 50; }
.navbar-inner { display: flex; align-items: center; gap: 25px; min-height: 140px; }
.logo { display: block; flex: none; padding: 10px 0; }
.logo img { width: 120px; height: 120px; }
.nav-panel { display: flex; align-items: center; flex: 1; gap: 10px 25px; min-width: 0; flex-wrap: wrap; }
.mainnav { flex: 1 1 auto; min-width: 0; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0 25px; list-style: none; margin: 0; padding: 0; align-items: stretch; }
.nav-list > li { position: relative; display: flex; }
.nav-list > li > a, .sub-toggle {
  display: flex; align-items: center; gap: 6px; min-height: 70px; padding: 0; color: #fff; font: inherit; font-size: 1rem;
  font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; white-space: nowrap;
}
.nav-list > li > a::after, .sub-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: transparent; }
.nav-list > li > a:hover::after, .sub-toggle:hover::after, .sub-toggle[aria-expanded="true"]::after,
.nav-list > li.is-current > a::after, .has-sub.is-current > .sub-toggle::after { background: #fff; }
.sub-toggle .chev { width: 14px; height: 14px; }
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.subnav { display: none; position: absolute; top: calc(100% - 10px); left: -15px; width: 250px; background: var(--black); padding: 15px; margin: 0; list-style: none; box-shadow: 0 1px 4px rgba(0,0,0,.14); z-index: 60; }
.js .sub-toggle[aria-expanded="true"] + .subnav { display: block; }
.no-js .has-sub:hover .subnav, .no-js .has-sub:focus-within .subnav { display: block; }
.subnav a { display: block; padding: 6px 0; color: #fff; font-weight: 800; letter-spacing: 1px; text-decoration: none; }
.subnav a:hover, .subnav a:focus-visible { color: var(--gold); text-decoration: underline; }
.subnav a[aria-current="page"] { text-decoration: underline; }
.nav-buttons { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.nav-panel-info { display: none; }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; margin: 0; padding: 12px 20px; min-height: 48px; line-height: 1.5; font: inherit; font-size: 1rem; font-weight: 800; text-transform: uppercase;
  text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .1s, color .1s, border-color .1s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #fff; color: var(--red); border-color: var(--red); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: transparent; color: var(--dark); border-color: var(--dark); }
.navbar .btn-dark:hover { color: #fff; border-color: #fff; }
.btn-light { background: var(--muted-bg); color: var(--ink); }
.btn-light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-white, .section-primary .btn-white { background: #fff; color: var(--dark); }
.btn-white:hover, .section-primary .btn-white:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-meta { display: block; font-size: 0.75rem; font-weight: 400; text-transform: none; line-height: 1.3; }
.btn-doc .doc-meta, .section-muted .btn-doc .doc-meta { color: inherit; } 
.btn-doc .doc-meta { display: block; font-size: 0.75rem; font-weight: 400; text-transform: none; line-height: 1.3; }
.btn-icon { display: inline-flex; align-items: center; gap: 10px; }
.btn .ext-icon { width: 14px; height: 14px; margin-left: 8px; vertical-align: -1px; }
.ext-icon { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; }

/* ---------- Hero ---------- */
/* The photo is decorative (CSS background). The overlay alone guarantees contrast: even if every
   pixel of the photo were pure white, white text sits on at most rgb(122,102,104) = 5.3:1. If the
   photo fails to load, the text sits on the dark red background colour under the overlay (15:1). */
.hero { position: relative; color: #fff; background-color: var(--red-dark);
  background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url("../img/mescal-j6-fire-department.jpg");
  background-size: cover; background-position: center; }
:root { --hero-overlay: rgba(40, 8, 12, .62); }
.hero h1 { color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hero-home { padding: calc(var(--nav-h) + 70px) 0 70px; }
.hero-home h1 { font-size: 2rem; line-height: 1.2; max-width: 750px; margin-bottom: 20px; }
.hero-lead { font-size: 1.25rem; line-height: 1.5; max-width: 600px; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hero-text { max-width: 800px; }
.hero-page { padding: calc(var(--nav-h) + 40px) 0 40px; text-align: center; }
.hero-sub { margin: 16px 0 0; font-size: 1.125rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hero-actions { margin: 24px 0 0; }
.section-xsmall { padding: 15px 0 !important; }
.eeo { margin: 0; }
.short-rule { width: 70px; }
#volunteer-form { background: var(--muted-bg); border-color: var(--muted-bg); }
@media (min-width: 960px) {
  .hero-home { padding: calc(var(--nav-h) + 140px) 0 140px; }
  .hero-home h1 { font-size: 3rem; }
  .hero-page { padding: calc(var(--nav-h) + 70px) 0 70px; }
}

/* ---------- Sections & columns ---------- */
.section { padding: 40px 0; }
.section-small { padding: 40px 0 !important; }
@media (min-width: 1050px) { .section { padding: 70px 0; } }
.section-primary { background: var(--red); color: #fff; }
.section-primary h2, .section-primary h3, .section-primary a { color: #fff; }
.section-muted { background: var(--muted-bg); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.cols-divider > * + * { border-top: 3px solid var(--border); padding-top: 40px; }
.section-primary .cols-divider > * + * { border-color: rgba(255,255,255,.2); }
@media (min-width: 960px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-wide-gap { gap: 70px; }
  .cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .cols-divider > * + * { border-top: 0; padding-top: 0; border-left: 3px solid var(--border); padding-left: 40px; }
}
.media-row { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .media-row { grid-template-columns: 1fr 1fr; }
  .media-row-small { grid-template-columns: 1fr 2fr; align-items: start; }
  .media-row-small-right { grid-template-columns: 2fr 1fr; align-items: start; }
}
.media-row p:last-child { margin-bottom: 0; }

/* ---------- Red band (home) ---------- */
.section-primary .h5 { color: #fff; }
.stack-buttons { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.stack-buttons .btn { width: 340px; max-width: 100%; }
.zoom-doc a, .section-primary .doc-line-icon { color: #fff; }
.doc-strong .doc-title { font-weight: 700; }

/* Accordion */
.accordion { margin-bottom: 20px; }
.acc-item + .acc-item { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px; }
.section-primary .acc-item + .acc-item { border-top-color: rgba(255,255,255,.2); }
.acc-heading { margin: 0; font-size: 1.25rem; letter-spacing: 0; }
.acc-toggle { display: flex; width: 100%; align-items: center; gap: 15px; padding: 0; border: 0; background: none; color: var(--heading); font: inherit; font-weight: 400; text-align: left; cursor: pointer; line-height: 1.4; }
.acc-toggle:hover { text-decoration: underline; }
.acc-icon { margin-left: auto; }  /* no transition: it animated on page load when JS collapses the panels */
.acc-toggle[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
.acc-panel { margin-top: 20px; }
.acc-panel > :last-child { margin-bottom: 0; }
.accordion-small .acc-heading { font-size: 1rem; }
.section-primary .acc-toggle { color: #fff; }
.acc-toggle .count { font-size: 0.875rem; color: var(--meta); margin-left: 6px; white-space: nowrap; }

/* ---------- Gray band (home) ---------- */
.col-title { font-size: 1.25rem; line-height: 1.5; font-weight: 700; color: var(--red); letter-spacing: 0; margin-bottom: 20px; }
.announce-list { list-style: none; padding: 0; }
.announce-list li { display: flex; gap: 15px; margin-bottom: 20px; }
.announce-list p { margin: 0; }
.announce-list strong { color: var(--heading); }
.announce-list .bullet { color: var(--heading); margin-top: 3px; }
.event-list { list-style: none; padding: 0; margin: 0 0 20px; }
.event { border-left: 5px solid var(--red); margin: 0 0 10px; padding: 0 20px 0 10px; }
.event-title { display: block; font-weight: 600; color: var(--black); }
.event-date, .event-time { display: block; font-size: 0.875rem; }
.doc-list-plain { list-style: none; padding: 0; margin: 0 0 20px; }
.doc-list-plain li + li { margin-top: 10px; }
.doc-list-plain .doc { display: inline-flex; gap: 12px; align-items: flex-start; color: var(--black); }
.doc-line-icon { color: var(--heading); margin-top: 2px; }
.doc-meta { font-size: 0.8125rem; }
.section-muted .doc-meta, .doc-rows .doc-meta { color: var(--meta); }
.section-primary .doc-meta { color: #fff; }
.new-docs { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--red); }
.meeting { margin-bottom: 20px; }
.meeting-head { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: 0; }
.meeting-kind, .meeting-date { display: block; }
.meeting-times { margin: 0 0 10px; }
.fb-block { max-width: 760px; }

/* ---------- Public records ---------- */
.intro-row { display: flex; gap: 20px; align-items: center; }
.intro-row p { margin: 0; }
.intro-icon { width: 40px; height: 40px; color: #fff; }
.year-nav ul, .cat-jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-jump { gap: 6px 18px; font-size: 0.875rem; margin-bottom: 25px; }
.cat-jump .count { color: var(--meta); }
.records-filter { background: var(--muted-bg); padding: 20px; margin: 10px 0 40px; }
.records-filter label { display: block; font-weight: 700; margin-bottom: 6px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-row input { flex: 1 1 240px; min-width: 0; }
.records-filter .hint { margin: 8px 0 0; font-size: 0.875rem; }
.filter-status { margin: 8px 0 0; font-weight: 700; }
.filter-status:empty { display: none; }
.year { padding-top: 30px; margin-top: 10px; border-top: 3px solid var(--border); }
.year-title { margin-bottom: 12px; }
.doc-rows { list-style: none; padding: 0; margin: 0; }
.doc-row { background: var(--doc-bg); border-radius: 4px; margin-bottom: 12px; }
.doc-row-link { display: flex; gap: 16px; align-items: center; padding: 16px 20px; color: var(--black); text-decoration: none; }
.doc-row-link:hover .doc-title { text-decoration: underline; }
.doc-row-link .doc-title { font-weight: 700; }
.doc-icon { width: 36px; height: 36px; flex: none; }
.doc-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.doc-row-link .doc-meta { margin-left: 8px; }
.back-top { font-size: 0.875rem; margin-top: 10px; }
.records-help { margin-top: 30px; }
.year-current { border-top: 0; padding-top: 0; margin-top: 0; }
.year-intro { max-width: 900px; }
.archive-callout { margin-top: 40px; padding: 25px 30px; background: var(--muted-bg); border-left: 6px solid var(--dark); }
.archive-callout h2 { margin-bottom: 12px; }
.year-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.year-links a, .year-nav a { display: inline-block; padding: 8px 14px; border: 2px solid var(--dark); color: var(--dark); background: #fff; font-weight: 700; text-decoration: none; min-width: 64px; text-align: center; }
.year-links a:hover, .year-nav a:hover { background: var(--dark); color: #fff; }
.archive-notice { background: #fff6e0; border-left: 6px solid #8a6100; padding: 20px 25px; margin-bottom: 30px; }
.archive-notice h2 { margin-bottom: 10px; }
.archive-notice p:last-child { margin-bottom: 0; }
.notices .archive-notice { text-align: left; }
.archived-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #fff; background: var(--dark); }
.placeholder { background: #fff0a8; color: #3d2f00; font-weight: 700; padding: 0 4px; }
.doc-note { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.doc-row .doc-note { padding: 0 20px 14px 72px; }
.doc-row .doc-desc { margin: -6px 0 0; padding: 0 20px 14px 72px; font-size: 0.875rem; color: var(--ink); }
.notice-docs li { display: flex; flex-direction: column; align-items: center; }
.notice-docs .doc-note { margin-top: 6px; text-align: center; }
.notices-archive-link { margin-top: 30px; }
[hidden] { display: none !important; }

/* ---------- Public notices ---------- */
.notice { text-align: center; padding: 30px 0; border-bottom: 1px solid var(--border); }
.notice-title { font-size: 1.375rem; letter-spacing: 0; margin-bottom: 8px; }
.notice-date { font-weight: 400; }
.notice-docs { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.notice-img { margin: 0 auto 20px; max-width: 480px; width: 100%; }
.notice-info { padding-top: 30px; }
.btn-doc { display: inline-flex; flex-direction: column; align-items: center; }
.plain-list { list-style: none; padding: 0; }

/* ---------- Inner pages ---------- */
.photo-stack { display: grid; gap: 20px; }
.board-grid { list-style: none; padding: 0; display: grid; gap: 0 40px; grid-template-columns: minmax(0,1fr); margin-bottom: 30px; }
.board-grid li { padding: 20px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .board-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.board-name { font-size: 1.5rem; margin: 0 0 6px; position: relative; padding-left: 20px; }
.board-name::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; border-left: 6px solid var(--border); }
.board-role { font-weight: 800; text-transform: uppercase; color: var(--heading); margin: 0; padding-left: 20px; }
.locations { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.location { display: grid; gap: 20px; align-content: start; }
@media (min-width: 960px) {
  .locations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 0; }
  .location-stack:nth-child(1) { padding-right: 40px; border-right: 1px solid var(--border); }
  .location-stack:nth-child(2) { padding-left: 40px; }
  .location-row { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .location-row .location-text { padding-right: 40px; border-right: 1px solid var(--border); }
  .location-row .map { margin-left: 40px; width: calc(100% - 40px); }
}
.loc-note { display: block; font-size: 1rem; font-weight: 400; }
.map { width: 100%; min-height: 220px; border: 0; background: var(--muted-bg); }
.map-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px 16px; border: 1px solid #8a8a90; }
.map-card .map-pin { color: #bd2032; }
.map-card p { margin: 0; }
/* Live page: one centred column of white cards with a soft shadow, centred text */
.cards { list-style: none; padding: 0; margin: 0 auto; max-width: 750px; display: grid; gap: 0; grid-template-columns: minmax(0,1fr); text-align: center; }
.card { background: #fff; padding: 30px 40px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
@media (max-width: 639.98px) { .card { padding: 25px 20px; } }
.card p:last-child { margin-bottom: 0; }
.button-row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.legal-note { font-weight: 700; text-transform: uppercase; color: var(--red); }
.button-row { flex-direction: column; align-items: flex-start; }
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.875rem; }
.calendar caption { text-align: left; }
.calendar caption h2 { margin-bottom: 12px; }
.calendar th { background: var(--dark); color: #fff; padding: 6px; font-weight: 700; }
.calendar abbr { text-decoration: none; }
.calendar td { border: 1px solid #c9c9cd; height: 80px; vertical-align: top; padding: 4px 6px; overflow-wrap: anywhere; }
.calendar td.has-events { background: var(--doc-bg); }
.day-num { display: block; font-weight: 700; }
.cal-event { display: block; font-size: 0.75rem; line-height: 1.3; margin-top: 4px; }
.flyer { padding: 30px; border: 1px solid #c9c9cd; }
.flyer-flu { background: #fff; border-left: 10px solid #9c1f3f; }
.flyer-bp { background: #c8f1ec; border-left: 10px solid #00796b; text-align: center; }
.flyer-h { font-size: 2.5rem; line-height: 1.1; font-weight: 800; letter-spacing: 0; color: #263238; margin-bottom: 12px; }
.flyer-bp .flyer-h { font-size: 1.75rem; text-transform: uppercase; color: #000; }
.flyer-lead { font-size: 1.25rem; font-weight: 700; }
.flyer-from { font-weight: 700; color: #263238; }
.flyer-facts { margin: 0 0 20px; }
.flyer-facts div { margin-bottom: 4px; }
.flyer-facts dt { display: inline; font-weight: 400; }
.flyer-facts dd { display: inline; margin: 0; font-weight: 700; }
.flyer-download { margin: 20px 0 0; }
.prose h2 { font-size: 1.5rem; margin-top: 40px; }
.sitemap li { margin-bottom: 8px; }

/* ---------- Forms ---------- */
.pv-form { background: #fff; padding: 30px; border: 1px solid #c9c9cd; }
.form-title { font-size: 1.375rem; letter-spacing: 0; }
.form-org { font-weight: 700; margin: 0 0 4px; }
.field { margin-bottom: 20px; min-width: 0; }
.field label, .group-legend { display: block; font-weight: 700; margin-bottom: 6px; }
.req { color: var(--red); font-weight: 700; white-space: nowrap; }
.label-note { font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, input[type=file], select {
  display: block; width: 100%; font: inherit; color: var(--ink); background: #fff; border: 2px solid #6b6b70; border-radius: 0; padding: 10px 12px; min-height: 48px; }
input[type=file] { padding: 8px; }
input[type=date], input[type=time] { max-width: 14em; }
.field-short input { max-width: 10em; }
select { max-width: 100%; text-overflow: ellipsis; }
textarea { min-height: 140px; resize: vertical; }
textarea[rows="2"] { min-height: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--black); }
.field.has-error input:not([type=radio]):not([type=checkbox]), .field.has-error textarea, .field.has-error select { border-color: var(--red); border-width: 3px; }
.field-group.has-error, .field-check.has-error { border-left: 4px solid #a01b2a; padding-left: 14px; }
.error { color: #a01b2a; font-weight: 700; margin: 6px 0 0; }
.error::before { content: "⚠ "; }
.hint { font-size: 0.875rem; margin: 0 0 6px; color: var(--meta); }
.preview-note { background: #fff6e0; border-left: 5px solid #8a6100; padding: 10px 14px; font-size: 0.875rem; }
.form-status:not(:empty) { margin-top: 20px; padding: 12px 16px; background: #e9f4ec; border-left: 5px solid #1e6b36; font-weight: 700; }
.form-req-note { font-size: 0.875rem; }
.error-summary { border: 4px solid #a01b2a; padding: 16px 20px; margin-bottom: 20px; background: #fff; }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.error-summary-title { font-size: 1.125rem; margin: 0 0 10px; letter-spacing: 0; color: var(--ink); }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: #a01b2a; font-weight: 700; }
/* Groups: sections, radio/checkbox groups, date + time. min-width: 0 lets fieldsets shrink to 320px. */
.pv-form fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
/* Floated legends are laid out like normal blocks (not drawn inside the fieldset's top border). */
.pv-form legend { float: left; width: 100%; padding: 0; white-space: normal; }
.pv-form legend + * { clear: both; }
.pv-form .form-section { margin: 36px 0 0; padding-top: 24px; border-top: 3px solid var(--border); }
.pv-form .form-section-4 { margin: 24px 0 0; padding-top: 16px; border-top-width: 1px; }
.pv-form .form-section-4:last-child { margin-bottom: 8px; }
.section-title { margin: 0 0 16px; font-size: 1.25rem; letter-spacing: 0; overflow-wrap: break-word; }
h4.section-title { font-size: 1.0625rem; color: var(--red-dark); }
.section-intro { margin: 0 0 20px; }
.pv-form .field-set { margin-bottom: 0; }
.field-set > .group-legend { margin-bottom: 10px; }
.options { display: flex; flex-direction: column; gap: 4px; }
.options-inline { flex-direction: row; flex-wrap: wrap; gap: 4px 28px; }
.option { display: flex; align-items: flex-start; gap: 10px; }
.option input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--red); }
.option label { font-weight: 400; margin: 0; padding: 0 0 4px; cursor: pointer; }
.field-check .option label { font-weight: 700; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
@media (min-width: 640px) {
  .field-row { grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); }
}
.conditional { margin: -8px 0 20px; padding: 14px 0 2px 18px; border-left: 4px solid var(--border); }
.no-js .conditional[hidden] { display: block; }
.form-note { background: var(--muted-bg); border-left: 5px solid var(--dark); padding: 12px 16px; font-size: 0.9375rem; }
.pv-form .form-note { background: #f4f4f5; }
.form-intro { margin-bottom: 24px; }
.before-start { margin-top: 30px; padding: 24px 28px; border: 1px solid #c9c9cd; border-left: 6px solid var(--red); }
.before-start .preview-note { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #fff; padding: 40px 0; }
.site-footer a { color: #fff; }
.site-footer hr { border-top-color: rgba(255,255,255,.2); margin: 30px 0 20px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .footer-about { grid-column: auto; } }
.footer-logo { float: left; width: 150px; height: 150px; margin: 0 20px 10px 0; }
.footer-about p { margin: 0; }
.footer-h { font-size: 1rem; font-weight: 800; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin: 0 0 15px; }
.footer-h-tight { margin-bottom: 4px; }
.footer-col p { margin: 0 0 15px; }
.footer-col .small { margin-bottom: 6px; }
.footer-label { font-weight: 700; text-transform: uppercase; margin-bottom: 4px !important; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.social { list-style: none; padding: 0; display: flex; gap: 10px; }
.icon-button { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); color: #fff; }
.icon-button:hover { background: #fff; color: var(--dark); }
.copyright { text-align: center; margin: 0; font-size: 0.875rem; }

/* ---------- Responsive header ---------- */
@media (max-width: 1099.98px) {
  :root { --nav-h: 100px; }
  .topbar { display: none; }
  .navbar-inner { min-height: 100px; flex-wrap: wrap; gap: 0; }
  .logo img { width: 80px; height: 80px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 48px; padding: 8px 14px; color: #fff; background: transparent; border: 2px solid #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: inline; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-panel { display: block; flex: 0 0 calc(100% + 2 * var(--gutter)); background: var(--dark); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 25px; width: calc(100% + 2 * var(--gutter)); }
  .js .nav-panel { display: none; }
  .js .nav-panel.is-open { display: block; }
  .no-js .nav-toggle { display: none; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li { display: block; border-bottom: 1px solid rgba(255,255,255,.15); }
  .nav-list > li > a, .sub-toggle { min-height: 52px; width: 100%; font-size: 1.125rem; font-weight: 700; }
  .nav-list > li > a::after, .sub-toggle::after { bottom: 8px; right: auto; width: 2.5em; }
  .sub-toggle .chev { margin-left: auto; width: 18px; height: 18px; }
  .subnav { position: static; width: auto; background: none; box-shadow: none; padding: 0 0 12px 20px; }
  .no-js .subnav { display: block; }
  .subnav a { font-weight: 700; font-size: 1rem; letter-spacing: 0; padding: 8px 0; }
  .nav-buttons { margin-top: 20px; flex-wrap: wrap; }
  .nav-buttons .btn-dark { border-color: #fff; }
  .nav-panel-info { display: block; color: #fff; margin-top: 20px; font-size: 0.9375rem; }
  .nav-panel-info a { color: #fff; }
  .nav-panel-info p, .nav-panel-info ul { margin: 0 0 12px; }
  .nav-panel-info li { margin-bottom: 8px; }
  .nav-panel-info hr { border-top-color: rgba(255,255,255,.2); margin: 12px 0; }
  /* Open phone menu: the bar goes back into the page flow and pushes the page down, so the menu
     never covers page content or a focused link. */
  html.menu-open .navbar { position: relative; background: var(--dark); }
  html.menu-open { --nav-h: 0px; }
}
/* Without JavaScript the bar's height can't be measured (it grows with larger text, and the phone
   menu is always shown), so the bar stays in the page flow on a solid background instead. */
html.no-js .navbar { position: relative; background: var(--dark); }
html.no-js { --nav-h: 0px; }

/* ---------- Small screens ---------- */
@media (max-width: 639.98px) {
  .doc-row-link { padding: 14px; gap: 12px; }
  .doc-icon { width: 28px; height: 28px; }
  .doc-row-link .doc-meta { margin-left: 0; display: block; }
  .doc-row .doc-note { padding: 0 14px 12px 54px; }
  .doc-row .doc-desc { padding: 0 14px 12px 54px; }
  .stack-buttons .btn { min-width: 0; width: 100%; }
  .footer-logo { width: 100px; height: 100px; }
  .pv-form { padding: 20px; }
  .calendar { font-size: 0.75rem; }
  .calendar th { padding: 4px 2px; }
  .calendar td { height: 60px; padding: 2px; }
  .btn { padding: 10px 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Print ---------- */
@media print {
  .preview-banner, .topbar, .nav-toggle, .nav-panel, .records-filter, .site-footer .social { display: none !important; }
  .hero { background: none; color: #000; } .hero h1 { color: #000; text-shadow: none; }
  .navbar { position: static; color: #000; } .hero-home, .hero-page { padding-top: 20px; }
  .acc-panel[hidden] { display: block !important; }
}

/* Events page: the live site shows the event list in a red panel */
.events-panel { background: var(--red); color: #fff; padding: 40px 30px; align-self: start; }
.events-panel .col-title { color: #fff; }
.events-panel a { color: #fff; }
.events-panel .event { border-left-color: #fff; }

/* Event detail pages */
.event-facts { margin: 0 0 24px; font-size: 1.125rem; }
.event-facts div { margin-bottom: 6px; }
.event-facts dt { display: inline; font-weight: 700; }
.event-facts dd { display: inline; margin: 0; }
.event-nav ul { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px 30px; border-top: 1px solid var(--border); padding-top: 20px; }

/* .Gov Mobile Info */
.link-list li { margin-bottom: 8px; }
.settings-table { border-collapse: collapse; width: 100%; max-width: 640px; }
.settings-table caption { text-align: left; }
.settings-table caption h2 { margin-bottom: 12px; }
.settings-table th, .settings-table td { text-align: left; padding: 8px 12px; border: 1px solid #c9c9cd; overflow-wrap: anywhere; vertical-align: top; }
.settings-table th { background: var(--muted-bg); font-weight: 700; width: 50%; }

/* Privacy policy */
.policy h2 { font-size: 1.5rem; }
.policy h3 { font-size: 1.25rem; margin-top: 30px; }
.policy h4 { font-size: 1rem; margin-top: 24px; }

/* Small screens: calendar days show a dot per event (the event list above has the details);
   the event name stays in the link for screen readers. */
@media (max-width: 599px) {
  .calendar td { padding: 2px; height: 56px; }
  .cal-event { min-height: 28px; display: flex; align-items: center; justify-content: center; }
  .cal-event::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
  .cal-event-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}