/*
Theme Name: Mid Michigan Spray Foam
Theme URI: https://midmichigansprayfoam.com
Description: Mid Michigan Spray Foam — WordPress rebuild off Squarespace. Studio bespoke, his real brand (navy/orange/yellow), 1:1 URL mirror. No fleet lineage.
Version: 1.0.0
Author: Holocron AI (Orca Pixel Studio)
*/

/* ============ BRAND SYSTEM — sampled from his live site (LOCKED) ============ */
:root{
  --navy:#08102c;        /* header/nav, structure */
  --navy-2:#0f1a3d;
  --logo-blue:#040968;   /* wordmark blue */
  --orange:#fb9231;      /* bold feature-section backgrounds (mission band) */
  --yellow:#fdcf3c;      /* CTA pills */
  --yellow-bright:#fcd804;
  --ink:#111319;         /* body text */
  --paper:#ffffff;
  --muted:#5b6170;
  --line:#e7e9ef;
  --radius:999px;        /* his CTA pills */
  --wrap:1200px;
  --gap:clamp(32px,3.6vw,58px);
  --font-display:'Archivo','Inter',system-ui,sans-serif; /* bold varsity energy */
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--logo-blue);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;font-weight:800;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:var(--gap) 0}
/* page.php pages ship their own <section class="section"> inside .entry — the template already
   provides one, so the nested first section double-pads and opens a big gap under the H1.
   Collapse the redundant inner top padding (Anas review 2026-07-27). */
.entry > .section:first-child{padding-top:0}

/* ============ BUTTON (studio standard, his yellow pill) ============ */
.button,.th-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--yellow);color:var(--navy);
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.85rem 1.8rem;border-radius:var(--radius);border:2px solid var(--navy);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 3px 0 var(--navy)}
.button:hover,.th-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--navy)}
.button.sm{padding:.55rem 1.1rem;font-size:.85rem}
.button.w-full{width:100%;justify-content:center}

/* ============ TOP BAR + HEADER ============ */
.topbar{background:var(--navy-2);color:#fff;text-align:center;font-size:.95rem;padding:.55rem 1rem}
.topbar a{color:var(--yellow);font-weight:700}
.site-header{background:#fff;color:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(8,16,44,.09);border-bottom:1px solid var(--line)}
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.site-header .brand img{max-height:90px;width:auto;margin:0 auto}
.mainnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px 22px;margin:0;padding:0}
.mainnav a{color:var(--navy);font-weight:600;font-size:.98rem}
.mainnav a:hover{color:var(--orange)}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.socials{display:flex;gap:12px}
.socials a{color:var(--navy);opacity:.7}.socials a:hover{opacity:1;color:var(--orange)}
.socials svg{width:22px;height:22px;fill:currentColor}

/* ============ MISSION BAND (LOCKED — Anas loves this) ============ */
.mission{background:var(--orange);color:#fff}
.mission .grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:32px;align-items:center}
.mission img{border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.mission h2{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem)}
.mission p{font-size:1.06rem;margin:0 0 1rem}
.mission .verse{font-style:italic;opacity:.96}
.mission .cta{text-align:center;margin-top:28px}

/* ============ HERO / SERVICES / TRUST / TESTIMONIALS / FAQ ============ */
.hero{position:relative;background:var(--navy);color:#fff}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(26px,3vw,46px) 0}
.entry{font-size:1.05rem}
.entry > p:first-of-type{font-size:1.18rem;line-height:1.55;color:#2a3350}
.hero .eyebrow{color:var(--yellow);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem}
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .row{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:center;padding:22px 0;color:var(--muted);font-weight:600}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.svc-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column}
.svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(8,16,44,.10)}
.svc-card .body{padding:20px}
.svc-card h3{font-size:1.2rem;margin-bottom:.3rem}
.testi{background:#f6f7fb}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.testi-card{background:#fff;border-radius:14px;padding:22px;border:1px solid var(--line)}
.testi-card .stars{color:var(--yellow-bright)}
.faq details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:12px;background:#fff}
.faq summary{font-family:var(--font-display);font-weight:800;cursor:pointer}
.edu-block{background:#f6f7fb;border-radius:14px;padding:24px;margin-top:32px}
.edu-block h3{margin-top:0}
.edu-block ul{margin:0;padding-left:1.1rem}

/* ============ FOOTER (full page map — NO ORPHANS) ============ */
.site-footer{background:var(--navy);color:#cdd3e6;padding:56px 0 28px;font-size:.95rem}
.site-footer a{color:#cdd3e6}.site-footer a:hover{color:var(--yellow)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-grid h4,.footer-grid .footer-h{color:#fff;font-size:1rem;margin-bottom:.8rem;letter-spacing:normal}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#8b93ad;font-size:.85rem}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .site-header .wrap{grid-template-columns:1fr auto;row-gap:12px}
  .mainnav{order:3;grid-column:1/-1}
  .mission .grid{grid-template-columns:1fr !important}
  .hero .inner{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr 1fr}
  h1{font-size:clamp(1.9rem,7.5vw,2.7rem);overflow-wrap:break-word}
  .hero .inner img,.hero .inner video{max-width:100%;height:auto}
}
@media(max-width:820px){
  .footer-grid{grid-template-columns:1fr}
  /* Prevent horizontal overflow on phones: stack the hero CTAs full-width
     (the two side-by-side buttons were forcing the page wider than the viewport). */
  .topbar{font-size:.82rem;line-height:1.35}
  .hero .inner p{flex-wrap:wrap}
  .hero .inner .button{flex:1 1 100%;justify-content:center}
  .wrap{padding:0 16px}
  /* Header: stack brand / actions / nav into centered rows so the row never
     exceeds the phone viewport (logo + socials + button was ~405px wide). */
  .site-header .wrap{grid-template-columns:1fr;justify-items:center;gap:10px}
  .site-header .brand img{max-height:60px}
  .header-right{justify-content:center;flex-wrap:wrap;gap:12px}
  .mainnav ul{justify-content:center}
}
/* Belt-and-suspenders: never allow a stray wide element to scroll the page sideways. */
html,body{overflow-x:hidden;max-width:100%}