/* ─────────────────────────────────────────────────────────────────────────
   faq.css — page styles for GET /faq.

   CONTRACT — every class below that faq.js generates is annotated. The
   accordion is driven entirely by one class (.faq-item.open) plus a
   max-height transition; there is no JS animation to match.
   ───────────────────────────────────────────────────────────────────────── */

.faq-head {
  max-width: 68ch;
}

.faq-search {
  max-width: 460px;
  margin-top: var(--spacing-20);
}

/* ═══ Layout ═════════════════════════════════════════════════════════════ */

.faq-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: start;
  padding-bottom: var(--spacing-80);
}

/* ═══ Category rail ══════════════════════════════════════════════════════
   CONTRACT — faq.js writes bare <button> children with no class except
   "active", and restores this container with the literal display value
   "flex" after a search is cleared. It must therefore be a flex container,
   and the button styling must target the children generically. */

.faq-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  position: sticky;
  top: 96px;
}

.faq-filters button {
  padding: var(--spacing-8) var(--spacing-12);
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-images) var(--radius-images) 0;
  font-family: var(--font-sohne);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash-gray);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.faq-filters button:hover {
  background: var(--surface-section-fog);
  color: var(--color-ink-black);
}

/* The selected category. faq.js interpolates class="active" into the markup
   rather than toggling it, so this must be a plain class rule. */
.faq-filters button.active {
  background: var(--surface-card-mist);
  border-left-color: var(--color-ink-black);
  color: var(--color-ink-black);
  font-weight: var(--font-weight-480);
}

/* ═══ Results ════════════════════════════════════════════════════════════ */

.faq-results {
  min-width: 0;
}

/* CONTRACT — <h2> emitted per category group. The raw lowercase category
   comes straight from the database, so it is capitalised here in CSS. */
.faq-category-heading {
  font-family: var(--font-sohne);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-480);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash-gray);
  margin: var(--spacing-40) 0 var(--spacing-12);
}

.faq-category-heading:first-of-type {
  margin-top: 0;
}

/* ═══ Accordion ══════════════════════════════════════════════════════════
   Structure generated by faq.js:
     .faq-item[data-faq-id] > button.faq-q > span + svg.chev
                            > .faq-a > .faq-a-inner
   button.faq-q must remain a DIRECT child of .faq-item (the inline handler
   passes this.parentElement). */

.faq-item {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-slow);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--color-border);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  min-height: 0;
  padding: var(--spacing-20) 0;
  background: none;
  border: 0;
  font-family: var(--font-sohne);
  font-size: var(--text-body);
  line-height: 1.35;
  font-weight: var(--font-weight-450);
  color: var(--color-ink-black);
  text-align: left;
  cursor: pointer;
}

.faq-q:hover {
  color: var(--color-ash-gray);
}

.chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--color-smoke-gray);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-normal);
}

.faq-item.open .faq-q .chev {
  transform: rotate(180deg);
  stroke: var(--color-ink-black);
}

/* The reveal. .faq-a-inner exists so padding does not defeat max-height:0.
     max-height is not transitioned (layout thrash). opacity + transform
     give a smooth fade-and-slide reveal with zero reflow cost. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.faq-item.open .faq-a {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

.faq-a-inner {
  padding: 0 var(--spacing-40) var(--spacing-24) 0;
  max-width: 78ch;
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-ash-gray);
  white-space: pre-line;
}

/* Deep-link flash from /faq?id=<uuid>. faq.js adds .highlight for 2.2s.
   Peach is the accent, used here as a transient wash rather than a card. */
.faq-item.highlight {
  background: var(--status-attention-surface);
}

/* ═══ Closing CTA ════════════════════════════════════════════════════════ */

.faq-cta {
  padding-bottom: var(--spacing-96);
}

.faq-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-32);
}

.faq-cta__title {
  font-family: var(--font-sohne);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: normal;
  font-weight: var(--font-weight-480);
  margin-bottom: var(--spacing-8);
}

.faq-footer-base {
  justify-content: center;
}

/* ═══ Responsive ═════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-24);
  }

  /* The rail becomes a horizontal chip row. It stays flex, which is what
     faq.js restores it to. */
  .faq-filters {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }

  .faq-filters button {
    border-left: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-buttons);
  }

  .faq-filters button.active {
    background: var(--color-ink-black);
    border-color: var(--color-ink-black);
    color: var(--color-paper-white);
  }

  .faq-a-inner {
    padding-right: 0;
  }

  .faq-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .faq-search {
    max-width: none;
  }
}