/* ------------------------------------------------------------------
   Static-render overrides for westvantree-web.
   The captured pages use the real Elementor CSS; these rules only fix the
   few things that depended on the stripped Elementor JS runtime, so nothing
   is ever left hidden or clipped. Loaded LAST so it wins the cascade.
   ------------------------------------------------------------------ */

/* Reveal-on-scroll widgets: Elementor starts them at opacity:0 and fades them
   in via JS. Enhancements.tsx removes the class too; this is the CSS backstop. */
.elementor-invisible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Motion-FX driven elements keep their resting (visible) state without JS. */
.elementor-motion-effects-element-type-transform,
[data-settings*="motion_fx"] {
  opacity: 1 !important;
}

/* Carousels: until Swiper initialises (or if it cannot), show every slide as a
   responsive wrapped row instead of clipping to the first slide. Once Swiper
   adds `.swiper-initialized`, these rules stop applying automatically. */
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  gap: 24px;
}
.swiper:not(.swiper-initialized) .swiper-slide {
  flex: 1 1 300px;
  max-width: 420px;
  height: auto;
}

/* Native <details> FAQ (Elementor nested-accordion) already works without JS;
   just make sure the open marker isn't doubled by leftover Elementor icons. */
.e-n-accordion-item-title > .e-n-accordion-item-title-icon { pointer-events: none; }

/* ------------------------------------------------------------------
   Sticky transparent header (replicates the Elementor Pro sticky effect).
   On every page the live site overlays a TRANSPARENT header on the hero image
   at scroll-top, then fades in a solid dark bar (#09090b) once the visitor
   scrolls. That transition was driven by Elementor's JS runtime; here it is a
   plain scroll class toggled by Enhancements.tsx. Without it the captured dark
   header background would show as an opaque bar at page-load.
   ------------------------------------------------------------------ */
.elementor-element-6abcd5cd {
  background-color: transparent !important;
}

/* Desktop dropdown menus (Services / Locations). Elementor's smartmenus JS
   revealed these on hover; restore that with pure CSS on pointer devices.
   Under 1025px the mobile hamburger (Enhancements.tsx) takes over instead. */
@media (min-width: 1025px) {
  .elementor-nav-menu--main .menu-item-has-children { position: relative; }
  .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    z-index: 9999;
    background: #09090b;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item {
    display: block;
    padding: 9px 20px;
    white-space: nowrap;
    color: #fff;
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}