/* Container Header Carousel block - scoped to avoid affecting container-header-section */

/* Layout contract:
   - .fixed-top (nav + trust bar) is position:fixed, z-index:1030 — always on top.
   - .mt_required .site-content has margin-top: var(--header-height) set by trust-bar JS,
     pushing content below the fixed header.
   - JS (container-header-carousel.js) measures any remaining gap and closes it with a
     precise negative margin-top so the carousel image sits flush against the trust bar.
   - On scroll the carousel naturally slides under .fixed-top — no extra CSS needed.
*/
.header-carousel-fullwidth.main-header-carousel {
  position: relative;
  /* margin-top is set dynamically by JS to close any remaining gap to the trust bar */
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible; /* Allow SVG corners to extend */
}

/* Block wrapper: no extra top space, and never clip the carousel SVG */
.mt_required .site-content .wp-block-cgb-container-header-carousel,
.wp-block-cgb-container-header-carousel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

.entry-content > .wp-block-cgb-container-header-carousel:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.entry-content:has(> .wp-block-cgb-container-header-carousel:first-child) {
  padding-top: 0 !important;
  /* Prevent overflow:hidden from clipping the carousel's negative margin-top
     (negative margin moves the carousel above the entry-content top edge) */
  overflow: visible !important;
}

/* Remove any padding from site-content when carousel is first block */
.mt_required .site-content:has(> .wp-block-cgb-container-header-carousel:first-child),
.mt_required .site-content:has(> .entry-content > .wp-block-cgb-container-header-carousel:first-child) {
  padding-top: 0 !important;
}

/* Also target direct children of site-content */
.mt_required .site-content > .wp-block-cgb-container-header-carousel:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.main-header-carousel .header-section-carousel {
  overflow: visible;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Desktop: let the image's natural proportions drive the slide height — same
   principle as mobile. This prevents object-fit:cover from scaling a short banner
   up to a forced 620px container and clipping right-side SVG / product content. */
@media (min-width: 768px) {
  .main-header-carousel .header-section-carousel,
  .main-header-carousel .carousel-swiper-header-carousel,
  .main-header-carousel .carousel-swiper-header-carousel .swiper-wrapper,
  .main-header-carousel .carousel-swiper-header-carousel .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Picture: out of absolute flow so the image height becomes the slide height */
  .main-header-carousel .carousel-swiper-header-carousel .swiper-slide picture {
    position: static !important;
    display: block;
    width: 100%;
    height: auto !important;
  }

  /* Image: natural width / height — no upscaling, no cropping */
  .main-header-carousel .carousel-swiper-header-carousel .swiper-slide picture img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: unset !important;
  }

  /* Text overlay: stretch via top + bottom so it fills the image height even
     when the parent is auto-height (h-100 alone does not work then). */
  .main-header-carousel .carousel-swiper-header-carousel .swiper-slide > div.position-absolute {
    bottom: 0 !important;
    height: auto !important;
  }
}


.header-carousel-section {
  overflow: visible; /* Allow SVG corners to extend */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main_header_carousel_section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 1240px) {
  #main_header_carousel_section {
    max-width: none !important;
  }

  .carousel-swiper-header-carousel {
    padding-right: 0;
    padding-left: 0;
    max-width: none;
  }
}

@media (max-width: 768px) {
  #sub-header-carousel-section {
    padding-top: 8.75rem !important;
  }
}

@media (max-width: 600px) {
  #sub-header-carousel-section {
    padding-top: 6.25rem !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* border-radius removed — it was clipping the right-side SVG content */

/* Mobile base: image fills its element naturally; desktop overrides below */
.carousel-swiper-header-carousel picture source,
.carousel-swiper-header-carousel picture img {
  display: block;
  width: 100%;
}


/* Swiper carousel — let Swiper manage overflow on the container and wrapper
   so off-screen slides are clipped during transitions (prevents horizontal scroll).
   Only the slide itself is visible so decorative content within it can extend. */
.carousel-swiper-header-carousel {
  width: 100%;
  height: 100%;
}

.carousel-swiper-header-carousel .swiper-slide {
  position: relative;
  overflow: visible;
}

/* object-fit: cover is set in the ≥768px block above — no contain override needed. */

/* Mobile: full image drives the slide height, text overlaid on the gradient section */
@media (max-width: 767px) {
  .main-header-carousel .header-section-carousel {
    min-height: 0 !important;
    height: auto !important;
  }

  .carousel-swiper-header-carousel,
  .carousel-swiper-header-carousel .swiper-wrapper {
    height: auto !important;
  }

  .carousel-swiper-header-carousel .swiper-slide {
    height: auto !important;
  }

  /* Picture: static so the full image height drives the slide height */
  .carousel-swiper-header-carousel .swiper-slide picture {
    position: static !important;
    display: block;
    width: 100%;
    height: auto !important;
  }

  /* Image: show at full natural dimensions — no cropping */
  .carousel-swiper-header-carousel .swiper-slide picture img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
  }

  /* Text overlay: sits in the lower gradient section of the image.
     padding-bottom gives breathing room so text is not at the very edge. */
  .carousel-swiper-header-carousel .swiper-slide > div.position-absolute {
    top: 0 !important;
    bottom: 0 !important;
    align-items: flex-end !important;
    padding-bottom: 2rem !important;
  }

  .carousel-swiper-header-carousel .swiper-slide .sub-header-carousel-slide {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    text-align: left !important;
  }

  /* Pagination: just above the bottom edge of the slide */
  .carousel-swiper-header-carousel .swiper-pagination {
    bottom: 12px !important;
  }
}

/* Pagination pills — always over the image */
.carousel-swiper-header-carousel .swiper-pagination {
  bottom: 16px;
  z-index: 15;
  position: absolute;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.carousel-swiper-header-carousel .swiper-pagination-bullet {
  pointer-events: auto;
  width: 10px;
  height: 10px;
  background: #e0e0e0;
  border: 1px solid #000;
  border-radius: 50%;
  opacity: 1;
  margin: 0 5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-swiper-header-carousel .swiper-pagination-bullet-active {
  background-color: #000 !important;
  border-color: #000;
  width: 24px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .carousel-swiper-header-carousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }

  .carousel-swiper-header-carousel .swiper-pagination-bullet-active {
    width: 20px;
  }
}

/* CTA button - uses theme primary variable (no hardcoded purple) */
.btn-header-carousel-cta {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary);
}

.btn-header-carousel-cta:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary);
  opacity: 0.9;
}

/* Focus state for carousel CTA */
#sub-header-carousel-section .btn-header-carousel-cta:focus {
  outline: 1px solid white !important;
  border-radius: 2px !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 2px var(--bs-primary) !important;
  transition: outline-offset 0.2s ease, box-shadow 0.2s ease;
}