/* =====================================================================
   THE LOOK. Colors and fonts for the whole site live here.
   build.js fills in the values from "look" in site.json, so most of the
   time you change site.json, not this file. The values below are the
   defaults if site.json leaves one out.
   check.js tests these color pairs for easy reading (contrast):
   text/bg, muted/bg, text/surface, muted/surface, primary/bg,
   primary/surface, on-primary/primary, on-accent/accent, on-banner/banner.
   ===================================================================== */
:root {
  --color-bg: #ffffff;         /* page background */
  --color-surface: #f4f6fb;    /* light band behind every other section */
  --color-text: #0b1a33;       /* main text */
  --color-muted: #465879;      /* small print, dates, captions */
  --color-primary: #1e3a8a;    /* links and main buttons */
  --color-on-primary: #ffffff; /* text on main buttons */
  --color-accent: #f97316;     /* the big Call button */
  --color-on-accent: #0b1a33;  /* text on the Call button */
  --color-banner: #0f2149;     /* top banner and footer */
  --color-on-banner: #ffffff;  /* text on the banner and footer */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --wrap: 68rem;
}

/* ---------- Base (phone first) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p, ul, ol, dl, figure { margin: 0 0 1em; }
a { color: var(--color-primary); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
[id] { scroll-margin-top: 1rem; }

/* Keyboard focus: a dark ring with a light edge shows on light and dark backgrounds. */
:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-bg);
}
.hero :focus-visible, .site-footer :focus-visible {
  outline-color: var(--color-on-banner);
  box-shadow: 0 0 0 5px var(--color-banner);
}
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 700;
}
.skip-link:focus { top: 0.5rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 44rem; }
.muted { color: var(--color-muted); }
.small { font-size: 0.95rem; }

/* ---------- Header and menu ---------- */
.site-header { background: var(--color-bg); }
.header-row {
  display: flex;
  flex-wrap: wrap; /* a long business name puts the Call link on its own line on phones */
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand { color: var(--color-text); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.brand img { max-height: 3rem; width: auto; }
.header-call { font-weight: 700; white-space: nowrap; padding: 0.6rem 0; }
.site-nav { background: var(--color-surface); }
.nav-list {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  overflow-x: auto; /* on phones the menu scrolls sideways */
}
.nav-list a {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a:hover { text-decoration: underline; }
.nav-list a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--color-primary); }
@media (min-width: 60rem) { .nav-list { flex-wrap: wrap; overflow: visible; } }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}
.btn-call {
  width: 100%;
  padding: 1rem 1.6rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.3rem;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-primary); }
.hero .btn-outline { color: var(--color-on-banner); }
.btn:hover { text-decoration: underline; }
@media (min-width: 40rem) { .btn-call { width: auto; } }

/* ---------- Top banner and page heads ---------- */
.hero { background: var(--color-banner); color: var(--color-on-banner); padding: 2.5rem 0 3rem; }
.hero a:not(.btn) { color: var(--color-on-banner); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
/* The photo sits under the Call button on phones, and beside the text on wider screens. */
.hero-photo { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60rem) { .hero-has-photo .hero-grid { grid-template-columns: 1.1fr 1fr; } }
.lead { font-size: 1.2rem; max-width: 42rem; }
.eyebrow { font-weight: 700; margin-bottom: 0.4rem; }
.page-head { background: var(--color-surface); padding: 2.5rem 0 2rem; }

/* ---------- Sections ---------- */
.section { padding: 3rem 0; }
.section-alt { background: var(--color-surface); }
.more { font-weight: 700; }
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: 1rem 1.25rem 1.25rem; }
.card-body p:last-child { margin-bottom: 0; }
.service-block { margin-bottom: 2.5rem; }
.service-block img, .article img, .about-photo { border-radius: var(--radius); margin-bottom: 1rem; }

.faq-list details { border-bottom: 1px solid var(--color-muted); padding: 0.75rem 0; }
.faq-list summary { cursor: pointer; font-weight: 700; padding: 0.25rem 0; }
.faq-list details p { margin: 0.5rem 0 0; }
.faq-page h2 { font-size: 1.25rem; margin-top: 2rem; }

.review-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 60rem) { .review-list { grid-template-columns: repeat(3, 1fr); } }
.review {
  margin: 0;
  padding: 1.25rem;
  background: var(--color-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}
.review blockquote { margin: 0 0 0.75rem; }
.review figcaption { color: var(--color-muted); font-size: 0.95rem; }

.area-list { columns: 2 12rem; padding-left: 1.2rem; }

.gallery {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); width: 100%; }
.gallery figcaption { color: var(--color-muted); font-size: 0.95rem; padding-top: 0.4rem; }

.facts dt { font-weight: 700; }
.facts dd { margin: 0 0 1rem; }
.hours { list-style: none; padding: 0; }

.box { background: var(--color-surface); border-radius: var(--radius); padding: 1.5rem; margin: 2rem 0 0; }
.section-alt .box { background: var(--color-bg); }
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 50rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Articles ---------- */
.article-list { list-style: none; padding: 0; }
.article-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--color-surface); }
.article-meta { color: var(--color-muted); }
.prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-banner); color: var(--color-on-banner); padding: 2.5rem 0 1.5rem; font-size: 0.95rem; }
.site-footer a { color: var(--color-on-banner); }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.foot-h { font-size: 1rem; margin-bottom: 0.5rem; }
.footer-list { list-style: none; padding: 0; }
.footer-list li { margin-bottom: 0.35rem; }
.foot-bottom { padding-top: 1.5rem; }
.sample-note { display: inline-block; padding: 0.5rem 0.75rem; border: 2px dashed currentColor; font-weight: 700; }

/* Preview mode: shown on every page of a draft made for a prospect. */
.preview-banner { background: #fff4c2; color: #3a2d00; border-bottom: 2px dashed #3a2d00; padding: 0.5rem 0; font-size: 0.9rem; font-weight: 600; text-align: center; }