/* ============================================================
   Indy Hood Clean — post-audit refinements
   Loaded last, after /_next/static/css/index.*.css and
   /assets/hero-enhancement.css.

   This file only changes presentation. It deliberately does not
   touch any markup, because the pages are a hydrated React build
   and DOM edits would be discarded on hydration.

   Covers:
   1. Typography  — replaces the Arial / Georgia system stack
   2. Contrast    — accent + muted tones now meet WCAG 2.1 AA
   3. Focus       — visible keyboard focus on every interactive element
   4. Layout      — reserves image space to stop layout shift
   5. Forms       — larger targets, clearer states
   6. Motion      — honours prefers-reduced-motion, drops idle GPU cost
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */
:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Accessible accent pair.
     Old --orange #cc6b3d scored 3.32:1 on --paper and 4.46:1 on --dark,
     both below the 4.5:1 needed for the 10-12px text it was used on. */
  --accent-on-light: #a94e24;   /* 5.02:1 on #f5f4ef */
  --accent-on-dark:  #dd8250;   /* 5.73:1 on #18221f */
  --muted-strong:    #5c665f;   /* 4.90:1 on #ebe9df */

  --focus-ring: #a94e24;
  --focus-ring-dark: #f0c9ad;
}

/* ---------- 2. Typography --------------------------------- */
body,
.lead-form input,
.lead-form select,
.lead-form textarea,
.button,
.nav-cta {
  font-family: var(--font-body);
}

body {
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.hero h1,
.splash h1,
.article-card h3,
.side-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
}

/* Cormorant has a wider natural sidebearing than Georgia, so the
   very tight tracking the old stack needed now reads as cramped. */
h1, .hero h1 { letter-spacing: -0.012em; line-height: 1.02; }
h2           { letter-spacing: -0.008em; line-height: 1.06; }
h3, h4       { letter-spacing: -0.005em; }

/* Outfit runs slightly narrower than Arial; nudge label tracking back. */
.eyebrow,
.service-side-accent,
.article-type,
.footer h3,
.button,
.nav-cta {
  letter-spacing: 0.12em;
}
.eyebrow { font-size: 11.5px; font-weight: 600; }

p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- 3. Contrast ----------------------------------- */
/* Small uppercase text on light surfaces */
.eyebrow,
.service-num,
.service-side-accent,
.article-card .article-type,
.contact-checklist strong,
.mobile-menu-plus {
  color: var(--accent-on-light);
}

/* …and the same roles on dark surfaces */
.section--dark .eyebrow,
.section--dark .service-num,
.section--dark .service-side-accent,
.hero .eyebrow,
.page-hero .eyebrow,
.footer h3,
.joe-credit-arrow {
  color: var(--accent-on-dark);
}

/* --muted (#66716c) is 4.16:1 on the cream surface — below AA. */
.section--dark .section-intro { color: rgba(255, 255, 255, 0.82); }
.band .section-intro,
.side-card p,
.fact p,
.area-pill { color: var(--muted-strong); }

.form-note { color: var(--muted-strong); font-size: 12.5px; line-height: 1.55; }

/* ---------- 4. Focus visibility --------------------------- */
/* The build shipped zero :focus-visible rules, and .button:focus
   produced only a 2px lift — no ring. Keyboard users had almost no
   indicator on the primary CTA. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero a:focus-visible,
.page-hero a:focus-visible,
.footer a:focus-visible,
.section--dark a:focus-visible,
.nav-links a:focus-visible,
.nav-cta:focus-visible,
.mobile-menu-panel a:focus-visible {
  outline-color: var(--focus-ring-dark);
}

/* Don't let the old transform-only focus stand in for a ring. */
.button:focus-visible { transform: translateY(-2px); }

/* Mouse users keep a clean look. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.skip-link:focus-visible {
  outline: 3px solid var(--focus-ring-dark);
  outline-offset: 2px;
}

/* ---------- 5. Layout stability --------------------------- */
/* No <img> in the build carries width/height, so every image was a
   layout-shift source. Reserving the box in CSS fixes CLS without
   touching markup. */
.service-card-image { height: 170px; }
.service-card-image img,
.split-media img,
.page-hero--visual img,
.article-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-media { aspect-ratio: 3 / 2; overflow: hidden; }
.split-media--roof,
.split-media--work { aspect-ratio: 3 / 2; }

img { max-width: 100%; }

/* ---------- 6. Forms -------------------------------------- */
.lead-form label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  min-height: 48px;              /* comfortable touch target */
  font-size: 16px;               /* stops iOS Safari zoom-on-focus */
  padding: 13px 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.lead-form textarea { min-height: 110px; }
.lead-form input:hover,
.lead-form select:hover,
.lead-form textarea:hover { border-color: var(--muted-strong); }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  background: #fff;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: #8b938d; opacity: 1; }

.form-error {
  color: #8f2f18;
  font-weight: 500;
}
.form-success { color: #2f5c3f; }

.button { min-height: 48px; }

/* ---------- 7. Motion ------------------------------------- */
/* Two full-viewport layers held `will-change` permanently, which keeps
   compositor memory allocated for the life of the page. Scope it to
   the animation instead. */
.hero-media::before,
.hero-media::after { will-change: auto; }

@media (prefers-reduced-motion: no-preference) {
  .hero-media::before,
  .hero-media::after { will-change: transform, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 8. Print -------------------------------------- */
@media print {
  .site-header, .footer, .hero-media, .lead-form, .splash { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}