/* Brothers Roofing and Construction -- static rebuild.
   Colors, fonts, button radius and spacing are taken from the approved test-drive reference
   (site/preview/brothers-roofing/index.html, the "site mock" in step 1), cross-checked
   against the real site's own theme CSS (wp-content/themes/basebuildv3) for the display
   font (Steelfish, self-hosted below from that same theme's font files) and the hero overlay
   color. Mobile-first, no framework. */
@font-face {
  font-family: 'Steelfish';
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/steelfish.woff2') format('woff2'),
       url('/assets/fonts/steelfish.woff') format('woff');
}
:root {
  --navy: #173760;
  --navy-dk: #0f2442;
  /* Brand blue, darkened from the old site's #3492fa (3.2:1 on white) so white button text
     and blue headings clear WCAG AA 4.5:1: 5.2:1 on white, 4.8:1 on --bg (evaluation
     2026-10-05, f11). --blue-dk is the hover/pressed shade. */
  --blue: #186ad0;
  --blue-dk: #0f4f99;
  --ink: #1d2430;
  --muted: #5b6575;
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #dfe4ec;
  --green: #1e8a4c;
  --green-bg: #e6f5ec;
  --radius: 6px;
  --maxw: 1180px;
  --head: 'Steelfish', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --body: 'Lexend', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  padding-bottom: 64px; /* room for sticky mobile bar */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dk); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 500; color: var(--navy); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(26px, 4vw, 38px); color: var(--blue); margin-top: 1.4em; }
