/*
Theme Name: WHP — Water Heater Pros
Theme URI: https://waterheaterrepairwestminstermd.com
Author: Water Heater Pros
Description: Lightweight, fast, conversion-focused theme for the Water Heater Pros rank-and-rent site. Sticky call CTA, mobile call bar, designed content styling, and full [whp_*] shortcode + schema support.
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: whp
*/

/* ====================================================================
   1. Design tokens
   ==================================================================== */
:root{
  --navy:#0b2545;
  --blue:#13639e;
  --blue-bright:#1d7fc4;
  --accent:#e8590c;       /* heat / urgency / primary CTA */
  --accent-dark:#c44a06;
  --ink:#1f2933;
  --muted:#52606d;
  --line:#e4e9f0;
  --bg:#ffffff;
  --bg-soft:#f4f7fa;
  --bg-navy-soft:#0f2c52;
  --ok:#1f9d55;
  --star:#f5a623;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 6px 24px rgba(11,37,69,.08);
  --shadow-lg:0 14px 40px rgba(11,37,69,.16);
  --maxw:1140px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ====================================================================
   2. Base
   ==================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{line-height:1.2;color:var(--navy);margin:1.6em 0 .5em;font-weight:800;letter-spacing:-.01em;}
h1{font-size:2.4rem;margin-top:0;}
h2{font-size:1.7rem;}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.2em;padding-left:1.3em;}
li{margin:.3em 0;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.narrow{max-width:820px;}

/* ====================================================================
   3. Buttons
   ==================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.85em 1.5em;border-radius:50px;font-weight:700;font-size:1.05rem;
  text-decoration:none;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease;
  line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn-call{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(232,89,12,.35);}
.btn-call:hover{background:var(--accent-dark);color:#fff;}
.btn-call::before{content:"\260E";font-size:1.1em;}
.btn-secondary{background:#fff;color:var(--navy);border:2px solid var(--navy);}
.btn-secondary:hover{background:var(--navy);color:#fff;}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--navy);}

/* ====================================================================
   4. Top bar
   ==================================================================== */
.topbar{background:var(--navy);color:#cde0f2;font-size:.85rem;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;}
.topbar a{color:#fff;}
.topbar .tb-right{display:flex;gap:1.2rem;align-items:center;}
@media(max-width:720px){.topbar{display:none;}}

/* ====================================================================
   5. Header
   ==================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(11,37,69,.04);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:12px;padding-bottom:12px;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.3rem;color:var(--navy);text-decoration:none;letter-spacing:-.02em;}
.brand:hover{text-decoration:none;}
.brand .brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--blue-bright),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;}
.brand img{max-height:48px;width:auto;}

.main-nav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;align-items:center;}
.main-nav a{color:var(--navy);font-weight:600;font-size:1rem;}
.main-nav a:hover{color:var(--accent);text-decoration:none;}
.main-nav .current-menu-item>a{color:var(--accent);}

.header-cta{display:flex;align-items:center;gap:.8rem;}
.header-phone{font-weight:800;font-size:1.15rem;color:var(--navy);white-space:nowrap;}
.header-phone a{color:var(--navy);}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.nav-toggle span{width:26px;height:3px;background:var(--navy);border-radius:2px;transition:.2s;}

@media(max-width:960px){
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0;}
  .main-nav li{border-bottom:1px solid var(--bg-soft);}
  .main-nav a{display:block;padding:14px 20px;}
  .nav-toggle{display:flex;}
  .header-phone{display:none;}
}

/* ====================================================================
   6. Hero (front page)
   ==================================================================== */
.hero{position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);color:#fff;overflow:hidden;}
.hero.has-img::after{content:"";position:absolute;inset:0;background:rgba(8,28,54,.62);z-index:1;}
.hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0;}
.hero .container{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;max-width:880px;}
.hero h1{color:#fff;font-size:3rem;margin-bottom:.4em;}
.hero p.lead{font-size:1.35rem;color:#e6f0fa;margin-bottom:1.6em;line-height:1.5;}
.hero .hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;}
.hero .hero-sub{margin-top:1.4em;color:#bcd4ec;font-size:.95rem;display:flex;gap:1.3rem;flex-wrap:wrap;}
.hero .hero-sub span{display:inline-flex;align-items:center;gap:.4em;}
.hero .hero-sub span::before{content:"\2714";color:#6fcf97;font-weight:700;}
@media(max-width:720px){.hero h1{font-size:2.1rem;}.hero p.lead{font-size:1.15rem;}.hero .container{padding-top:48px;padding-bottom:48px;}}

/* ====================================================================
   7. Trust strip
   ==================================================================== */
.trust-strip{background:var(--bg-soft);border-bottom:1px solid var(--line);}
.trust-strip .container{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:16px 20px;font-weight:600;color:var(--navy);font-size:.95rem;}
.trust-strip span{display:inline-flex;align-items:center;gap:.45em;}
.trust-strip span::before{content:"\2714";color:var(--ok);font-weight:800;}

/* ====================================================================
   8. Content area
   ==================================================================== */
.site-main{padding:48px 0 64px;}
.page-content{max-width:820px;margin:0 auto;}
.page-content.wide{max-width:var(--maxw);}

/* answer-first blockquote box */
.page-content blockquote{
  background:var(--bg-soft);border-left:5px solid var(--accent);
  margin:1.6em 0;padding:1.2em 1.4em;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:1.08rem;color:var(--ink);
}
.page-content blockquote p:last-child{margin-bottom:0;}
.page-content blockquote strong{color:var(--navy);}

/* lists with check feel for plain bullets stays default; links */
.page-content a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.page-content a:hover{color:var(--accent);}

/* warning / safety callout (blockquotes that begin with ⚠) styled same; keep */

/* tables */
.page-content table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.97rem;}
.page-content th,.page-content td{border:1px solid var(--line);padding:.7em .9em;text-align:left;}
.page-content th{background:var(--bg-soft);color:var(--navy);}

/* horizontal rule as soft separator */
.page-content hr{border:0;border-top:1px solid var(--line);margin:2.2em 0;}

/* featured image on interior pages */
.page-hero-img{width:100%;max-height:380px;object-fit:cover;border-radius:var(--radius);margin:0 0 1.8em;box-shadow:var(--shadow);}

/* breadcrumbs */
.breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.2em;}
.breadcrumbs a{color:var(--muted);text-decoration:none;}
.breadcrumbs a:hover{color:var(--accent);}

/* ====================================================================
   9. CTA band (reusable)
   ==================================================================== */
.cta-band{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;text-align:center;border-radius:var(--radius);padding:36px 24px;margin:40px auto;max-width:820px;}
.cta-band h2{color:#fff;margin-top:0;}
.cta-band .btn-secondary{background:#fff;border-color:#fff;color:var(--accent-dark);}
.cta-band .btn-secondary:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* in-content CTA markers (generated from **[ ... ]** in the .md content) */
.cta-inline{
  display:inline-block;background:var(--bg-soft);border:2px solid var(--accent);
  color:var(--navy);font-weight:700;padding:.7em 1.2em;border-radius:50px;margin:.4em .4em .4em 0;
}
.cta-inline a{color:var(--accent-dark);text-decoration:none;}
.cta-inline.cta-bar{
  display:block;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;border:0;font-size:1.15rem;padding:1em 1.4em;border-radius:var(--radius);margin:2em 0;
}
.cta-inline.cta-bar a{color:#fff;text-decoration:underline;}
.cta-row{margin:.6em 0;}

/* in-content trust strip (generated from "Trust strip:" line) */
.trust-row{display:flex;flex-wrap:wrap;gap:1.2rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:1.4em 0;font-weight:600;color:var(--navy);font-size:.95rem;}
.trust-row span{display:inline-flex;align-items:center;gap:.4em;}
.trust-row span::before{content:"\2714";color:var(--ok);font-weight:800;}

/* ====================================================================
   10. Form (GHL embed wrapper)
   ==================================================================== */
.whp-form{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:1.5em 0;box-shadow:var(--shadow);}
.whp-form iframe{width:100%!important;border:0;}

/* ====================================================================
   11. Footer
   ==================================================================== */
.site-footer{background:var(--navy);color:#c4d6ea;font-size:.95rem;margin-top:40px;}
.site-footer a{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding:48px 20px 32px;max-width:var(--maxw);margin:0 auto;}
.site-footer h3{color:#fff;font-size:1.05rem;margin:0 0 .8em;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin:.4em 0;}
.footer-brand{font-weight:900;font-size:1.25rem;color:#fff;margin-bottom:.4em;display:block;}
.footer-phone{font-size:1.3rem;font-weight:800;color:#fff;margin:.3em 0;}
.footer-towns{font-size:.85rem;line-height:1.8;color:#9fbad6;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:18px 20px;font-size:.82rem;color:#8aa6c4;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:24px;}}

/* ====================================================================
   12. Sticky mobile call bar
   ==================================================================== */
.mobile-callbar{display:none;}
@media(max-width:760px){
  .mobile-callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -4px 18px rgba(0,0,0,.18);
  }
  .mobile-callbar a{display:flex;align-items:center;justify-content:center;gap:.4em;padding:15px 8px;font-weight:800;font-size:1.05rem;text-decoration:none;color:#fff;}
  .mobile-callbar .mc-call{background:var(--accent);}
  .mobile-callbar .mc-call::before{content:"\260E";}
  .mobile-callbar .mc-quote{background:var(--navy);}
  .mobile-callbar .mc-quote::before{content:"\270E";}
  body{padding-bottom:56px;} /* room for the bar */
}

/* ====================================================================
   13. Blog
   ==================================================================== */
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.post-card img{width:100%;height:180px;object-fit:cover;}
.post-card .pc-body{padding:18px 20px 22px;}
.post-card h2{font-size:1.2rem;margin:.2em 0 .4em;}
.post-card h2 a{color:var(--navy);text-decoration:none;}
.post-card .pc-meta{font-size:.8rem;color:var(--muted);}

.page-title-band{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:36px 0;}
.page-title-band h1{margin:0;}

/* utilities */
.text-center{text-align:center;}
.mt-0{margin-top:0;}

/* ====================================================================
   Section cards + FAQ accordion
   ==================================================================== */
.content-card{
	background:#fff;
	border:1px solid var(--line,#dbe2ea);
	border-radius:var(--radius,14px);
	padding:1.25rem 1.5rem;
	margin:1.25rem 0;
	box-shadow:var(--shadow,0 1px 3px rgba(11,37,69,.06));
}
.content-card > h2:first-child{margin-top:0;}
.content-card > *:last-child{margin-bottom:0;}

.content-card--faq .whp-faq{border-bottom:1px solid var(--line,#eef1f5);padding:.7rem 0;}
.content-card--faq .whp-faq:last-of-type{border-bottom:0;padding-bottom:0;}
.content-card--faq summary{cursor:pointer;font-weight:600;color:var(--navy,#0b2545);list-style:none;position:relative;padding-left:1.5rem;}
.content-card--faq summary::-webkit-details-marker{display:none;}
.content-card--faq summary::before{content:"\203A";position:absolute;left:.35rem;top:-.05rem;color:var(--blue,#13639e);font-size:1.2em;line-height:1;transition:transform .15s ease;}
.content-card--faq details[open] > summary::before{transform:rotate(90deg);}
.content-card--faq .whp-faq-a{padding:.4rem 0 .1rem 1.5rem;}
.content-card--faq .whp-faq-a p{margin:.3rem 0;}

/* ====================================================================
   Header polish + CTA buttons
   ==================================================================== */
/* keep nav items on one line (no more "Service / Area" wrap) */
.main-nav a{white-space:nowrap;}
.main-nav ul{gap:1.05rem;}
.brand{white-space:nowrap;}
.header-phone{white-space:nowrap;}
@media(max-width:1080px){.main-nav ul{gap:.85rem;}.main-nav a{font-size:.95rem;}}

/* nicer button hover animation */
.btn{transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.btn:hover{transform:translateY(-2px) scale(1.02);}
.btn-call:hover{box-shadow:0 10px 26px rgba(232,89,12,.45);}
.btn-call::after{content:"";}
.btn:active{transform:translateY(0) scale(.99);}

/* centered inline CTA */
.whp-cta-wrap{text-align:center;margin:1.8rem 0;}
.whp-cta-btn{font-size:1.15rem;padding:.95em 1.9em;}

/* full-width CTA band: prompt copy + Call Now button */
.whp-cta-bar{
	background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
	border-radius:16px;padding:1.5rem 1.8rem;margin:2.2rem 0;
	display:flex;align-items:center;justify-content:space-between;gap:1.3rem;flex-wrap:wrap;
	box-shadow:var(--shadow);
}
.whp-cta-bar-text{color:#fff;font-size:1.15rem;font-weight:600;line-height:1.4;margin:0;flex:1 1 260px;}
.whp-cta-bar .btn{font-size:1.15rem;flex-shrink:0;}
.whp-cta-bar .btn-call{box-shadow:0 8px 22px rgba(0,0,0,.28);}
@media(max-width:560px){.whp-cta-bar{flex-direction:column;align-items:stretch;text-align:center;}}