/* ==========================================================================
   site.css — 716 Towing & Roadside, per-site layout & components.

   Archetype: full-bleed-immersive (brief §3). Signature move: "the shoulder
   lights up" — a cab beacon pulses (4.8s), a flatbed edge-glint travels
   (6.4s, out of phase), and a receding road-line completes the scene (9s,
   linear) over a single generated night photograph. The settled beacon
   recurs, flattened to a static 6px dot, as the head-mark opening every band
   below (brief §6). Tokens only — no raw hex/px/font literals (spec §3).
   ========================================================================== */

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

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

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

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

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

/* --- Header & navigation ----------------------------------------------------
   Sticky, stacked beneath the sticky preview expiry bar (css/preview.css
   overrides the offset). The sticky-chrome term is measured, never summed:
   44px (expiry bar) + 56px (this header) + 1px (this border) = 101px, the
   same figure established on auto-evolution-north-logan-ut / leos-towing-
   louisville-ky (brief §4). */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--layout-header-height);
  padding-block: 0;
  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);
  min-height: var(--layout-header-height);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
  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-sm);
  color: var(--color-ink);
  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-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 ------------------------------------------------------------------
   Two roles. Radius, weight and colour come from tokens (spec §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-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);
  color: var(--color-bg);
}

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

/* --- Recurring head-mark (brief §6 signature move) --------------------------
   The settled beacon, flattened to a static 6px dot, opens every band below.
   Fixed at 6px from 320px up; the 20px hairline yields first if a label ever
   threatens the row (brief §4's per-ornament minimum). Decorative, aria-hidden. */

.band-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
}

