/*
Theme Name: Blue Storm Pools
Theme URI: https://www.bluestormpools.co.za/
Author: Built for Blue Storm Pools
Description: Custom single-page theme for Blue Storm Pools, Fourways.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: bluestorm
*/

  body { margin: 0; font-family: 'Archivo', sans-serif; }
  a { color: inherit; text-decoration: none; }
  .bsp-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
  .bsp-link:hover { color: #2EC5FF; border-color: #2EC5FF; }
  .bsp-navlink:hover { color: #2EC5FF; }
  .bsp-cta:hover { filter: brightness(1.15); }
  .bsp-cta-outline:hover { background: rgba(255,255,255,0.1); }
  .bsp-photo { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .bsp-photo-wrap:hover .bsp-photo { transform: scale(1.035); }

  /* Scroll reveal */
  .bsp-reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .bsp-revealed { opacity: 1; transform: translateY(0); }

  /* Parallax images */
  .bsp-parallax-wrap { position: relative; overflow: hidden; height: 100%; isolation: isolate; }
  .bsp-parallax { position: absolute; top: -70px; left: 0; width: 100%; height: calc(100% + 140px); object-fit: cover; display: block; will-change: transform; }

  /* Hero water loop — the dark footage is lifted to brand blue with a screen-blend tint */
  .bsp-water { filter: brightness(1.3) contrast(1.06); }
  .bsp-water-tint { position: absolute; inset: 0; pointer-events: none; background: #06408F; mix-blend-mode: screen; opacity: 0.88; }
  .bsp-water-depth { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,28,53,0.42) 0%, rgba(10,28,53,0) 38%, rgba(10,28,53,0.38) 100%); }

  /* Services rows — identical anatomy on every row: number left, body centre, photo right */
  .bsp-svc-row { display: flex; gap: 40px; align-items: stretch; }
  .bsp-svc-num { flex: 0 0 64px; padding: 44px 0; font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; color: #2EC5FF; }
  .bsp-svc-body { flex: 1 1 auto; min-width: 0; padding: 44px 0; }
  .bsp-svc-media { flex: 0 0 340px; align-self: stretch; overflow: hidden; }

  /* Services ticker — slow, pauses on hover so it can actually be read */
  .bsp-marquee-track { display: flex; width: max-content; animation: bsp-marquee 62s linear infinite; }
  .bsp-marquee-wrap:hover .bsp-marquee-track { animation-play-state: paused; }
  @keyframes bsp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .bsp-rule-row { border-top: 1px solid rgba(10,28,53,0.14); }
  .bsp-field { width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid rgba(10,28,53,0.3); padding: 10px 2px; font-size: 16px; font-family: 'Archivo', sans-serif; color: #0A1C35; }
  .bsp-field:focus { outline: none; border-bottom-color: #2EC5FF; }
  .bsp-field::placeholder { color: rgba(10,28,53,0.38); }

  @media (prefers-reduced-motion: reduce) {
    .bsp-reveal { opacity: 1; transform: none; transition: none; }
    .bsp-marquee-track { animation: none !important; }
  }

  /* ---------- Tablet and below ---------- */
  @media (max-width: 900px) {
    .bsp-hide-mobile { display: none !important; }
    .bsp-stack-mobile { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; }
    /* in a column a flex-basis is read as a HEIGHT, which forced 460-560px tall blocks */
    .bsp-stack-mobile > * { flex: none !important; margin-left: 0 !important; margin-right: 0 !important; }
    .bsp-hero-split { gap: 0 !important; }
    .bsp-pad-block { padding-top: 48px !important; padding-bottom: 48px !important; }
    .bsp-grid-stack-mobile { grid-template-columns: 1fr !important; }
    .bsp-section-pad { padding-left: 24px !important; padding-right: 24px !important; }

    /* a photo that is no longer filling a stretched row needs a real height */
    .bsp-parallax-wrap { height: 280px !important; }
    /* no parallax on phones: the -70px/+140px buffer hid the top and bottom of every
       photo (it was cutting the team's heads off), and scroll-linked transforms are
       costly on mobile. Sit each image flush in its frame instead. */
    .bsp-parallax { top: 0 !important; height: 100% !important; transform: none !important; }

    /* services: number above the heading, photo underneath — same order every row */
    .bsp-svc-row { flex-direction: column; gap: 0; }
    .bsp-svc-num { flex: none; padding: 30px 0 0; }
    .bsp-svc-body { padding: 8px 0 26px; }
    .bsp-svc-media { flex: none; width: 100%; height: 240px; margin-bottom: 32px; }
    .bsp-svc-media .bsp-parallax-wrap { height: 240px !important; }

    /* ruled cells lose their side rule and uneven padding, and gain a stacked rule */
    .bsp-cell { padding: 30px 0 !important; border-right: none !important; }
    .bsp-cell + .bsp-cell { border-top: 1px solid rgba(10,28,53,0.14); }

    .bsp-gap-lg { gap: 28px !important; }
    .bsp-logo { height: 46px !important; }
    .bsp-hero-h1 { font-size: 40px !important; }
    .bsp-footer-nav a { border: none !important; padding: 0 16px 0 0 !important; }
  }

  /* ---------- Phone ---------- */
  @media (max-width: 560px) {
    .bsp-section-pad { padding-left: 18px !important; padding-right: 18px !important; }
    .bsp-hero-h1 { font-size: 32px !important; }
    .bsp-h2 { font-size: 28px !important; }
    .bsp-quote-lg { font-size: 22px !important; }
    .bsp-stat { font-size: 52px !important; }
    .bsp-phone-xl { font-size: 38px !important; }
    .bsp-parallax-wrap { height: 220px !important; }
    .bsp-svc-media, .bsp-svc-media .bsp-parallax-wrap { height: 200px !important; }
  }