/* ---------------------------------------------------------------------------
 * hero-slider.css — vanilla Swiper replacement for Slider Revolution 7 (sr7)
 * core-wm.com  ·  slider alias "home" (sr7 slider id 1)
 *
 * Every number in here was measured off the LIVE sr7 render, not guessed.
 * Reference data:  migration-source/sliders/src-geometry.json
 *                  migration-source/sliders/src-width-sweep.json
 *                  migration-source/sliders/src-nav-styles.json
 *
 * THE RESPONSIVE LAW sr7 implements in JS (reproduced here in pure CSS so the
 * module reserves its final height before any script runs — no layout shift):
 *
 *     gw = (vw < 480) ? 480 : 1240        grid width
 *     gh = (vw < 480) ? 520 : 450         grid height
 *     s  = min(vw, gw) / gw               scale
 *     module height = gh * s
 *     panel width   = 0.70 * min(vw, gw)
 *     font-size     = round(28 * s)px     (sr7 rounds to whole px)
 *     padding       = round(32 * s)px
 *
 * Verified against the live site at vw =
 *   1920 1440 1241 1240 1239 1025 1024 1023 779 778 777 600 481 480 479 414 375 360 320
 * ------------------------------------------------------------------------- */

/* revicons — the arrow glyphs sr7 used (\e824 / \e825). Static font asset only;
   no plugin runtime is loaded. */
