/* ===== Shared chrome + components (all pages) ===== */
body { font-family: "Jost", system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: "Cinzel", serif; }

/* Sticky header state (toggled by site.js). `.over-light` is set in the markup on
   pages whose top section is light (e.g. vision.html), so the header is a solid
   white bar with dark text from the start instead of assuming a dark hero behind. */
#siteHeader.is-scrolled,
#siteHeader.over-light {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Header sits transparent over a dark navy hero/sub-hero at the top of every page,
   so the logo + nav links are light there for contrast; once scrolled the header
   turns solid white (.is-scrolled) and they switch back to navy/blue. These
   #siteHeader rules outrank the Tailwind colour utilities on the markup. The nav
   CTA (the blue "Pool Vision AI" button) is excluded so its white label is kept. */
#siteHeader a[href="index.html"] > span:first-child { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
#siteHeader a[href="index.html"] strong { color: #fff; }
#siteHeader a[href="index.html"] small { color: rgba(255, 255, 255, 0.85); }
#siteHeader nav a:not([class*="bg-pool-500"]) { color: rgba(255, 255, 255, 0.92); }
#siteHeader nav a:not([class*="bg-pool-500"]):hover { color: #fff; }
#siteHeader #navToggle span { background: #fff; }

#siteHeader.is-scrolled a[href="index.html"] > span:first-child,
#siteHeader.over-light a[href="index.html"] > span:first-child { color: #0895da; border-color: rgba(8, 149, 218, 0.6); }
#siteHeader.is-scrolled a[href="index.html"] strong,
#siteHeader.over-light a[href="index.html"] strong { color: #0e3f6c; }
#siteHeader.is-scrolled a[href="index.html"] small,
#siteHeader.over-light a[href="index.html"] small { color: #0895da; }
#siteHeader.is-scrolled nav a:not([class*="bg-pool-500"]),
#siteHeader.over-light nav a:not([class*="bg-pool-500"]) { color: #475569; }
#siteHeader.is-scrolled nav a:not([class*="bg-pool-500"]):hover,
#siteHeader.over-light nav a:not([class*="bg-pool-500"]):hover { color: #0895da; }
#siteHeader.is-scrolled #navToggle span,
#siteHeader.over-light #navToggle span { background: #0e3f6c; }

/* Google Places autocomplete dropdown above the fixed header */
.pac-container { z-index: 1200; }

/* ===== Blue controls ===== */
.btn-pool, .btn-outline {
  display: inline-block; font-family: "Space Mono", monospace; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px;
  border: 1px solid transparent; cursor: pointer; transition: all 0.25s ease; text-align: center;
}
.btn-pool { background: #0895da; color: #fff; }
.btn-pool:hover { background: #0e3f6c; transform: translateY(-2px); }
.btn-outline { background: transparent; color: #0895da; border-color: rgba(8, 149, 218, 0.6); }
.btn-outline:hover { border-color: #0895da; background: rgba(8, 149, 218, 0.08); }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }