/* ==========================================================================
   Custom Layout Fixes - 1st Choice Home Improvement
   Optimizes banner heights & reduces empty whitespace gaps above the fold
   ========================================================================== */

/* Inner Pages Banner (Services, About Us, Gallery, Contact Us) */
.banner.innerbanner,
section.banner.innerbanner,
.innerbanner {
  min-height: 140px !important;
  height: 140px !important;
  max-height: 160px !important;
  overflow: hidden !important;
  background-position: center 35% !important;
  background-size: cover !important;
  padding: 0 !important;
}

.banner.innerbanner .bannerText,
.innerbanner .bannerText {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.banner.innerbanner .bannerBox,
.innerbanner .bannerBox {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce top padding on the first content section following inner banner */
.banner.innerbanner + section.section-layout-container,
.banner.innerbanner + section.contentarea {
  padding-top: 24px !important;
}

/* Homepage Hero Banner Height Optimization */
@media (min-width: 768px) {
  .banner.banner-23,
  section.banner.banner-23,
  .banner.banner--new.banner--medium {
    min-height: 440px !important;
    height: 55vh !important;
    max-height: 500px !important;
  }

  .banner.banner-23 .bannerText,
  .banner.banner--new.banner--medium .bannerText {
    height: 100% !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .banner.innerbanner,
  section.banner.innerbanner,
  .innerbanner {
    min-height: 110px !important;
    height: 110px !important;
    max-height: 120px !important;
  }

  .banner.innerbanner + section.section-layout-container,
  .banner.innerbanner + section.contentarea {
    padding-top: 16px !important;
  }

  .banner.banner-23,
  section.banner.banner-23 {
    min-height: 380px !important;
    height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .banner.banner-23 .bannerText {
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
  }
}