.band-mark__dot {
  flex: none;
  inline-size: var(--mark-dot-size);
  block-size: var(--mark-dot-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.band-mark__line {
  flex: none;
  inline-size: var(--mark-line-width);
  block-size: var(--border-hairline);
  background-color: var(--color-border-strong);
}

.band-mark--center {
  justify-content: center;
}

/* --- Hero (full-bleed-immersive, brief §3/§4) --------------------------------
   House order: eyebrow -> h1 -> primary CTA -> field (living hero) -> lead ->
   secondary CTA -> facts. The radial atmosphere sits behind everything in the
   hero at every width (contrast rows 8-10, brief §2.1); the photo + SVG
   overlay (.hero__field) sit in-flow as a bounded 2.5:1 strip at <64em and
   become the section's true edge-to-edge background at >=64em. */

.hero {
  position: relative;
  overflow: clip;
  padding-block-start: var(--space-sm);
  padding-block-end: var(--section-gap);
  background-color: var(--color-bg);
  color: var(--color-ink);
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(circle at 78% 18%, var(--color-hero-atmosphere), var(--color-bg) 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

/* Every text element gets its own stacking level ABOVE .hero__field. CSS's
   stacking order paints any POSITIONED descendant (even z-index:0/auto)
   above in-flow, non-positioned siblings regardless of DOM order — so
   without this, the desktop full-bleed .hero__field (position:absolute)
   would paint over this plain-flow text no matter what z-index it carried.
   Explicit z-index on both sides makes the comparison a number, not tree
   order (house rule: nothing is left to an implicit browser default here). */
.hero__eyebrow,
.hero__title,
.hero__cta-row,
.hero__lead,
.hero__secondary-cta,
.hero__facts {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero__title {
  margin-block-start: var(--space-2xs);
  margin-block-end: 0;
  color: var(--color-ink);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
}

.hero__accent-word {
  color: var(--color-accent);
}

.hero__cta-row {
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
}

.hero__field {
  position: relative;
  z-index: 2;
  margin-block-start: var(--space-sm);
  aspect-ratio: var(--hero-field-aspect);
  max-width: 100%;
  overflow: hidden;
}

.hero__field picture,
.hero__field img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__lead {
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-body);
}

.hero__secondary-cta {
  margin-block-start: var(--space-2xs);
  margin-block-end: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-body);
}

.hero__secondary-cta a {
  color: var(--color-ink);
}

.hero__facts {
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-snug);
}

.hero__facts b {
  color: var(--color-accent);
  font-weight: var(--font-weight-body-strong);
}

@media (min-width: 64em) {
  .hero {
    min-height: var(--hero-min-height-desktop);
    display: flex;
    align-items: center;
  }

  /* The archetype's own full-bleed behaviour: the plate extends true
     edge-to-edge rather than sitting in a bounded lower block (brief §4).
     .hero__field is a DOM child of .hero__inner (house order keeps it
     in-flow between the CTA and the lead at <64em, per §4's eyebrow -> h1
     -> primary CTA -> field -> lead ordering) — so inset:0 alone would
     resolve against .hero__inner's own (narrower, centred) box at this
     breakpoint, not the section. The full-bleed breakout below escapes that
     ancestor deliberately: left:50% + translateX(-50%) centres on
     .hero__inner's own horizontal centre, which coincides with the
     viewport's because .container's margin-inline:auto already centres
     .hero__inner in the section regardless of its own (narrower) width. */
  .hero__field {
    position: absolute;
    inset-block: 0;
    left: 50%;
    z-index: 0;
    inline-size: var(--hero-field-breakout-width);
    max-width: none;
    margin-block-start: 0;
    transform: translateX(-50%);
    aspect-ratio: auto;
  }

  /* Text column sits left-aligned over the plate's left third (brief §4). */
  .hero__inner {
    max-width: var(--hero-column-width);
  }
}

/* --- Hero living overlay: beacon pulse / edge-glint / road-dash -------------
   Three independently-timed ambient loops (brief §6), sitting over the
   static plate at zero image cost. Decorative, aria-hidden. Frozen under
   prefers-reduced-motion below. */

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Beacon: a soft blurred halo plus a bright core, both filled with the
   business's own sampled yellow. Wrapped in one <g> so glow and core pulse
   together on the same loop. */
.hero__beacon {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: beacon-pulse var(--duration-beacon-pulse) var(--ease-ambient) infinite;
}

/* Edge-glint: a travelling highlight along the flatbed's edge, out of phase
   with the beacon (brief §6). */
.hero__glint {
  fill: var(--color-ink);
  opacity: 0.5;
  animation: edge-glint var(--duration-glint) var(--ease-ambient) infinite;
}

/* Road-dash: the one intentionally mechanical/linear loop — a receding
   painted road-line, not a living thing (brief §6). */
.hero__roaddash {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 0.6;
  stroke-dasharray: 3 2;
  animation: road-dash var(--duration-roaddash) var(--ease-linear) infinite;
}

@keyframes beacon-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes edge-glint {
  0% { transform: translateX(-6%); opacity: 0.25; }
  50% { transform: translateX(6%); opacity: 0.85; }
  100% { transform: translateX(-6%); opacity: 0.25; }
}

@keyframes road-dash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -50; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__beacon {
    animation: none;
    opacity: 0.85;
  }

  .hero__glint {
    animation: none;
    transform: translateX(0);
    opacity: 0.6;
  }

  .hero__roaddash {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* --- Services (band: bg) — plain chip + sentence rows, never icon cards
   (ref-011's index-list restraint, design-rules §4). ------------------------- */

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

.services-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
}

.services-list__chip {
  flex: none;
  padding-inline: var(--space-sm);
  padding-block: var(--space-3xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--font-weight-display);
}

.services-list__desc {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-body);
}

.services__spot {
  margin-block-start: var(--space-lg);
  inline-size: var(--space-3xl);
  block-size: var(--space-3xl);
}

.services__spot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* --- Hours, Reconciled (band: surface) — three-row grid, large numerals --- */

.hours-grid {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  max-width: var(--layout-measure);
}

.hours-grid__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.hours-grid__row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.hours-grid__day {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hours-grid__time {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  font-weight: var(--font-weight-display);
  text-align: right;
}

.hours__closing {
  margin-block-start: var(--space-lg);
  color: var(--color-ink);
}

/* --- Where We Help (band: bg) ------------------------------------------------ */

.area-layout {
  display: grid;
  gap: var(--space-lg);
  align-items: end;
}

.area-layout__motif {
  overflow: hidden;
}

.area-layout__motif img {
  inline-size: 100%;
  block-size: auto;
}

@media (min-width: 48em) {
  .area-layout {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* --- What Happens When You Call (band: surface) ------------------------------ */

.steps {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  padding: 0;
  list-style: none;
  max-width: var(--layout-measure);
}

.steps li {
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  color: var(--color-ink);
}

.process__divider {
  margin-block-start: var(--space-2xl);
  overflow: hidden;
}

.process__divider img {
  inline-size: 100%;
  block-size: auto;
}

/* --- Reviews (band: bg) ------------------------------------------------------- */

.trust-strip {
  margin-block-start: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-body-strong);
}

.quote {
  margin: var(--space-lg) 0 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-border-strong);
  max-width: var(--layout-measure);
}

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

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

.reviews__closing {
  margin-block-start: var(--space-lg);
  color: var(--color-ink);
  max-width: var(--layout-measure);
}

/* --- FAQ (band: surface) — native <details>/<summary> ------------------------ */

.faq {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  max-width: var(--layout-measure);
}

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

.faq__item summary {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  cursor: pointer;
}

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

/* --- Send a Message + Footer (house chrome, secondary affordance) ------------ */

.contact-band {
  position: relative;
  overflow: hidden;
}

.contact-band__motif {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}

.contact-band__motif img {
  inline-size: 100%;
  block-size: auto;
}

.contact-band__inner {
  position: relative;
  z-index: 1;
}

/* --- Form ---------------------------------------------------------------------
   POSTs to the endpoint constant in main.js; auto-hides when unconfigured. */

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

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

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

.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 {
  position: relative;
  z-index: 1;
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

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

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