/**
 * THE CHEDI PRIVATE RESIDENCES — ACCESSIBILITY
 * WCAG 2.1 AA compliance layer for semantic HTML and interactive elements.
 *
 * Includes:
 *   - Skip navigation link
 *   - Focus indicators for all interactive elements
 *   - Screen reader only utility
 */

/* ================================================================
   1. SKIP NAVIGATION LINK
   Visually hidden by default, appears on focus for keyboard users
   ================================================================ */

.skip-nav {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.8rem 1.6rem;
  background: var(--chedi-gold, #d4af37);
  color: var(--chedi-black, #1a1a1a);
  font-family: var(--font-body, 'Segoe UI', sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: var(--liquid-glass-radius, 12px);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-nav:focus {
  top: 1rem;
  outline: 2px solid var(--chedi-black, #1a1a1a);
  outline-offset: 2px;
}

/* ================================================================
   2. FOCUS INDICATORS
   Applied to interactive elements: buttons, links, form controls
   ================================================================ */

/* Default focus indicator */
:focus-visible {
  outline: 2px solid var(--chedi-gold, #d4af37);
  outline-offset: 3px;
}

/* Enhanced focus for primary buttons and CTAs */
.btn:focus-visible,
.pill:focus-visible,
.nav__cta:focus-visible,
button:focus-visible {
  outline: 2px solid var(--chedi-gold-light, #f0d894);
  outline-offset: 3px;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Form input focus (use custom focus style, remove outline) */
.input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  /* Assumes custom focus style is applied via input styling */
}

/* Link focus */
a:focus-visible {
  outline: 2px solid var(--chedi-gold, #d4af37);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default focus outline from elements that have custom focus */
*:focus {
  outline: none;
}

/* ================================================================
   3. SCREEN READER ONLY UTILITY
   Hide visually but keep accessible 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;
}

/* Ensure sr-only text is still accessible when focused */
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ================================================================
   4. REDUCED MOTION PREFERENCES
   Respect prefers-reduced-motion for users with vestibular issues
   ================================================================ */

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

  .skip-nav {
    transition: none;
  }
}

/* ================================================================
   5. HIGH CONTRAST MODE SUPPORT
   Support Windows High Contrast mode
   ================================================================ */

@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
  }

  .skip-nav {
    border: 2px solid currentColor;
    outline: 2px solid currentColor;
  }
}

/* ================================================================
   6. COLOR CONTRAST HELPERS
   Ensure text meets WCAG AA standards (4.5:1 for normal text)
   ================================================================ */

/* Ensure text on glass backgrounds has sufficient contrast */
.glass-panel {
  color: var(--text-color, #fff);
}

.glass-panel--dark {
  color: var(--chedi-black, #1a1a1a);
}

/* ================================================================
   7. INTERACTIVE ELEMENT STATES
   Ensure all interactive elements are clearly identifiable
   ================================================================ */

/* Active/pressed state indicator */
[aria-pressed='true'],
[aria-current='page'] {
  position: relative;
}

[aria-pressed='true']::after,
[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chedi-gold, #d4af37);
}

/* Disabled state indicator */
[disabled],
[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ================================================================
   8. FORM ACCESSIBILITY
   Improve form label and error messaging accessibility
   ================================================================ */

label {
  font-weight: 500;
}

/* Error message styling */
.form-error,
[role='alert'] {
  color: var(--error-color, #e74c3c);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

[aria-invalid='true'] {
  border-color: var(--error-color, #e74c3c);
}

/* ================================================================
   9. TOOLTIP AND POPOVER ACCESSIBILITY
   Ensure tooltips don't obscure content
   ================================================================ */

[role='tooltip'],
.tooltip {
  background: rgba(26, 26, 26, 0.95);
  color: var(--chedi-gold, #d4af37);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  z-index: 1000;
  pointer-events: none;
}