/* ============================================================
   Southern Brick — Locksmith Savannah Georgia
   Global theme recolor + homepage layout
   Tokens: Oxblood #762F32 / Cream #F6F0E7 / Graphite #353330 / Clay #C18A69 / Linen #DDD3C6
   ============================================================ */

:where(html){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){:where(html){scroll-behavior:auto}}

:root{
  --sb-oxblood:#762F32;
  --sb-cream:#F6F0E7;
  --sb-graphite:#353330;
  --sb-clay:#C18A69;
  --sb-linen:#DDD3C6;
  --sb-sp-sm:12px;
  --sb-sp-md:24px;
  --sb-sp-lg:64px;
  --sb-sp-xl:112px;
  --sb-r-sm:2px;
  --sb-r-md:4px;
  --sb-font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --sb-font-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- Base ---------- */
body{
  background:var(--sb-cream) !important;
  color:var(--sb-graphite);
  font-family:var(--sb-font-body);
}
.site,.site-content,#content,.content-area{background:var(--sb-cream);}
h1,h2,h3,h4,h5,h6,
.entry-title,.page-title{
  font-family:var(--sb-font-head);
  color:var(--sb-oxblood);
  font-weight:700;
  letter-spacing:.2px;
}
h1{font-weight:800;}
a{color:var(--sb-oxblood);}
a:hover{color:var(--sb-clay);}

/* ---------- Header / Nav (Kadence classic header) ---------- */
#masthead.site-header,
#mobile-header.site-mobile-header-wrap{
  background:var(--sb-graphite) !important;
  border-bottom:1px solid rgba(246,240,231,.08);
}
#masthead .site-title,
#masthead .site-title a,
#masthead .brand .site-title,
#mobile-header .site-title{
  color:var(--sb-cream) !important;
  font-family:var(--sb-font-head);
  font-weight:700;
  letter-spacing:.3px;
}
#site-navigation.main-navigation #primary-menu > li > a{
  color:var(--sb-cream) !important;
  font-family:var(--sb-font-body);
  font-weight:600;
  border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
#site-navigation.main-navigation #primary-menu > li > a:hover,
#site-navigation.main-navigation #primary-menu > li.current_menu-item > a{
  color:var(--sb-cream) !important;
  border-bottom-color:var(--sb-clay);
}
#mobile-toggle, .menu-toggle-open{color:var(--sb-cream) !important;}
#mobile-toggle svg, .menu-toggle-open svg{fill:var(--sb-cream) !important;}
.drawer-nav, .fullscreen-menu, .popup-mobile-menu{background:var(--sb-graphite) !important;}
.drawer-nav a, .fullscreen-menu a, .popup-mobile-menu a{color:var(--sb-cream) !important;}

/* Header call button (used in hero + sticky header optional) */
.sb-header-call{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sb-clay);color:var(--sb-graphite) !important;
  font-weight:700;padding:10px 18px;border-radius:var(--sb-r-sm);
  text-decoration:none;
}
.sb-header-call:hover{background:#ad7a5c;color:var(--sb-graphite) !important;}

/* ---------- Footer ---------- */
#colophon.site-footer{
  background:var(--sb-graphite) !important;
  color:var(--sb-cream);
}
#colophon .footer-html, #colophon .footer-html-inner, #colophon .footer-html p{
  color:rgba(246,240,231,.75) !important;
}
#colophon a{color:var(--sb-cream) !important;}
#colophon a:hover{color:var(--sb-clay) !important;}

/* ============================================================
   Homepage sections
   ============================================================ */
.sb-page{overflow-x:hidden;}
.sb-section{padding:var(--sb-sp-xl) var(--sb-sp-md);}
.sb-section-inner{max-width:1140px;margin:0 auto;}
.sb-section.sb-cream{background:var(--sb-cream);}
.sb-section.sb-linen{background:var(--sb-linen);}
.sb-section.sb-graphite{background:var(--sb-graphite);color:var(--sb-cream);}
.sb-section.sb-graphite h2,
.sb-section.sb-graphite h3{color:var(--sb-cream);}
.sb-section.sb-graphite p,
.sb-section.sb-graphite li{color:rgba(246,240,231,.85);}

.sb-eyebrow{
  display:inline-block;font-family:var(--sb-font-body);font-weight:700;
  font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--sb-clay);margin-bottom:var(--sb-sp-sm);
}
.sb-section.sb-graphite .sb-eyebrow{color:var(--sb-clay);}

