/* site.css: per-site layout and components, built FROM tokens.
   HARD RULE (spec §3): no raw hex, no px/rem size literals, no font-name literals. Tokens only; the Critic greps.
   Escape hatches: house breakpoints, and `@allow-literal: reason` on the preceding line.
   Brief: runs/let-it-roll-painting-contractors-toms-river-nj/brief.md — sidebar-anchor archetype,
   living-hero signature move (verdigris cut-in seam + travelling sweep + two drifting glints). */

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

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

/* --section-gap is the only inter-section spacing value (design-rules §7.1). */
.section {
  padding-block: var(--section-gap);
}

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

/* Per-section narrow columns, brief §5.5: a centred sub-measure inside the
   72rem container, with equal side gaps (design-rules §7.3 rule 2) rather
   than a stretched stack. */
.section--narrow-md > * {
  max-width: var(--layout-narrow-md);
  margin-inline: auto;
}

.section--narrow-sm > * {
  max-width: var(--layout-narrow-sm);
  margin-inline: auto;
}

.section--narrow-contact > * {
  max-width: var(--layout-narrow-contact);
  margin-inline: auto;
}

.section__accent {
  margin-block-start: var(--space-lg);
  text-align: center;
}

.section__accent img {
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

/* --- Header & navigation --- JS off: nav list always visible, toggle stays [hidden] (main.js reveals it). */

.site-header {
  /* House default: static flow. QA round-2 FIX (layout/sticky-header)
     overrides this to `position: sticky` in css/preview.css (the site's
     own copy of the skeleton's documented sticky override), the preview-
     only file that pairs it with `.expiry`'s own sticky rule — both
     revert to this relative default at purchase, when preview.css and its
     --expiry-height token are deleted (skeleton/SKELETON.md "Before
     `.expiry {`"; brief §5.3/§11's 101px sticky-chrome stack). */
  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);
  column-gap: var(--space-xs);
}

.site-header__brand {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  /* Control boundary (WCAG 1.4.11, >= 3:1): --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);
}

/* perf/cls (QA r3): nav is closed by plain CSS below 48em, no JS gate, so nothing collapses after first paint.
   JS-off visitors get the nav back from the <noscript> override in `@shared:head-boilerplate`. */
.site-nav {
  display: none;
  flex-basis: 100%;
  order: 1;
}

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

/* Header call control (W65): (0,2,0) beats .btn; keep this BEFORE the 48em block. */
.site-header .site-header__call {
  flex: none;
  padding: 0;
  min-inline-size: var(--layout-tap-min);
}

@media (min-width: 48em) {
  .site-header__inner {
    column-gap: var(--space-sm);
  }

  .site-nav {
    display: block;
    flex-basis: auto;
    order: 0;
    margin-inline-start: auto;
  }

  .site-header__brand {
    flex: none;
    font-size: var(--text-h3);
  }

  .site-header .site-header__call {
    padding: var(--space-xs) var(--space-md);
  }

  .site-header__call .visually-hidden:not(:focus):not(:active) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

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

/* --- Buttons --- two roles, pill radius matches Tile A's own CTA (tiles/tile-a.html .btn). */

.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-cta);
  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 {
  /* Outline button: border is the whole control, so --color-border-strong (WCAG 1.4.11). */
  border-color: var(--color-border-strong);
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* ============================================================================
   HERO — living-hero signature move (brief §5.5, §7.1, §10). The verdigris
   cut-in seam with a travelling specular sweep and two independently-drifting
   glints, exactly as Tile A built it (tiles/tile-a.html, brief-render.html).
   No raster hero image: no image tool was available this build (flagged in
   the handoff), so the seam IS the art — a clip-path split plus a radial-
   gradient atmosphere, both static CSS and present with the loops stopped,
   which is what satisfies design-rules §0's "the reduced-motion state must
   still read as spectacular." The .hero__art div carries role="img" and the
   Copywriter's own alt text (HERO_IMAGE_ALT) exactly as Tile A's own `.art`
   element does — never an empty <img>.
   ============================================================================ */

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

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.hero__grid > * {
  align-self: start;
  min-width: 0;
}

.hero__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-normal);
  color: var(--color-accent);
}

.hero h1 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
}

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

.hero__lead {
  margin: 0 0 var(--space-xs);
  max-width: var(--measure-hero);
  color: var(--color-ink-muted);
}

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

