/**
 * CLS (Cumulative Layout Shift) Fixes for Front Page
 * These styles prevent layout shifts during page load
 */

/* 1. Fixed Header Space Reservation */
.refresh_header_spacer {
  /* height: 100px;  */
  /* Match the header height */
  display: block;
}

@media screen and (max-width: 50rem) {
  .refresh_header_spacer {
    /* height: 80px;  */
    /* Adjust for mobile header height */
  }
}

/* 2. Image Dimension Fixes - Reserve space for images */
.refresh_header .logo {
  width: auto;
  height: 50px; /* Explicit height prevents shift */
  display: block;
}

@media screen and (max-width: 50rem) {
  .refresh_header .logo {
    height: 40px;
  }
}

/* 3. Slider/CTA Container Aspect Ratios */
.slider_cta_div {
  min-height: 300px; /* Reserve space before Flickity initializes */
}

.slider_cta,
.full_cta {
  min-height: 322.5px; /* Explicit height prevents shift */
  aspect-ratio: 16 / 9; /* Modern browsers */
}

@media screen and (max-width: 50rem) {
  .slider_cta,
  .full_cta {
    min-height: 200px;
    aspect-ratio: 4 / 3;
  }
}

/* 4. Header Gallery with Aspect Ratio */
.header_gallery,
.header_steps {
  min-height: 545px;
  aspect-ratio: 16 / 9;
  margin-bottom: 250px;
}

@media screen and (max-width: 50rem) {
  .header_gallery,
  .header_steps {
    min-height: 300px;
    margin-bottom: 150px;
  }
}

/* 5. Features CTA Images */
.features_cta .f_images img {
  width: 33%;
  height: auto;
  aspect-ratio: 4 / 3; /* Prevent shift as images load */
}

/* 6. Two CTA Layout */
.two_cta {
  min-height: 322.5px;
  aspect-ratio: 16 / 9;
}

@media screen and (max-width: 50rem) {
  .two_cta {
    min-height: 200px;
  }
}

/* 7. Custom CTA Tiles in Section */
.custom_cta.carousel-cell {
  min-height: 400px;
  aspect-ratio: 3 / 4;
}

@media screen and (max-width: 50rem) {
  .custom_cta.carousel-cell {
    min-height: 300px;
  }
}

/* 8. Prevent Layout Shift from Flickity Initialization */
.main-carousel::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio fallback */
}

.main-carousel.flickity-enabled::before {
  display: none; /* Hide once Flickity is loaded */
}

/* 9. Font Loading Optimization - Prevent FOIT/FOUT */
body {
  font-display: swap; /* This should be added to @font-face rules */
}

/* 10. Preload Space for Navigation Menu */
.menu-div {
  min-height: 50px;
}

@media screen and (max-width: 50rem) {
  .menu-div {
    min-height: 0;
  }
}

/* 11. Search Div Dimensions */
.search-div {
  min-height: 40px;
}

/* 12. Container Max Width - Prevent horizontal shift */
.container {
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* 13. Prevent Shift from Background Images Loading */
[style*="background-image"] {
  background-color: #f5f5f5; /* Placeholder color */
}

/* 14. Icon/Logo Images with Explicit Dimensions */
.step img.icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* 15. Cart Icon Dimensions */
.thecart {
  width: 30px;
  height: 30px;
  display: inline-block;
}

/* 16. Search and Burger Icons */
.searchicon,
.burger {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 17. Dealer Notice - Reserve Space */
#dealer-notice {
  min-height: 50px;
}

/* 18. Footer Minimum Height */
.refresh_footer {
  min-height: 400px;
}

@media screen and (max-width: 50rem) {
  .refresh_footer {
    min-height: 600px;
  }
}

/* 19. Prevent Content Jump from Lazy Loading */
img[loading="lazy"] {
  min-height: 50px; /* Adjust based on your typical image sizes */
}

/* 20. Ensure slider wrapper has proper height before load */
.slider {
  min-height: 300px;
}

@media screen and (max-width: 50rem) {
  /* 19. Prevent Content Jump from Lazy Loading */
  img[loading="lazy"] {
    min-height: 40px; /* Adjust based on your typical image sizes */
  }

  /* 20. Ensure slider wrapper has proper height before load */
  .slider {
    min-height: 100px;
  }

}