/* ---------------------------------------------------------------------------
 * 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;
}

/* 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 .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; }

.hero-slider__bullet-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-title::after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: rgba(197, 195, 195, 0.69) transparent transparent transparent;
  left: 50%;
  margin-left: -10px;
  bottom: -10px;
}
.hero-slider__bullet:hover .hero-slider__bullet-title {
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hero-slider__bullet.is-active:hover .hero-slider__bullet-title { background: #c5c3c3; }
.hero-slider__bullet.is-active:hover .hero-slider__bullet-title::after {
  border-color: #c5c3c3 transparent transparent transparent;
}

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