/* Site v2 FAQ layout (layouts/faq.html), after the round 4 homepage: the
   centred hero (back link, title, lead) with the search box under it where
   the homepage has its composer, the category chips, then the questions in
   one centred column, and the help card as the closing panel. */

.v2-faq-hero {
  padding-bottom: clamp(40px, 5vw, 56px);
}
.v2-faq__back {
  margin-bottom: var(--space-2);
}
.v2-faq__title {
  overflow-wrap: break-word;
}
.v2-faq__lead {
  max-width: 560px;
}

/* Search: a pill under the hero, like round 4's composer. */
.v2-faq__search {
  max-width: 560px;
  margin: var(--space-8) auto 0;
  text-align: start;
}
.v2-faq__search .v2-search svg {
  left: 20px;
}
.v2-faq__search .v2-search input {
  min-height: 52px;
  padding-left: 52px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-float);
}
.v2-faq__search .v2-search input:focus {
  box-shadow:
    0 0 0 3px var(--accent-soft),
    var(--shadow-float);
}

/* Categories: round 4 chips, centred under the search. */
.v2-faq__cats {
  justify-content: center;
  max-width: 880px;
  margin: var(--space-5) auto 0;
}

/* Questions: one centred column of hairline rows under "Expand all". */
.v2-faq {
  padding-bottom: var(--space-8);
}
.v2-faq__main {
  max-width: 800px;
  margin-inline: auto;
}
.v2-faq__bar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--space-3);
}
.v2-faq__list {
  border-top: 1px solid var(--rule);
}
.v2-faq__list:not(:has(> .v2-qa:not([hidden]))) {
  border-top: 0;
}
/* Space between sections, counting only shown ones (a category filter
   hides the others). */
.v2-faq__section:not([hidden]) ~ .v2-faq__section {
  margin-top: var(--space-12);
}
.v2-faq__section-title {
  padding-bottom: var(--space-3);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.v2-faq .v2-qa {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

/* The help card as the closing panel; long button labels wrap inside it. */
.v2-faq__help-text {
  max-width: 560px;
}
.v2-faq__help .v2-btn {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  padding-block: var(--space-3);
  text-wrap: balance;
}

@media (max-width: 719px) {
  /* Denser rows: 16px questions and answers across the full width. */
  .v2-faq .v2-qa > summary {
    gap: var(--space-4);
    padding-block: var(--space-5);
    font-size: var(--fs-h4);
  }
  .v2-faq .v2-qa > summary svg {
    margin-top: 2px;
  }
  .v2-faq .v2-qa__body {
    padding: 0 0 var(--space-6);
  }
}