/* =====================================================================
   classof2000.info — Accessibility layer (Task #54, WCAG 2.1 AA)
   Load AFTER theme.css. Self-hosted, no CDN. Additive only: this file
   only tightens focus, motion, targets, and screen-reader affordances —
   it does not restyle the brand.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Skip link — reinforce the theme.css rule and make it robust even if
   theme.css load order changes. Visible only on keyboard focus.
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--ghhs-blue, #0B2C5C);
  outline-offset: 2px;
}

/* The main landmark receives focus after the skip link; don't paint a ring
   on the whole page region when it is programmatically focused. */
#main-content:focus { outline: none; }

/* ---------------------------------------------------------------------
   2. Universal visible focus — never remove an outline without a
   replacement. Applies a strong, on-brand ring to EVERY focusable thing
   for keyboard users (:focus-visible), including elements Bootstrap
   would otherwise leave subtle.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--ghhs-gold-bright, #FFC72C);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On the dark blue navbar/footer/hero, a gold ring can wash out — use a
   white ring there for guaranteed 3:1 against the blue. */
.navbar-ghhs :focus-visible,
.site-footer :focus-visible,
.hero-ghhs :focus-visible {
  outline-color: #ffffff;
}

/* Bootstrap components that manage their own shadow: keep BOTH the shadow
   and a real outline so it survives forced-colors / high-contrast mode. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible {
  outline: 3px solid var(--ghhs-gold-bright, #FFC72C);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. Reduced motion — honor the user preference. Disables the card lift,
   Bootstrap fades/collapses, smooth scroll, and any transition/animation.
   --------------------------------------------------------------------- */
@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;
  }
  .card,
  .card-hover:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------
   4. Touch / click targets — icon-only controls must be at least ~44px so
   they are operable (WCAG 2.5.5 / 2.5.8). Applies to the navbar toggler,
   alert close buttons, and any .btn-icon convention.
   --------------------------------------------------------------------- */
.btn-icon,
.navbar-toggler,
.btn-close {
  min-width: 44px;
  min-height: 44px;
}
.btn-close {
  background-position: center;
  background-size: 1rem;
}
/* Small icon buttons inside dense tables may opt out with .btn-icon-sm but
   still keep a 32px minimum + adequate padding. */
.btn-icon-sm {
  min-width: 32px;
  min-height: 32px;
}

/* ---------------------------------------------------------------------
   5. Forms — make required + invalid state perceivable beyond color alone.
   --------------------------------------------------------------------- */
.form-label .required,
.form-label abbr[title="required"] {
  color: var(--bs-danger, #B32637);
  text-decoration: none;
  font-weight: 700;
  margin-left: .15rem;
}
/* Error text is never color-only: pair it with an icon convention. */
.invalid-feedback::before {
  content: "\26A0\FE0E"; /* warning sign, text-style */
  margin-right: .35rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   6. Screen-reader-only utility (in case Bootstrap's is purged) + a
   focusable variant for "skip"-style links.
   --------------------------------------------------------------------- */
.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,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---------------------------------------------------------------------
   7. Tables / DataTables — keyboard + readability helpers.
   --------------------------------------------------------------------- */
/* Give wide tables a keyboard-scrollable, labelled region. Wrap tables in
   <div class="table-responsive" role="region" aria-label="…" tabindex="0">. */
.table-responsive:focus-visible {
  outline: 3px solid var(--ghhs-gold-bright, #FFC72C);
  outline-offset: -2px;
}
/* Sortable header affordance beyond color: DataTables sets aria-sort; show a
   caret so sort direction is not conveyed by color/position alone. */
table thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: .7em; }
table thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: .7em; }

/* ---------------------------------------------------------------------
   8. Images — uploaded media should never collapse layout; broken alt text
   stays readable.
   --------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }
img[alt] { font-style: italic; color: var(--ghhs-muted, #5B6470); }

/* ---------------------------------------------------------------------
   9. Forced-colors (Windows High Contrast) — keep borders/outlines.
   --------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .card,
  .form-control,
  .form-select {
    border: 1px solid ButtonText;
  }
  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ---------------------------------------------------------------------
   10. Link affordance — ensure in-content links are distinguishable by more
   than color (underline on hover/focus is already in theme; add persistent
   underline inside prose/article bodies where density is high).
   --------------------------------------------------------------------- */
.prose a,
.article-body a,
.card-body p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}