/* Dion's Complete — home page polish (on top of the Tailwind bundle + builder-fixes). */

/* hero background video — belt-and-suspenders on top of builder-fixes.css */
.grab-hero-section {
  position: relative;
  isolation: isolate;
  /* NO overflow:hidden — the ".grab-hero-rating" Google card is deliberately
     positioned "-bottom-12" to peek out past the hero's bottom edge. Clipping
     the section chops that card off. */
  background-color: #0e5d8c;   /* brand fallback while the video buffers / if it's blocked */
  min-height: 560px;           /* guarantees a visible band even before content lays out */
}
/* keep the full-bleed video/shape from causing a horizontal scrollbar,
   without clipping the card that hangs off the bottom */
.grab-hero-section > div:first-child,
.grab-hero-section > svg.grab-hero-shape { overflow: hidden; }
@media (min-width: 1280px) {
  .grab-hero-section { min-height: calc(100vh - 80px); }
}
/* the wrapper div + the <video> must both fill the section, not collapse */
.grab-hero-section > div:first-child,
.grab-hero-section > .h-full.w-full:first-child,
.grab-hero-section video.grab-hero-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.grab-hero-section video.grab-hero-background {
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
}


/* tab panels */
.dc-tab-panel[hidden] { display: none !important; }
.dc-tab-panel { display: block; }

/* carousels: keep the fix-CSS scroll strip tidy and give the arrows something to sit on */
[aria-roledescription="carousel"] .overflow-hidden {
  overflow-x: auto !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[aria-roledescription="carousel"] .overflow-hidden::-webkit-scrollbar { display: none; }
[aria-roledescription="carousel"] [aria-roledescription="slide"] { scroll-snap-align: start; }
.grab-carousel-prev[disabled],
.grab-carousel-next[disabled],
[class*="carousel-prev"][disabled],
[class*="carousel-next"][disabled] { opacity: .35; cursor: default; }

/* testimonials: gentle auto-scroll marquee (paused on hover / focus) */
/* no snap on the drifting strip: snap re-aligns every sub-pixel step and freezes it */
.grab-testimonials-carousel .overflow-hidden.dc-autoscroll { scroll-behavior: auto; scroll-snap-type: none; }

/* "Why Choose Us" banner icons — hard-clamp size whether they render as the
   Font Awesome webfont (<i>) or as an inline <svg>, so a missing/oversized
   glyph can never blow the layout out again. */
.dions-wcb-icon { overflow: hidden; }
.dions-wcb-icon i,
.dions-wcb-icon svg,
.dions-wcb-icon .dc-fa {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #fff;
  fill: currentColor;
  flex: 0 0 auto;
}
.dions-wcb-location i,
.dions-wcb-location svg,
.dions-wcb-location .dc-fa {
  width: 15px !important;
  height: 15px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: rgb(var(--primary-color));
  fill: currentColor;
  flex: 0 0 auto;
}

/* quote / contact form status line */
.dc-form-status { margin: .75rem 0 0; font-size: .95rem; font-weight: 600; min-height: 1.2em; }

/* the frozen Embla tracks carry an inline translate3d — make sure it's neutralised */
[aria-roledescription="carousel"] .overflow-hidden > .flex { transform: none !important; }

/* sticky quick-contact widget: pointer affordance */
.widget-container .widget-button { cursor: pointer; }
.widget-container .widget-button:last-child { border-right: 0 !important; }

/* map section: the static service-area map should always fill its box */
.grab-map-container img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* service-area list: it's a `flex-grow` flex item, and flex items default to
   `min-height: auto` — meaning the browser sizes it to fit all 33 rows instead of
   clamping it to the space `flex-grow` gives it, so `overflow-y-auto` never had
   anything to actually scroll (it just grew past its box instead). min-height: 0
   is the standard fix for this well-known flex/overflow interaction. */
.grab-map-content-scroll { min-height: 0; }