/*
 * Accessibility focus-visible override.
 *
 * Loaded last in the cascade. Restores a visible keyboard focus indicator
 * on every interactive element across the app, overriding the
 * `outline: none` / `outline: 0` rules that currently strip it.
 *
 * `:focus-visible` only fires when the browser judges the focus as
 * keyboard-style (tab navigation, screen reader cursor), so mouse clicks
 * still do not show a ring — matching pre-existing visual behavior for
 * pointer users.
 *
 * Color: #018484 (dark teal, already used in .story-step.active).
 * 2px thickness + 4.5:1 contrast against white passes WCAG 2.2 AAA
 * Focus Appearance (SC 2.4.13) and WCAG 2.1 AA Non-text Contrast
 * (SC 1.4.11).
 *
 * To disable for a test session: remove the <link> tag to this file from
 * templates/_a11y_focus.html, or disable this stylesheet in devtools.
 */

/* Universal keyboard-focus ring. !important + body descendant selector
 * wins over any `:focus { outline: none }` regardless of source order. */
body :focus-visible {
  outline: 2px solid #018484 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Form controls often have their own :focus border-color change
 * (many input rules in this codebase swap to #3498db). Force the border
 * to match brand teal so the border + outline read as one coherent
 * ring instead of two-toned. outline-offset: 0 keeps them flush. */
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible {
  outline: 2px solid #018484 !important;
  outline-offset: 0 !important;
  border-color: #018484 !important;
}

/* Explicitly re-enable on the element classes the app strips via
 * `:focus { outline: none }`. Belt-and-suspenders for cases where a
 * stylesheet loads later in the document. */
body button:focus-visible,
body a:focus-visible,
body [tabindex]:focus-visible,
body [role="button"]:focus-visible,
body [role="tab"]:focus-visible,
body [role="menuitem"]:focus-visible,
body [contenteditable="true"]:focus-visible,
body .counselor-tab:focus-visible,
body .sidebar-toggle:focus-visible,
body .counselor-notification-bell:focus-visible,
body .modal-content:focus-visible,
body .dashboard-search:focus-visible,
body .dashboard-sort:focus-visible {
  outline: 2px solid #018484 !important;
  outline-offset: 2px !important;
}

/* Dark-on-light elements (e.g., primary buttons) — add a subtle inner
 * white ring so the teal outline stays visible against dark fills. */
body button.btn-primary:focus-visible,
body .login-btn:focus-visible,
body .reset-btn:focus-visible,
body .counselor-signup-btn:focus-visible,
body .btn.btn-primary:focus-visible {
  outline: 2px solid #018484 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #ffffff !important;
}