/* ==========================================================================
   FAQ page — page head, jump chips, question groups on native
   <details>/<summary>, "still need help" card. Requires tokens.css + base.css.
   Mobile-first (360). (.page-head / .crumbs / .faq mirror prev-papers.css;
   see pages/enquiry-info/SHARED_REQUESTS.md.)
   ========================================================================== */

/* Page head (shared pattern) ------------------------------------------- */
.page-head { padding-block: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.page-head__text { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; max-width: 72ch; }
.page-head__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-red-text);
}
.page-head__title { font-size: var(--fs-h1); }
.page-head__intro { color: var(--c-text-muted); }
.page-head__text .btn-row { width: 100%; margin-top: var(--s-1); }

.crumbs { margin-bottom: var(--s-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { text-decoration: underline; }

/* Jump chips */
.jump { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.jump__label {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.jump__list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-2);
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--c-slate);
  background: var(--c-white);
  border: 1px solid var(--c-slate);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.chip:hover { background: var(--c-slate); color: var(--c-white); }
.chip__count { font-size: var(--fs-sm); color: var(--c-text-muted); margin-left: 0.4em; }
.chip:hover .chip__count { color: inherit; }

@media (min-width: 960px) {
  .page-head { padding-block: var(--s-4) var(--s-5); }
  .page-head__text .btn-row > .btn { white-space: nowrap; }
}

/* Groups ------------------------------------------------------------------ */
.faq-group { scroll-margin-top: var(--s-3); }
.faq-group .section__head { margin-bottom: var(--s-3); }

/* FAQ accordion (native details) */
.faq { display: grid; gap: var(--s-1); max-width: 860px; margin-inline: auto; }
.faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}
.faq__item[open] { border-color: var(--c-slate); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  color: var(--c-slate);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--c-red-text);
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--c-charcoal); }
.faq__a { display: grid; gap: var(--s-1); padding: 0 var(--s-3) var(--s-3); }
.faq__a a { color: var(--c-link-text); }
.faq__a .link-more { color: var(--c-slate); min-height: 36px; }

/* Still need help ----------------------------------------------------------- */
.help { max-width: 760px; margin-inline: auto; text-align: center; align-items: center; }
.help .btn-row { justify-content: center; width: 100%; margin-top: var(--s-1); }