/* ---- Hero (asymmetric, not centered mega-hero) ---- */
.sb-hero{
  background:var(--sb-cream);
  padding:56px var(--sb-sp-md) 48px;
  border-bottom:1px solid rgba(53,51,48,.08);
}
.sb-hero-grid{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sb-sp-lg);
  align-items:center;
}
.sb-hero-eyebrow{color:var(--sb-oxblood);font-weight:700;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px;display:block;}
.sb-hero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.12;margin:0 0 18px;}
.sb-hero p.sb-lede{font-size:18px;line-height:1.6;color:var(--sb-graphite);max-width:46ch;margin:0 0 28px;}
.sb-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.sb-hero-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:10px;}
.sb-hero-trust-item{font-size:14px;font-weight:600;color:var(--sb-graphite);display:flex;align-items:center;gap:8px;}
.sb-hero-trust-item .sb-dot{width:7px;height:7px;border-radius:50%;background:var(--sb-clay);display:inline-block;}
.sb-hero-card{
  background:var(--sb-linen);border:1px solid rgba(53,51,48,.1);
  border-radius:var(--sb-r-md);padding:var(--sb-sp-lg) var(--sb-sp-md);
}
.sb-hero-card h3{margin-top:0;font-size:20px;}
.sb-hero-card ul{list-style:none;margin:0;padding:0;}
.sb-hero-card li{padding:9px 0;border-bottom:1px solid rgba(53,51,48,.12);font-weight:600;font-size:15px;}
.sb-hero-card li:last-child{border-bottom:none;}
@media (max-width:860px){
  .sb-hero-grid{grid-template-columns:1fr;gap:28px;}
  .sb-hero{padding:40px var(--sb-sp-sm) 36px;}
}

/* ---- Buttons ---- */
.sb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sb-font-body);font-weight:700;font-size:15.5px;
  padding:14px 26px;border-radius:var(--sb-r-sm);border:none;cursor:pointer;
  text-decoration:none;line-height:1;box-shadow:none;transition:background-color .15s ease;
}
.sb-btn-primary{background:var(--sb-oxblood);color:var(--sb-cream) !important;}
.sb-btn-primary:hover{background:#602327;color:var(--sb-cream) !important;}
.sb-btn-secondary{background:var(--sb-clay);color:var(--sb-graphite) !important;}
.sb-btn-secondary:hover{background:#ad7a5c;color:var(--sb-graphite) !important;}
.sb-btn-ghost{background:transparent;color:var(--sb-cream) !important;border:1px solid rgba(246,240,231,.5);}
.sb-btn-ghost:hover{border-color:var(--sb-clay);color:var(--sb-clay) !important;}

/* ---- Section headers ---- */
.sb-section-head{max-width:720px;margin:0 0 var(--sb-sp-lg);}
.sb-section-head.sb-center{margin:0 auto var(--sb-sp-lg);text-align:center;}
.sb-section-head h2{font-size:clamp(26px,3vw,36px);margin:0 0 14px;line-height:1.2;}
.sb-section-head p{font-size:16.5px;line-height:1.6;margin:0;}

/* ---- Services grid (asymmetric 2-up lead, not 3 identical cards) ---- */
.sb-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sb-sp-md);
}
.sb-card{
  background:var(--sb-linen);border:1px solid rgba(53,51,48,.12);
  border-radius:var(--sb-r-md);padding:28px 26px;box-shadow:none;
}
.sb-card h3{font-size:19px;margin:0 0 10px;}
.sb-card p{font-size:15px;line-height:1.55;margin:0 0 14px;color:var(--sb-graphite);}
.sb-card a.sb-card-link{font-weight:700;font-size:14px;color:var(--sb-oxblood);text-decoration:none;}
.sb-card a.sb-card-link:hover{color:var(--sb-clay);}
.sb-card.sb-card-feature{
  grid-column:span 2;background:var(--sb-cream);border:1px solid rgba(118,47,50,.18);
  display:flex;flex-direction:column;justify-content:center;
}
.sb-card.sb-card-feature h3{font-size:23px;color:var(--sb-oxblood);}
@media (max-width:900px){
  .sb-services-grid{grid-template-columns:1fr 1fr;}
  .sb-card.sb-card-feature{grid-column:span 2;}
}
@media (max-width:600px){
  .sb-services-grid{grid-template-columns:1fr;}
  .sb-card.sb-card-feature{grid-column:span 1;}
}

/* ---- Why-us / stats-style band ---- */
.sb-why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sb-sp-lg);align-items:start;}
.sb-why-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.sb-why-list li{display:flex;gap:14px;align-items:flex-start;}
.sb-why-list .sb-num{
  font-family:var(--sb-font-head);font-weight:700;color:var(--sb-clay);font-size:22px;line-height:1;flex:0 0 auto;
}
.sb-why-list strong{display:block;color:var(--sb-cream);margin-bottom:4px;font-size:16px;}
@media (max-width:860px){.sb-why-grid{grid-template-columns:1fr;}}

