/* ======================================================
   HTML Slider v2 — Frontend CSS
   Structural + minimal cosmetic • override-friendly
====================================================== */

.htmlslider {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

/* Prevent first-paint flash (JS adds .is-ready) */
.htmlslider:not(.is-ready) .htmlslider__slide {
  opacity: 0;
  pointer-events: none;
}
/* ...but keep the first / active slide visible before JS runs, so there's no
   blank flash and the hero still shows even if the script is slow or fails. */
.htmlslider:not(.is-ready) .htmlslider__slide.is-active,
.htmlslider:not(.is-ready) .htmlslider__slide:first-child {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================
   VIEWPORT / TRACK
====================================================== */

.htmlslider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.htmlslider__track {
  position: relative;
  width: 100%;
}

.htmlslider__slide {
  width: 100%;
  box-sizing: border-box;
}

/* ======================================================
   FADE MODE
   FIX: Use a height-holding technique so the track
   always has the height of the tallest visible slide,
   preventing layout jumps during transitions.
====================================================== */

.htmlslider--fade .htmlslider__track {
  min-height: 1px;
}

.htmlslider--fade .htmlslider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  z-index: 1;
}

.htmlslider--fade .htmlslider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Outgoing slide stays visible during cross-fade */
.htmlslider--fade .htmlslider__slide.is-leaving {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ======================================================
   SLIDE MODE
====================================================== */

.htmlslider--slide .htmlslider__track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.htmlslider--slide .htmlslider__slide {
  flex: 0 0 100%;
}

/* ======================================================
   NONE MODE
====================================================== */

.htmlslider--none .htmlslider__slide {
  display: none;
}

.htmlslider--none .htmlslider__slide.is-active {
  display: block;
}

/* ======================================================
   ARROWS
====================================================== */

.htmlslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: auto;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;
  padding: 0;
  margin: 0;

  background: rgba(0, 0, 0, .4);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease,
              transform .25s ease,
              background .2s ease;
}

.htmlslider__arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.htmlslider:hover .htmlslider__arrow,
.htmlslider:focus-within .htmlslider__arrow {
  opacity: 1;
}

.htmlslider__arrow--prev {
  left: 12px;
}

.htmlslider__arrow--next {
  right: 12px;
}

.htmlslider__arrow:hover {
  background: rgba(0, 0, 0, .65);
  transform: translateY(-50%) scale(1.08);
}

.htmlslider__arrow:active {
  transform: translateY(-50%) scale(.95);
}

.htmlslider__arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
  opacity: 1;
}

/* ======================================================
   CONTROLS CONTAINER (dots + play/pause)
   FIX: Now inside the viewport, positioned correctly.
====================================================== */

.htmlslider__controls {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 10px;

  z-index: 25;
  pointer-events: auto;
}

/* ======================================================
   DOTS
====================================================== */

.htmlslider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.htmlslider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background .2s ease,
              transform .2s ease,
              width .3s ease;
}

.htmlslider__dot.is-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

.htmlslider__dot:hover:not(.is-active) {
  background: rgba(255, 255, 255, .7);
  transform: scale(1.2);
}

.htmlslider__dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

/* ======================================================
   PLAY / PAUSE BUTTON
====================================================== */

.htmlslider__toggle {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;
  padding: 0;

  background: rgba(0, 0, 0, .35);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  cursor: pointer;
  opacity: .85;
  transition: background .2s ease,
              transform .2s ease,
              opacity .2s ease;
}

.htmlslider__toggle svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
}

.htmlslider__toggle:hover {
  background: rgba(0, 0, 0, .6);
  opacity: 1;
  transform: scale(1.08);
}

.htmlslider__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

/* ======================================================
   PROGRESS BAR (AUTOPLAY)
   FIX: Now inside the viewport.
====================================================== */

.htmlslider__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .25);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 20;
  pointer-events: none;
  transition: none;
}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

  .htmlslider--fade .htmlslider__slide {
    transition: none;
  }

  .htmlslider--slide .htmlslider__track {
    transition: none;
  }

  .htmlslider__arrow,
  .htmlslider__dot,
  .htmlslider__toggle {
    transition: none;
  }
}


/* ==========================================================================
   WAI HERO SLIDE 1 (bundled — was previously in the site Custom CSS)
   ========================================================================== */
/* Photo overlay strength arrives as --wai-scrim on the slider wrapper, set
   from the settings screen, and inherits down to the ::after below. 0 = none,
   1 = full. Nothing here declares it, or the inherited value would lose. */
