/* Wayne County Foundation Repair — component styles (light editorial theme)
   Replaces legacy dark-navy style.css. Only the classes the built pages use. */

:root{
  --ink:#0C0D0F;
  --paper:#FAFAF8;
  --bone:#F8F6F2;
  --oxblood:#B8341E;
  --oxblood-dark:#8C2716;
}

/* Layout */
.container{max-width:80rem;margin:0 auto;padding:0 1.25rem}

/* Hero — LIGHT editorial theme (no navy, correct min-height) */
.hero{position:relative;background-color:var(--paper)}
.hero .container{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:64em){
  .hero-grid{grid-template-columns:1.2fr 1fr;gap:3rem}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.875rem;letter-spacing:.1em;
  text-transform:uppercase;padding:1rem 2rem;border:2px solid transparent;
  transition:all .2s ease;border-radius:2px}
.btn-outline{background:transparent;border:1px solid rgba(12,13,15,.2);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}

/* Cards */
.card{background:#fff;border:1px solid rgba(12,13,15,.08);padding:2.5rem;
  transition:all .3s ease;border-radius:2px;box-shadow:0 4px 20px rgba(0,0,0,.03)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08);
  border-color:rgba(184,52,30,.3)}
.card-link{font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;
  gap:.5rem;color:var(--oxblood)}
.card-link:hover{color:var(--oxblood-dark)}

/* Grids */
.grid-3{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:48em){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64em){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Stats */
.stat{text-align:center}

/* Scroll reveal (JS toggles this) */
.js-enabled .reveal{opacity:0;transform:translateY(30px)}

/* ============================================================
   LIGHT-THEME OVERRIDES for legacy city/service page template
   (style.css was built dark-navy; these force the light theme
   so hero text and chips are visible on the paper background)
   ============================================================ */

/* Hero: light paper background, dark text (overrides navy gradient) */
.hero{background:var(--paper) !important;min-height:auto !important;padding:4rem 0 3rem !important}
.hero::after,.hero::before{display:none !important}
.hero-content h1{color:var(--ink) !important}
.hero-content p{color:rgba(12,13,15,.72) !important}
.hero-trust{color:rgba(12,13,15,.7) !important;margin-top:1.5rem}
.hero-trust svg{color:var(--oxblood) !important}

/* Chip: visible oxblood pill on light bg (kill inline white-on-white) */
.hero-content .chip,.hero .chip{background:rgba(184,52,30,.1) !important;color:var(--oxblood) !important}

/* "Service Coverage" card keeps its dark ink panel intentionally */
.two-col .card[style*="--brand-secondary"]{background:var(--ink) !important}

/* Breadcrumb / meta / TLDR readable on light */
.breadcrumb,.breadcrumb a{color:rgba(12,13,15,.6)}
.bento-tldr-box{background:#fff;border-left:4px solid var(--oxblood)}
.bento-tldr-item span.val{color:var(--ink) !important}
.bento-tldr-item{border-left:2px solid var(--oxblood) !important}

/* CTA band: use ink, not the old navy secondary */
.cta-band{background:var(--ink) !important}
.cta-band::before{background:var(--oxblood) !important}

/* Legacy .btn was gold — force oxblood primary to match brand.
   Scoped away from Tailwind buttons (which carry their own bg-[#...] class). */
a.btn:not([class*="bg-"]),button.btn:not([class*="bg-"]){
  background:var(--oxblood) !important;color:#fff !important}
a.btn:not([class*="bg-"]):hover,button.btn:not([class*="bg-"]):hover{
  background:var(--oxblood-dark) !important;color:#fff !important}

/* Outline/secondary button: dark text on light (kill forced white) */
.btn-outline{background:transparent !important;border:1px solid rgba(12,13,15,.25) !important;
  color:var(--ink) !important}
.btn-outline:hover{background:var(--ink) !important;color:#fff !important}

/* Gold accent → oxblood everywhere it drove hero trust ticks / focus */
.hero-trust svg{color:var(--oxblood) !important}