/* ==========================================================================
   site.css — CDS Pool Service & Repair (Mesa, AZ).
   Source: runs/cds-pool-service-and-repair-mesa-az/brief.md.
   Family: editorial-modern. Archetype: ledger-stack — single content column
   at every width, no split-hero switch (brief §2).

   Tokens only, per house-tech-spec §3. Breakpoints (48em/64em) and the
   two-hatch @allow-literal comment are the only literal escape hatches.
   ========================================================================== */

/* --- Layout primitives (house, unmodified) --------------------------------- */

.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);
}

/* --- Header & navigation ----------------------------------------------------
   Sticky, stacked below the preview expiry bar (brief §6.1) — the sticky
   recipe itself (.expiry / .site-header positions, section scroll-margin)
   lives in css/preview.css per its own documented convention, so the whole
   sticky stack is defined in one place. This file only trims the header's
   own compactness so it reads close to the brief's own measured ~52px
   estimate while never dropping below the house 44px touch-target floor
   (spec §8) — every interactive child already carries [data-tap] or is a
   native control, so the floor holds regardless of this padding choice. */

.site-header {
  padding-block: var(--space-2xs);
}

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

.site-header__cta {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-small);
}

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

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  /* The nav-toggle's only shape is this hairline, so it is a CONTROL boundary
     (WCAG 1.4.11, >= 3:1), not a decorative one — use --color-border-strong. */
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  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 pattern, carried from the skeleton): the
   collapsed nav state is the plain CSS default below 48em, un-gated by
   [data-nav-ready], so there is no post-paint collapse to shift the layout.
   JS-off visitors get the nav back via the <noscript> stylesheet override in
   @shared:head-boilerplate, which ships last in source order. */
.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;
  }
}

/* --- Eyebrow — rule-topped, per ref-011's own device (brief §1: "the
   numbered, rule-topped row structure"). The rule reused atop every section
   below as the settled signature-move hairline (brief §8) via .section-head. --- */

.rule-top {
  border-top: var(--border-hairline) var(--border-style) var(--color-ink);
  padding-top: var(--space-2xs);
}

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

/* The settled report-annotation hairline becomes every section's own
   head-rule (brief §8: "the settled line becomes the head-rule reused atop
   every section below"). One flattened citrus-rust hairline. */
.section-head {
  border-top: var(--border-thick) var(--border-style) var(--color-accent);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.section-head h2 {
  margin: 0;
}

h2.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
}

/* The single emphasised word/phrase convention (brief §3): sans display
   line, one italic-serif word in the accent colour. */
em.accent-emphasis {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

/* --- Hero — house order (brief §6.1): eyebrow -> H1 -> primary CTA -> field
   -> lead -> facts. Single content column at every width (ledger-stack, brief
   §2 — no full-bleed device). --- */

.hero {
  padding-block-end: var(--section-gap);
  /* Atmosphere: two soft radial highlights over a three-stop linear gradient
     (brief §4), unchanged from the tile. Positioned/sized exactly as brief §4
     states so the gradient-extreme contrast fix (§4's own table) is computed
     against the SAME ground every hero text element actually sits over. */
  background:
    radial-gradient(130% 90% at 50% -10%, var(--color-atmosphere-light) 0%, transparent 55%),
    radial-gradient(150% 120% at 80% 115%, var(--color-atmosphere-warm) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-atmosphere-mid) 55%, var(--color-atmosphere-deep) 100%);
}

.hero .container {
  padding-block-start: var(--space-xs);
}

.hero-h1 {
  font-size: var(--text-h1);
  margin: var(--space-2xs) 0 var(--space-sm);
  /* Optical size fixed at the one "display size" place-class this brief
     names (brief §3) — never named alongside font-weight on this element
     (house-tech-spec §8's trap: font-weight is set separately, above, via
     base.css's h1 rule). */
  font-variation-settings: 'opsz' var(--opsz-display);
}

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

/* Living-hero field — a fixed-height strip at every breakpoint (brief §7.2
   rule 4: "the field keeps its specified size"), never an aspect-ratio
   device. object-fit: contain rather than cover: the generated illustration
   carries its own drawn blueprint-corner frame (brief's "architect's
   cross-section drawing" register), so it is never cropped, only ever
   letterboxed — and the letterbox background is the image's own paper-bone
   ground colour, so the seam is invisible at any width. */
.hero__field {
  position: relative;
  height: var(--hero-field-height);
  overflow: hidden;
  margin-block: var(--space-sm) var(--space-2xs);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
  background-color: var(--color-bg);
}

.hero__field picture,
.hero__field img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__draw-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: hero-draw var(--duration-draw) var(--ease-out) var(--delay-draw) 1 forwards;
}

.hero__marker circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-marker-float var(--duration-ambient-a) var(--ease-in-out) infinite;
}

.hero__tick rect {
  fill: var(--color-ink);
}

