/* ==========================================================================
   site.css — J's Pool Solutions (Orlando, FL). Brief §3 (split-hero, "the
   kept easy"), §5 (motion). Tokens only, per house-tech-spec §3.

   Carries the house structural primitives (container, header/nav, buttons,
   form, footer) forward from the skeleton, extended with this brief's
   components and token-driven overrides — never a design decision beyond
   what the brief states.
   ========================================================================== */

/* --- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--section-gap);
}

.measure {
  max-width: var(--layout-measure);
}

/* House heading sizes — every h1/h2 on the site, not only the hero's. Without
   this, a bare h1 (thanks.html, buy.html) or h2 (every section heading below
   the hero) falls back to the browser default rather than the brief's type
   scale (brief §2.3). */
h1 {
  font-size: var(--text-hero);
  margin-block-end: var(--space-md);
}

h2 {
  font-size: var(--text-h2);
}

/* Paragraph rhythm inside a plain prose block (thanks.html, buy.html): a
   wrapping element carrying .measure with more than one direct child gets
   consistent spacing between them, the same step site.css already uses for
   the section-heading-to-body relationship. */
.measure > * + * {
  margin-block-start: var(--space-md);
}

/* --- Header & navigation ----------------------------------------------------
   Brief §3.4: "Header (persistent, every page): wordmark, tel: link, sticky,
   per design-rules.md §6." Sticky stacking and the matching preview-bar
   offset live in css/preview.css (house-tech-spec §2's documented override
   mechanism), which this brief exercises. */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-none);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* QA r3 FIX perf/cls (house skeleton defect, present on every site built from
   it): closed is the plain CSS default below 48em, no JS gate, so nothing
   collapses post-paint. JS-off visitors get the nav back via the <noscript>
   stylesheet override in @shared:head-boilerplate. */
.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons ---------------------------------------------------------------
   Brief §2.4: --radius-pill for the CTA, everywhere else --radius-none. The
   primary fill is --color-accent-deep (the one text-safe accent role,
   brief §2.1/§2.2) — never --color-accent, which is decorative-only and
   fails AA under any text (2.26:1). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent-deep);
  color: var(--color-accent-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-ink);
}

.btn--quiet {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
}

/* Accessibility primitives painted from --color-accent/--color-accent-ink in
   base.css: this brief's --color-accent (sunbeam-bright) fails AA as a fill
   under white text (2.26:1, brief §2.2) — it is reserved for decorative
   ambient shapes only. Reuse the validated accent-deep/accent-ink pair the
   primary CTA uses instead (5.04:1). */
.skip-link {
  background-color: var(--color-accent-deep);
  border-radius: var(--radius-none);
}

/* --- Eyebrow -----------------------------------------------------------
   Hero-only text role (brief §3.1's DOM order). Label copy is authored in
   natural case and uppercased here with text-transform, never typed in caps
   (house-tech-spec §8). Accent-deep on --color-bg only (4.68:1, brief §2.2)
   — never on --color-surface (4.28:1, fails body AA). */
.eyebrow {
  margin: 0;
  margin-block-end: var(--space-2xs);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

/* --- Hero ("hero-call") ------------------------------------------------
   split-hero archetype (brief §3, §3.1/§3.2). DOM order: field (image) ->
   eyebrow -> h1 -> lead -> primary CTA -> facts. At >=64em the layout
   becomes a genuine two-column split (image column ~55%, text column ~45%
   of --layout-container); at 375px the field is a fixed-height band above
   the stacked text column (--hero-scene-height, brief §3.1's arithmetic). */

.hero {
  padding-block-end: var(--section-gap);
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
}

.hero__scene {
  position: relative;
  overflow: hidden;
  height: var(--hero-scene-height);
  border-radius: var(--radius-none);
  background: linear-gradient(
    to bottom,
    var(--color-hero-sky-from) 0%,
    var(--color-hero-sky-to) 62%,
    var(--color-hero-water-from) 62%,
    var(--color-hero-water-to) 100%
  );
}

.hero__scene picture {
  position: absolute;
  inset: 0;
}

.hero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

/* Living-hero: three independent, non-synchronised ambient satellites over
   the generated photograph (brief §5, §0 requirement). Purely decorative —
   aria-hidden, never essential information (WCAG 1.4.11 does not apply,
   brief §2.2's contrast table). Sized off the space scale, positioned by
   percentage so geometry scales correctly at every viewport the hero-scene
   renders at (brief §5's petal-drift note). */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__sun,
.hero__ripple,
.hero__petal {
  position: absolute;
  border-radius: 50%;
}

.hero__sun {
  inset-block-start: 10%;
  inset-inline-end: 14%;
  width: var(--space-xl);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 72%);
  animation: hero-sun-breathe var(--duration-sun) var(--ease-in-out) infinite;
}

.hero__ripple {
  inset-block-start: 44%;
  inset-inline-start: 58%;
  width: var(--space-lg);
  aspect-ratio: 1;
  border: var(--border-thick) var(--border-style) var(--color-accent);
  animation: hero-ripple-out var(--duration-ripple) var(--ease-out) infinite;
}

.hero__petal {
  inset-block-start: 22%;
  inset-inline-start: 10%;
  width: var(--space-sm);
  aspect-ratio: 1;
  background: var(--color-accent);
  animation: hero-petal-drift var(--duration-petal) var(--ease-in-out) infinite;
}

