/* Breakdown Recovery Experts - enhancement layer.
   Tokens lifted from the site's OWN computed styles on the live staging build
   (homepage + legacy town page, 1440, after document.fonts.ready):
     display  Outfit 600            h1 58/75.4  h2 38/49.4  h3 30/39  kicker h6 17/22.1
     body     DM Sans 400 16/29.71  colour rgb(47,59,64)
     accent   rgb(84,180,53)  deep rgb(55,146,55)  pale rgb(237,251,226)  ink rgb(15,23,42)
     button   15px DM Sans, uppercase, letter-spacing 1px, padding 16px 32px, radius 5px
     sections 50-55px vertical padding
   The Astra + Elementor theme CSS fights injected rules, so typography and
   colour here are explicit px with !important, per the migration procedure.
   CACHE TRAP: /wp-content/ is served immutable for a year. The <link> that
   pulls this file is versioned (?v=N) and N is bumped on every change here. */

:root {
  --ssm-accent: #54b435;
  --ssm-accent-deep: #2f7d2f;   /* darkened from the site's #379237 so 15px text on it clears AA */
  --ssm-pale: #edfbe2;
  --ssm-ink: #0f172a;
  --ssm-body: #2f3b40;
  --ssm-line: #d5e6c8;
}

/* ---------- section shell ---------- */
.ssm-sec {
  padding: 55px 20px !important;
  background: #ffffff;
}
.ssm-sec--pale { background: var(--ssm-pale) !important; }
.ssm-sec--ink { background: var(--ssm-ink) !important; }
.ssm-wrap { max-width: 1140px; margin: 0 auto; }

/* 48px scroll anchor so a jumped-to heading is not hidden under the sticky header */
.ssm-sec[id] { scroll-margin-top: 48px; }

.ssm-sec h2 {
  font-family: Outfit, sans-serif !important;
  font-size: 38px !important;
  line-height: 49.4px !important;
  font-weight: 600 !important;
  color: var(--ssm-ink) !important;
  margin: 0 0 18px !important;
}
.ssm-sec--ink h2, .ssm-sec--ink h3, .ssm-sec--ink p, .ssm-sec--ink li { color: #ffffff !important; }
.ssm-sec h3 {
  font-family: Outfit, sans-serif !important;
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  color: var(--ssm-ink) !important;
  margin: 0 0 8px !important;
}
.ssm-sec p, .ssm-sec li {
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 29.7px !important;
  font-weight: 400 !important;
  color: var(--ssm-body) !important;
}
.ssm-sec p { margin: 0 0 18px !important; }
.ssm-kicker {
  font-family: Outfit, sans-serif !important;
  font-size: 17px !important;
  line-height: 22.1px !important;
  font-weight: 600 !important;
  color: var(--ssm-accent-deep) !important;
  margin: 0 0 10px !important;
}

/* ---------- breadcrumb ---------- */
.ssm-crumb {
  padding: 14px 20px !important;
  background: var(--ssm-pale);
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: var(--ssm-body) !important;
}
.ssm-crumb .ssm-wrap { display: block; }
.ssm-crumb a { color: var(--ssm-accent-deep) !important; text-decoration: none; }
.ssm-crumb a:hover, .ssm-crumb a:focus-visible { text-decoration: underline; }
.ssm-crumb span[aria-current] { color: var(--ssm-body) !important; }

/* ---------- included list ---------- */
.ssm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .ssm-list { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.ssm-list li {
  position: relative; padding-left: 30px; margin: 0 !important;
}
.ssm-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ssm-accent); box-shadow: inset 0 0 0 3px #ffffff;
  outline: 2px solid var(--ssm-accent-deep);
}
.ssm-list strong { color: var(--ssm-ink) !important; font-weight: 600 !important; }

/* ---------- FAQ ---------- */
.ssm-faq { border-top: 1px solid var(--ssm-line); }
.ssm-faq details { border-bottom: 1px solid var(--ssm-line); }
.ssm-faq summary {
  cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
  font-family: Outfit, sans-serif !important;
  font-size: 18px !important; line-height: 26px !important; font-weight: 600 !important;
  color: var(--ssm-ink) !important;
}
.ssm-faq summary::-webkit-details-marker { display: none; }
.ssm-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ssm-accent-deep); border-bottom: 2px solid var(--ssm-accent-deep);
  transform: rotate(45deg); transition: transform .2s ease;
}
.ssm-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.ssm-faq summary:focus-visible { outline: 3px solid var(--ssm-accent-deep); outline-offset: 2px; }
.ssm-faq .ssm-a { padding: 0 0 18px; }