.hero__art {
  position: relative;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 600 / 420;
  /* @allow-literal: the living-hero's own box ceiling (brief §5.5, Tile A's render) */
  max-block-size: 560px;
  background: radial-gradient(130% 95% at 28% 18%,
    color-mix(in srgb, var(--color-accent) 20%, var(--color-bg)) 0%,
    var(--color-bg) 62%);
}

/* The static seam base plate (hero-verdigris-seam.svg) — same 38/46% seam
   proportions as the CSS clip-path this hero used to paint directly, now
   carried by a real image so the hero is never an empty box (see README). */
.hero__seam-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__sweep {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 38%;
  width: var(--hero-sweep-width);
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.55), transparent);
  animation: hero-sweep var(--duration-hero-sweep) var(--ease-in-out) infinite;
}

.hero__glint {
  position: absolute;
  width: var(--hero-glint-size);
  height: var(--hero-glint-size);
  border-radius: 50%;
  background: var(--color-accent-ink);
  opacity: 0.5;
  filter: blur(var(--hero-glint-blur));
}

.hero__glint--1 {
  inset-block-start: 28%;
  inset-inline-start: 58%;
  animation: hero-drift-1 var(--duration-hero-glint-1) var(--ease-in-out) infinite;
}

.hero__glint--2 {
  inset-block-start: 66%;
  inset-inline-start: 70%;
  animation: hero-drift-2 var(--duration-hero-glint-2) var(--ease-in-out) infinite;
}

@keyframes hero-sweep {
  0%, 100% { transform: translateX(var(--hero-sweep-travel-neg)); }
  50% { transform: translateX(var(--hero-sweep-travel-pos)); }
}

@keyframes hero-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--hero-glint-1-x), var(--hero-glint-1-y)); }
}

@keyframes hero-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--hero-glint-2-x), var(--hero-glint-2-y)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sweep,
  .hero__glint {
    animation: none;
  }
}

@media (min-width: 48em) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-2xl);
  }

  .hero__copy {
    grid-column: 1;
  }

  /* grid-row spans all three stacked copy rows (copy/lead/facts); align-self:
     center (overriding the base rule's align-self: start) centres the art
     box within that span — the brief's own §5.5/§11 reservation 7 on the
     281px copy/art height delta, resolved here rather than left as a void. */
  .hero__art {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .hero__lead,
  .hero__facts {
    grid-column: 1;
  }
}

/* ============================================================================
   SERVICES — brief §5.1 row 3, §5.5. Plain, unadorned list typography
   (ref-011's borrowed move, brief §1) — no card chrome, no icon grid.
   ============================================================================ */

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  list-style: none;
  padding: 0;
}

.service-item {
  padding-block-end: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.service-item__name {
  margin: 0 0 var(--space-3xs);
  font-weight: var(--font-weight-body-strong);
}

.service-item__body {
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--measure-cell);
}

@media (min-width: 48em) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

/* ============================================================================
   SERVICE AREA — the sidebar rail (brief §5.1 row 4, the C2 tie-break
   device). Permanent town-list rail + supporting copy card, never sticky.
   ============================================================================ */

.sect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin-block-start: var(--space-md);
  align-items: start;
}

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

.rail li {
  padding-block: var(--space-xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  font-weight: var(--font-weight-body-strong);
}

.sect-main {
  background-color: var(--color-surface);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
}

.sect-main p {
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--measure-card);
}

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

@media (min-width: 48em) {
  .sect-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-2xl);
  }
}

/* ============================================================================
   PROCESS — "How It Works" (brief §5.1 row 5, §5.5). Single column, vertical
   step list, no cards.
   ============================================================================ */

.process-list {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

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

.process-list li:first-child {
  padding-block-start: 0;
}

.process-list__name {
  margin: 0 0 var(--space-3xs);
  font-weight: var(--font-weight-body-strong);
}

.process-list__body {
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--measure-step);
}

/* ============================================================================
   FAQ — "Questions" (brief §5.1 row 6, §5.5). Native <details>/<summary>
   disclosure list.
   ============================================================================ */

.faq-list {
  margin-block-start: var(--space-lg);
}

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

.faq-item summary {
  cursor: pointer;
  font-weight: var(--font-weight-body-strong);
  min-height: var(--layout-tap-min);
  display: flex;
  align-items: center;
}

.faq-item p {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-muted);
  max-width: var(--measure-answer);
}

/* --- Form --- one per site (spec §6); POSTs to main.js's endpoint; works JS-off; auto-hides with no endpoint. */

.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-strong);
  border-radius: var(--radius-sm);
}

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

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

/* Honeypot: not display:none (some bots skip those). */
.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 ---------------------------------------------------------------- */

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