/* ============================================================
   PWS hero slider
   Rotates the hero's eyebrow + headline with a promotional banner.
   purewaternv.com · added 3 November 2026

   Scope is deliberately tight: only the eyebrow and <h1> are
   swapped. The paragraph, buttons, arsenic bar and badges below
   are untouched and stay visible on both slides.

   Every selector is prefixed .pwshs- so it cannot collide with
   the site's own styles.
   ============================================================ */

.pwshs-root {
  --pwshs-aqua: var(--aqua-dark, #00b4d8);

  position: relative;
  width: 100%;
  /* min-height is set in JS from the measured height of slide 1,
     so swapping to the banner causes no layout shift. */
}

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

.pwshs-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.pwshs-slide.pwshs-active { opacity: 1; visibility: visible; }

/* Slide 1 keeps the original elements in normal flow, so the
   eyebrow and h1 render exactly as they do today. */
.pwshs-slide-text { position: relative; }

/* Slide 2 is layered over the same box and vertically centred. */
.pwshs-slide-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;      /* lets the banner resolve height:100% */
  justify-content: flex-start;
}

/* ---------- banner ---------- */

.pwshs-banner {
  display: block;
  /* The artwork is 1.78:1 while the slot is much wider than it is
     tall, so size by HEIGHT rather than width. The banner then fills
     the slot's full height and takes whatever width that implies,
     which keeps the zero-layout-shift guarantee intact. */
  height: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .40);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pwshs-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .48);
}
.pwshs-banner:focus-visible {
  outline: 3px solid var(--pwshs-aqua);
  outline-offset: 3px;
}
.pwshs-banner img { display: block; height: 100%; width: auto; max-width: 100%; }

/* ---------- dots ----------
   Pinned to the top-right of the slider box, level with the
   eyebrow. That strip is empty on every breakpoint we checked,
   so the controls add no height and push nothing down. */

.pwshs-dots {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
}

.pwshs-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pwshs-dot:hover { background: rgba(255, 255, 255, .45); }
.pwshs-dot[aria-current="true"] {
  background: #fff;
  border-color: #fff;
  transform: scale(1.18);
}
.pwshs-dot:focus-visible {
  outline: 2px solid var(--pwshs-aqua);
  outline-offset: 3px;
}

/* Announces slide changes to screen readers only. */
.pwshs-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- tablet ---------- */
/* Below ~900px the headline block grows tall and the banner would
   stretch past a sensible width, so switch back to width-driven. */
@media (max-width: 900px) {
  .pwshs-banner { height: auto; width: 100%; max-height: 100%; }
  /* max-height on the button alone lets the image overshoot it, so
     cap the image too and letterbox rather than overflow the slot. */
  .pwshs-banner img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
  .pwshs-slide-banner { align-items: center; }
}

/* ---------- phones ----------
   The eyebrow can wrap at narrow widths, so the dots move to the
   bottom of the box rather than risking an overlap. */
@media (max-width: 700px) {
  .pwshs-dots {
    top: auto;
    bottom: 2px;
    right: auto;
    left: 0;
  }
  .pwshs-slide-banner { justify-content: flex-start; padding-top: 4px; }
}

/* ---------- reduced motion ---------- */
/* Auto-advance is switched off in JS; this drops the crossfade. */
@media (prefers-reduced-motion: reduce) {
  .pwshs-slide { transition: none; }
  .pwshs-banner { transition: none; }
  .pwshs-banner:hover { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .pwshs-dots { display: none; }
  .pwshs-slide-banner { display: none; }
  .pwshs-slide-text { opacity: 1 !important; visibility: visible !important; }
}