.hero__tick {
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-tick-float var(--duration-ambient-b) var(--ease-in-out) infinite;
}

@keyframes hero-draw {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}

/* The signature move's vertical float distances (tokens.css:
   --hero-marker-float / --hero-tick-float) are a decorative motion shape
   transcribed from tiles/tile-c.html's own keyframes, not a spacing-scale
   relationship — brief §8 states them as the move's own geometry. */
@keyframes hero-marker-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--hero-marker-float) * -1)); }
}

@keyframes hero-tick-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--hero-tick-float) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marker circle,
  .hero__tick,
  .hero__draw-line {
    animation: none;
  }

  /* Settled state (brief §8): the marker and tick hold their resting
     positions, the annotation line is pre-drawn to its full length. The
     still frame reads as a complete, already-annotated ledger diagram. */
  .hero__draw-line {
    stroke-dashoffset: 0;
  }
}

.hero__lead {
  font-size: var(--text-lead);
  color: var(--color-ink);
  max-width: var(--layout-measure);
  margin: 0 0 var(--space-sm);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-facts);
  font-weight: var(--font-weight-body-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-normal);
  /* Brief §4's gradient-extreme fix: this row sits over the atmosphere's
     darkest stop at 375px and ships in --color-ink (7.76:1), never
     --color-ink-muted (which measures 3.49:1 here and fails body AA). */
  color: var(--color-ink);
}

.fact-chip {
  white-space: nowrap;
}

/* --- The Weekly Ledger (#weekly-ledger) — brief §6.2 row 2, §6.3's own
   counter role: decimal-leading-zero numerals, Literata Italic, citrus-rust.
   Hard constraint (brief §4): this accent-coloured role never sets smaller
   than the tokened body size — --text-h2's floor clears 16px with margin. --- */

.ledger__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) var(--border-style) var(--color-ink);
}

.ledger__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.ledger__num {
  grid-row: 1 / 3;
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
}

.ledger__item {
  font-size: var(--text-body);
}

.ledger__tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-xs);
  grid-column: 2;
}

.ledger__tier:empty {
  display: none;
}

.ledger__tier-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-small);
  flex-basis: 100%;
}

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

.ledger__tier-rate {
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent);
}

@media (min-width: 48em) {
  .ledger__row {
    grid-template-columns: var(--ledger-num-col) 1fr auto;
  }

  .ledger__num {
    grid-row: auto;
  }

  .ledger__tier {
    grid-column: 3;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .ledger__tier-name {
    flex-basis: auto;
  }
}

/* --- Services (#services) — brief §6.2 row 3: plain rule-separated rows,
   small citrus-rust DOT marker, NOT a numeral counter (brief §6.3). --- */

.services__figure {
  margin: var(--space-md) 0;
}

.services__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.services__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
}

.services__row::before {
  content: '';
  flex: none;
  inline-size: var(--space-3xs);
  block-size: var(--space-3xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  align-self: center;
}

/* --- Trust & reliability (#trust) and Reviews (#reviews) — shared quote
   list component. No counter role (brief §6.3: the Ledger's numerals remain
   the page's only one). --- */

.trust__quotes {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.trust__quote {
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  padding-top: var(--space-sm);
}

.trust__quote blockquote {
  margin: 0 0 var(--space-2xs);
  max-width: var(--layout-measure);
}

.trust__quote blockquote p {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin: 0;
}

.trust__quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Service area (#service-area) — named list, no radius claim. --- */

.service-area__list {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.service-area__list li {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
}

/* --- Decorative section divider (brief §7, imagery slot 4) — static only,
   never a second motion moment (brief §7's per-slot clause). --- */

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

.divider img {
  width: 100%;
  height: auto;
  border-block: var(--border-hairline) var(--border-style) var(--color-border);
}

/* --- FAQ (#faq) — native disclosure, own caret ornament (brief §6.2 row 9,
   §6.3: a third, distinct ornament — not a numeral, not a dot). --- */

.faq__list {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.faq__item {
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  padding-block: var(--space-sm);
}

.faq__q {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: '';
  flex: none;
  inline-size: var(--icon-caret-size);
  block-size: var(--icon-caret-size);
  align-self: center;
  border-inline-end: var(--border-hairline) var(--border-style) var(--color-ink);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-ink);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
}

.faq__a {
  max-width: var(--layout-measure);
  margin: var(--space-sm) 0 0;
}

/* --- Buttons (house, unmodified) ------------------------------------------- */

.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-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--quiet {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

/* --- Form (house, unmodified) ----------------------------------------------- */

.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__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.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-sm);
}

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

.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);
}

/* --- Footer (house, unmodified) --------------------------------------------- */

.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 — two states and no others (spec §5's one escape hatch). -- */

@media (min-width: 48em) {
  .services__figure,
  #trust .services__figure {
    max-width: var(--figure-max-width);
  }
}