/* ==========================================================================
   site.css — per-site layout & components, built FROM tokens.

   Civic's Pool Service, Tampa FL — warm-craft / postcard-stack (brief §2, §5,
   §6, §7). Single column at every width; every section below the hero
   presents as its own paper "note card" (.p-card), carrying the hero
   postcard's own torn-tape top accent; the Pool School and The Note cards
   additionally carry the static twine-and-pin corner mark (brief §7).

   HARD RULE (house-tech-spec §3): no raw hex, no px/rem size literals, no
   font-name literals in this file except the house breakpoints and an
   explicit `@allow-literal: reason` comment on the preceding line.
   ========================================================================== */

/* Layout primitives */

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

/* The postcard-stack's reading column (brief §2: a single continuous note at
   any size) — narrower than the full house container, so the page reads as
   one stack at 1440px and body text stays under the desktop measure
   ceiling (design-rules §7.2). */
.container--content {
  max-width: var(--content-max-width);
}

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

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

/* thanks.html: bare sibling <p>s get the same spacing fix buy.html's own
   rule already applies (css/preview.css); and its lone section skips
   --section-gap's top padding (sized for INTER-section rhythm, not a
   single page's leading edge) in favour of the hero's own --space-md, so
   the tel: CTA lands within brief §5.1's ~150px-below-chrome target. */
[aria-labelledby='thanks-title'] .measure > * + * {
  margin-block-start: var(--space-md);
}

[aria-labelledby='thanks-title'] {
  padding-block-start: var(--space-md);
}

/* --- Header & navigation ----------------------------------------------------
   Progressive enhancement identical to the skeleton's contract: JS-off shows
   a plain always-visible link list; JS-on collapses it behind a toggle below
   48em. This site's nav carries exactly one link (the request-form jump) plus
   the Call CTA — no second item (copy.md §1.12). */

/* Persistent sticky header (brief §5.2) — a permanent decision, not preview
   chrome, so it lives here rather than in css/preview.css and survives
   purchase. --expiry-height is undefined once preview.css is deleted at
   purchase, so inset-block-start falls back to 0 — correct once no bar sits
   above the header. */
.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height, 0px);
  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);
}

/* Anchor-jump targets must not land under the sticky stack (design-rules
   §7.2). --header-height is measured against the live DOM (tokens.css). */
.hero,
.section {
  scroll-margin-block-start: calc(var(--expiry-height, 0px) + var(--header-height));
}

.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-h2);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.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-sm);
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  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;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-body);
  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);
}

.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 ----------------------------------------------------------------
   One role beyond the plain link: the primary CTA. Small radius, flat fill —
   the letterpress-card logic reads through weight and rule, not elevation or
   a pill shape (brief §4.2). The label is never set smaller than --text-cta
   (narrowest contrast margin on the page, 4.80:1, brief §4.3). */

.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-sm);
  font-family: var(--font-body);
  font-size: var(--text-cta);
  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);
  color: var(--color-accent-ink);
}

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

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

.btn--quiet:hover {
  background-color: var(--color-surface);
}

/* --- Eyebrow / kicker text --------------------------------------------------
   Karla 700, uppercase via text-transform (never typed in caps, house-tech-
   spec §8), wide tracking — the eyebrow, facts row, and card labels. */

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Hero: the living postcard ---------------------------------------------
   House order (brief §5.1): eyebrow -> h1 -> primary CTA -> field -> lead ->
   facts. No split-hero column switch at any width (brief §2). No reveal on
   any hero element — it is the LCP zone (house-tech-spec §7). */

.hero {
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  background-color: var(--color-bg);
  /* Clips .hero__atmosphere's intentional bleed (inset: -12% of the postcard
     field's own small box) at the section's own edge, which is the viewport
     edge at every width. Without this the bleed pushes past the page on
     mobile (measured: 14-28px scrollWidth overflow from 320-599px) — the
     postcard's own rotation overflow stays well inside .hero__field's
     padding, nowhere near this boundary, so nothing else is clipped. */
  overflow: hidden;
}

