/* Shared accessibility styles.
 *
 * Loaded on every page. Two things live here: the visually-hidden helper used by
 * form labels, and the skip link required by WCAG 2.4.1 Bypass Blocks.
 *
 * Keep this file small and generic. Page-specific styling stays in the page.
 */

/* Available to screen readers, invisible on screen. Used for form labels where the
 * design carries the label as a placeholder. Note the placeholder alone fails
 * WCAG 1.3.1 and 3.3.2: it is not reliably announced, and it vanishes on typing. */
.cca-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.4.1 Bypass Blocks. Hidden until focused, so it costs the design nothing
 * but lets a keyboard user jump the navigation on every page. */
.cca-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2147483001;
  padding: 10px 16px;
  border-radius: 6px;
  background: #002FA7;
  color: #fff;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  transition: top .15s ease;
}

/* !important because the page runtime and the design system both write styles
 * after this file loads, and a skip link that stays off-screen when focused is
 * worse than no skip link at all. */
.cca-skip:focus,
.cca-skip:focus-visible {
  top: 8px !important;
  outline: 3px solid #7D97FF;
  outline-offset: 2px;
}

/* A visible focus state everywhere, so keyboard users can always see where they are.
 * :focus-visible means mouse users never see it. WCAG 2.4.7 Focus Visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #7D97FF;
  outline-offset: 2px;
}