/*
 * Presentation fixes for the static mirror.
 *
 * The testimonial widget was an Elementor media carousel. Its behaviour lives
 * in Elementor Pro webpack chunks that are fetched at runtime by JavaScript,
 * and the mirror crawler never captured them - it followed references in HTML
 * and CSS, not files requested by JS. So the widget never initialised: only the
 * first slide was reachable, the play button did nothing, and the thumbnail
 * strip rendered its images full size beneath the carousel, which read as the
 * testimonials being duplicated.
 *
 * The widget markup has been replaced with a plain grid of links. These rules
 * style that grid. Nothing here depends on JavaScript.
 *
 * Remove this when the rebuilt site ships.
 */

.st-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

.st-tm-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background-color: #2f2350;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.st-tm-card:hover,
.st-tm-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(85, 66, 138, 0.35);
}

.st-tm-card:focus-visible {
  outline: 3px solid #9cd874;
  outline-offset: 3px;
}

/* Play affordance, drawn in CSS so it needs no image asset. */
.st-tm-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.25s ease;
}

.st-tm-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 20px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.st-tm-card:hover .st-tm-play {
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
  .st-testimonials {
    grid-template-columns: 1fr;
  }
  .st-tm-play {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }
}

/* ------------------------------------------------------------------ *
 * Widgets whose behaviour depended on the missing Elementor chunks.
 *
 * Elementor Pro fetches its widget handlers as webpack chunks at runtime.
 * The mirror never captured them, so none of that JavaScript runs. Anything
 * that relied on it to reveal or lay out content is stuck in its initial
 * state. These rules make that initial state usable without JS.
 * ------------------------------------------------------------------ */

/* Accordions: the answers are display:none until JS adds .elementor-active,
   so every answer on the FAQ page was unreachable. Show them all - the page
   becomes a plain question-and-answer list. */
.elementor-accordion .elementor-tab-content {
  display: block !important;
}
.elementor-accordion .elementor-tab-title {
  cursor: default;
}
.elementor-accordion .elementor-accordion-icon {
  display: none !important;
}

/* Carousels: uninitialised, the slides sit in a flex row inside an
   overflow:hidden container, so only the first is visible. Let them wrap so
   the whole set is on the page. Scoped to the affected widgets rather than
   every .swiper, to avoid touching anything that still works. */
.elementor-widget-image-carousel .swiper,
.elementor-widget-testimonial-carousel .swiper,
.elementor-widget-image-carousel .elementor-main-swiper,
.elementor-widget-testimonial-carousel .elementor-main-swiper {
  overflow: visible !important;
  height: auto !important;
}

.elementor-widget-image-carousel .swiper-wrapper,
.elementor-widget-testimonial-carousel .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 18px;
  transform: none !important;
  height: auto !important;
}

.elementor-widget-image-carousel .swiper-slide,
.elementor-widget-testimonial-carousel .swiper-slide {
  width: auto !important;
  max-width: 220px;
  flex: 0 1 auto;
  margin: 0 !important;
}

/* Pagination dots and arrows do nothing without their handlers. */
.elementor-widget-image-carousel .swiper-pagination,
.elementor-widget-testimonial-carousel .swiper-pagination,
.elementor-widget-image-carousel .elementor-swiper-button,
.elementor-widget-testimonial-carousel .elementor-swiper-button {
  display: none !important;
}

/* Navigation dropdowns.
   Elementor drives these with SmartMenus, initialised from one of the missing
   chunks. Without it the submenus never open and no caret is drawn, because
   that arrow is injected at runtime rather than being in the markup.
   Reimplemented with CSS hover/focus so the sub-pages stay reachable. */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children {
  position: relative;
}

/* Caret, drawn in CSS since the runtime-injected one never appears. */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
  border-top: 5px solid currentColor;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.85;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  z-index: 9998;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu ul.sub-menu li {
  display: block;
  width: 100%;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu ul.sub-menu a {
  display: block;
  padding: 9px 18px;
  white-space: nowrap;
  color: #3f444b;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu ul.sub-menu a:hover,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu ul.sub-menu a:focus {
  background: #3f444b;
  color: #fff;
}

/* Mobile menu.
   The hamburger renders correctly, but the panel it controls is collapsed by
   CSS (max-height:0; transform:scaleY(0)) and only Elementor's JS reopens it -
   and that JS lives in a chunk the mirror never captured. So the button was
   inert.
   The toggle carries tabindex="0", so it takes focus on tap/click. That gives
   a CSS-only open: focus the toggle, the adjacent panel expands; :hover and
   :focus-within on the panel keep it open while it is being used. */
.elementor-menu-toggle:focus + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-menu-toggle:focus-within + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container:hover,
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container:focus-within {
  max-height: 80vh !important;
  transform: scaleY(1) !important;
  overflow-y: auto !important;
}

/* The panel is positioned absolutely and inherits a narrow width from the
   toggle's container; give it a usable width anchored to the right edge. */
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  right: 0;
  left: auto;
  min-width: 240px;
  background: #fff;
  border-radius: 10px;
}

nav.elementor-nav-menu--dropdown .elementor-nav-menu a {
  display: block;
  padding: 11px 18px;
  white-space: nowrap;
}

/* No JS to drive a second level, so show sub-pages inline. */
nav.elementor-nav-menu--dropdown ul.sub-menu {
  display: block !important;
  position: static !important;
  box-shadow: none !important;
  padding-left: 14px;
  min-width: 0;
}