/* Colorado Soak - Custom Styles */

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Optimize font loading */
body {
  font-display: swap;
}

/* Improve image loading performance */
img {
  loading: lazy;
  decoding: async;
  max-width: 100%;
  height: auto;
}

/* Optimize critical images - hero and category images */
.hero-image,
.category-image,
.bg-cover {
  loading: eager;
  fetchpriority: high;
}

/* Reduce layout shift and optimize image dimensions */
.category-card img,
.location-card img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Optimize background images */
.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Optimize for different screen sizes */
@media (max-width: 768px) {
  .hero-image {
    max-width: 100%;
    height: auto;
  }
  
  /* Smaller images on mobile */
  .category-card img,
  .location-card img {
    aspect-ratio: 4/3;
  }
}

@media (min-width: 769px) {
  /* Larger images on desktop but still optimized */
  .category-card img,
  .location-card img {
    aspect-ratio: 16/9;
  }
}

/* Improve button contrast for accessibility */
button[type="submit"] {
  background-color: #0d9488;
  color: white;
}

button[type="submit"]:hover {
  background-color: #0f766e;
}

/* Ensure sufficient contrast for teal buttons */
.bg-teal-500 {
  background-color: #0d9488 !important;
}

.text-teal-600 {
  color: #0f766e !important;
}

/* Optimize for mobile performance */
@media (max-width: 768px) {
  .hero-image {
    max-width: 100%;
    height: auto;
  }
}