/* =============================================================
   accessibility.css
   City of Moreno Valley — Accessibility Utility Styles
   WCAG 2.1 AA remediation — 2026-02-26
   ============================================================= */


/* -------------------------------------------------------------
   VISUALLY HIDDEN
   Hides content visually while keeping it available to screen
   readers and other assistive technologies.

   Use on:
     - New tab warnings:  <span class="visually-hidden">(opens in new tab)</span>
     - Form labels:       <label class="visually-hidden">Search...</label>
     - Section headings:  <h2 class="visually-hidden">Top Links</h2>

   Do NOT use display:none or visibility:hidden — those remove
   content from the accessibility tree entirely.
   ------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------
   DROPDOWN PANEL SHOW / HIDE
   Controls visibility of desktop nav dropdown panels based on
   the aria-expanded state of the trigger button.

   This keeps the visual open/closed state in sync with what
   assistive technology announces — if aria-expanded="true",
   the panel is visible; if "false", it is hidden.

   Requires the HTML structure:
     <button aria-expanded="false" aria-controls="panel-id">
     <div id="panel-id"> ... </div>
   ------------------------------------------------------------- */

/* Hide all panels by default */
nav[aria-label="Main navigation"] button[aria-expanded] + div {
  display: none;
}

/* Show panel when its trigger button is expanded */
nav[aria-label="Main navigation"] button[aria-expanded="true"] + div {
  display: block;
}


/* -------------------------------------------------------------
   FOCUS STYLES
   Ensures keyboard focus indicator is visible on all interactive
   elements. Browsers have default focus styles but they are
   often too subtle to meet WCAG SC 1.4.11 (Non-text Contrast)
   and SC 2.4.7 (Focus Visible).
   ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}