.hero__title {
  margin: 0;
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.hero__title .accent-word {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent);
}

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

/* The field wrapper. Sized to the postcard's own max width — a postcard
   reads as one continuous note at any size, never a full-bleed field (brief
   §2). Padding-block reserves clearance for the ROTATED postcard's visual
   bounding box (the settle animation swings between -8deg and -4deg): a
   rotated rectangle's axis-aligned footprint is taller than its own layout
   box, and without this the postcard overlaps the lead paragraph below it.
   The inner .hero__stage carries the actual rotation and positions the
   atmosphere/sprig/glint against the postcard itself, not against this
   padding. */
.hero__field {
  margin-block-start: var(--space-md);
  padding-block: var(--space-lg);
  max-width: var(--postcard-max-width);
}

.hero__stage {
  position: relative;
}

/* The radial atmosphere (brief §4.3): sits BEHIND the postcard image only;
   no text ever renders over it. Built from this site's own bg/surface tones,
   per ref-001's adapted technique (§1). */
.hero__atmosphere {
  position: absolute;
  inset: -12%;
  z-index: var(--z-base);
  border-radius: var(--radius-sm);
  background: var(--hero-atmosphere);
  pointer-events: none;
}

.postcard {
  position: relative;
  z-index: 1;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  background-color: var(--color-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-postcard);
  overflow: clip;
  transform: rotate(var(--postcard-rest-rotate));
}

@media (prefers-reduced-motion: no-preference) {
  .postcard {
    animation: postcard-settle var(--duration-settle) var(--ease-out) both;
  }
}

@keyframes postcard-settle {
  from { transform: translateY(var(--postcard-start-y)) rotate(var(--postcard-start-rotate)); }
  to   { transform: translateY(0) rotate(var(--postcard-rest-rotate)); }
}

.postcard picture,
.postcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The palm/tropical sprig — CSS/SVG surround only, NEVER baked into any
   generated image (brief §6.2). Confined to one corner, <=15% of the field's
   width, and never carries --color-accent, a CTA role, or text — it uses
   --color-sprig exclusively, a role assigned to nothing else on the page. */
.hero__sprig {
  position: absolute;
  inset-block-start: -6%;
  inset-inline-end: 6%;
  z-index: 2;
  width: 14%;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotate(var(--sprig-rest-rotate));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__sprig {
    animation: sprig-sway var(--loop-sprig-sway) var(--ease-in-out) infinite;
  }
}

@keyframes sprig-sway {
  0%   { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}

/* The water-bead glint — echoes "sun on a moving surface" (§6.1 anchor) even
   at the CSS layer, independent of the sprig's loop and duration. */
.hero__glint {
  position: absolute;
  inset-block-end: 10%;
  inset-inline-start: 12%;
  z-index: 2;
  width: 10%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-card) 0%, transparent 70%);
  border-radius: 50%;
  opacity: var(--glint-rest-opacity);
  transform: scale(var(--glint-rest-scale));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__glint {
    animation: glint-pulse var(--loop-water-glint) var(--ease-in-out) infinite;
  }
}

@keyframes glint-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 0.85; transform: scale(1.2); }
}

.hero__lead {
  margin: 0;
  margin-block-start: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-muted);
}

.hero__facts {
  margin: 0;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-facts);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Section heading */

.p-section__title {
  margin: 0;
  margin-block-end: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* --- The note card (.p-card) -------------------------------------------------
   Every section below the hero presents as its own paper card (brief §2's
   archetype one-liner). Flat, rule-and-whitespace separation — no shadow
   anywhere but the hero postcard's own (brief §4.2's "one shadow" rule). The
   torn-tape top accent is a fixed 34x12px shape, px not em (brief §4.5's
   em-based-ornament check cites this element by name). */

