/* ========================================
 * 2. BASE STYLES & ACCESSIBILITY
 * ======================================== */
/**
 * ACCESSIBILITY UTILITIES
 * ========================
 * Essential utilities for screen readers and accessibility
 */
/* Screen reader only content - visually hidden but accessible */
.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;
}
/**
 * RESPONSIVE MEDIA
 * ================
 * Prevent images and videos from breaking layout
 */
img,
video {
  max-width: 100%;
  height: auto;
}
/**
 * REDUCED MOTION ACCESSIBILITY
 * =============================
 * Respects user's motion preferences for accessibility
 * Disables animations for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions globally */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Remove transform animations but keep visual feedback */
  .amenity-chip:hover,
  .spot-card-button:hover,
  .quick-time-btn:hover,
  #amenities-toggle:hover,
  #auto-search-toggle:hover {
    transform: none !important;
  }

  .amenity-chip:hover {
    background-color: var(--neutral-200) !important;
    box-shadow: none !important;
  }

  .dark .filter-chip:hover {
    background-color: var(--neutral-600) !important;
  }
}
/* PERFORMANCE OPTIMIZATIONS */
/* Enable hardware acceleration for smooth animations */
/* CAREFUL: Only apply to leaf elements, not parent containers */
.spot-card {
  transform: translateZ(0);
}
/* Parent containers (#listings-sheet, #listings-overlay) get isolation instead */

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) have been moved to dark-mode.css */
/* This prevents duplication and ensures a single source of truth */