/* ─────────────────────────────────────────────────────────
   Blue Terra — the FAQ page

   Laid out like the FAQ on socialbnb.org: a centred title, three
   groups of questions, each question a row that folds open. Colours
   and typefaces come from styles.css.
   ───────────────────────────────────────────────────────── */

.faq-page main { padding-top: var(--header-h); background: var(--cream); }

/* ── Title ──────────────────────────────────────────────── */
.fq-head {
  max-width: var(--wrap-content);
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: clamp(4px, 1vw, 10px);
  text-align: center;
}
.fq-head h1 { margin-bottom: 0; color: var(--navy); }

/* ── The groups ─────────────────────────────────────────── */
.fq-body {
  max-width: 900px;
  padding-bottom: clamp(48px, 7vw, 88px);
}
.fq-group + .fq-group { margin-top: clamp(28px, 4vw, 44px); }
.fq-group-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  text-align: center; color: var(--heading);
  margin: clamp(24px, 3vw, 36px) 0 clamp(14px, 2vw, 20px);
}

.fq-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.fq-item + .fq-item { border-top: 1px solid var(--line); }
.fq-item h3 { margin: 0; font: inherit; }

/* ── A question row ─────────────────────────────────────── */
.fq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-align: left;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: clamp(15px, 1.6vw, 17px); font-weight: 600;
  color: var(--heading); line-height: 1.45;
}
.fq-q:hover { background: var(--sky-bg); }
.fq-q:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

/* The chevron turns over when the answer opens. */
.fq-chevron {
  width: 10px; height: 10px; flex: none; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.fq-item.is-open .fq-chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* ── An answer ──────────────────────────────────────────── */
/* Sliding open by animating the row height — no fixed height to keep
   in step with the text, so a long answer can never be cut off. */
.fq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; visibility: hidden; transition: visibility .25s; }
.fq-item.is-open .fq-a > div { visibility: visible; }

.fq-a p {
  margin: 0;
  padding: 0 clamp(16px, 2.4vw, 26px) clamp(16px, 2.2vw, 22px);
  font-size: .95rem; line-height: 1.75;
}
.fq-a a { color: var(--navy); overflow-wrap: anywhere; }

/* ── Show all / Show less ───────────────────────────────── */
.fq-more {
  display: block; margin: 14px auto 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--navy); padding: 10px 14px; border-radius: 10px;
}
.fq-more:hover { background: var(--sky-bg); color: var(--navy-dark); }
.fq-more:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fq-a, .fq-a > div, .fq-chevron { transition: none; }
}