/* Static-site fixes for The Duff.
   The original site uses JavaScript (Elementor Pro + Swiper) that we intentionally
   strip for a static build. This CSS reproduces the *default visual layout* those
   scripts would have produced, so the page looks the same without any JS. */

/* --- Testimonial carousel (homepage) ---
   Original: Swiper carousel, slides_per_view=3 desktop / 1 mobile, auto-sliding.
   Static:   lay the slides out as a wrapping grid — 3 per row on desktop, 1 on mobile.
   All testimonials stay visible (no hidden slides). */
.elementor-testimonial--skin-default .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  transform: none !important;   /* cancel any inline Swiper transform */
  gap: 20px;
}
.elementor-testimonial--skin-default .swiper-wrapper > .swiper-slide {
  width: calc((100% - 40px) / 3);   /* 3 across, accounting for two 20px gaps */
  flex: 0 0 auto;
  margin: 0 !important;             /* Swiper sets per-slide margins inline; neutralise */
  height: auto;
}

/* Hide carousel navigation arrows/dots that do nothing without JS */
.elementor-testimonial--skin-default .elementor-swiper-button,
.elementor-testimonial--skin-default .swiper-pagination {
  display: none !important;
}

@media (max-width: 767px) {
  .elementor-testimonial--skin-default .swiper-wrapper > .swiper-slide {
    width: 100%;                    /* 1 per row on mobile, matching slides_per_view_mobile */
  }
}

/* --- Full-width section content sprawl (site-wide) ---
   The per-page Elementor CSS (post-*.css) that constrained full-width hero sections is gone
   from the origin (404s on the live site too, which is itself broken this way). Without it,
   full-width sections' inner containers have max-width:none and sprawl edge-to-edge on wide
   screens — pinning the heading to the far left and the image to the far right with a huge
   gap. Cap the inner container to Elementor's standard content width and centre it, matching
   how every *boxed* section on the site already behaves. (Backgrounds stay full-bleed; only
   the content is constrained.) */
.elementor-section:not(.elementor-section-boxed) > .elementor-container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero two-column rows: vertical centre + responsive stacking ---
   Hero rows pair a heading column with an image column: e2c6cc4 = homepage,
   e1ca527 = the shared article-page hero template. Vertically centre the two columns so
   the heading sits alongside the middle of the image (no top-gap), and stack them on
   tablet/mobile so they don't cram side-by-side on narrow screens. */
.elementor-element-e2c6cc4 > .elementor-container,
.elementor-element-e1ca527 > .elementor-container {
  align-items: center;
}
@media (max-width: 1024px) {
  .elementor-element-e2c6cc4 > .elementor-container,
  .elementor-element-e1ca527 > .elementor-container {
    flex-wrap: wrap;
  }
  .elementor-element-e2c6cc4 > .elementor-container > .elementor-column,
  .elementor-element-e1ca527 > .elementor-container > .elementor-column {
    width: 100%;
  }
}

/* --- Table of Contents widget ---
   Original: list built by JS, shown after a loading spinner.
   Static:   we generate the anchor list at build time; ensure it displays as a normal
   bulleted list and the toggle chevrons (which need JS) are hidden. */
.elementor-toc__body { display: block !important; height: auto !important; }
.elementor-toc__list-wrapper { list-style: disc; margin: 0; padding-left: 1.2em; }
.elementor-toc__list-wrapper .elementor-toc__list-wrapper { padding-left: 1.2em; }
.elementor-toc__list-item { margin: 0.15em 0; }
.elementor-toc__list-item-text { text-decoration: none; }
.elementor-toc__list-item-text:hover { text-decoration: underline; }
/* toggle buttons do nothing without JS */
.elementor-toc__toggle-button { display: none !important; }