/* ---------- town cards (pin icon, hover lift) ---------- */
.ssm-towns { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ssm-towns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ssm-towns { grid-template-columns: repeat(4, 1fr); } }
.ssm-towns li { margin: 0 !important; }
.ssm-towns a {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: #ffffff; border: 1px solid var(--ssm-line);
  border-radius: 5px; text-decoration: none;
  font-family: "DM Sans", sans-serif !important; font-size: 15px !important;
  font-weight: 500 !important; color: var(--ssm-ink) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ssm-towns a:hover, .ssm-towns a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
  border-color: var(--ssm-accent);
}
.ssm-towns a:focus-visible { outline: 3px solid var(--ssm-accent-deep); outline-offset: 2px; }
.ssm-towns svg { flex: 0 0 18px; width: 18px; height: 18px; fill: var(--ssm-accent-deep); }
.ssm-sec--pale .ssm-towns a { background: #ffffff; }

/* ---------- service buttons (solid, arrow) ---------- */
.ssm-svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ssm-svcs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ssm-svcs { grid-template-columns: repeat(3, 1fr); } }
.ssm-svcs li { margin: 0 !important; }
.ssm-svcs a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; background: var(--ssm-accent-deep); border-radius: 5px;
  text-decoration: none;
  font-family: "DM Sans", sans-serif !important; font-size: 15px !important;
  line-height: 20px !important; font-weight: 500 !important;
  color: #ffffff !important; letter-spacing: .4px;
  transition: transform .18s ease, background-color .18s ease;
}
.ssm-svcs a:hover, .ssm-svcs a:focus-visible { transform: translateY(-2px); background: #256b25; }
.ssm-svcs a:focus-visible { outline: 3px solid var(--ssm-ink); outline-offset: 2px; }
.ssm-svcs svg { flex: 0 0 16px; width: 16px; height: 16px; fill: #ffffff; }

/* ---------- CTA band ---------- */
.ssm-cta { background: var(--ssm-ink) !important; }
.ssm-cta h2, .ssm-cta h3, .ssm-cta p, .ssm-cta li { color: #ffffff !important; }
.ssm-cta .ssm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ssm-btn {
  display: inline-block; padding: 16px 32px !important; border-radius: 5px !important;
  font-family: "DM Sans", sans-serif !important; font-size: 15px !important;
  line-height: 15px !important; letter-spacing: 1px !important;
  text-transform: uppercase !important; text-decoration: none !important;
  background: var(--ssm-accent-deep) !important; color: #ffffff !important;
  border: 2px solid var(--ssm-accent-deep) !important;
}
.ssm-btn:hover, .ssm-btn:focus-visible { background: #256b25 !important; border-color: #256b25 !important; }
.ssm-btn--ghost { background: transparent !important; border-color: #ffffff !important; color: #ffffff !important; }
.ssm-btn--ghost:hover, .ssm-btn--ghost:focus-visible { background: #ffffff !important; color: var(--ssm-ink) !important; border-color: #ffffff !important; }
.ssm-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---------- hero ----------
   The Astra header is position:absolute, z-index 99, transparent, 181px tall at
   1440 with WHITE nav text, so it overlays whatever comes first and needs a dark
   band beneath it. That is why the hero is the first element on every generated
   page and carries enough top padding to clear the header rather than sit under
   it. Measured on the real render, not assumed. */
.ssm-hero { background: var(--ssm-ink) !important; padding: 205px 20px 64px !important; }
@media (max-width: 921px) { .ssm-hero { padding-top: 130px !important; } }
.ssm-hero .ssm-kicker { color: #a7e08a !important; }
.ssm-hero h1 {
  font-family: Outfit, sans-serif !important;
  font-size: 44px !important; line-height: 57px !important; font-weight: 600 !important;
  color: #ffffff !important; margin: 0 0 16px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
@media (min-width: 900px) { .ssm-hero h1 { font-size: 58px !important; line-height: 75.4px !important; } }
.ssm-hero p { color: #e6eef2 !important; max-width: 62ch; }
.ssm-hero .ssm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- misc ---------- */
.ssm-sec--ink .ssm-list li::before { box-shadow: inset 0 0 0 3px var(--ssm-ink); outline-color: var(--ssm-accent); }
.ssm-lede { font-size: 18px !important; line-height: 32px !important; }
@media (prefers-reduced-motion: reduce) {
  .ssm-towns a, .ssm-svcs a { transition: none !important; }
  .ssm-towns a:hover, .ssm-svcs a:hover { transform: none !important; }
}