/*
 * Accessibility styles for the evennia_accessibility contrib.
 *
 * Provides:
 *   - Screen-reader utility classes (sr-only, sr-only-focusable)
 *   - High-contrast keyboard focus rings (:focus-visible)
 *   - prefers-reduced-motion + prefers-color-scheme: dark token overrides
 *   - Form field/error styles that pair with the _form_field.html partial
 *   - Fieldset / legend / focus-within styling for grouped form regions
 *
 * CSS custom properties under --evennia-a11y-* — override in your own
 * stylesheet to retheme. All have sensible fallbacks so the styles work
 * without any token configuration on the host site.
 */


/* =========================================================
   1. Design tokens — light mode defaults
   ========================================================= */

:root {
  --evennia-a11y-color-danger:       #c0392b;
  --evennia-a11y-color-accent:       #3d5c7a;
  --evennia-a11y-color-surface-alt:  #e8e6e0;
  --evennia-a11y-color-text:         #212529;
  --evennia-a11y-color-focus-ring:   #ffb700;  /* high-contrast amber, never colour-only */
  --evennia-a11y-radius-sm: 0.2rem;
  --evennia-a11y-radius-md: 0.375rem;
}


/* =========================================================
   2. Dark mode token overrides — applied when OS prefers dark
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --evennia-a11y-color-danger:       #e57373;
    --evennia-a11y-color-accent:       #5a82a6;
    --evennia-a11y-color-surface-alt:  #242628;
    --evennia-a11y-color-text:         #e8e6e0;
    --evennia-a11y-color-focus-ring:   #ffb700;
  }
}


/* =========================================================
   3. Reduced-motion — disable transitions and smooth-scroll
   ========================================================= */

@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;
  }
}


/* =========================================================
   4. Focus rings — visible, high-contrast, never colour-only
   ========================================================= */

/* Remove browser default, apply our own on keyboard focus */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--evennia-a11y-color-focus-ring, #ffb700);
  outline-offset: 2px;
  border-radius: var(--evennia-a11y-radius-sm, 0.2rem);
}

/* Bootstrap buttons and links often suppress focus — restore it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--evennia-a11y-color-focus-ring, #ffb700);
  outline-offset: 2px;
}


/* =========================================================
   5. Screen-reader utilities
   ========================================================= */

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveals on focus (skip links, sr-only-focusable pattern) */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* =========================================================
   6. Form field styles — pair with templates/_form_field.html
   ========================================================= */

/* Required field marker — visual asterisk with sr-only text in the label */
.form-required-marker {
  color: var(--evennia-a11y-color-danger, #c0392b);
  margin-left: 0.2em;
  font-weight: 700;
}

/* Per-field error text */
.form-field-error {
  color: var(--evennia-a11y-color-danger, #c0392b);
  font-size: 0.875em;
  margin-top: 0.25rem;
}

/* Parent class applied to form-group when a field has errors */
.has-error .form-control {
  border-color: var(--evennia-a11y-color-danger, #c0392b);
}

.has-error label {
  color: var(--evennia-a11y-color-danger, #c0392b);
}

/* Form actions row */
.form-actions {
  border-top: 1px solid var(--evennia-a11y-color-surface-alt, #e8e6e0);
  padding-top: 1rem;
}


/* =========================================================
   7. Fieldset / legend / focus-within
   ========================================================= */

fieldset.evennia-a11y-fieldset {
  border: 1px solid var(--evennia-a11y-color-surface-alt, #e8e6e0);
  border-radius: var(--evennia-a11y-radius-md, 0.375rem);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

legend.evennia-a11y-legend,
.form-legend {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0.5rem;
  color: var(--evennia-a11y-color-text, inherit);
  width: auto;
}

/* Focus-within ring on fieldset so keyboard users see the active grouping */
fieldset.evennia-a11y-fieldset:focus-within {
  outline: 2px solid var(--evennia-a11y-color-accent, #3d5c7a);
  outline-offset: 2px;
}