/* Custom Styles for Darling Harbour Restaurants */


.hero-banner {
  position: relative;
  width: 100%;
  height: 90vh; /* 90% of the viewport height - adjust as needed */
  overflow: hidden;
  display: flex; /* Helps with centering content */
  align-items: center;
  justify-content: center;
}

.hero-banner video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%; /* Ensures it covers the screen, even if narrow */
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1; /* Places the video behind the content */
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white; /* Make sure text is readable over the video */
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Adds shadow for readability */
}

/* Style for lazy loading images */
.lazy-load {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Hero background image with a dark overlay for text readability */
.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1504754524776-8f4f37790774?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

/* Helper classes for maintaining aspect ratio on responsive images/divs */
.aspect-ratio-4-3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 3 / 4 = 0.75 */
}

.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
}

/* Styling for the price badge on restaurant cards */
.price-badge {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Styling for the filter dropdown in the hero section */
.filter-dropdown {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* --- Scroll Animation Styles --- */

/* Initial state for elements that will animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Read the --delay custom property, defaulting to 0s */
    transition-delay: var(--delay, 0s); 
}

/* Final state when the element becomes visible */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom properties for staggered animation delays (used by Tailwind classes like .delay-100) */
.delay-100 { --delay: 100ms; }
.delay-200 { --delay: 200ms; }
.delay-300 { --delay: 300ms; }
.delay-400 { --delay: 400ms; }
.delay-500 { --delay: 500ms; }
.delay-600 { --delay: 600ms; }

/* A simple skeleton loading animation for image placeholders */
.skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}



/* Custom Styles for Flickity Carousel */
.main-carousel .flickity-button {
    background: rgba(30, 64, 175, 0.5); /* Transparent Harbour Blue */
    transition: background-color 0.2s ease;
}
.main-carousel .flickity-button:hover {
    background: rgba(30, 64, 175, 0.8); /* Darker blue on hover */
}
.main-carousel .flickity-prev-next-button {
    width: 32px;
    height: 32px;
}
.main-carousel .flickity-button-icon {
    fill: white; /* This makes the arrow icon white */
}
.main-carousel .flickity-page-dots .dot {
    background: rgb(110, 110, 110);
    opacity: 0.6;
}
.main-carousel .flickity-page-dots .dot.is-selected {
    background: #1e40af; /* Harbour Blue */
    opacity: 1;
}

/* Add this to your style.css file */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image fill the container */
}

/* Styling for the card footer and new button */
.card-footer-text {
    font-size: 0.875rem; /* 14px */
}

.card-button {
    background-color: #1e40af; /* Harbour Blue */
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem; /* 6px */
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.card-button:hover {
    background-color: #0891b2; /* Harbour Teal */
}

/*
  New rule to force a consistent height for all card image containers,
  effectively cropping any oversized images.
*/
.card-image-container {
    position: relative;
    width: 100%;
    height: 250px; /* You can adjust this pixel value to make images taller or shorter */
    overflow: hidden;
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the area without distortion */
}

/* Sets a neutral background for slider slides during transition */
.swiper-slide {
    background-color: #e5e7eb; /* A light gray color */
}

/*
  This prevents the "flicker" by keeping the slider container
  invisible until the Swiper JavaScript has fully initialized it.
*/
.restaurant-card-slider {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.restaurant-card-slider.swiper-initialized {
    opacity: 1;
}

/* Broader fallback, if you don’t want to add rte-output in templates */
.container article ul { list-style: disc; margin-left: 1.25rem; padding-left: 1.25rem; }
.container article ol { list-style: decimal; margin-left: 1.25rem; padding-left: 1.25rem; }

<style>
  /* Apply to any rich-text container we use */
  .rte-output ul,
  .rte-output ol,
  .prose ul,
  .prose ol,
  .bg-white.rounded-xl.shadow .prose ul,
  .bg-white.rounded-xl.shadow .prose ol {
    list-style-position: outside !important;
    margin-left: 1.25rem !important;
    padding-left: 1.25rem !important;
  }
  .rte-output ul,
  .prose ul { list-style-type: disc !important; }
  .rte-output ol,
  .prose ol { list-style-type: decimal !important; }
  .rte-output li,
  .prose li { margin: .3rem 0 !important; }
</style>