/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  border-radius: var(--border-radius-md);
  z-index: var(--z-index-toast);
  transition: top var(--transition-duration-fast) var(--transition-timing-out);
}

.skip-to-content:focus {
  top: var(--spacing-2);
  left: var(--spacing-2);
  outline: none;
  box-shadow: var(--shadow-lg);
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

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

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

/* High contrast mode support */
@media (forced-colors: active) {
  .button,
  .card,
  .nav-link {
    border: 1px solid ButtonText;
  }
}

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

/* Not screen reader only - undo sr-only */
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast text */
.high-contrast-text {
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
}

/* Large click areas for better accessibility */
.clickable-large {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Focus trap indicator */
.focus-trap-indicator {
  position: fixed;
  bottom: var(--spacing-4);
  right: var(--spacing-4);
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  z-index: var(--z-index-toast);
  box-shadow: var(--shadow-lg);
}

/* Color contrast helpers */
.contrast-safe {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

/* Focus trap overlay */
.focus-trap-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-index-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ARIA live regions */
.aria-live-polite {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
}

/* Keyboard navigation indicator */
.keyboard-nav *:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Touch target sizes for mobile */
@media (max-width: 768px) {
  button,
  .button,
  [role="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  .nav-link,
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increase spacing between clickable items */
  .nav-menu .nav-link {
    margin: var(--spacing-1) 0;
  }
}

/* Error message styling for form accessibility */
.error-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
  display: block;
}

/* Success message styling */
.success-message {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
  display: block;
}

/* Fieldset legend styling for better form accessibility */
fieldset legend {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

/* Required field indicator */
.required::after {
  content: '*';
  color: var(--color-error);
  margin-left: var(--spacing-1);
}

/* Disabled state indicator */
[disabled],
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Current page indicator for screen readers */
.current-page {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
}

/* Breadcrumb navigation for screen readers */
nav[aria-label="breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Table captions for accessibility */
table caption {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2);
  text-align: left;
}

/* Image alt text reminder for developers */
img:not([alt]) {
  outline: 2px solid var(--color-error);
  position: relative;
}

img:not([alt])::after {
  content: 'Missing alt text';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color-error);
  color: white;
  font-size: var(--font-size-xs);
  padding: var(--spacing-1);
}