.p-card {
  position: relative;
  background-color: var(--color-card);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md);
}

.p-card + .p-card {
  margin-block-start: var(--space-md);
}

.p-card::before {
  content: '';
  position: absolute;
  inset-block-start: var(--tape-offset);
  inset-inline-start: var(--space-lg);
  width: var(--tape-width);
  height: var(--tape-height);
  background-color: var(--color-surface);
  opacity: 0.9;
  transform: rotate(-3deg);
  border-radius: var(--radius-sm);
}

.p-card__title {
  margin: 0;
  margin-block-end: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
}

.p-card__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.p-card__body + .p-card__body {
  margin-block-start: var(--space-sm);
}

.p-card__cta {
  margin: 0;
  margin-block-start: var(--space-md);
}

/* The twine-and-pin corner mark — the hero postcard's own device, flattened
   to a static mark, heading the Pool School and The Note cards only (brief
   §7). A fixed drawn shape; never animated. */
.p-card--pinned::after {
  content: '';
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-md);
  width: var(--pin-mark-size);
  height: var(--pin-mark-size);
  border-radius: 50%;
  border: var(--border-thick) var(--border-style) var(--color-accent);
  opacity: 0.85;
}

/* --- Pool School review quote & the "In Their Own Words" reviews -----------
   Plain Karla 400, never italicised — a rust left-border rule does the
   quotation's visual work instead (brief §4.4's house discipline). */

.review-quote {
  margin: 0;
  margin-block-start: var(--space-md);
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: normal;
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.review-quote + .review-quote {
  margin-block-start: var(--space-lg);
}

.review-quote__attribution {
  display: block;
  margin-block-start: var(--space-xs);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* What We Do: rule-separated list */

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list__item {
  padding-block: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.service-list__item:first-child {
  border-block-start: none;
  padding-block-start: 0;
}

.service-list__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
}

.service-list__desc {
  margin: 0;
  margin-block-start: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

.cross-ref {
  display: inline-block;
  margin-block-start: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink);
}

/* --- Facts / trust band, service area — raised surface tone ------------------
   --color-surface is the raised-panel tone; --color-accent never sits as
   text on it (brief §4.3's forbidden pairing) — only ink/ink-muted text ever
   ships here. */

.p-card--surface {
  background-color: var(--color-surface);
}

.p-card--surface::before {
  background-color: var(--color-card);
}

/* --- FAQ --------------------------------------------------------------------
   Native <details>/<summary>, no button, no counter (brief §5.2: near-
   unoccupied, four questions only). */

.faq-item {
  padding-block: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq-item:first-child {
  border-block-start: none;
  padding-block-start: 0;
}

.faq-item__q {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::before {
  content: '+';
  display: inline-block;
  margin-inline-end: var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
}

.faq-item[open] .faq-item__q::before {
  content: '\2212';
}

.faq-item__a {
  margin: 0;
  margin-block-start: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* --- Form ---------------------------------------------------------------
   One form per site (house-tech-spec §6). Control boundary takes the 3:1
   token (WCAG 1.4.11), never the decorative hairline. */

.form {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

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

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

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
}

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

select.field__control {
  appearance: auto;
}

.field__hint {
  font-family: var(--font-body);
  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-family: var(--font-body);
  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);
}

/* Footer */

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

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

.site-footer__nap {
  font-style: normal;
  color: var(--color-ink);
}

.site-footer__nap strong {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
}

/* Card illustrations (imagery slots 2/3) */

.card-img {
  display: block;
  width: 100%;
  max-width: var(--card-img-max-width);
  height: auto;
  margin-block: var(--space-md);
  border-radius: var(--radius-sm);
}

/* Decorative section divider (imagery slot 4) */

.divider-img {
  display: block;
  width: var(--divider-img-max-width);
  height: auto;
  margin-inline: auto;
  margin-block: var(--space-lg);
  border-radius: var(--radius-sm);
  opacity: 0.85;
}