/* ========================================
 * CLS (Cumulative Layout Shift) Fixes
 * ========================================
 * 
 * Targeted CSS to prevent layout shifts without breaking existing layouts
 * Addresses Google Search Console CLS issues
 */

/* ==========================================================================
   HOMEPAGE HERO CAROUSEL - PREVENT CLS
   ========================================================================== */

/* Reserve minimum height ONLY for homepage hero carousel - be very specific */
.homepage_hero .featured-slider-one {
    min-height: 600px; /* Reserve space for hero on desktop */
}

.homepage_hero .featured-slider-one .f-slider-layer {
    min-height: 600px; /* Maintain height through carousel initialization */
}

.homepage_hero .owl-carousel .owl-item {
    min-height: 600px;
}

/* Mobile responsive heights */
@media (max-width: 768px) {
    .homepage_hero .featured-slider-one,
    .homepage_hero .featured-slider-one .f-slider-layer,
    .homepage_hero .owl-carousel .owl-item {
        min-height: 400px; /* Smaller height for mobile */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .homepage_hero .featured-slider-one,
    .homepage_hero .featured-slider-one .f-slider-layer,
    .homepage_hero .owl-carousel .owl-item {
        min-height: 500px; /* Medium height for tablets */
    }
}

/* ==========================================================================
   ELEMENTOR SECTIONS - PREVENT SHIFTS
   ========================================================================== */

/* Only apply to homepage Elementor sections to avoid breaking other pages */
.home .elementor-section {
    min-height: 50px; /* Prevent complete collapse */
}

/* ==========================================================================
   PRELOADER - PREVENT CLS
   ========================================================================== */

/* Ensure preloader doesn't cause shift when it disappears */
.preloader {
    position: fixed; /* Use fixed to keep it out of document flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}





/* ==========================================================================
   FONT LOADING - PREVENT FOIT (ALREADY HANDLED)
   ========================================================================== */
/* 
 * Font loading is already optimized with font-display: swap
 * in functions.php and Google Fonts URL
 */