/*
Theme Name: Universal PPC Service Theme
Theme URI: https://example.com/universal-ppc-service-theme
Author: PPC Theme Creator
Author URI: https://example.com
Description: Lightweight, conversion-focused landing-page theme for service businesses. Features header phone, logo toggle (image/text with optional icon), hero background image + editable badge, 6 editable service cards, Why Choose Us section, testimonials with custom background color, customizable header/footer menus, service area button, inner page templates (Service + Simple), Post-FAQ CTA with call button, disclaimer block, full post content on single posts, and JSON-LD (Services + FAQ).
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: universal-ppc-service-theme
Tags: one-column, custom-logo, custom-colors, custom-background, editor-style, featured-images, landing-page, responsive-layout
*/

:root{
  --bbbr-primary:#0d3b66;
  --bbbr-accent:#ffb703;
  --bbbr-text:#1f2937;
  --bbbr-muted:#6b7280;
  --bbbr-bg:#ffffff;
  --bbbr-section:#f9fafb;
  --bbbr-radius:16px;
  --bbbr-gap:1rem;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--bbbr-text);
  background:var(--bbbr-bg);
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.grid{display:grid;gap:var(--bbbr-gap)}
.btn{
  display:inline-block;
  padding:.75rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  border:1px solid transparent;
}
.btn-primary{background:var(--bbbr-primary);color:#fff}
.btn-outline{background:#fff;border-color:var(--bbbr-primary);color:var(--bbbr-primary)}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:var(--bbbr-accent);color:#111;font-weight:700;font-size:.8rem}

header.site-header{
  position:sticky;top:0;background:#fff;z-index:10;border-bottom:1px solid #eee;
}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.header-inner .brand{margin-right:auto;justify-content:flex-start}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand img{height:40px;width:auto;border-radius:8px;display:block}
.brand .site-title,.text-logo__text{font-size:1.125rem;font-weight:800;letter-spacing:.2px}
.custom-logo-link{display:flex;align-items:center;margin:0;padding:0}
.custom-logo{display:block;height:auto;vertical-align:middle}
/* Flush-left header logo */
header.site-header .container{padding-left:0;padding-right:0}
header.site-header .brand{padding-left:0;margin-left:0}

/* Header navigation */
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap}
.primary-nav a{text-decoration:none;color:var(--bbbr-text);font-weight:600}
.primary-nav a:hover{text-decoration:underline}
.phone-cta a{white-space:nowrap}
.phone-cta .label{color:var(--bbbr-muted);font-size:.8rem;margin-right:.25rem}

.hero{
  background: #e5e7eb center/cover no-repeat;
  color:#0b1220;
}
.hero-inner{padding:64px 0}
.hero-card{
  background:rgba(255,255,255,0.6);
  backdrop-filter:saturate(1.1) blur(6px);
  border-radius:var(--bbbr-radius);
  padding:1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  max-width:680px;
}
.hero h1{margin:.25rem 0 0;font-size:2rem;line-height:1.15}
.hero p{color:var(--bbbr-muted);margin:.5rem 0 1rem}
.hero .cta-row{display:flex;gap:.5rem;flex-wrap:wrap}

.section{padding:56px 0}
.section-title{font-size:1.5rem;margin:0 0 1rem}
.section-sub{color:var(--bbbr-muted);margin-top:-.5rem;margin-bottom:1.25rem}

.cards{grid-template-columns:repeat(6,1fr)}
.card{background:#fff;border:1px solid #eee;border-radius:var(--bbbr-radius);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:160px;object-fit:cover}
.card .card-body{padding:.9rem}
.card h3{margin:.2rem 0 .35rem;font-size:1rem}
.card p{margin:0;color:var(--bbbr-muted);font-size:.9rem}

.testimonials{border-radius:var(--bbbr-radius)}
.testimonial{background:#fff;border:1px solid #eee;border-radius:12px;padding:1rem}
.testimonial .who{font-weight:700;margin-top:.75rem}

/* Why Choose Us */
.why{background:var(--bbbr-section)}
.why .features{display:grid;gap:var(--bbbr-gap);grid-template-columns:repeat(4,1fr)}
.feature{background:#fff;border:1px solid #eee;border-radius:var(--bbbr-radius);padding:1rem}
.feature h3{margin:.25rem 0 .35rem;font-size:1.05rem}
.feature p{margin:0;color:var(--bbbr-muted)}

footer.site-footer{background:#0b1220;color:#e5e7eb;padding:28px 0;margin-top:48px}
footer .footer-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
footer .footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
footer a{color:#d1d5db;text-decoration:none}
footer .footer-nav a:hover{color:#fff}
footer .copyright{color:#9ca3af;font-size:.9rem}

.faq details{background:#fff;border:1px solid #eee;border-radius:12px;padding:1rem}
.faq summary{cursor:pointer;font-weight:700}
.faq details+details{margin-top:.75rem}

/* Post-FAQ CTA */
.post-cta{background:linear-gradient(180deg, #ffffff, #f8fafc)}
.post-cta-card{
  text-align:center;
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--bbbr-radius);
  padding:1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  max-width:760px;
  margin:0 auto;
}
.post-cta-card h2{margin:.25rem 0 .35rem}
.post-cta-card .sub{color:var(--bbbr-muted);margin:.25rem 0 1rem}
.post-cta .cta-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* Disclaimer below footer */
.site-disclaimer{padding:16px 0;text-align:center;color:#9ca3af;font-size:.9rem}
.site-disclaimer p{margin:.25rem 0}

/* Text logo (no badge) */
.text-logo{display:inline-flex;align-items:center;gap:.5rem}
.text-logo__icon{display:block;height:auto}
.text-logo__text{font-size:1.125rem;font-weight:800;letter-spacing:.2px}

/* A11y */
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Responsive */
@media (max-width: 1100px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .why .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .cards{grid-template-columns:1fr 1fr}
  .why .features{grid-template-columns:1fr}
  .hero h1{font-size:1.55rem}
}
@media (max-width: 420px){
  .cards{grid-template-columns:1fr}
}