/* ============================================================
   Haverhill Elite Roofing - Global Stylesheet
   Hand-coded, mobile-first. Shared across every page so the
   browser caches it once and reuses it (good for Core Web Vitals).

   Sections:
     1. Design tokens (palette, type scale, spacing)
     2. Base / reset
     3. Layout primitives (container, section)
     4. Header: top bar, nav, mobile menu
     5. Buttons
     6. Hero
     7. Content components (cards, checklists, steps)
     8. Trust band
     9. Reviews
    10. Service areas
    11. FAQ
    12. CTA band
    13. Related links
    14. Forms (contact)
    15. Footer
    16. Motion / utilities
============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Palette - deep navy primary, one confident blue accent,
     warm neutral grays for body text, lots of white space. */
  --navy:        #0E1B30;  /* primary: hero, footer, dark surfaces */
  --navy-deep:   #0A1422;  /* deepest navy: top bar, footer base   */
  --ink:         #14223B;  /* headings                              */
  --accent:      #2563EB;  /* confident blue: links, buttons, marks */
  --accent-dark: #1B4FCB;  /* hover state                           */
  --accent-soft: #EAF1FE;  /* tint behind icons                     */
  --gray:        #515A6B;  /* body text (warm neutral)              */
  --gray-light:  #6B7385;  /* secondary text                        */
  --line:        #E5E9F0;  /* hairline borders                      */
  --bg:          #F6F8FB;  /* alternating section background        */
  --white:       #FFFFFF;
  --gold:        #C9A24B;  /* reserved warm accent (stars, trim)    */

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radius + shadow */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow:    0 2px 12px rgba(14, 27, 48, 0.06);
  --shadow-lg: 0 12px 40px rgba(14, 27, 48, 0.12);

  --maxw: 1120px;       /* wide layout for hubs/grids */
  --maxw-read: 760px;   /* narrow column for long-form reading */
}

/* ---------- 2. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--gray);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { font-size: 1.0625rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
.container--read { max-width: var(--maxw-read); }

.section { padding-block: clamp(var(--s-7), 5vw, var(--s-9)); }
.section--alt { background: var(--bg); }
.section--tight { padding-block: var(--s-7); }

/* One consistent heading block per section */
.section-head { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: var(--s-7); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head p { color: var(--gray-light); font-size: 1.125rem; margin-top: var(--s-3); }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}

.lead { font-size: 1.1875rem; color: var(--ink); }

/* Vertical rhythm for prose columns */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }

/* ---------- 4. HEADER ---------- */
.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 0.875rem; font-weight: 500;
  padding: var(--s-2) var(--s-4);
}
.topbar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding-block: var(--s-4);
}
/* Brand uses the site logo image (text alt is the fallback). */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { display: block; height: 52px; width: auto; }
@media (max-width: 880px) { .brand img { height: 44px; } }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a { color: var(--gray); font-size: 0.9375rem; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
/* The Call button is an <a> inside .nav, so the rule above was turning its
   text gray (low contrast on the blue pill). Keep the button text white. */
.nav a.btn, .nav a.btn:hover { color: #fff; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; color: var(--navy);
}
.nav-toggle svg { width: 100%; height: 100%; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.is-open { max-height: 420px; visibility: visible; }
  .nav a { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
  .nav .btn { margin: var(--s-4) var(--s-5); text-align: center; }
}

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 0.9375rem; line-height: 1;
  padding: 0.75rem 1.4rem; border: 0; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--lg { font-size: 1.125rem; padding: 1rem 2rem; }
.btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn--on-accent { background: #fff; color: var(--accent); }
.btn--on-accent:hover { background: #fff; color: var(--accent-dark); }
.btn--block { display: flex; width: 100%; }

/* ---------- 6. HERO ---------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  /* Each page sets its photo via the --hero-img custom property, e.g.
     style="--hero-img:url('/assets/img/hero-home.jpg')". The dark navy
     gradient sits on top to guarantee text contrast. With no photo set,
     the gradient over --navy keeps a clean solid hero. */
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(10, 20, 34, 0.82) 0%, rgba(12, 22, 40, 0.9) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__inner {
  max-width: 820px; margin-inline: auto; text-align: center;
  padding-block: clamp(var(--s-8), 9vw, 7rem);
}
.hero h1 { color: #fff; margin-bottom: var(--s-5); }
.hero p { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); color: rgba(255,255,255,0.88); max-width: 640px; margin-inline: auto; margin-bottom: var(--s-7); }
.hero .eyebrow { color: #8FB4FF; margin-bottom: var(--s-4); }
.hero__actions { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

/* ---------- 7. CONTENT COMPONENTS ---------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-6); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card h3 { margin-bottom: var(--s-3); }
.card p { font-size: 1rem; }

/* Service card with accent top edge + arrow link */
.card--service { border-top: 3px solid var(--accent); display: flex; flex-direction: column; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__more { margin-top: auto; padding-top: var(--s-4); font-weight: 700; color: var(--accent); font-size: 0.9375rem; }
.card__more::after { content: ' \2192'; }

.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.card__icon svg { width: 26px; height: 26px; }

/* Checklist */
.checks { list-style: none; margin-block: var(--s-5); }
.checks li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-7); color: var(--gray); border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
.step { display: flex; gap: var(--s-5); align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5) var(--s-6); }
.step__n { counter-increment: step; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; }
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: var(--s-2); }
.step p { margin: 0; }

/* Contained body image: modest, consistent size across the whole site */
.media { max-width: 760px; margin: var(--s-7) auto; }
.media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 640px) { .media img { border-radius: var(--radius-sm); } }

/* ---------- 8. TRUST BAND ---------- */
.trust-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6); text-align: center; }
.trust-card .card__icon { margin-inline: auto; border-radius: 50%; width: 56px; height: 56px; }
.trust-card h3 { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.trust-card p { font-size: 0.9375rem; color: var(--gray-light); }

/* ---------- 9. REVIEWS ---------- */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6); box-shadow: var(--shadow); }
.stars { color: var(--gold); font-size: 1.125rem; letter-spacing: 2px; margin-bottom: var(--s-3); }
.review p { font-style: italic; color: var(--ink); margin-bottom: var(--s-4); }
.review .who { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.review .who span { display: block; font-weight: 400; color: var(--gray-light); margin-top: 2px; }

.review-placeholder {
  border: 2px dashed var(--line); border-radius: var(--radius);
  color: var(--gray-light); font-size: 0.9375rem; text-align: center;
  display: grid; place-items: center; min-height: 168px; padding: var(--s-5);
}
.review-note {
  max-width: 760px; margin: var(--s-7) auto 0;
  background: #FFF8E6; border: 1px solid #F0DCA0; border-radius: var(--radius-sm);
  padding: var(--s-5) var(--s-6); font-size: 0.9375rem; color: #6B5200; line-height: 1.6;
}
.review-cta { display: flex; justify-content: center; margin-top: var(--s-6); }

/* ---------- 10. SERVICE AREAS ---------- */
.area-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.area-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6); }
.area-card h3 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.area-card h3 svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.area-card p { font-size: 0.9375rem; margin: 0; }

