/* ============================================================
   ACCESSIBILITY HELPERS — invisible by default
   Loaded after design tokens; applies to all pages.
   ============================================================ */

/* Visually-hidden but exposed to screen readers (skip links, sr-only labels) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-main-content link — only visible on focus */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--krew-ink, #0E0D0C);
  color: var(--krew-grain, #EDE4D3);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--krew-spark, #FF5405);
  border-radius: 0 0 6px 0;
  transform: translateY(-110%);
  transition: transform 120ms ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

/* Global keyboard-focus ring. Mouse clicks won't trigger it (focus-visible)
   so the visual design stays identical for sighted/mouse users. */
:focus-visible {
  outline: 2px solid var(--krew-spark, #FF5405);
  outline-offset: 3px;
  border-radius: 2px;
}
/* When an author rule sets outline:none on hover/focus, our :focus-visible
   above wins because it's later. But some component rules use box-shadow
   instead — that's fine, ours layers on top harmlessly. */

/* Don't double-up the ring on form controls that already get a styled
   focus state via box-shadow (existing .field input, .sms-card input). */
.field input:focus-visible,
.field select:focus-visible,
.sms-card input:focus-visible,
.sms-card .sms-cta:focus-visible {
  outline-offset: 2px;
}

/* Honor reduced-motion globally — site-wide kill switch for non-essential
   animation. Existing scoped rules in landing.css still apply on top. */
@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;
  }
}