/* FAQ built on <details>; opening is animated where ::details-content is supported. */

@layer components {
  .faq-list {
    display: grid;
    max-width: 48rem;
    border-top: 1px solid var(--line);
  }

  .faq-item { border-bottom: 1px solid var(--line); }

  .faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    padding-block: var(--space-5);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker { display: none; }

  .faq-item summary::after {
    content: "+";
    flex: none;
    color: var(--accent);
    font: 400 1.5rem / 1 var(--font-mono);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .faq-item[open] summary::after { transform: rotate(45deg); }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--dur-base) var(--ease-out),
      content-visibility var(--dur-base) allow-discrete;
  }

  .faq-item[open]::details-content { block-size: auto; }

  .faq-item p {
    padding-bottom: var(--space-5);
    color: var(--ink-muted);
  }
}