.area-pills { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
.area-pill { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--s-2) var(--s-5); font-weight: 600; color: var(--ink); font-size: 0.9375rem; }

/* ---------- 11. FAQ (native <details>, zero JS, accessible) ---------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; flex-shrink: 0; width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--s-6) var(--s-5) 0; color: var(--gray); font-size: 1rem; }

/* ---------- 12. CTA BAND ---------- */
.cta-band { background: var(--accent); color: #fff; text-align: center; }
.cta-band .container { padding-block: clamp(var(--s-7), 5vw, var(--s-8)); }
.cta-band h2 { color: #fff; margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,0.92); font-size: 1.1875rem; margin-bottom: var(--s-6); max-width: 560px; margin-inline: auto; }

/* ---------- 13. RELATED LINKS ---------- */
.related h2 { font-size: 1.375rem; text-align: center; margin-bottom: var(--s-5); }
.related .links { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.related .links a {
  padding: 0.6rem 1.2rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9375rem; color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.related .links a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- 14. FORMS (contact) ---------- */
.form { display: grid; gap: var(--s-5); }
.form[hidden] { display: none; } /* author display:grid would otherwise override the hidden attribute */
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 700; color: var(--ink); font-size: 0.9375rem; }
.field .req { color: var(--accent); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 140px; resize: vertical; }
.form__hint { font-size: 0.875rem; color: var(--gray-light); }

/* Inline form error (shown on a failed AJAX submission) */
.form-error {
  margin: 0; padding: var(--s-3) var(--s-4);
  background: #FDECEC; border: 1px solid #F2B8B5; border-radius: var(--radius-sm);
  color: #8A1C1C; font-size: 0.9375rem; font-weight: 600;
}

/* Inline thank-you panel (replaces the form after a successful submission) */
.form-success {
  display: grid; gap: var(--s-3); justify-items: start;
  padding: var(--s-6); border-radius: var(--radius);
  background: #ECFAF0; border: 1px solid #B6E7C4;
}
/* author display:grid above would otherwise override the hidden attribute */
.form-success[hidden] { display: none; }
.form-success svg { width: 40px; height: 40px; color: #1B8A4B; }
.form-success h3 { margin: 0; color: var(--ink); }
.form-success p { margin: 0; color: var(--ink); }

.contact-grid { display: grid; gap: var(--s-8); grid-template-columns: 1.2fr 0.8fr; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }
.contact-info { display: grid; gap: var(--s-5); }
.contact-info .info-item { display: flex; gap: var(--s-4); }
.contact-info .info-item svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-info h3 { font-size: 1rem; margin-bottom: 2px; }
.contact-info p, .contact-info a { font-size: 0.9375rem; color: var(--gray); margin: 0; }

/* ---------- 15. FOOTER ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.72); font-size: 0.9375rem; }
.site-footer .container { padding-block: var(--s-8); }
.footer-grid { display: grid; gap: var(--s-7); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.site-footer .brand { display: inline-flex; margin-bottom: var(--s-5); }
.site-footer .brand img { height: 64px; }
.site-footer h4 { color: #fff; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--s-4); }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; display: grid; gap: var(--s-3); }
.footer-contact { display: grid; gap: var(--s-3); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--s-7); padding-top: var(--s-5); text-align: center; font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

/* ---------- 16. MOTION / UTILITIES ---------- */
.center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }