/**
 * LabShop Accessibility Styles
 * Focus states, reduced motion, and screen reader utilities
 */

/* ========== Focus Visible ========== */
/* Use :focus-visible for keyboard focus only */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Specific focus styles for common elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Primary color focus for branded elements */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* ========== Skip Link ========== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ========== Screen Reader Only ========== */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Show for screen readers but allow focus */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========== Reduced Motion ========== */
@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;
  }

  .btn.loading::after {
    animation: none;
  }
}

/* ========== High Contrast Mode ========== */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --color-text: #000;
    --color-text-muted: #333;
  }

  .btn {
    border-width: 2px;
  }

  .input,
  .textarea,
  .select {
    border-width: 2px;
  }
}

/* ========== Forced Colors (Windows High Contrast) ========== */
@media (forced-colors: active) {
  .btn {
    border: 2px solid currentColor;
  }

  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-danger {
    forced-color-adjust: none;
  }

  .icon-btn {
    border: 1px solid currentColor;
  }

  .badge {
    border: 1px solid currentColor;
  }

  /* Ensure focus is visible */
  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ========== Color Blindness Support ========== */
/* Ensure information isn't conveyed by color alone */
.error-message::before {
  content: "⚠ ";
}

.success-message::before {
  content: "✓ ";
}

.warning-message::before {
  content: "⚡ ";
}

/* ========== Text Spacing ========== */
/* Support for users who increase text spacing */
@supports (word-spacing: 0.16em) {
  .content {
    word-spacing: inherit;
    line-height: 1.5;
    letter-spacing: inherit;
  }
}

/* ========== Minimum Font Size ========== */
/* Prevent text from becoming too small */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ========== ARIA States ========== */
[aria-hidden="true"] {
  display: none;
}

[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== Expanded/Collapsed Indicators ========== */
[aria-expanded="false"] .caret-down,
[aria-expanded="true"] .caret-right {
  display: none;
}

[aria-expanded="true"] .caret-down,
[aria-expanded="false"] .caret-right {
  display: inline;
}

/* ========== Modal Backdrop ========== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ========== Focus Trap Indicator ========== */
.focus-trap {
  outline: none;
}

/* ========== Loading Announcements ========== */
[aria-busy="true"] {
  position: relative;
}

/* ========== Error Announcements ========== */
[role="alert"] {
  /* Ensure screen readers announce immediately */
  speak: assertive;
}

/* ========== Live Regions ========== */
[aria-live="polite"] {
  /* Wait for user to finish current action */
  speak: polite;
}

[aria-live="assertive"] {
  /* Interrupt immediately */
  speak: assertive;
}

/* ========== Keyboard Navigation Hints ========== */
.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: monospace;
  font-size: var(--font-size-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--color-border);
}

/* ========== Printable Focus ========== */
@media print {
  :focus {
    outline: none;
  }

  .sr-only {
    display: none;
  }
}