/* ============================================================
   Shared FAQ Section — .ssd-faq2
   Used by template-parts/faq-shared.php across every location page
   (state, city, hub A/B). Self-contained: defines its own local
   custom properties instead of relying on each host page's own token
   names (state-b.css uses --blue, hub-b.css prefixes everything
   --hb-*, etc.) — a shared component shouldn't require every page
   that uses it to happen to name its variables the same way.
   Two-column on desktop: sticky intro/contact rail on the left, the
   question list on the right — same pattern as the blog templates'
   FAQ section, for one consistent interaction language site-wide.
   Native <details>/<summary> — no JS dependency.
   ============================================================ */

.ssd-faq2 {
  --f2-navy:      #0A2A61;
  --f2-ink:       #1A1A2E;
  --f2-ink-2:     #475569;
  --f2-ink-3:     #64748B;
  --f2-line:      #E3E6EC;
  --f2-white:     #FFFFFF;
  --f2-tint:      #EFEFEF;
  --f2-accent:    var(--ssd-accent, #4eb21e);

  background: var(--f2-white);
  padding: 56px 0;
}
.ssd-faq2--alt {
  background: var(--f2-tint);
}

/* Width/centering/padding come from the shared .ssd-align class
   (ssd-shared.css) added alongside this in faq-shared.php — matches
   the header instead of this component inventing its own max-width. */

.ssd-faq2__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* Spacing here comes from flex `gap`, not margin — several of this
   component's host pages (anything under .ssd-wrap) carry a blanket
   ".ssd-wrap * { margin: unset !important; }" rule (added to counter
   the parent theme's own "* { margin: 0 auto }"), which fights any
   margin-based spacing here. `gap` isn't a margin, so it's immune to
   that reset regardless of specificity/load order — no !important
   tug-of-war needed. Two levels: a tight gap between the eyebrow and
   heading (label sits directly above its title), and a more open gap
   for the overall rhythm between [eyebrow+heading], the lede, and the
   contact card. */
.ssd-faq2__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ssd-faq2__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ssd-faq2__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--f2-ink-2);
}
.ssd-faq2__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--f2-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ssd-faq2__lede {
  margin: 0;
  font-size: 15px;
  color: var(--f2-ink-2);
  line-height: 1.6;
  max-width: 46ch;
}
.ssd-faq2__lede a {
  color: var(--f2-navy);
}

/* Contact card — icon + label + number, hover lift */
.ssd-faq2__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--f2-white);
  border: 1px solid var(--f2-line);
  border-radius: 10px;
  text-decoration: none;
  max-width: 100%;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.ssd-faq2--alt .ssd-faq2__contact { background: var(--f2-tint); }
.ssd-faq2__contact:hover,
.ssd-faq2__contact:focus-visible {
  border-color: var(--f2-accent);
  box-shadow: 0 6px 20px rgba(10, 42, 97, 0.08);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .ssd-faq2__contact { transition: none; }
  .ssd-faq2__contact:hover, .ssd-faq2__contact:focus-visible { transform: none; }
}
.ssd-faq2__contact-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--f2-navy);
  color: var(--f2-white);
  display: grid;
  place-items: center;
}
.ssd-faq2__contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ssd-faq2__contact-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--f2-ink-2);
}
.ssd-faq2__contact-phone {
  font-size: 17px;
  font-weight: 800;
  color: var(--f2-navy);
  letter-spacing: -0.01em;
  transition: color 150ms;
}
.ssd-faq2__contact:hover .ssd-faq2__contact-phone,
.ssd-faq2__contact:focus-visible .ssd-faq2__contact-phone {
  color: var(--f2-accent);
}

/* Compact list — one bordered/rounded container with hairline
   dividers between rows, instead of a separately bordered card per
   question (reads faster with many FAQs, less dead vertical space). */
.ssd-faq2__list {
  border: 1px solid var(--f2-line);
  border-radius: 10px;
  background: var(--f2-white);
  overflow: hidden;
}
.ssd-faq2__item {
  border-bottom: 1px solid var(--f2-line);
  border-left: 3px solid transparent; /* reserved so [open] below doesn't shift layout */
  transition: background 150ms, border-left-color 150ms;
}
.ssd-faq2__item:last-child {
  border-bottom: none;
}
.ssd-faq2__item[open] {
  background: var(--f2-tint);
  border-left-color: var(--f2-accent);
}
.ssd-faq2--alt .ssd-faq2__item[open] {
  background: var(--f2-white);
}

.ssd-faq2__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--f2-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ssd-faq2__q::-webkit-details-marker,
.ssd-faq2__q::marker {
  display: none;
  content: '';
}
.ssd-faq2__item[open] .ssd-faq2__q {
  color: var(--f2-navy);
}
.ssd-faq2__q:hover {
  color: var(--f2-navy);
  background: var(--f2-tint);
}
.ssd-faq2--alt .ssd-faq2__q:hover {
  background: var(--f2-white);
}
.ssd-faq2__q:focus-visible {
  outline: 2px solid var(--f2-accent);
  outline-offset: -2px;
}

.ssd-faq2__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--f2-tint);
  color: var(--f2-ink-2);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  transition: transform 200ms ease, background 150ms, color 150ms;
}
.ssd-faq2--alt .ssd-faq2__icon { background: var(--f2-white); }
.ssd-faq2__item[open] .ssd-faq2__icon {
  background: var(--f2-accent);
  color: var(--f2-white);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ssd-faq2__icon { transition: none; }
}

.ssd-faq2__a {
  padding: 2px 16px 16px;
}
.ssd-faq2__a p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--f2-ink-2);
  line-height: 1.6;
}
.ssd-faq2__a p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ssd-faq2 { padding: 72px 0; }
  .ssd-faq2__title { font-size: 24px; }
}
@media (min-width: 1024px) {
  .ssd-faq2 { padding: 88px 0; }
  .ssd-faq2__layout {
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 56px;
    align-items: start;
  }
  .ssd-faq2__intro {
    position: sticky;
    top: 40px;
  }
}