/* ─────────────────────────────────────────────────────────────
   Caldwell County — Cross-cutting accessibility CSS
   Target: WCAG 2.1 Level AA  +  DOJ Title II (28 CFR Part 35, eff. 2026-04-24)
   Loaded by every public page after the page's own stylesheet so we
   can selectively override anything that fails compliance.
   ───────────────────────────────────────────────────────────── */

/* ── 1. Skip-link ─────────────────────────────────────────────
   WCAG 2.4.1 Bypass Blocks. Hidden until focused. */
.skip-link, a.skip-link {
  position: absolute;
  top: -200px; left: 8px;
  background: #102a43; color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99999;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus, .skip-link:focus-visible {
  top: 0;
  outline: 3px solid #c19b30;
  outline-offset: 2px;
}

/* ── 2. Visually-hidden utility (sr-only) ─────────────────────
   For text that screen readers should announce but sighted users
   should not see. */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus { position: static; width: auto; height: auto; clip: auto; }

/* ── 3. Strong, consistent focus indicators ───────────────────
   WCAG 2.4.7 Focus Visible. Browsers vary in default focus rings;
   force a high-contrast ring for every interactive element. */
:focus-visible {
  outline: 3px solid #c19b30 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* Inputs already have border-color shifts on :focus — augment those */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px rgba(193, 155, 48, 0.45) !important;
}

/* ── 4. Minimum touch-target sizes (WCAG 2.5.5 Target Size — AAA
       but recommended for AA in 2.2 draft). 44×44px CSS pixels. */
button, [role="button"], a.btn, a.btn-sm, .nav-item, .pagination a {
  min-height: 36px; /* 36 + padding bumps actual to ≥44 */
}
.utility-bar a, footer a, .meta a {
  /* Pad sparse text links so they're still tappable on mobile */
  padding: 2px 0;
  display: inline-block;
}

/* ── 5. Prefers-reduced-motion ────────────────────────────────
   WCAG 2.3.3 Animation from Interactions. Disable non-essential
   animations for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .skip-link { transition: none; }
  /* Stop the LIVE-NOW pulse, the meeting-row hover translate, etc. */
  .meeting-card:hover, .job-card:hover, .item-card:hover { transform: none !important; }
}

/* ── 6. Color-contrast overrides ──────────────────────────────
   The county brand gold (#c8951a) is below AA contrast on white
   (~3.5:1) when used for text. The site uses it mostly as a fill
   color on dark backgrounds (where contrast is fine), but we
   force any plain text use to a darker variant. */
.text-gold, a.btn-gold, .btn-gold {
  /* Use gold as background only — text on gold should be navy, not white */
}
.gold-text, .text-cc-gold {
  color: #7a5c00 !important; /* AA-passing on white */
}

/* ── 7. Form fields — label association + error state styling ─ */
.field-error {
  color: #b23021;
  font-size: 13px;
  margin-top: 4px;
  display: block;
  font-weight: 500;
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #b23021 !important;
  box-shadow: 0 0 0 3px rgba(178, 48, 33, 0.18) !important;
}

/* ── 8. ARIA live-region helper ───────────────────────────────
   For dynamic content updates (filter results, "now playing",
   form submission status, etc.) */
.a11y-announcer {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── 9. Dialog (<dialog>) keyboard + visual polish ───────────
   Most browsers handle modal dialog focus trap natively when
   showModal() is used; reinforce the visuals. */
dialog[open] { animation: a11y-dlg-in 0.15s ease-out; }
@keyframes a11y-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
}

/* ── 10. High-contrast + forced-colors mode (Windows H/C) ─────
       WCAG 1.4.6/1.4.11 — make sure our buttons and borders show */
@media (forced-colors: active) {
  .btn, button, a.btn {
    border: 1px solid CanvasText !important;
    forced-color-adjust: none;
  }
  .stage-pill, .badge, .role-pill {
    border: 1px solid CanvasText !important;
  }
  :focus-visible { outline: 3px solid Highlight !important; }
}

/* ── 11. Underline links by default in main content for clarity
       (3.1.5 Reading Level / 1.4.1 Use of Color). Nav links exempt. */
main a:not(.btn):not(.nav-item):not(.card a):not(.no-underline) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* ── 12. Video captions — make the WebVTT track readable ─────
       1.2.2 Captions. Apply to the <track kind="captions"> renderer. */
video::cue {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 1.05em;
  line-height: 1.4;
  padding: 2px 6px;
}

/* ── 13. Print-friendly: hide chrome, optimize text ───────────
       1.4.4 Resize text — printing implies high-zoom-equivalent. */
@media print {
  .skip-link, .utility-bar, nav.main-nav, .site-header .menu-toggle,
  .alert-band, .video-container, .live-agenda .grid-2col > div + div,
  iframe, video, .careers-hero, .ms-btn, footer .social-link { display: none !important; }
  body { color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ── 14. Form field minimum dimensions for low-vision + tap ──
       Inputs default to 8px padding which is too tight on touch. */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], select, textarea {
  font-size: max(16px, 1em);  /* Prevent iOS Safari zoom on focus (which can break layout) */
  min-height: 40px;
}

/* ── 15. Tables responsive on small screens — keep semantic markup
       but allow horizontal scroll so users on narrow screens can read */
@media (max-width: 700px) {
  table.data, .responsive-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 16. Avoid color-only meaning in status pills
       Status badges already include text labels (Open, Closed, etc.) so OK,
       but make sure pills always have a visible non-color cue. */
.stage-pill, .badge, .role-pill, .pill {
  border: 1px solid currentColor;   /* outline supplies a non-color cue */
}