/* =====================================================================
   Dream Cleen v2 - homepage hero slider (3 slides, same styling)
   ---------------------------------------------------------------------
   Slide 1: "Domestic and Commercial Cleaning Services..." (H2)
   Slide 2: "Gutter Cleaning in Barnet" (the page's H1)
   Slide 3: "Driveway Cleaning & Sealing..." (H2, own photo via data-dc-bg)
   Both slides sit in the same grid cell over the hero background and
   cross-fade. Driven by /assets/js/dc-hero-*.js (no JS = both slides
   simply show one under the other). Edit the values marked <<<.
   ===================================================================== */
html.dc-hero-ready .elementor-element-a4ab90f.dc-hero {
  display: grid !important;
  align-content: center;
  padding-bottom: 46px;               /* <<< room for the dots */
  isolation: isolate;                 /* keeps the per-slide photos under the dark overlay */
}
/* per-slide background photo (slides with data-dc-bg); cross-fades over the hero's own photo */
.dc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.dc-hero__bg.is-active { opacity: 1; }
html.dc-hero-ready .dc-hero > .dc-hero-slide {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;   /* <<< fade speed */
}
html.dc-hero-ready .dc-hero > .dc-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .8s ease, transform .8s ease, visibility 0s;
}
.dc-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dc-hero__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.dc-hero__dot.is-active { width: 28px; border-radius: 6px; background: #fff; }   /* <<< active dot */
.dc-hero__dot:focus-visible { outline: 2px solid #61CE70; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html.dc-hero-ready .dc-hero > .dc-hero-slide { transition: none; transform: none; }
}