/* ==========================================================================
   SwimFresh — browser + mobile compatibility layer
   Safari iOS · Chrome · Firefox · Edge · DuckDuckGo (WebKit/Chromium)
   Load after responsive.css
   ========================================================================== */

/* Base: smooth + consistent across engines */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(11, 92, 99, 0.12);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.site-header {
  padding-top: env(safe-area-inset-top, 0px);
  position: -webkit-sticky;
  position: sticky;
}

.nav-mobile-panel {
  max-height: 100vh;
  max-height: 100dvh;
}

/* Prevent iOS input zoom (must be ≥16px) */
input,
select,
textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.input-text {
  font-size: 16px !important;
}

/* Tap targets */
a,
button,
.btn,
.menu-toggle,
.nav-link,
.hero-dot,
.reviews-dot,
.faq-item__button {
  touch-action: manipulation;
}

/* Flex/grid min-width fix */
.product-card__title,
.section-title,
.woocommerce-loop-product__title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.hero__headline {
  overflow-wrap: normal;
  word-break: normal;
}

/* Images: never overflow containers */
img {
  max-width: 100%;
  height: auto;
}

/* Full-bleed hero backgrounds need explicit cover fill */
.hero-slide__bg img {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@supports not selector(:has(*)) {
  body.woocommerce-checkout .form-row {
    position: relative;
    z-index: auto;
  }
}

:focus-visible {
  outline: 3px solid #2ec4b6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bubble,
  .splash,
  .ripple,
  .float-droplet,
  .fun-floater,
  .confetti-piece,
  .scroll-progress {
    animation: none !important;
    display: none !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .nav-mobile-panel {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  .header-inner {
    gap: 0.35rem;
  }

  .brand-logo__word {
    font-size: 1.25rem !important;
  }
}

@media print {
  .nav-mobile,
  .menu-toggle,
  .bubbles,
  .splashes {
    display: none !important;
  }
}

/* ==========================================================================
   Hero — desktop focal point
   ========================================================================== */
.hero-slide__bg img {
  object-position: center 42%;
}


/* Hero text: white on dark photo scrim (all breakpoints) */
.hero__headline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero__support {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  background: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero__text .section-eyebrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.hero__reassure .reassure-item {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.hero .reassure-item svg {
  color: #7dd3c0 !important;
}
/* ==========================================================================
   Hero — tablet + phone: vivid photo, bottom dark scrim, light text
   ========================================================================== */
@media (max-width: 1024px) {
  .hero {
    min-height: min(78vh, 680px) !important;
    min-height: min(78dvh, 680px) !important;
    padding-top: calc(var(--header-height, 72px) + 1rem) !important;
    padding-bottom: 4.5rem !important;
    align-items: flex-end !important;
  }

  .hero-slide {
    padding-top: calc(var(--header-height, 72px) + 1rem) !important;
    padding-bottom: 4.5rem !important;
    align-items: flex-end !important;
  }

  /* No Ken Burns on touch — sharper crop */
  .hero-slide__bg img,
  .hero-slide.is-active .hero-slide__bg img {
    transform: none !important;
    transition: none !important;
    object-fit: cover !important;
    object-position: center 36% !important;
    filter: none !important;
  }

  /* Bottom scrim only — photo stays vivid above */
  .hero-slide__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(5, 35, 42, 0.18) 0%,
        rgba(5, 35, 42, 0.06) 32%,
        rgba(5, 35, 42, 0.35) 55%,
        rgba(5, 35, 42, 0.72) 78%,
        rgba(4, 28, 34, 0.88) 100%
      ) !important;
  }

  .hero__content {
    width: 100%;
    padding-bottom: 0.15rem;
  }

  .hero__text {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero__headline {
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  .hero__support {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  }

  .hero__text .section-eyebrow {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }

  .hero__text .btn--primary {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  }

  .hero__text .btn--secondary {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #0b5c63 !important;
    border: none !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  }

  .hero__reassure .reassure-item {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none !important;
  }

  /* Hide floating clutter over the photo */
  .hero > .bubbles,
  .hero > .splashes,
  .hero > .ripple-field {
    opacity: 0.15;
    pointer-events: none;
  }

  .hero-controls {
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: min(88vh, 700px) !important;
    min-height: min(88svh, 700px) !important;
    min-height: min(88dvh, 700px) !important;
    padding-top: calc(var(--header-height, 68px) + 0.5rem) !important;
    padding-bottom: 5.5rem !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .hero-slide {
    padding-top: calc(var(--header-height, 68px) + 0.65rem) !important;
    padding-bottom: 5rem !important;
  }

  .hero-slide__bg img,
  .hero-slide.is-active .hero-slide__bg img {
    object-position: center 30% !important;
  }

  .hero-slide__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 30, 36, 0.12) 0%,
        rgba(4, 30, 36, 0.04) 28%,
        rgba(4, 30, 36, 0.28) 50%,
        rgba(4, 30, 36, 0.68) 72%,
        rgba(3, 22, 28, 0.9) 100%
      ) !important;
  }

  .hero__headline {
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    margin-bottom: 0.55rem !important;
  }

  .hero__support {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    max-width: 22rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1rem !important;
  }

  .hero__text .section-eyebrow {
    margin-bottom: 0.65rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
  }

  .hero__text .btn-group {
    margin-top: 0.15rem;
    gap: 0.65rem !important;
  }

  .hero__text .btn--lg {
    min-height: 3rem;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  .hero__reassure {
    display: none !important; /* free vertical space for CTAs */
  }

  .hero-controls {
    bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero > .bubbles,
  .hero > .splashes,
  .hero > .ripple-field {
    display: none !important;
  }
}

/* Short / landscape phones */
@media (max-width: 900px) and (max-height: 480px) {
  .hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding-top: calc(var(--header-height, 60px) + 0.4rem) !important;
    padding-bottom: 3.5rem !important;
  }

  .hero-slide__bg img {
    object-position: center 42% !important;
  }

  .hero__reassure {
    display: none !important;
  }

  .hero > .bubbles,
  .hero > .splashes,
  .hero > .ripple-field {
    display: none !important;
  }

  .hero-slide__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 30, 36, 0.25) 0%,
        rgba(4, 30, 36, 0.55) 55%,
        rgba(3, 22, 28, 0.88) 100%
      ) !important;
  }
}

@media (max-width: 380px) {
  .hero {
    min-height: min(76svh, 580px) !important;
  }

  .hero-slide__bg img {
    object-position: center 28% !important;
  }

  .hero__headline {
    font-size: 1.7rem !important;
  }

  .hero__support {
    font-size: 0.9rem !important;
  }
}