/* =================================
   Homepage Utilities - Eternal Roam
   ================================= */

/* -----------------------------------------
   Utilities and Helper Classes
   ----------------------------------------- */
.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;
}

/* Performance Optimizations */
.saint-card img,
.destination-image img {
  will-change: transform;
  transition: transform 0.3s ease;
}

/* Improve touch response */
.saint-card,
.destination-slide,
.location-item,
.filter-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; /* Allow vertical scrolling while preventing default touch actions */
}

/* Ensure no JS conflicts with Journey Planner */
.home-interactive-map .leaflet-container,
.home-interactive-map .leaflet-pane,
.home-interactive-map .leaflet-control {
  z-index: 1 !important;
}

.home-interactive-map .leaflet-popup-pane {
  z-index: 2 !important;
}

.home-interactive-map .leaflet-tooltip-pane {
  z-index: 3 !important;
}

.home-interactive-map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.home-interactive-map .leaflet-popup-content {
  margin: 0.8rem;
}

/* -----------------------------------------
   Print Styles for Optimal Sharing
   ----------------------------------------- */
@media print {
  .hero-section,
  .scroll-prompt,
  .map-controls,
  .hand-nav,
  .social-buttons {
    display: none !important;
  }
  
  .section-title {
    font-size: 1.8rem !important;
  }
  
  .section-description {
    font-size: 1rem !important;
  }
  
  .dark-section {
    background-color: white !important;
    color: black !important;
    padding: 1rem !important;
    page-break-inside: avoid;
  }
  
  .saint-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .map-interface {
    flex-direction: column !important;
  }
  
  .map-sidebar {
    width: 100% !important;
    height: auto !important;
    background-color: white !important;
    color: black !important;
  }
  
  .map-container {
    height: 400px !important;
  }
}

/* -----------------------------------------
   Enhanced Mobile Touch Optimization
   ----------------------------------------- */
/* Prevent double-tap zoom */
.saint-card,
.saint-card *,
.destination-slide,
.destination-slide *,
.location-item,
.location-item *,
.filter-button,
.filter-button *,
.map-legend,
.map-legend * {
  touch-action: manipulation;
}

/* FIXED: Enhanced saint card touch optimization */
.saint-card {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Ensure minimum touch target size */
  min-height: 44px;
}

.saint-card .card-link {
  /* Enhanced touch target for links */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FIXED: Better mobile navigation */
.hand-nav {
  /* Larger touch targets on mobile */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 768px) {
  .hand-nav {
    min-width: 52px;
    min-height: 52px;
  }
}

/* Improve mobile scrolling performance */
.saints-hand-container,
.destination-slider,
.map-sidebar,
.locations-list {
  -webkit-overflow-scrolling: touch;
}

/* Better touch feedback */
.saint-card,
.destination-slide,
.location-item,
.filter-button {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Prevent default touch behaviors */
.map-container {
  touch-action: none; /* Required for proper map interaction */
}

/* Reduce animations on mobile for better performance */
@media (prefers-reduced-motion: reduce) {
  .saint-card,
  .destination-slide,
  .hand-nav {
    transition: none !important;
  }
  
  .scroll-icon {
    animation: none !important;
  }
  
  .hero-title,
  .hero-description {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .stars-backdrop,
  .hero-title,
  .title-accent,
  .scroll-indicator,
  .mouse-wheel,
  .scroll-arrow {
    animation: none;
  }
  
  .hero-title,
  .title-accent,
  .hero-content,
  .scroll-indicator {
    opacity: 1;
    transform: none;
  }
  
  .hero-section:hover .layer-deep,
  .hero-section:hover .layer-mid {
    transition: none;
  }
}