.wai-slide-1 {
  position: relative !important;
  width: 100% !important;
  min-height: 630px !important;
  /* Flex-centred rather than block, so the copy can be centred without being
     taken out of flow. The container used to be absolutely positioned and
     translated -50%, which meant a headline taller than 630px was silently
     clipped by the overflow:hidden below. */
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
}
.wai-slide-1 .wai-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
}
.wai-slide-1 .wai-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.wai-slide-1 .wai-bg::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;

  /* Colour and falloff both come from the settings screen:
       --wai-ov-rgb    0,0,0 for a dark wash, 233,235,236 for a light one
       --wai-ov-solid  where it stops being essentially opaque
       --wai-ov-mid    the knee of the falloff
       --wai-ov-end    where it reaches fully transparent
     The stops are percentages of the viewport, so the wash needs to run past
     the text column or the right end of each line lands on the photo. */
  background: linear-gradient(90deg,
      rgba(var(--wai-ov-rgb, 0,0,0), 1) 0%,
      rgba(var(--wai-ov-rgb, 0,0,0), .97) var(--wai-ov-solid, 53%),
      rgba(var(--wai-ov-rgb, 0,0,0), .55) var(--wai-ov-mid, 70%),
      rgba(var(--wai-ov-rgb, 0,0,0), 0) var(--wai-ov-end, 85%)) !important;

  opacity: var(--wai-scrim, .9) !important;
}


/* Legibility now comes from a shadow behind the glyphs rather than from
   darkening the whole image. Deliberately not applied to .wai-btn-primary,
   which is black text on a white pill. */
