/* FAQ: every answer is in the HTML and visible without JavaScript. When
   js/presentation/faq.js takes over it turns each question into a real
   control and collapses the answers behind it. */

.faq {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--band-y) var(--gutter-x);
}

.faq h2 {
  max-width: 20ch;
}

.faq__list {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

/* Without JS the question is a heading with its answer open under it. */
.faq__q {
  margin: 0;
  padding: 1.3rem 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
}

.faq__a > * {
  margin: 0.7rem 0 1.4rem;
  max-width: 64ch;
  color: var(--muted);
}

/* ---- enhanced: the question becomes the control ---- */

.faq__q button {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__q button::after {
  content: "+";
  margin-left: auto;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.faq__item[data-open] .faq__q button::after {
  content: "−";
}

.faq__list--enhanced .faq__q {
  padding: 1.25rem 0;
}

.faq__list--enhanced .faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__list--enhanced .faq__a > * {
  overflow: hidden;
  min-height: 0;
}

.faq__list--enhanced .faq__item:not([data-open]) .faq__a {
  grid-template-rows: 0fr;
}

.faq__list--enhanced .faq__item:not([data-open]) .faq__a > * {
  margin-top: 0;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq__list--enhanced .faq__a {
    transition: none;
  }

  .faq__q button::after {
    transition: none;
  }
}