/**
 * Accessibility: focus, reduced motion, high contrast
 * Use across Studio OS, workflow center, portal sidebar, and backend.
 */

/* Visible focus for keyboard users; avoid focus ring for mouse-only */
:where(a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) {
  outline: 2px solid var(--color-primary-500, var(--school-primary, #0d6efd));
  outline-offset: 2px;
}

/* Optional: respect reduced motion for transitions/animations */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skip link: visible on focus, hidden otherwise */
.visually-hidden-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;
}
.visually-hidden-focusable:focus {
  position: absolute !important;
  z-index: 1060;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem 1rem !important;
  margin: 0.5rem !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}