h3 { font-size: 22px; margin-top: 1.2em; }
p { margin: 0 0 1em; }
p, li { font-size: 18px; }
ul, ol { padding-left: 1.3em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Top bar: hours left, phone centered with icon, Leave a Review pill right
   (site mock #s1: "Monday - Saturday 7AM - 7PM" / "(614) 436-5588" / "Leave a Review") */
.topbar { background: var(--navy); color: #fff; font-size: 16px; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 18px; flex-wrap: wrap; }
.topbar-hours { opacity: .95; display: inline-flex; align-items: center; gap: 8px; }
.topbar-phone { color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.icon-svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topbar-review { color: var(--navy); background: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 8px 18px; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.topbar-review:hover { background: #eef4fc; }
/* Rating trust line (evaluation f1/f18): a compact white pill, legible on the navy topbar AND
   wherever it sits directly above an estimate-form card (.estimate-trust variant), so the
   same component works without a per-background color override. */
.topbar-trust, .estimate-trust { color: var(--navy); background: #fff; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 6px 14px; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.topbar-trust span[aria-hidden], .estimate-trust span[aria-hidden] { color: #f2a900; }
.topbar-trust:hover, .estimate-trust:hover { background: #eef4fc; }
.estimate-trust { margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
/* Below 576px the hours + phone + review pill no longer fit on one or two lines without
   crowding -- the live site's own mobile top bar only shows the phone number at this width,
   centered, so match that rather than wrap three items across three lines. Placed AFTER the
   base .topbar-hours/.topbar-review rules above: an earlier version of this media query sat
   BEFORE them in the file, and since every selector here is a single class (equal
   specificity), the later unconditional rule won the cascade and silently undid the hide --
   the same bug `.header-cta` hit against `.btn`. Order matters here as much as specificity. */
@media (max-width: 575px) {
  .topbar-in { justify-content: center; padding: 10px 18px; }
  .topbar-hours, .topbar-review { display: none; }
}

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 100; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 56px; width: auto; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 1.3rem; cursor: pointer; }
/* Scoped under .site-header (not just .header-cta) so this beats .btn's `display:
   inline-flex` on specificity -- a plain `.header-cta{display:none}` here tied with `.btn`
   on specificity and lost on source order, which is exactly what let the button wrap onto
   its own row under the logo at mobile widths. */
.site-header .header-cta { display: none; }
.site-nav { display: none; }
.site-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,.08); }
.site-nav ul { list-style: none; margin: 0; padding: 10px 18px 16px; }
.site-nav li { border-top: 1px solid var(--line); }
.site-nav li:first-child { border-top: 0; }
/* padding 12px 4px was too tight horizontally: the desktop flex nav bar (@media min-width:880px
   below) sizes each link to its own content width, and four short labels (e.g. "Home",
   "Contact") measured only 34-41px wide -- under the 44px tap-target minimum (evaluation
   f13). min-width is the hard floor; the extra horizontal padding keeps it from looking
   cramped on the longer labels too. */
.site-nav a, .site-nav summary { display: block; padding: 12px 10px; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 16px; cursor: pointer; }
.site-nav a.is-active, .site-nav summary.is-active { color: var(--blue); }
.site-nav details ul { padding-left: 14px; }
.site-nav details ul li { border-top: 0; }
.site-nav details ul a { font-weight: 400; padding: 10px 4px; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; box-shadow: none; border-bottom: 0; }
  .site-nav ul { display: flex; align-items: center; gap: 22px; padding: 0; }
  .site-nav li { border-top: 0; position: relative; }
  .site-nav details { position: relative; }
  .site-nav details ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.12); min-width: 240px; padding: 6px; z-index: 60; flex-direction: column; }
  .site-nav details[open] ul { display: flex; }
  .site-nav details ul li a { white-space: nowrap; border-radius: 6px; }
  .site-nav details ul li a:hover { background: var(--bg); }
  .site-header .header-cta { display: inline-flex; }
}

/* Buttons -- full pill radius, matching the current site's Call Now / Get an Estimate buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 17px; text-decoration: none; border: 0; cursor: pointer; }
.btn--cta { background: var(--blue); color: #fff; }
.btn--cta:hover { background: var(--blue-dk); }
.btn--outline { background: #fff; color: var(--navy); }
.btn--navy { background: var(--navy); color: #fff; }

/* Hero -- full-width photo with a dark navy overlay (matches the live site's own
   `linear-gradient(rgba(0,34,68,.5),rgba(0,34,68,.5))` over /media/hero-*.webp).
   The photo is a real <img class="hero__bg"> injected by lib/layout.js (not a CSS
   background) so the browser finds and fetches it first; ::before is the overlay.
   isolation keeps the hero's own layers inside it, below the sticky header and open menu. */
.hero, .landing-hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--navy-dk); color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before, .landing-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(10,28,52,.58); }
.landing-hero::before { background: rgba(10,28,52,.72); }
/* Phones: the hero also holds the estimate form, so it runs ~1,250px tall and a cover-fit
   photo zoomed into an unrecognisable detail (evaluation c6768e5a, f24). Keep the photo to
   the top of the hero at its own proportions and fade it into the navy behind the form. */
@media (max-width: 899px) {
  .hero .hero__bg { height: 560px; bottom: auto; object-position: 50% 35%; }
  .hero::before { background: linear-gradient(rgba(10,28,52,.58) 0, rgba(10,28,52,.58) 380px, var(--navy-dk) 560px); }
}
.hero { padding: 44px 0 52px; }
@media (min-width: 768px) {
  .hero { padding: 64px 0 72px; }
}
.hero .container { display: grid; gap: 28px; }
.hero__eyebrow { font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: .5px; color: #cfe0ff; margin-bottom: 4px; }
.hero h1 { color: #fff; }
.hero__sub { font-size: 17px; color: #dbe6ff; max-width: 60ch; }
/* Only rendered at all when C.SHOW_TRUST_BADGES is true -- see lib/layout.js trustBadges() */
.hero__badges { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.hero__badges img { height: 40px; width: auto; display: block; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 16px; color: #dbe6ff; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) {
  .hero .container { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

/* Estimate form -- a card, same look as the site's navy estimate card */
/* Without JS (or arriving via #estimate), keep the form clear of the sticky header. */
#estimate, .estimate-form { scroll-margin-top: 96px; }
.estimate-form { background: var(--navy); color: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.estimate-form__heading { margin-top: 0; font-size: 26px; color: #fff; }
.estimate-form__sub { color: #cfe0ff; font-size: 16px; margin-bottom: 14px; }
.estimate-form__row { margin-bottom: 14px; }
.estimate-form__row label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.estimate-form input, .estimate-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid transparent; border-radius: 8px; font: inherit; font-size: 16px; }
.estimate-form input:focus, .estimate-form textarea:focus { outline: none; border-color: var(--blue); }
.estimate-form textarea { min-height: 70px; }
.estimate-form__submit { width: 100%; background: var(--blue); box-shadow: 0 4px 0 var(--blue-dk); }
.estimate-form__submit:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--blue-dk); }
.estimate-form__status { font-size: .9rem; margin-top: 10px; color: #fff; }
/* 1rem (16px), not .9rem (14.4px) -- under the mobile minimum readable size (evaluation f13). */
.estimate-form__fallback { font-size: 1rem; margin-top: 10px; background: #fff3e8; color: #7a3b00; border: 1px solid #f0c49a; border-radius: 8px; padding: 10px; }
.estimate-form__success { color: #fff; }
.estimate-form__success h2 { margin-top: 0; color: #fff; }
/* Honeypot: off-screen for people, still in the form for bots (lib/form.js) */
.estimate-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Service photo cards row (home page, below the hero) -- real archive photos, matches the
   current site's 4-card row: Roofing / Siding / Windows & Doors / Porches, Patios, Decks */
.service-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 880px) { .service-cards { grid-template-columns: repeat(4, 1fr); } }
.service-card { position: relative; min-height: 180px; background-size: cover; background-position: center; display: flex; align-items: flex-end; text-decoration: none; }
.service-card span { width: 100%; background: rgba(23,55,96,.82); color: #fff; font-family: var(--head); font-weight: 500; font-size: 22px; padding: 12px 16px; letter-spacing: .3px; }

/* Sections */
.section { padding: 36px 0; }
.section--soft { background: #fff; }
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
/* Links inside sentences: pad them to a 44px tap height on phones without changing the line
   spacing (evaluation c6768e5a, f26). */
@media (max-width: 879px) {
  main p a:not(.btn), main li a:not(.btn) { padding: 12px 0; }
}
/* Linked card headings are tap targets: at least 44px tall (evaluation 2026-10-05, f26) */
.card h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.fact-block { background: var(--bg); border-left: 4px solid var(--blue); border-radius: 8px; padding: 14px 16px; margin: 1.2em 0; }
.fact-block p:last-child { margin-bottom: 0; }

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.faq-item summary { padding: 14px 16px; font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.faq-item .faq-answer { padding: 0 16px 16px; color: var(--ink); }

/* Customer testimonials (evaluation f1/f18) -- published on Brothers' own old website, never
   labeled Google reviews (see scripts/build.js testimonialCard/testimonialsBlock). */
.testimonial-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1em 0; }
.testimonial-row--single { max-width: 640px; }
.testimonial { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 0; }
.testimonial p { font-size: 15px; color: var(--ink); margin: 0 0 8px; }
.testimonial footer { font-size: 14px; font-weight: 700; color: var(--navy); }

/* Related articles */
.related-articles ul { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.related-articles li { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }

/* Footer */
.site-footer { background: var(--navy-dk); color: #cfd8e6; padding: 36px 0 90px; font-size: 16px; }
.site-footer a { color: #cfd8e6; }
.footer-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-grid h3 { color: #fff; font-size: 18px; margin-top: 0; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a, .site-footer .legal a { display: inline-flex; align-items: center; min-height: 44px; }
/* 16px, not 14px -- this line carries the phone number, under the mobile minimum readable
   size (evaluation f13). Was already bumped to 16px under 479px only; now 16px everywhere, so
   that narrower media query is redundant and removed. */
.site-footer .legal { margin-top: 26px; font-size: 16px; color: #9fb3d6; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }

/* Sticky mobile bottom bar */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 80; box-shadow: 0 -4px 14px rgba(0,0,0,.18); }
.sticky-bar a { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; text-decoration: none; font-size: 16px; }
.sticky-bar .call { background: var(--navy); color: #fff; }
.sticky-bar .estimate { background: var(--blue); color: #fff; }
@media (min-width: 880px) { .sticky-bar { display: none; } body { padding-bottom: 0; } }

/* Map iframe */
.map-embed { border: 0; width: 100%; height: 320px; border-radius: 10px; }

/* noindex landing pages get a simpler, focused layout: logo + phone header, legal-only footer */
.site-header--minimal .container { flex-wrap: nowrap; }
.site-header--minimal .container { gap: 12px; }
.site-header--minimal .brand img { height: 40px; }
.header-phone { min-height: 44px; padding: 10px 18px; font-size: 16px; white-space: nowrap; }
.site-footer--minimal { padding: 20px 0 90px; }
.site-footer--minimal .legal { margin-top: 0; border-top: 0; }
.landing-hero { padding: 36px 0 44px; }
.landing-hero h1 { color: #fff; }
.landing-hero .container { max-width: 760px; }
/* /roofingquiz/ only (evaluation f27): the form is first in the DOM so a phone visitor meets
   it before any copy; column-reverse restores the original copy-then-form stacked order on
   desktop without duplicating markup. See scripts/build.js buildAdsLanding formFirstMobile. */
.landing-flex { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .landing-flex { flex-direction: column-reverse; }
}