/* FAQ page — styles specific to faq.html.
   Shared nav/footer/hero chrome lives in components.css. The accordion
   (.sp-faq-item/.sp-faq-question/...) and the "still have a question"
   card (.sp-faq-card) are reused as-is from shared/service-page.css. This
   file covers: the stat strip under the hero, the category tab bar (only
   the active .faq-group is shown — driven by faq.html's activeFaqTab
   state, not CSS media queries), and the closing "ask us directly" band. */

/* ---- Stat strip (under hero) ---- */
.faq-stats {
  box-sizing: border-box;
  width: 100%;
  background: var(--green-forest);
  padding: clamp(28px,3.5vw,40px) var(--gutter-x);
}

.faq-stats-bar {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: clamp(16px,3vw,32px);
}

.faq-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.faq-stat-value {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(20px,2.2vw,28px);
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

.faq-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

/* Below 1024px, five equal grid columns get too cramped. Switch to a
   wrapping flex row at a fixed 3-per-row width instead of a grid: the
   leftover 2 items on row two don't fill the row's full width, so
   justify-content centers them as a pair (rather than left-stuck under
   columns 1–2 with a dangling empty slot), and align-items keeps both
   rows' content vertically centered even if a label wraps to two lines. */
@media (max-width: 1024px) {
  .faq-stats-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .faq-stat {
    flex: 0 1 calc(33.333% - 20px);
  }
}

/* ---- FAQ section: sticky category nav + grouped accordions ---- */
.faq-page-faq {
  box-sizing: border-box;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(56px,7vw,96px) var(--gutter-x) clamp(64px,8vw,112px);
}

.faq-page-inner {
  box-sizing: border-box;
  max-width: 840px;
  margin: 0 auto;
}

/* ---- Category tabs ---- */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px,4vw,40px);
}

.faq-tab {
  box-sizing: border-box;
  padding: 11px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-border);
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.faq-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.faq-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.faq-tab:focus-visible {
  outline: var(--border-focus);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .faq-tabs {
    gap: 8px;
  }
  .faq-tab {
    flex: 1 1 calc(50% - 8px);
    padding: 11px 14px;
    white-space: normal;
  }
}

/* ---- Active tab panel only ---- */
.faq-group {
  display: none;
}
.faq-group.is-active {
  display: block;
}

.faq-group-text {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ---- Closing "ask us directly" band ---- */
.faq-contact-cta {
  box-sizing: border-box;
  width: 100%;
  background: var(--white-pure);
  padding: clamp(56px,7vw,96px) var(--gutter-x);
}

.faq-contact-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px,6vw,64px);
  align-items: center;
}

.faq-contact-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.faq-contact-text {
  margin: 14px 0 0;
  max-width: 46ch;
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.faq-contact-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-contact-list li {
  position: relative;
  padding-left: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.faq-contact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
}

/* ---- Page shell ---- */
body { margin: 0; background: var(--white-pure); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }