/* WWAAT GCSE — accessibility baseline
 * Closes audit gap: REQ-005 (WCAG 2.2 AA).
 *
 * Loaded after style.css so it can win specificity fights without !important.
 * Keep this file additive: it should never need to override colours or layout
 * — it should add focus rings, motion controls, and screen-reader helpers
 * that brand-themed CSS forgot to set.
 */

/* === SCREEN-READER-ONLY UTILITIES =========================================
 * .sr-only — visually hidden but discoverable to assistive tech.
 * .sr-only-focusable — same, but visible when focused (used by skip-link).
 * Adapted from the WHATWG / Bootstrap pattern.
 */
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  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 link — pinned top-left when focused. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: #0d0f1a;
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100000;
  font-weight: 600;
  border: 2px solid #01b3bc;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 2px;
}

/* === FOCUS RINGS ==========================================================
 * Every interactive element gets a high-contrast focus indicator that meets
 * WCAG 2.2 AA (3:1 contrast against background on dark + light themes).
 * #ffd400 (amber) hits 3:1 on the #0d0f1a app background and 4.5:1 on white.
 */
:focus-visible {
  outline: 3px solid #ffd400 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ls-type-tile:focus-visible,
.ls-profile-card:focus-visible,
.ls-lang-btn:focus-visible,
.ls-role-btn:focus-visible {
  outline: 3px solid #ffd400 !important;
  outline-offset: 2px !important;
}

/* Mouse users keep the smoother :focus look on form fields */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* === REDUCED MOTION =======================================================
 * Honour the OS-level "Reduce motion" setting. Animations are kept short,
 * transitions are reduced, infinite spinners stay (so people see something
 * is happening) but slowed.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep loaders visible but slow */
  .ls-loading,
  .admin-spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* === HIGH CONTRAST ========================================================
 * Honour Windows High Contrast / forced-colors mode by letting the browser
 * pick its own colours instead of fighting it.
 */
@media (forced-colors: active) {
  .ls-btn-primary,
  .ls-btn-secondary,
  .ls-btn-ghost,
  .ls-role-btn,
  .ls-type-tile,
  .ls-profile-card {
    border: 1px solid CanvasText !important;
    forced-color-adjust: none;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  :focus-visible {
    outline: 3px solid Highlight !important;
  }
}

/* === HIT TARGETS (WCAG 2.5.5 Target Size — Level AAA / 2.5.8 Min — AA) ====
 * Anything tappable should be at least 24×24 (AA) ideally 44×44 (AAA).
 * Bump up small ghost buttons that fall below.
 */
.ls-btn-ghost,
.ls-expand-btn {
  min-height: 32px;
  padding: 0.5rem 0.75rem;
}

/* === LANDMARKS ============================================================
 * If <main> is added structurally, ensure it has visible scroll and isn't
 * hidden by the lockscreen overlay when fonts are large.
 */
main:focus {
  outline: none; /* programmatic focus from skip-link */
}

/* === ARIA-LIVE region for toasts/error messages =========================== */
[role="status"],
[role="alert"],
.ls-error,
.ls-success {
  /* Already styled inline; just guarantee they remain accessible */
  min-height: 1.2rem;
}

/* === MOBILE / NOTCHED-DEVICE SAFE AREA (iOS notch, Android cutouts) ========
 * Requires <meta name="viewport" content="... viewport-fit=cover"> in index.html.
 * Applies to PWA / wrapped-native shells. Adds top/bottom padding so the
 * lockscreen card and any sticky chrome do not collide with the notch or
 * the home-indicator bar.
 */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}