@font-face {
  font-family: 'revicons';
  src: url('/assets/fonts/revicons/revicons.woff') format('woff'),
       url('/assets/fonts/revicons/revicons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --- module ------------------------------------------------------------- */

.hero-slider {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;                 /* sr7-module + #main-slideshow both clip */
  -webkit-tap-highlight-color: transparent;

  /* height law, desktop/tablet level (gw 1240 / gh 450) */
  aspect-ratio: 1240 / 450;
  max-height: 450px;

  /* lets descendants size off the module width instead of the viewport,
     so a classic scrollbar does not skew the scale */
  container-type: inline-size;
  container-name: heroslider;

  /* raw (unrounded) scaled metrics; rounded below where round() exists */
  --hs-fs: min(28px, calc(28 * 100cqw / 1240));
  --hs-pad: min(32px, calc(32 * 100cqw / 1240));
  --hs-panel-w: min(70cqw, 868px);
}

/* mobile responsive level: sr7 switches at vw < 480 (measured: 480 -> 174.19px,
   479 -> 518.91px) */
@media (max-width: 479px) {
  .hero-slider {
    aspect-ratio: 480 / 520;
    max-height: none;
    --hs-fs: calc(28 * 100cqw / 480);
    --hs-pad: calc(32 * 100cqw / 480);
    --hs-panel-w: 70cqw;
  }
}

/* sr7 rounds the scaled font-size / padding to whole pixels. Where CSS round()
   is available we match it exactly; without it we are <=0.5px off. */
@supports (width: round(1px, 1px)) {
  .hero-slider {
    --hs-fs: round(min(28px, calc(28 * 100cqw / 1240)), 1px);
    --hs-pad: round(min(32px, calc(32 * 100cqw / 1240)), 1px);
  }
  @media (max-width: 479px) {
    .hero-slider {
      --hs-fs: round(calc(28 * 100cqw / 480), 1px);
      --hs-pad: round(calc(32 * 100cqw / 480), 1px);
    }
  }
}

.hero-slider__viewport {           /* == .swiper-wrapper */
  width: 100%;
  height: 100%;
}

/* --- slides ------------------------------------------------------------- */

.hero-slider__slide {              /* == .swiper-slide */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  /* sr7 puts display:none on every inactive slide, so the source page exposes
     only the ACTIVE slide's heading and CTA to innerText, crawlers and the
     accessibility tree. Without this, all three headings and all three "Learn
     More" links leak into the page text — content the source does not have.
     visibility:hidden gets the same exclusion while keeping the layer boxes
     measurable (hero-slider.js has to measure the panel to centre it the way
     sr7 does) and keeping the cross-fade animatable. */
  visibility: hidden;
}
.hero-slider__slide.swiper-slide-active,
.hero-slider__slide.is-leaving { visibility: visible; }

/* Swiper's fade module writes opacity + a transition on the slide element.
   We stack instead: the outgoing slide stays fully opaque underneath while the
   incoming one fades in on top — which is what sr7's canvas cross-fade does,
   and avoids the container showing through at the 50% mark. */
.hero-slider .swiper-slide {
  opacity: 1 !important;
  transition-duration: 0ms !important;
}
.hero-slider__slide.is-leaving { z-index: 2; }
.hero-slider__slide.swiper-slide-active { z-index: 3; }

.hero-slider__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0%;     /* sr7 layer bg pos x:50% y:0% */
  opacity: 0;
  transition: none;
  pointer-events: none;
  will-change: opacity;
}

.hero-slider__txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* JS replaces top/transform with sr7's exact value once laid out:
     top = (moduleHeight - round(panelHeight)) / 2 . See hero-slider.js. */
  box-sizing: border-box;
  width: var(--hs-panel-w);
  height: auto;
  padding: var(--hs-pad);
  background: rgba(255, 255, 255, 0.88);
  color: #00305b;                  /* per-slide override below */
  font-family: Montserrat, sans-serif;
  font-size: var(--hs-fs);
  font-weight: 200;
  line-height: 1;                  /* sr7 line-height == font-size */
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  border-radius: 0;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slide 2 ("INDEPENDENT, OBJECTIVE ADVICE.") is the lighter blue */
.hero-slider__slide[data-hs-key="2"] .hero-slider__txt { color: #2b689c; }

/* the incoming background is the only thing that animates: it fades UP over the
   outgoing one, which is held opaque underneath. That is what sr7's canvas
   cross-fade composites, and it keeps the page background from showing through
   at the 50% mark (which a naive two-way opacity cross-fade would do). */
.hero-slider__slide.swiper-slide-active .hero-slider__bg {
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hero-slider__slide.swiper-slide-active .hero-slider__txt { opacity: 1; }

/* held opaque for the 600ms, then dropped with no transition (it is hidden
   under the now-opaque incoming background by then) */
.hero-slider__slide.is-leaving .hero-slider__bg {
  opacity: 1;
  transition: none;
}

/* pre-init / no-JS: show the first slide exactly as it will render */
.hero-slider:not(.swiper-initialized) .hero-slider__slide:first-child { visibility: visible; }
.hero-slider:not(.swiper-initialized) .hero-slider__slide:first-child .hero-slider__bg,
.hero-slider:not(.swiper-initialized) .hero-slider__slide:first-child .hero-slider__txt {
  opacity: 1;
}
.hero-slider:not(.swiper-initialized) .hero-slider__slide { position: absolute; inset: 0; }

/* --- arrows ------------------------------------------------------------- */
/* sr7 nav.arrows key "custom": 40x40, rgba(0,0,0,.5), 20px inset, v-centred,
   revicons glyph 15px/40px #fff. */

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
  cursor: pointer;
  display: block;
  z-index: 1000;
  -webkit-appearance: none;
  appearance: none;
}
.hero-slider__arrow--prev { left: 0;  transform: translate(20px, -20px); }
.hero-slider__arrow--next { right: 0; transform: translate(-20px, -20px); }
.hero-slider__arrow:hover { background: #000; }

.hero-slider__arrow::before {
  display: block;
  width: 40px;
  height: 40px;
  font-family: 'revicons';
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  color: #fff;
  text-align: center;
}
.hero-slider__arrow--prev::before { content: '\e824'; }
.hero-slider__arrow--next::before { content: '\e825'; }

/* --- bullets (sr7 "ares" skin) ------------------------------------------ */

.hero-slider__bullets {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 49px;                     /* 3 bullets x 13 + 2 gaps x 5 */
  height: 13px;
  transform: translate(-24.5px, -20px);
  z-index: 1000;
  font-size: 0;
  line-height: 0;
}
.hero-slider__bullets::before {    /* sr7 pads the hover target by 10px */
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 10px;
  margin-left: -10px;
  margin-top: -10px;
  box-sizing: content-box;
}

.hero-slider__bullet {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: content-box;
  display: block;
  -webkit-appearance: none;
  appearance: none;
}
.hero-slider__bullet:nth-child(1) { left: 0; }
.hero-slider__bullet:nth-child(2) { left: 18px; }
.hero-slider__bullet:nth-child(3) { left: 36px; }
.hero-slider__bullet:hover,
.hero-slider__bullet.is-active { background: #c5c3c3; }

/* The tooltip text is CSS generated content off data-hs-title, NOT a text node.
   sr7 injects its tooltips from JS at runtime, so they never appear in the
   served document; ours was static markup, which put all three slide headings
   into the page's text content as an 87-char run the source does not have (and
   dragged the escaping defect below along with it). Generated content renders
   identically but is absent from textContent/innerText and from the accessible
   name (the button carries an explicit aria-label, which wins outright). */
.hero-slider__bullet::after {          /* the tooltip plate + its text */
  content: attr(data-hs-title);
  position: absolute;
  top: -35px;
  left: 50%;
  color: #888888;
  font-family: 'Source Sans 3', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  padding: 0 10px;
  background: rgba(197, 195, 195, 0.69);
  white-space: nowrap;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: transform 0.3s;
  pointer-events: none;
}
.hero-slider__bullet::before {         /* the caret under the plate */
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -15px;
  left: 50%;
  margin-left: -10px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: rgba(197, 195, 195, 0.69) transparent transparent transparent;
  visibility: hidden;
  transform: translateY(-10px);
  transition: transform 0.3s;
  pointer-events: none;
}
.hero-slider__bullet:hover::after {
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hero-slider__bullet:hover::before {
  visibility: visible;
  transform: translateY(0);
}
.hero-slider__bullet.is-active:hover::after  { background: #c5c3c3; }
.hero-slider__bullet.is-active:hover::before { border-top-color: #c5c3c3; }

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__bg,
  .hero-slider__txt,
  .hero-slider__bullet::after,
  .hero-slider__bullet::before { transition-duration: 1ms !important; }
}