/**
 * SUPERPRECIO ACCESSIBILITY STYLES
 * Version: 1.0.0
 *
 * WCAG 2.2 Level AA Compliance
 * Ensures Superprecio is accessible to all users
 *
 * Features:
 * - Skip links for keyboard navigation
 * - Enhanced focus indicators
 * - Screen reader utilities
 * - Reduced motion support
 * - High contrast mode support
 * - Improved touch targets
 */

/* =============================================
   SKIP LINKS
   Allow keyboard users to skip to main content
   ============================================= */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: var(--sp-space-md, 1rem) var(--sp-space-lg, 1.5rem);
  background-color: var(--sp-color-primary, #136213);
  color: var(--sp-color-text-inverse, #ffffff);
  text-decoration: none;
  font-weight: var(--sp-font-weight-semibold, 600);
  border-radius: 0 0 var(--sp-radius-md, 0.375rem) 0;
  box-shadow: var(--sp-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
  transition: top 0.2s ease-in-out;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--sp-color-text-inverse, #ffffff);
  outline-offset: -3px;
}

/* =============================================
   FOCUS INDICATORS
   Enhanced visible focus for all interactive elements
   Meets WCAG 2.2 AA requirement (3:1 contrast)
   ============================================= */

/* Global focus styles for all focusable elements */
*:focus-visible {
  outline: 3px solid var(--sp-color-primary, #136213);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Button focus */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
  outline: 3px solid var(--sp-color-primary, #136213);
  outline-offset: 3px;
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--sp-color-primary, #136213);
  outline-offset: 0;
  border-color: var(--sp-color-primary, #136213);
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Link focus */
a:focus-visible {
  outline: 3px solid var(--sp-color-primary, #136213);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Card/interactive element focus */
.card:focus-visible,
.sp-product-card:focus-visible {
  outline: 3px solid var(--sp-color-primary, #136213);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.3);
}

/* Remove default browser focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================
   SCREEN READER UTILITIES
   Content visible only to screen readers
   ============================================= */

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

/* Allow focus on SR-only elements */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =============================================
   ARIA LIVE REGIONS
   Announcements for dynamic content
   ============================================= */

.aria-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status messages */
.status-message {
  padding: var(--sp-space-md, 1rem);
  border-radius: var(--sp-radius-md, 0.375rem);
  margin-bottom: var(--sp-space-md, 1rem);
  border-left: 4px solid;
  background-color: var(--sp-color-surface-2, #e9ecef);
}

.status-message--success {
  border-color: var(--sp-color-success, #136213);
  background-color: var(--sp-color-success-light, #d4edda);
  color: var(--sp-color-success-text, #0f5132);
}

.status-message--error {
  border-color: var(--sp-color-danger, #dc3545);
  background-color: var(--sp-color-danger-light, #f8d7da);
  color: var(--sp-color-danger-text, #842029);
}

.status-message--info {
  border-color: var(--sp-color-info, #0dcaf0);
  background-color: var(--sp-color-info-light, #cff4fc);
  color: var(--sp-color-info-text, #055160);
}

/* =============================================
   TOUCH TARGETS
   Minimum 44x44px for WCAG 2.2 AA compliance
   ============================================= */

/* Ensure all interactive elements meet touch target size */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
[role="button"],
[role="link"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Exception for inline text links */
a:not(.btn):not([role="button"]) {
  min-width: auto;
  min-height: auto;
  display: inline;
}

/* Icon buttons need padding for touch target */
.btn-icon,
button.icon-only {
  padding: var(--sp-space-sm, 0.5rem);
}

/* =============================================
   KEYBOARD NAVIGATION
   Enhanced keyboard interaction
   ============================================= */

/* Focus trap (for modals/dialogs) */
.focus-trap {
  position: relative;
}

.focus-trap:focus {
  outline: none;
}

/* Keyboard-only indicators */
.keyboard-focus-only:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================
   REDUCED MOTION
   Respects user preference for reduced animations
   WCAG 2.2 Success Criterion 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 essential animations */
  .spinner,
  .loading,
  [role="progressbar"] {
    animation-duration: 1s !important;
  }
}

/* =============================================
   HIGH CONTRAST MODE
   Enhanced visibility for high contrast users
   WCAG 2.2 Success Criterion 1.4.6
   ============================================= */

@media (prefers-contrast: high) {
  /* Increase border width */
  *,
  *::before,
  *::after {
    border-width: 2px !important;
  }

  /* Enhance focus indicators */
  *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }

  /* Increase text contrast */
  body {
    color: #000000;
    background-color: #ffffff;
  }

  /* Button contrast */
  .btn {
    border: 3px solid currentColor !important;
  }

  /* Link underlines always visible */
  a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
  }
}

/* =============================================
   DARK MODE HIGH CONTRAST
   ============================================= */

@media (prefers-color-scheme: dark) and (prefers-contrast: high) {
  body {
    color: #ffffff;
    background-color: #000000;
  }
}

/* =============================================
   LANGUAGE DIRECTION (RTL) SUPPORT
   ============================================= */

[dir="rtl"] .skip-link {
  left: auto;
  right: 0;
  border-radius: 0 0 0 var(--sp-radius-md, 0.375rem);
}

/* =============================================
   LOADING STATES
   Accessible loading indicators
   ============================================= */

.loading-indicator {
  display: inline-block;
  position: relative;
}

.loading-indicator::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: var(--sp-space-sm, 0.5rem);
  border: 3px solid var(--sp-color-border-light, #dee2e6);
  border-top-color: var(--sp-color-primary, #136213);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect reduced motion for loading */
@media (prefers-reduced-motion: reduce) {
  .loading-indicator::after {
    animation: none;
    border-top-color: var(--sp-color-primary, #136213);
  }
}

/* =============================================
   ERROR STATES
   Accessible error messaging
   ============================================= */

.error-message,
.form-error {
  display: block;
  color: var(--sp-color-danger-text, #842029);
  font-size: var(--sp-font-size-sm, 0.875rem);
  margin-top: var(--sp-space-xs, 0.25rem);
  font-weight: var(--sp-font-weight-medium, 500);
}

/* Error icon for inputs */
input.error,
input[aria-invalid="true"],
textarea.error,
textarea[aria-invalid="true"],
select.error,
select[aria-invalid="true"] {
  border-color: var(--sp-color-danger, #dc3545);
  border-width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* =============================================
   PRINT STYLES
   Ensure accessibility in print
   ============================================= */

@media print {
  /* Hide skip links in print */
  .skip-link {
    display: none;
  }

  /* Ensure links show URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--sp-color-text-secondary, #6c757d);
  }

  /* Don't show URL for skip links or anchors */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  .skip-link::after {
    content: "";
  }

  /* Ensure focus indicators are visible */
  *:focus {
    outline: 2px solid #000000;
  }
}

/* =============================================
   FORCED COLORS MODE (Windows High Contrast)
   ============================================= */

@media (forced-colors: active) {
  /* Use system colors */
  button,
  .btn {
    border: 2px solid ButtonText;
  }

  input,
  textarea,
  select {
    border: 2px solid FieldText;
  }

  /* Focus visible in forced colors */
  *:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* =============================================
   TOOLTIPS (ACCESSIBLE)
   ============================================= */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-space-xs, 0.25rem) var(--sp-space-sm, 0.5rem);
  background-color: var(--sp-color-text-primary, #212529);
  color: var(--sp-color-text-inverse, #ffffff);
  font-size: var(--sp-font-size-sm, 0.875rem);
  white-space: nowrap;
  border-radius: var(--sp-radius-sm, 0.25rem);
  z-index: var(--sp-z-tooltip, 1070);
  pointer-events: none;
}

/* =============================================
   UTILITIES
   Helper classes for accessibility
   ============================================= */

/* Hide visually but keep for screen readers */
.a11y-hidden {
  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;
}

/* Hide from everyone including screen readers */
.hidden {
  display: none !important;
}

/* NOTE: Do NOT add [aria-hidden="true"] { display: none } here.
   Bootstrap Icons use aria-hidden="true" and would be hidden. */

/* =============================================
   BROWSER COMPATIBILITY
   ============================================= */

/* Firefox outline support */
@supports (-moz-appearance: none) {
  *:focus-visible {
    outline-style: solid;
  }
}

/* Safari/WebKit focus support */
@supports (-webkit-appearance: none) {
  *:focus-visible {
    outline-style: auto;
  }
}

/* =============================================
   END OF ACCESSIBILITY STYLES
   ============================================= */