@keyframes hero-sun-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.9; }
}

@keyframes hero-ripple-out {
  0%   { transform: scale(0.2); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes hero-petal-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(56%, 5%) rotate(60deg); }
}

/* Reduced motion (brief §5, house-tech-spec §8): the still frame is pinned
   to an explicit resolved position — sun glowing, a mid-expanded ripple
   ring, a petal partway across its drift — never a blank or raw base state.
   base.css's shared kill switch collapses --duration-fast/base/slow; these
   three brief-specific timings are not in that set, so this site's own
   query handles them. */
@media (prefers-reduced-motion: reduce) {
  .hero__sun,
  .hero__ripple,
  .hero__petal {
    animation: none;
  }
  .hero__sun    { transform: scale(1);    opacity: 1; }
  .hero__ripple { transform: scale(0.75); opacity: 0.45; }
  .hero__petal  { transform: translate(31%, 3%) rotate(25deg); opacity: 1; }
}

.hero__copy {
  min-width: 0;
}

.hero__lead {
  margin: 0;
  margin-block-end: var(--space-md);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.hero__cta {
  margin: 0;
  margin-block-end: var(--space-md);
}

.hero__facts {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.hero h1 {
  margin: 0;
  margin-block-end: var(--space-sm);
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: 11fr 9fr;
    align-items: stretch;
    gap: var(--space-xl);
  }

  .hero__scene {
    height: auto;
  }
}

/* --- Weekly Plan Offer ---------------------------------------------------
   The one banded section on the page: --color-surface used for exactly the
   raised/alternating-band role tokens.css declares it for (brief §2.1),
   dramatizing the dossier's own differentiator (brief §3.4 row 2). Body text
   stays on the ink/ink-muted pair, which clears AA on both grounds (brief
   §2.2) — no accent-deep text is placed on this band. */
.offer {
  background-color: var(--color-surface);
}

.offer__body {
  margin: 0;
  margin-block-end: var(--space-md);
}

/* --- Section heading rhythm ------------------------------------------------
   One shared shape: heading, then an optional lead paragraph, then content.
   No card, no icon grid (design-rules §4). */
.section__head {
  margin: 0;
  margin-block-end: var(--space-md);
}

.section__body {
  margin: 0;
}

.section__body + * {
  margin-block-start: var(--space-md);
}

/* Secondary-focal-point object studies (brief §4: equipment pad, water-test
   vials, coping/skimmer detail) — below the fold, lazy, never the LCP
   element. Shares the reading measure with the text above it. */
.section__image {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: var(--space-md);
  border-radius: var(--radius-none);
}

/* --- Services list ---------------------------------------------------------
   Plain rows, no icon, no counter — the page's one numbered/marked list is
   "What Every Visit Covers" below, and design-rules §5 bans two counters in
   one costume, so this list carries none. */
.plain-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.plain-list li {
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.plain-list li:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

/* --- What Every Visit Covers --------------------------------------------
   The plain circular marks borrowed from ref-005's hand-drawn-line-icon
   register (brief §1), re-expressed as unfilled rings — a distinct system
   from the plain hairline rows above (design-rules §5: distinct glyph,
   never the same costume). border-radius: 50% is a literal shape, not a
   token call (brief §2.4). */
.visit-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.visit-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.visit-list__item:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.visit-list__mark {
  flex: 0 0 auto;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  border: var(--border-thick) var(--border-style) var(--color-accent-deep);
}

.visit-list__text {
  margin: 0;
}

/* --- Season strip ----------------------------------------------------------
   Year-round frame (brief §3.4 row 5, copy §1.6) — a small inline SVG
   sun/wave motif, decorative, aria-hidden. No new photograph. */
.season {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.season__motif {
  flex: 0 0 auto;
  width: var(--space-2xl);
  height: var(--space-2xl);
  color: var(--color-accent-deep);
}

.season__copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Trust line ----------------------------------------------------------
   Three plain facts, no badge, no seal (brief §3.4 row 6, copy §1.7). A
   wrapping row, not a four-stat counter grid (design-rules §4) — three
   items, no numerals, no icon. */
.trust-facts {
  margin: 0;
  margin-block-start: var(--space-md);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.trust-facts li {
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

/* --- Form -----------------------------------------------------------------
   One form per site (spec §6). POSTs to the endpoint constant in main.js;
   works as a plain HTML POST with JS off. */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-none);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* --- FAQ --------------------------------------------------------------
   Native <details>/<summary>, no button, no card (copy §1.10). */
.faq {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.faq__item {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__item:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__item summary {
  padding-block: var(--space-sm);
  font-weight: var(--font-weight-body-strong);
  cursor: pointer;
}

.faq__item p {
  margin: 0;
  padding-block-end: var(--space-sm);
  color: var(--color-ink-muted);
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
}

.site-footer a {
  text-underline-offset: var(--space-3xs);
}

.site-footer__nap {
  font-style: normal;
}

/* --- Breakpoints — house-fixed (design-rules §5) --------------------------- */

@media (min-width: 48em) {
  .season__motif {
    width: var(--space-3xl);
    height: var(--space-3xl);
  }
}