/*
Theme Name: Roof SEO Gorilla
Theme URI: https://example.com/roof-seo-gorilla
Author: ChatGPT
Description: A lightweight WordPress theme tailored for "Roof SEO" lead generation. Includes Roof SEO-focused H1/H2s, CTA sections, and FAQ schema.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: roofseo
*/

:root{
  --primary:#f2701a;
  --dark:#1c1c1c;
  --muted:#6a6a6a;
  --bg:#f7f7f7;
}

html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:#fff;}

.site-header{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid #eee;}
.site-header .wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px;}
.site-title a{display:flex;gap:.5rem;align-items:center;text-decoration:none;color:#222;font-weight:700;}
.nav{display:flex;gap:16px;align-items:center;}
.nav a{color:#222;text-decoration:none;font-weight:600}
.cta-btn{background:var(--primary);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.cta-btn:hover{filter:brightness(0.95)}

main{max-width:1100px;margin:0 auto;padding:22px 16px;}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:36px 0}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 10px}
.hero p.lead{font-size:18px;color:#333;margin:0 0 16px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.badges span{background:#fff;border:1px solid #eee;border-radius:999px;padding:6px 10px;font-size:14px;color:#333}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}
.stat{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;text-align:center}
.stat .num{font-size:28px;font-weight:800}
.stat .lab{color:var(--muted);font-size:12px}

.section{padding:30px 0}
.section h2{font-size:28px;margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px}
.card h3{margin:0 0 6px}
.card p{color:#333;margin:8px 0}

.banner{background:var(--primary);color:#fff;border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin:24px 0}

.faq{background:var(--bg);border:1px solid #eee;border-radius:16px;padding:16px}
.faq-item{border-bottom:1px solid #eee;padding:10px 6px}
.faq-item:last-child{border-bottom:none}
.faq-item h3{margin:0;cursor:pointer;font-size:18px}
.answer{display:none;color:#333;padding:8px 0 0 0}

.site-footer{background:#111;color:#ddd;margin-top:24px}
.site-footer .wrap{max-width:1100px;margin:0 auto;padding:26px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.site-footer a{color:#fff;text-decoration:none}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .banner{flex-direction:column;gap:10px;align-items:flex-start}
}