/* ==========================================================================
   site.css — Yellow Duck Pool Repair (Fort Myers, FL).
   Source: runs/yellow-duck-pool-repair-fort-myers-fl/brief.md.
   Family: editorial-modern. Archetype: editorial-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: snug padding, and a compact modifier on its own phone
   CTA so the header reads close to the brief's own measured 52px estimate
   while never dropping below the house 44px touch-target floor (spec §8) —
   that floor is not a brief's to relax, so the Builder re-measures the
   actual rendered height rather than assuming the brief's planning figure. */

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

/* Compact phone CTA in the header — same .btn--primary role, smaller type
   and padding than the hero's own primary CTA (tile-b.html's "header-call"
   badge vs. its "cta-row .btn-primary"). Height still floors at 44px via
   the house [data-tap] rule; only the visual padding/type shrink. */
.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 tile-b.html's own device (brief §1, ref-011:
   "rule-topped, counter-driven row structure"). Reused atop every section
   below as the settled signature-move hairline (brief §8) via .rule-top. --- */

.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 hero and the page read as one continuous
   diagnostic instrument"). One flattened coral hairline, reused atop every
   section heading below the hero. */
.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 §1/§3): sans display
   line, one italic-serif word in the accent colour. Every H1/H2 emphasis on
   this site uses this one rule. */
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. The field is full-bleed between two .container
   blocks, DOM-sequential rather than a layered background (matches
   tile-b.html's own markup, not a split-hero device — archetype forbids
   one, brief §2). --- */

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

.hero__top {
  padding-block-start: var(--space-md);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
}

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

/* Living-hero field — full-bleed, the one moment of motion on the page
   (brief §8). Never carries text at any breakpoint (brief §4). Ratio locked
   to the shipped hero image's own aspect so the SVG overlay's coordinate
   space lines up exactly with the raster beneath it, with no object-fit
   crop drift. */
.hero__field {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--hero-field-ratio);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border-block: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.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: 500;
  stroke-dashoffset: 500;
  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-pulse var(--duration-ambient-b) var(--ease-in-out) infinite;
}

.hero__pin {
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-pin-float var(--duration-ambient-a) var(--ease-in-out) infinite;
}

.hero__pin circle,
.hero__pin rect {
  fill: var(--color-accent);
}

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

@keyframes hero-marker-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* @allow-literal: decorative micro-rotation on the signature-move pin,
   transcribed from tile-b.html's own keyframe (rotate(-2deg)/rotate(1deg));
   `deg` carries no design-token meaning here, only the tile's motion shape. */
@keyframes hero-pin-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(calc(var(--space-3xs) * -1)) rotate(1deg); }
}

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

  /* Settled state (brief §8): marker at rest (slightly enlarged, r=11 vs.
     the animation's r=9 base — approximated here as a modest resting
     scale), the annotation line pre-drawn to its full length. */
  .hero__marker circle {
    opacity: 0.9;
    transform: scale(1.1);
  }

  .hero__draw-line {
    stroke-dashoffset: 0;
  }
}

.hero__lead {
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-body);
  margin: var(--space-md) 0 var(--space-xs);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact-chip {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
}

/* --- Services (#services) — brief §6.2: plain rule-separated rows, small
   coral dot marker, NOT a numeral counter (brief §6.3's two-counters rule). */

.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);
  font-weight: var(--font-weight-body-strong);
}

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

/* --- "What the visit found" (#visit-found) — the page's ONLY counter role
   (brief §6.3): decimal-leading-zero numerals, Source Serif 4 Italic,
   accent colour, sized at --text-h2 (>=19px at every width) per brief §4's
   hard constraint on accent-coloured text below that size. --- */

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

.visit-found__row {
  counter-increment: visit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.visit-found__row::before {
  content: counter(visit, decimal-leading-zero);
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
}

.visit-found__name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  margin: 0 0 var(--space-2xs);
}

.visit-found__quote {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  margin: 0;
}

.visit-found__cite {
  display: block;
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-2xs);
}

/* --- Certified & verified (#certified) — text only, no fabricated badge
   graphics (design-rules §8). A quiet surface band for rhythm; ink-on-
   surface only, never an accent-coloured run at this size (brief §4). --- */

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

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

.certified__list li {
  font-size: var(--text-body);
  max-width: var(--layout-measure);
}

/* --- Service area (#service-area) — named list, no radius claim. Rendered
   as the copy's own sentence, not re-split into list markup. --- */

.service-area__list {
  font-size: var(--text-body);
  max-width: var(--layout-measure);
}

/* --- FAQ (#faq) --- */

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

.faq__q {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  margin: 0 0 var(--space-2xs);
}

.faq__a {
  max-width: var(--layout-measure);
  margin: 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);
}

.contact__fallback {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-md);
}

/* --- 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;
}

.site-footer__license {
  color: var(--color-ink-muted);
}

/* --- Breakpoints — three states and no others (spec §5's one escape hatch). */

@media (min-width: 48em) {
  .certified__list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Living-hero field height ceiling — see tokens.css for the measurement
     that produced this (brief §6.1 re-derivation). `width: 100%` is
     restated here because a block box with `aspect-ratio` and an `auto`
     width recomputes width FROM a constrained height instead of filling
     the container once max-height applies — which shrank the full-bleed
     band to ~927px and left it flush-left rather than edge-to-edge. Pinning
     width keeps the band full-bleed; object-fit: cover on the image then
     crops top/bottom instead, keeping the plan illustration's own centre
     (where the signature move sits) framed correctly. */
  .hero__field {
    width: 100%;
    max-height: var(--hero-field-max-height);
  }
}