/*!
 * UGA FACS Accessibility Patch (WCAG 2.1 AA helpers)
 * Drop-in CSS you can load site-wide (last in cascade).
 * Notes:
 * - Uses :focus-visible for keyboard-only focus rings.
 * - Includes a visible skip-link style (if your markup has one).
 * - Adds sensible defaults for links, form focus, reduced motion, and SR-only utility.
 */

/* ---------- 1) Keyboard focus visibility (WCAG 2.4.7) ---------- */

/* Global keyboard focus ring */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid #BA0C2F;         /* UGA red */
  outline-offset: 3px;
  border-radius: 6px;
}

/* Suppress focus ring for mouse users while keeping it for keyboard users */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Avoid “clipped outline” when parents hide overflow */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  position: relative;
  z-index: 2;
}

/* Header/nav-specific enhancement (helps Programs / People / Search / Menu) */
.site-header :where(a, button):focus-visible,
header :where(a, button):focus-visible,
.nav :where(a, button):focus-visible {
  background-color: rgba(186, 12, 47, 0.12);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- 2) Skip link (WCAG 2.4.1) ---------- */
/* If you already have a skip link like <a class="skip-link" href="#main">Main content</a> */
.skip-link,
a[href="#main"],
a[href="#content"],
a[href="#main-content"] {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  transform: translateY(-200%);
  padding: 0.65rem 0.9rem;
  background: #ffffff;
  color: #111111;
  border: 2px solid #BA0C2F;
  border-radius: 999px;
  text-decoration: none;
  z-index: 9999;
}

/* Show skip link on keyboard focus */
.skip-link:focus,
.skip-link:focus-visible,
a[href="#main"]:focus,
a[href="#content"]:focus,
a[href="#main-content"]:focus {
  transform: translateY(0);
}

/* If the skip link jumps to a target, make that target obvious */
:where(#main, #content, #main-content):target {
  scroll-margin-top: 6rem;
  outline: 3px dashed #BA0C2F;
  outline-offset: 6px;
}

/* ---------- 3) Links (WCAG 1.4.1 “Use of Color”) ---------- */
/* Make links look like links by default (you can scope this if you prefer) */
:where(main, .content, .wysiwyg, article) a:not(.btn):not([class*="button"]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Improve underline visibility when text wraps */
:where(main, .content, .wysiwyg, article) a {
  text-decoration-thickness: from-font;
}

/* ---------- 4) Forms (WCAG 3.3.x + usability) ---------- */
:where(input, select, textarea) {
  line-height: 1.2;
}

/* Strong focus for form controls */
:where(input, select, textarea):focus-visible {
  outline: 3px solid #BA0C2F;
  outline-offset: 2px;
}

/* Give required/invalid fields a visible cue (works with native validation/ARIA) */
:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):invalid {
  border-color: #BA0C2F;
}

/* Make placeholders less “real text”-like (still readable) */
::placeholder {
  opacity: 0.75;
}

/* ---------- 5) Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6) Touch target help (best-effort; WCAG 2.5.5 is AAA, but helps AA usability) ---------- */
/* Don’t blow up layout; just ensure tiny icon buttons have some padding */
:where(button, a)[aria-label]:not(.btn) {
  min-height: 32px;
  min-width: 32px;
}

/* ---------- 7) Screen-reader-only utility class ---------- */
/* Use: <span class="sr-only">Extra context</span> */
.sr-only {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* When you want it to become visible on focus (e.g., skip links inside nav) */
.sr-only-focusable:active,
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  clip: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
  white-space: normal !important;
}

/* ---------- 8) Common “outline removal” anti-pattern override ---------- */
/* If legacy CSS nukes outlines, this tries to bring them back safely */
:where(a, button, input, select, textarea):focus {
  outline-color: #BA0C2F;
}