/**
 * MAINERMEDIA Global Accessibility Styles
 * WCAG 2.1 Level AA Compliance
 */

/* =================================================================
   1. FOCUS STYLES - WCAG 2.4.7 Focus Visible
   ================================================================= */

/* Global focus outline for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}

/* Ensure focus is visible even with custom styling */
a:focus,
button:focus,
[role="button"]:focus,
[tabindex="0"]:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Remove default outline only when focus-visible is supported */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  [tabindex="0"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

/* Navigation link focus states */
nav a:focus-visible {
  background: rgba(16, 185, 129, 0.2) !important;
  border-radius: 9999px;
}

/* Skip link styles - WCAG 2.4.1 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: #10b981;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* =================================================================
   2. DROPDOWN KEYBOARD ACCESSIBILITY - WCAG 2.1.1
   ================================================================= */

/* Make dropdowns accessible via keyboard (focus-within) */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Show dropdown on hover OR focus-within */
.dropdown-container:hover .dropdown-menu,
.dropdown-container:focus-within .dropdown-menu,
.dropdown-container.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown button focus state */
.dropdown-trigger:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
  border-radius: 9999px;
}

/* Dropdown menu items focus */
.dropdown-menu a:focus-visible,
.dropdown-menu [role="menuitem"]:focus-visible {
  background: rgba(16, 185, 129, 0.15) !important;
  color: white !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px #10b981 !important;
}

/* =================================================================
   3. FORM ACCESSIBILITY - WCAG 1.3.1, 3.3.1, 3.3.2
   ================================================================= */

/* Visible labels */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db;
}

/* Required field indicator */
.form-label[data-required="true"]::after,
label[data-required="true"]::after {
  content: " *";
  color: #f87171;
}

/* Input focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
  border-color: #10b981 !important;
}

/* Error states - WCAG 3.3.1 */
.input-error,
[aria-invalid="true"] {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

.error-message {
  color: #f87171;
  font-size: 14px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.error-message::before {
  content: "⚠";
}

/* Success states */
.input-success,
[aria-invalid="false"] {
  border-color: #10b981 !important;
}

/* Placeholder contrast fix - WCAG 1.4.3 */
::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* =================================================================
   4. COLOR CONTRAST FIXES - WCAG 1.4.3
   ================================================================= */

/* Ensure gray text meets 4.5:1 contrast ratio */
.text-gray-500 {
  color: #9ca3af !important; /* Upgraded to gray-400 equivalent */
}

/* Accessible muted text */
.text-muted {
  color: #9ca3af;
}

/* =================================================================
   5. SCREEN READER UTILITIES
   ================================================================= */

/* Screen reader only - hides visually but accessible to AT */
.sr-only {
  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;
}

/* Make sr-only content visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* =================================================================
   6. REDUCED MOTION - WCAG 2.3.3
   ================================================================= */

@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;
  }
  
  /* Keep some essential transitions but make them instant */
  .dropdown-menu {
    transition: none !important;
  }
  
  /* Disable Tailwind animations */
  .animate-ping,
  .animate-pulse,
  .animate-spin,
  .animate-bounce,
  .animate-fade,
  .animate-fadeIn {
    animation: none !important;
  }
  
  /* Keep static appearance for pulsing elements */
  .animate-ping {
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* Disable custom keyframe animations */
  [class*="float"],
  [style*="animation"],
  .pulse,
  .glow-pulse,
  .pulse-glow,
  .pulse-dot,
  .brand-glow-pulse,
  .modal-icon-pulse,
  .modal-border-glow,
  .button-shine {
    animation: none !important;
  }
  
  /* Disable hover transforms and transitions */
  *:hover,
  *:focus {
    transform: none !important;
  }
  
  /* Keep essential opacity changes instant but functional */
  .group:hover .group-hover\\:opacity-100,
  .group:focus-within .group-focus-within\\:opacity-100 {
    opacity: 1 !important;
    transition: none !important;
  }
  
  /* Disable blur animations */
  [class*="blur-3xl"] {
    animation: none !important;
  }
}

/* =================================================================
   7. TOUCH TARGET SIZE - WCAG 2.5.5
   ================================================================= */

/* Minimum 44x44px touch targets */
@media (pointer: coarse) {
  a,
  button,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Checkbox/radio labels should also be large enough */
  label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* =================================================================
   8. LINK DISTINCTION - WCAG 1.4.1
   ================================================================= */

/* Ensure links are distinguishable from surrounding text */
main a:not([class*="btn"]):not([class*="button"]):not(.nav-link) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

main a:not([class*="btn"]):not([class*="button"]):not(.nav-link):hover {
  text-decoration-thickness: 2px;
}

/* =================================================================
   9. MODAL ACCESSIBILITY - WCAG 2.4.3
   ================================================================= */

/* Modal backdrop */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9998;
}

/* Modal focus trap indicator */
.modal-content:focus {
  outline: none;
}

/* Focus ring for modal close buttons */
.modal-close:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* =================================================================
   10. HIGH CONTRAST MODE SUPPORT
   ================================================================= */

@media (prefers-contrast: high) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
  }
  
  .dropdown-menu a:focus-visible {
    background: HighlightText !important;
    color: Highlight !important;
  }
}

/* =================================================================
   11. CHECKBOX AND RADIO FOCUS - WCAG 2.4.7
   ================================================================= */

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3) !important;
}

/* Custom checkbox/radio styling with focus */
.check-item:focus-within,
.radio-item:focus-within {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

/* =================================================================
   12. BUTTON STATES
   ================================================================= */

button:disabled,
[role="button"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading state */
button[aria-busy="true"] {
  cursor: wait;
}

/* =================================================================
   13. LIVE REGION STYLES
   ================================================================= */

[aria-live] {
  /* Ensure live regions are visible when they have content */
}

[role="alert"] {
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #f87171;
}

[role="status"] {
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}