/* ==============================
   FAQ PAGE — faq.css
   Companion to style.css
   ============================== */


/* ── Section container ──────────────────────────────────────── */
.intro.faq {
  margin-top: var(--space-header-offset, 5rem);
  max-width: 700px;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}


/* ── H1: matches contact.css (fs-h2 size, vividblue, centred) ── */
.faq h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-vividblue);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.faq-question {
  justify-content: space-between;
}

.faq-question .plus {
  flex-shrink: 0;
  margin-left: var(--space-s);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .intro.faq {
    margin-bottom: 5rem;
    padding-top: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  .faq h1 {
    font-size: 1.3rem;
  }

  .faq .separator {
    width: 70%;
  }
}