.wai-slide-1 .wai-eyebrow,
.wai-slide-1 .wai-headline,
.wai-slide-1 .wai-body,
.wai-slide-1 .wai-btn-outline {
  text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.55) !important;
}
.wai-slide-1 .wai-container {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 60px 20px !important;
  box-sizing: border-box !important;
}
.wai-slide-1 .wai-inner {
  /* 730px is WWP's own .text-contents width, and matches the measured
     div.h1Style.heroH1 box at 730 x 195 — three 65px lines at line-height 1. */
  max-width: 730px !important;
  width: 100% !important;
  color: #fff !important;
}
.wai-slide-1 .wai-eyebrow {
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: #6fa8dc !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
.wai-slide-1 .wai-headline {
  /* Wounded Warrior Project's .heroH1: Montserrat bold at 65px with a
     line-height of 1 and a 20px gap beneath. Their h1 rule is font-weight
     bold (700), not 800 — the extra weight was making ours look heavier at a
     smaller size. Base size is a variable so it can be tuned per slider from
     the settings screen; the breakpoints scale from it proportionally, using
     WWP's own 65 / 55 / 42 / 36 ratios. */
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: var(--wai-headline, 65px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 0 20px !important;
}
.wai-slide-1 .wai-body {
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.85) !important;
  margin: 0 0 32px !important;
}
.wai-slide-1 .wai-body a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.wai-slide-1 .wai-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.wai-slide-1 .wai-btn {
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.wai-slide-1 .wai-btn-primary {
  background: #fff !important;
  color: #000 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  transition: background .2s ease !important;
}
.wai-slide-1 .wai-btn-primary:hover {
  background: #e5e5e5 !important;
}
.wai-slide-1 .wai-btn-outline {
  color: #fff !important;
  padding: 8px 0 !important;
}
/* Breakpoints follow WWP's: 991.98 / 767.98 / 575.98 / 400. Headline sizes
   are expressed as ratios of the base so a custom base still steps down in
   the same proportions (55/65, 42/65, 36/65). */
@media (max-width: 991.98px) {
  .wai-slide-1 .wai-headline {
    font-size: calc(var(--wai-headline, 65px) * .846) !important;
  }
}

@media (max-width: 767.98px) {
  .wai-slide-1 .wai-container {
    padding: 40px 16px !important;
  }
  .wai-slide-1 .wai-inner {
    max-width: 100% !important;
  }
  .wai-slide-1 .wai-body {
    font-size: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .wai-slide-1 .wai-headline {
    font-size: calc(var(--wai-headline, 65px) * .646) !important;
  }
}

@media (max-width: 400px) {
  .wai-slide-1 .wai-headline {
    font-size: calc(var(--wai-headline, 65px) * .554) !important;
  }
}


/* ==========================================================================
   HERO TEXT COLOUR — independent of the overlay colour

   Overlay colour is set separately as --wai-ov-rgb, so a light wash with
   white copy or a dark wash with black copy are both reachable if a photo
   calls for it.
   ========================================================================== */

/* --- dark copy (Wounded Warrior Project's default h1 colour is #000) --- */

.htmlslider--text-dark .wai-slide-1 .wai-inner   { color: #232323 !important; }
.htmlslider--text-dark .wai-slide-1 .wai-headline { color: #000000 !important; }
.htmlslider--text-dark .wai-slide-1 .wai-body     { color: #232323 !important; }
.htmlslider--text-dark .wai-slide-1 .wai-body a   { color: #000000 !important; }
.htmlslider--text-dark .wai-slide-1 .wai-eyebrow  { color: #005da5 !important; }

.htmlslider--text-dark .wai-slide-1 .wai-btn-primary {
  background: #000 !important;
  color: #fff !important;
}
.htmlslider--text-dark .wai-slide-1 .wai-btn-primary:hover { background: #333 !important; }
.htmlslider--text-dark .wai-slide-1 .wai-btn-outline { color: #000000 !important; }

/* A shadow under dark copy only reads as grubby edges. */
.htmlslider--text-dark .wai-slide-1 .wai-eyebrow,
.htmlslider--text-dark .wai-slide-1 .wai-headline,
.htmlslider--text-dark .wai-slide-1 .wai-body,
.htmlslider--text-dark .wai-slide-1 .wai-btn-outline {
  text-shadow: none !important;
}

/* --- light copy --- */

.htmlslider--text-light .wai-slide-1 .wai-inner    { color: #fff !important; }
.htmlslider--text-light .wai-slide-1 .wai-headline { color: #fff !important; }
.htmlslider--text-light .wai-slide-1 .wai-body     { color: rgba(255,255,255,.85) !important; }
.htmlslider--text-light .wai-slide-1 .wai-body a   { color: #fff !important; }
.htmlslider--text-light .wai-slide-1 .wai-eyebrow  { color: #6fa8dc !important; }

.htmlslider--text-light .wai-slide-1 .wai-btn-primary {
  background: #fff !important;
  color: #000 !important;
}
.htmlslider--text-light .wai-slide-1 .wai-btn-primary:hover { background: #e5e5e5 !important; }
.htmlslider--text-light .wai-slide-1 .wai-btn-outline { color: #fff !important; }

.htmlslider--text-light .wai-slide-1 .wai-eyebrow,
.htmlslider--text-light .wai-slide-1 .wai-headline,
.htmlslider--text-light .wai-slide-1 .wai-body,
.htmlslider--text-light .wai-slide-1 .wai-btn-outline {
  text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.55) !important;
}

/* ==========================================================================
   HEADLINE CASE
   ========================================================================== */

.htmlslider--case-sentence .wai-slide-1 .wai-headline { text-transform: none !important; }
.htmlslider--case-upper    .wai-slide-1 .wai-headline { text-transform: uppercase !important; }


/* ==========================================================================
   PER-SLIDE OVERRIDES

   The settings screen sets a default for the whole slider on the wrapper.
   These classes go on the slide's own <section> and override it for that one
   slide, which is what you want when slide 1 sits on a dark photo and slide 2
   on a light one:

     <section class="wai-slide-1 wai-ov-dark wai-text-light"> ... </section>

   These rules are placed after the wrapper-level ones and carry the same
   specificity, so the later declaration wins. Don't reorder this block above
   them.

   The custom properties are handled differently: declaring one on the slide
   beats the value inherited from the wrapper regardless of source order, so
   --wai-ov-rgb below is not order-dependent.
   ========================================================================== */

/* --- overlay colour --- */

.wai-slide-1.wai-ov-dark  { --wai-ov-rgb: 0,0,0 !important; }
.wai-slide-1.wai-ov-light { --wai-ov-rgb: 233,235,236 !important; }

/* --- text colour --- */

.wai-slide-1.wai-text-light .wai-inner    { color: #fff !important; }
.wai-slide-1.wai-text-light .wai-headline { color: #fff !important; }
.wai-slide-1.wai-text-light .wai-body     { color: rgba(255,255,255,.85) !important; }
.wai-slide-1.wai-text-light .wai-body a   { color: #fff !important; }
.wai-slide-1.wai-text-light .wai-eyebrow  { color: #6fa8dc !important; }

.wai-slide-1.wai-text-light .wai-btn-primary {
  background: #fff !important;
  color: #000 !important;
}
.wai-slide-1.wai-text-light .wai-btn-primary:hover { background: #e5e5e5 !important; }
.wai-slide-1.wai-text-light .wai-btn-outline { color: #fff !important; }

.wai-slide-1.wai-text-light .wai-eyebrow,
.wai-slide-1.wai-text-light .wai-headline,
.wai-slide-1.wai-text-light .wai-body,
.wai-slide-1.wai-text-light .wai-btn-outline {
  text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.55) !important;
}

.wai-slide-1.wai-text-dark .wai-inner    { color: #232323 !important; }
.wai-slide-1.wai-text-dark .wai-headline { color: #000000 !important; }
.wai-slide-1.wai-text-dark .wai-body     { color: #232323 !important; }
.wai-slide-1.wai-text-dark .wai-body a   { color: #000000 !important; }
.wai-slide-1.wai-text-dark .wai-eyebrow  { color: #005da5 !important; }

.wai-slide-1.wai-text-dark .wai-btn-primary {
  background: #000 !important;
  color: #fff !important;
}
.wai-slide-1.wai-text-dark .wai-btn-primary:hover { background: #333 !important; }
.wai-slide-1.wai-text-dark .wai-btn-outline { color: #000000 !important; }

.wai-slide-1.wai-text-dark .wai-eyebrow,
.wai-slide-1.wai-text-dark .wai-headline,
.wai-slide-1.wai-text-dark .wai-body,
.wai-slide-1.wai-text-dark .wai-btn-outline {
  text-shadow: none !important;
}

/* --- headline case --- */

.wai-slide-1.wai-case-sentence .wai-headline { text-transform: none !important; }
.wai-slide-1.wai-case-upper    .wai-headline { text-transform: uppercase !important; }