/* The FAQ page (/faq). */

.faq {
  max-width: 68ch;
  margin-inline: auto;
  padding: var(--space-5) 1.25rem;

  h1 {
    margin-bottom: var(--space-2);
  }

  .intro {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--size-h3);
  }

  .sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .section h2 {
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--size-h3);
    color: var(--color-accent);
    border-bottom: 0.5px solid var(--color-rule);
  }

  /* each question is a native <details> disclosure */
  .item {
    border-bottom: 0.5px solid var(--color-rule);

    /* Questions read in the body face — the display caps stay reserved
       for the section headings above them. */
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      padding: var(--space-2) 0;
      font-size: var(--size-lead);
      font-weight: 600;
      line-height: var(--leading-tight);
      cursor: pointer;
      list-style: none;

      /* Drop the native disclosure triangle for a custom +/- marker. */
      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        content: '+';
        flex: none;
        font-weight: 400;
        color: var(--color-accent);
        transition: transform var(--transition);
      }

      &:hover {
        color: var(--color-accent);
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
        border-radius: 3px;
      }
    }

    &[open] summary::after {
      content: '\2212';
    }

    /* the answer is slotted markdown */
    .answer {
      padding-bottom: var(--space-2);
      color: var(--color-muted);
      font-size: var(--size-lead);

      p {
        margin-block: 0 var(--flow);
      }

      p:last-child {
        margin-bottom: 0;
      }

      ul,
      ol {
        margin-block: 0 var(--flow);
        padding-left: 1.4em;
      }

      li {
        margin-block: 0.3em;
      }

      hr {
        margin-block: var(--space-2);
        border: 0;
        border-top: 0.5px solid var(--color-rule);
      }

      a {
        color: var(--color-accent);
      }

      strong {
        color: var(--color-text);
      }
    }
  }
}