/* ---- Service area / zip + landmarks ---- */
.sb-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sb-sp-lg);}
.sb-zip-list{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0;list-style:none;}
.sb-zip-list li{
  background:var(--sb-cream);border:1px solid rgba(53,51,48,.15);
  border-radius:var(--sb-r-sm);padding:7px 13px;font-weight:700;font-size:13.5px;color:var(--sb-graphite);
}
.sb-landmark-list{list-style:none;margin:0;padding:0;}
.sb-landmark-list li{
  padding:11px 0;border-bottom:1px solid rgba(53,51,48,.12);font-size:15px;
}
.sb-landmark-list li:last-child{border-bottom:none;}
.sb-note{
  margin-top:18px;font-size:13.5px;color:var(--sb-graphite);opacity:.75;
}
@media (max-width:860px){.sb-area-grid{grid-template-columns:1fr;}}

/* ---- Local issues ---- */
.sb-issues-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sb-sp-md);}
.sb-issue{
  background:var(--sb-cream);border-left:3px solid var(--sb-oxblood);
  padding:20px 22px;border-radius:0 var(--sb-r-md) var(--sb-r-md) 0;
}
.sb-issue h3{font-size:17px;margin:0 0 8px;}
.sb-issue p{font-size:14.5px;line-height:1.55;margin:0;}
@media (max-width:700px){.sb-issues-grid{grid-template-columns:1fr;}}

/* ---- FAQ ---- */
.sb-faq-list{max-width:820px;margin:0 auto;}
.sb-faq-item{border-bottom:1px solid rgba(53,51,48,.15);}
.sb-faq-item:first-child{border-top:1px solid rgba(53,51,48,.15);}
.sb-faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;font-family:var(--sb-font-head);font-weight:700;font-size:17px;
  color:var(--sb-graphite);
}
.sb-faq-q .sb-faq-icon{
  flex:0 0 auto;width:22px;height:22px;position:relative;
}
.sb-faq-q .sb-faq-icon::before,.sb-faq-q .sb-faq-icon::after{
  content:'';position:absolute;background:var(--sb-oxblood);transition:transform .2s ease;
}
.sb-faq-q .sb-faq-icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);}
.sb-faq-q .sb-faq-icon::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);}
.sb-faq-item.sb-open .sb-faq-icon::after{transform:translateX(-50%) scaleY(0);}
.sb-faq-a{
  padding:0 4px 20px;font-size:15.5px;line-height:1.65;color:var(--sb-graphite);
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.sb-faq-item.sb-open .sb-faq-a{padding-bottom:22px;}
.no-js .sb-faq-a{max-height:none !important;padding-bottom:20px;}

/* ---- Closing CTA ---- */
.sb-cta-band{
  background:var(--sb-oxblood);color:var(--sb-cream);text-align:center;
  padding:var(--sb-sp-xl) var(--sb-sp-md);
}
.sb-cta-band h2{color:var(--sb-cream);font-size:clamp(26px,3.4vw,38px);margin:0 0 14px;}
.sb-cta-band p{color:rgba(246,240,231,.85);font-size:16.5px;max-width:560px;margin:0 auto 30px;}
.sb-cta-band .sb-btn-secondary{background:var(--sb-clay);color:var(--sb-graphite) !important;}
.sb-cta-band .sb-btn-ghost{color:var(--sb-cream) !important;border-color:rgba(246,240,231,.5);}

/* ---- Scroll reveal: default VISIBLE; JS only enhances ---- */
.sb-reveal{opacity:1;transform:none;}
.js .sb-reveal-armed{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.js .sb-reveal-armed.sb-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .sb-reveal-armed{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* Fix: default <p> margin inside a 0-height collapsed FAQ answer was not
   collapsing through overflow:hidden, leaking a sliver of text. */
.sb-faq-a p{margin:0;}
.sb-faq-a p + p{margin-top:12px;}

/* Fix 2: padding-bottom on the closed FAQ answer was itself tall enough
   to reveal the clipped first line through overflow:hidden. Remove all
   padding while closed; restore it only in the open state. */
.sb-faq-a{padding-bottom:0 !important;}
.sb-faq-item.sb-open .sb-faq-a{padding-bottom:20px !important;}

/* On-brand focus states for keyboard/accessibility instead of default blue */
.sb-faq-q:focus-visible,
.sb-btn:focus-visible,
.sb-card-link:focus-visible{outline:2px solid var(--sb-clay);outline-offset:2px;}
.sb-faq-q::selection,
.sb-faq-q *::selection{background:var(--sb-linen);color:var(--sb-graphite);}