/* ==========================================
   HOME PAGE SPECIFICS
   ========================================== */
/* Carousel Settings */
.hero-carousel .carousel-item {
    height: 50vh; /* Reduced height so it feels less suffocating! */
    min-height: 450px; /* Ensures it doesn't get too tiny on small screens */
    position: relative;
}

/* ==========================================
   CAROUSEL IMAGE LOCK
   ========================================== */
.hero-carousel img {
    width: 100%;
    /* These two lines force every image to be the exact same height */
    height: 120vh; 
    min-height: 450px; 
    /* This is the magic rule: it crops the excess without stretching! */
    object-fit: cover; 
}

/* Adds a dark gradient over the image so the white text is readable */
.hero-carousel .carousel-item::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1; /* Keeps overlay above image but below text */
}

/* Pulls the text up so it's perfectly centered, and adds a soft shadow */
.hero-carousel .carousel-caption {
    z-index: 2; /* Keeps text above the dark overlay */
    bottom: 0; /* Let flexbox center it vertically */
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

/* Split Image Blocks */
.split-block {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.bg-light-pink {
    background-color: #ffebeb;
}

/* Featured Recipe Card */
.featured-card {
    background-color: #e27b7d;
    border-radius: 0;
    border: none;
}

/* ==========================================
   FEATURED RECIPE CARD
   ========================================== */
.featured-card img {
    width: 100%;
    height: 90vh; 
    object-fit: cover;
}

/* Custom button that reveals a white stroke on hover without jittering */
.btn-hover-stroke {
    border: 2px solid transparent !important; 
    transition: border-color 0.3s ease;
}

.btn-hover-stroke:hover {
    border-color: white !important;
}

/* ==========================================
   HORIZONTAL CATEGORY SLIDER
   ========================================== */
.category-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    /* Hide scrollbar for clean look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scroll-behavior: smooth; /* Makes the JS scroll glide nicely! */
}

.category-slider-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.category-slider {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}

.category-card {
    width: 40vh;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    flex-shrink: 0; /* Prevents cards from squishing */
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-card img {
    width: 100%;
    height: 320px; /* Increased from 250px for a more prominent frame */
    object-fit: cover;
}

.category-card-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: white;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
}

.view-all-box {
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.5rem; /* Forces space between the last card and the button! */
}

/* Floating Navigation Arrows (Updated for Fading) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: white;
    color: #d4090d;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Opacity set to 0 by default, JS will toggle the 'show' class */
    opacity: 0; 
    pointer-events: none; /* Prevents clicking when hidden */
    transition: opacity 0.3s ease, background-color 0.2s, color 0.2s;
}

.slider-arrow.show {
    opacity: 1;
    pointer-events: auto;
}

.slider-arrow:hover {
    background-color: #f8f8f8;
}

.slider-arrow i {
    font-size: 1.2rem;
    -webkit-text-stroke: 1px #d4090d; /* Makes the chevron thicker */
}

.left-arrow {
    left: -15px; /* Pulls it slightly outside the edge */
}

.right-arrow {
    right: -15px;
}

/* The "Cave" Fade Overlay Effect */
.slider-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    pointer-events: none; /* Ensures you can still click the cards underneath */
    z-index: 5;
    transition: opacity 0.3s ease;
}

.fade-left {
    left: 0;
    /* Red to transparent gradient */
    background: linear-gradient(to right, #d4090d 15%, transparent);
    opacity: 0; /* Hidden at the start */
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, #d4090d 15%, transparent);
}

/* ==========================================
   SQUARE IMAGE LOCK
   ========================================== */
.square-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover; /* Ensures the image crops perfectly to fit the square without stretching */
}

/* ==========================================
   GLOBAL HEADER SEARCH DROPDOWN
   ========================================== */
.search-dropdown-wrapper {
    position: absolute;
    top: 100%; /* Pushes it exactly below the header */
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid #d4090d;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 1050;
    display: none; /* Hidden by default */
    padding: 2.5rem 0;
}

.search-dropdown-wrapper.show {
    display: block;
    animation: slideDownFade 0.3s ease forwards;
}

@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-result-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    height: 100%;
}

.search-result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    color: inherit;
}

.search-result-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}