/*
 * The questions, drawn once for every page that asks them: /download, /pricing and /enterprise.
 *
 *     <section data-faq>
 *       <h2 data-faq-title>Questions, answered</h2>
 *       <ul data-faq-list>
 *         <li><Faq question="…">…</Faq></li>
 *       </ul>
 *     </section>
 *
 * Each page used to style the same component its own way: hairline rows under a large centred
 * heading on /pricing, a stack of bordered cards under a smaller one on /enterprise, and black rows
 * with grey icons under a left-aligned "FAQ" on /download, which also stopped 300px short of the
 * column beside it. One reading column now, centred, with the same heading, rows and icons.
 */

[data-faq] {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 52rem;
  margin-inline: auto;
}

[data-faq-title] {
  margin: 0 0 2rem;
  color: var(--ink);
  font-size: var(--title-section-size);
  font-weight: var(--title-weight);
  line-height: 1.2;
  letter-spacing: var(--title-tracking);
  text-align: center;
  text-wrap: balance;
}

[data-faq-list] {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

[data-faq-list] > li {
  border-bottom: 1px solid var(--line);
}

[data-slot="faq-question"] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  inline-size: 100%;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;

  svg {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.1rem;
    color: var(--brand-accent);
  }
}

[data-slot="faq-icon-minus"],
[data-expanded] > [data-slot="faq-question"] [data-slot="faq-icon-plus"],
[data-slot="faq-question"][data-expanded] [data-slot="faq-icon-plus"] {
  display: none;
}

[data-expanded] > [data-slot="faq-question"] [data-slot="faq-icon-minus"],
[data-slot="faq-question"][data-expanded] [data-slot="faq-icon-minus"] {
  display: block;
}

[data-slot="faq-question-text"] {
  flex: 1;
}

/* Indented past the question's icon, which sits on whichever side the text starts. */
[data-slot="faq-answer"] {
  padding-block: 0 1.25rem;
  padding-inline: 2rem 0;
  color: var(--ink-body);
  line-height: 1.65;
  text-wrap: pretty;

  a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}