/* SS Lock Smith - global reset + interaction styles (kept out of post_content to survive kses) */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.ssf-page{ margin:0 !important; font-family:'Hanken Grotesk',sans-serif !important; color:#1A1C22 !important; background:#FAF8F4 !important; overflow-x:hidden !important; }
body.ssf-page [data-anchor]{ scroll-margin-top:130px !important; }

@keyframes ssfpulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.45);}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* buttons */
.ssf-btn-gold{ transition:background .15s ease !important; }
.ssf-btn-gold:hover{ background:#c2912f !important; }
.ssf-btn-wa{ transition:background .15s ease !important; }
.ssf-btn-wa:hover{ background:#1fbe5a !important; }
.ssf-btn-dark{ transition:background .15s ease !important; }
.ssf-btn-dark:hover{ background:#000 !important; }

/* cards */
.ssf-card{ transition:transform .18s ease, box-shadow .18s ease !important; }
.ssf-card:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 40px -22px rgba(17,20,27,0.4) !important; }

.ssf-service-box{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; }
.ssf-service-box:hover{ transform:translateY(-5px) !important; box-shadow:0 22px 46px -24px rgba(17,20,27,0.42) !important; border-color:#E7C879 !important; }

.ssf-tile-phone:hover,.ssf-tile-email:hover{ border-color:#D6A23B !important; }
.ssf-tile-wa:hover{ border-color:#25D366 !important; }
.ssf-tile-address:hover{ border-color:#D6A23B !important; }

/* remove default WP admin-bar gap oddities on chromeless template */
body.ssf-page main.wp-block-group{ margin:0 !important; padding:0 !important; max-width:none !important; }
body.ssf-page .entry-content{ margin:0 !important; padding:0 !important; max-width:none !important; }
body.ssf-page .wp-block-post-content{ margin:0 !important; padding:0 !important; max-width:none !important; }
body.ssf-page .wp-block-post-content > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

/* contact form inputs */
.ssf-input::placeholder{ color:#7b818f !important; }
.ssf-input:focus{ outline:2px solid #D6A23B !important; outline-offset:1px !important; }
.ssf-hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; }

/* ---------- responsive header (shared PHP-rendered header/footer) ---------- */
.ssf-nav-toggle{ display:none !important; background:none !important; border:none !important; cursor:pointer !important; padding:8px !important; flex-direction:column !important; gap:5px !important; flex:none !important; }
.ssf-nav-toggle span{ display:block !important; width:24px !important; height:2px !important; background:#11141B !important; border-radius:2px !important; transition:transform .2s ease, opacity .2s ease !important; }
.ssf-nav-toggle-open span:nth-child(1){ transform:translateY(7px) rotate(45deg) !important; }
.ssf-nav-toggle-open span:nth-child(2){ opacity:0 !important; }
.ssf-nav-toggle-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) !important; }

@media (max-width: 880px){
  .ssf-nav-toggle{ display:flex !important; }
  .ssf-nav{ display:none !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important; background:#FAF8F4 !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; border-bottom:1px solid #E7E2D8 !important; box-shadow:0 12px 24px -8px rgba(0,0,0,0.14) !important; padding:6px 0 !important; margin:0 !important; }
  .ssf-nav.ssf-nav-open{ display:flex !important; }
  .ssf-nav a{ width:100% !important; padding:14px 24px !important; border-bottom:1px solid #EFEADF !important; box-sizing:border-box !important; }
  .ssf-header-cta{ display:none !important; }
}

@media (max-width: 560px){
  .ssf-topbar-email{ display:none !important; }
  .ssf-header-cta-text{ display:none !important; }
  .ssf-header-cta{ padding:10px !important; width:42px !important; height:42px !important; justify-content:center !important; }
}

/* ---------- blog: article body typography (native Gutenberg content) ---------- */
.ssf-article-body{ font-size:17px; line-height:1.75; color:#33363F; }
.ssf-article-body h2{ font-family:'Archivo',sans-serif !important; font-weight:800; font-size:26px; letter-spacing:-0.01em; color:#11141B; margin:36px 0 14px; }
.ssf-article-body h3{ font-family:'Archivo',sans-serif !important; font-weight:700; font-size:21px; color:#11141B; margin:28px 0 12px; }
.ssf-article-body h4{ font-family:'Archivo',sans-serif !important; font-weight:700; font-size:18px; color:#11141B; margin:22px 0 10px; }
.ssf-article-body p{ margin:0 0 18px; }
.ssf-article-body ul, .ssf-article-body ol{ margin:0 0 18px; padding-left:22px; }
.ssf-article-body li{ margin-bottom:8px; }
.ssf-article-body a{ color:#C2912F; font-weight:600; text-decoration:underline; }
.ssf-article-body strong{ color:#11141B; }
.ssf-article-body blockquote{ border-left:3px solid #D6A23B; margin:24px 0; padding:4px 0 4px 20px; color:#5A5E68; font-style:italic; }
.ssf-article-body img{ max-width:100%; height:auto; border-radius:14px; margin:20px 0; display:block; }
.ssf-article-body figure{ margin:20px 0; }
.ssf-article-body hr{ border:none; border-top:1px solid #ECE7DC; margin:32px 0; }

/* car-make pills used on single posts + Car Locksmith page */
.ssf-make-pill{ transition:border-color .15s ease, background .15s ease; }
.ssf-make-pill:hover{ border-color:#D6A23B !important; background:#FBF4E5 !important; }

/* ---------- mobile topbar: keep both items on one line, shrunk to fit ---------- */
@media (max-width: 640px){
  .ssf-topbar-info{
    flex-wrap:nowrap !important;
    gap:10px !important;
    width:100% !important;
    overflow-x:auto !important;
    -ms-overflow-style:none !important;
    scrollbar-width:none !important;
  }
  .ssf-topbar-info::-webkit-scrollbar{ display:none !important; }
  .ssf-topbar-location, .ssf-topbar-hours{ font-size:11.5px !important; white-space:nowrap !important; flex:none !important; }
  .ssf-topbar > div{ padding-left:16px !important; padding-right:16px !important; justify-content:center !important; }
  .ssf-topbar-info{ justify-content:center !important; }
}
@media (max-width: 360px){
  .ssf-topbar-location, .ssf-topbar-hours{ font-size:10.5px !important; }
  .ssf-topbar-info{ gap:8px !important; }
}

/* ---------- mobile hero: full-width stacked Call + WhatsApp buttons ---------- */
@media (max-width: 680px){
  .ssf-hero-inner{ padding:30px 20px 34px !important; gap:24px !important; }
  .ssf-hero-text, .ssf-hero-media{ min-width:0 !important; flex-basis:100% !important; }
  .ssf-hero-badge{ padding:7px 14px !important; font-size:13px !important; align-items:flex-end !important; gap:4px !important; }
  .ssf-hero-badge-num{ font-size:32px !important; font-weight:900 !important; letter-spacing:-0.02em !important; line-height:0.85 !important; }
  .ssf-hero-text h1{ font-size:32px !important; line-height:1.1 !important; margin-top:14px !important; }
  .ssf-hero-sub{ font-size:15px !important; line-height:1.5 !important; margin-top:12px !important; }
  .ssf-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:10px !important; margin-top:20px !important; }
  .ssf-hero-cta a{ justify-content:center !important; flex:1 1 0 !important; width:auto !important; text-align:center !important; padding:13px 10px !important; font-size:14px !important; white-space:nowrap !important; }
  .ssf-hero-stats{ justify-content:center !important; text-align:center !important; }
  .ssf-hero-stats > div{ text-align:center !important; }
}