/* "Dark/Bold" theme — wiki/references/example-brantford-concrete.md
   Reskins the shared component-library.css markup (nav/footer/hero-inner/
   section/card/grid/btn/area-grid/faq/phone-strip/form-card/cost-table) for a
   Poppins-bold, black/white/light-gray alternating look with a single red
   accent, matching the reference site's rhythm. First used on
   emergency-roof-replacement-missoula-mt. Adds hero-dark (paired with
   generate_site.hero_dark()), .section--gray (a third background tone beyond
   the shared engine's plain .section/.section--alt binary — see
   generate_site.section()'s extra_class param), a trust-strip (the shared
   engine's trust_strip() component has no CSS in the base style.css), and
   .floating-call (paired with generate_site.floating_call_button()). */

@import url("style.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --brand:#DC2626; --brand-dark:#B91C1C;
  --navy:#0a0a0a; --navy-dark:#000000;
  --teal:#0a0a0a; --teal-dark:#000000;
  --gold:#DC2626; --gold-dark:#B91C1C;
  --ink:#171717; --ink-soft:#555555;
  --line:#e5e5e5; --bg:#fff; --bg-alt:#0a0a0a; --bg-gray:#f5f5f5;
  --radius:8px;
  --font-head:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

h1,h2,h3{font-weight:700}

/* Header: solid black across both rows (not the default navy/red two-tone) */
.header-top{background:#000}
.site-nav{background:#000}
.nav__links a:hover{background:rgba(255,255,255,.1)}

/* Logo: bumped from the base engine's 40px — this theme's wordmark logo
   (icon + full company name) reads too small at the default height to be
   legible. Scoped here only; other sites keep the 40px default. The source
   PNG was also cropped (see photos/ note in 04-build-notes.md) to remove
   ~58% wasted vertical transparent padding that made height-based CSS
   scaling far less effective than it looked like it should be. */
.nav__logo-img{height:52px}
.footer-logo-img{height:52px}
.nav__call{background:var(--brand) !important;color:#fff !important}
.nav__dropdown-menu{background:#000}

/* Single accent color: fold the gold hero-CTA button into the same red as
   every other call-to-action, per the reference's one-accent rule. */
.btn--gold{background:var(--brand);color:#fff}
.btn--gold:hover{background:var(--brand-dark);color:#fff}

/* Secondary buttons (.btn--navy/.btn--outline): the base style.css hardcodes
   both to var(--navy), which this theme repurposes as near-black for
   backgrounds — a solid or outlined near-black button is invisible on any
   of this theme's black .section--alt/hero/phone-strip backgrounds. Made
   adaptive instead: an outline in the surrounding text's own color reads
   correctly whether that context is white-on-black (hero, phone-strip) or
   dark-ink-on-light (.section/.section--gray), with no per-section CSS
   needed. Caught visually on the About page's "Meet the Team" button. */
.btn--navy,.btn--outline{background:transparent;color:inherit;border:2px solid currentColor}
.btn--navy:hover,.btn--outline:hover{opacity:.75}

/* Inner-page hero (hero_inner): dark reskin of the same markup, no new
   component needed — text goes white instead of navy, no uppercase. */
.hero{background:#0a0a0a;padding:48px 0}
.hero__inner{color:#fff}
.hero h1{color:#fff;text-transform:none}
.hero__lead{color:#ddd}

/* Third background tone: light gray, between white .section and black
   .section--alt, matching the reference's 3-tone rhythm. */
.section--gray{background:var(--bg-gray)}

/* Black section (.section--alt reused as the dark tone) needs its own text
   colors — the base .section__lead/heading colors assume a light background. */
.section--alt{background:#0a0a0a;color:#fff}
.section--alt h2{color:#fff}
.section--alt .section__lead{color:#ccc}
.section--alt a:not(.btn){color:#fff;text-decoration:underline}

/* Cost table header: decouple from --bg-alt (now black) so it stays legible */
.cost-table th{background:var(--bg-gray);color:var(--ink)}

/* Form card: plain white card (not the default solid-teal fill) — matches
   the reference's white hero-embedded form card look, reused everywhere
   form_card() appears (hero, estimate, contact). */
.form-card--teal{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.form-card--teal h3{color:var(--ink)}
.form-card--teal .italic{color:var(--ink-soft);opacity:1}
.field input,.field textarea,.field select{border:1px solid var(--line);color:var(--ink)}

/* Phone strip: black CTA band instead of the default white strip */
.phone-strip{background:#0a0a0a;color:#fff;border:none}
.phone-strip .sub{color:#ccc}

/* --------------------------------------------------------------------- */
/* New components                                                        */
/* --------------------------------------------------------------------- */

/* Trust strip — reused from generate_site.trust_strip(), which has no CSS in
   the base style.css (it was previously only styled in style-directory.css). */
.trust-strip{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.trust-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;justify-content:center;font-size:.85rem;font-weight:700;color:var(--ink)}

/* Dark hero with embedded lead-capture form — see generate_site.hero_dark() */
.hero-dark{position:relative;overflow:hidden;color:#fff;padding:64px 0}
.hero-dark__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-dark__scrim{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.90),rgba(0,0,0,.74));z-index:1}
.hero-dark__content{position:relative;z-index:2}
.hero-dark__split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-dark__eyebrow{display:inline-block;background:var(--brand);color:#fff;padding:5px 14px;border-radius:4px;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.hero-dark h1{color:#fff;margin-bottom:.3em}
.hero-dark__lead{max-width:56ch;font-size:1.05rem;color:#e8e8e8;margin-bottom:12px}
.hero-dark__phoneline{font-size:1.2rem;font-weight:700;margin-bottom:16px}
.hero-dark__phoneline a{color:#fff;text-decoration:none}
.hero-dark__checklist{list-style:none;margin:0;padding:0}
.hero-dark__checklist li{padding-left:26px;position:relative;margin-bottom:8px;font-weight:600}
.hero-dark__checklist li::before{content:"\2713";position:absolute;left:0;color:var(--brand);font-weight:900}

/* Floating persistent call button — see generate_site.floating_call_button() */
.floating-call{position:fixed;right:22px;bottom:22px;z-index:200;width:60px;height:60px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);text-decoration:none}
.floating-call:hover{background:var(--brand-dark)}
.floating-call .btn__icon{margin:0;width:26px;height:26px}

@media (max-width:900px){
  .hero-dark__split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .floating-call{width:52px;height:52px;right:16px;bottom:16px}
}