/**
 * global.css — Accessibility & Focus Layer
 *
 * This file only adds what styles.css doesn't have:
 *  - Keyboard focus indicators (WCAG 2.4.7 AA)
 *  - Keyboard navigation detection
 *  - Reduced motion support
 *  - Large text mode
 *
 * It does NOT redefine CSS variables, buttons, inputs, or
 * headings — those live in styles.css and tailwind config.
 */

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY — FOCUS INDICATORS (WCAG 2.4.7 Level AA)
   ═══════════════════════════════════════════════════════════ */

/**
 * Only show focus rings when navigating via keyboard.
 * The .is-keyboard-nav class is added by js/utils/keyboard-nav.js
 * when Tab/Shift+Tab is detected, and removed on mousedown.
 */

/* By default: remove outline (mouse users don't need it) */
*:focus {
  outline: none;
}

/* When keyboard navigation detected: show outline on interactive elements */
body.is-keyboard-nav button:focus,
body.is-keyboard-nav input:focus,
body.is-keyboard-nav textarea:focus,
body.is-keyboard-nav select:focus,
body.is-keyboard-nav a:focus,
body.is-keyboard-nav [role="button"]:focus,
body.is-keyboard-nav [role="menuitem"]:focus,
body.is-keyboard-nav [role="tab"]:focus {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Always show :focus-visible (modern browsers) */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Dark mode: brighter focus ring */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] a:focus-visible {
  outline-color: #60a5fa;
}

/* High contrast support */
@media (prefers-contrast: more) {
  button:focus-visible,
  input:focus-visible,
  a:focus-visible {
    outline-width: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LARGE TEXT ACCESSIBILITY MODE
   ═══════════════════════════════════════════════════════════ */

html.text-large,
body.text-large {
  font-size: 112%;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP-ONLY UTILITY
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}