/* Accordion on native <details>: FAQ, past events, spawn maps.
   <div class="faq-list"><details class="faq-item"><summary>Question</summary><p>Answer</p></details></div>
   Opens with a height animation where the browser supports ::details-content. */

.faq-list { border-top: 1px solid var(--line-strong); max-width: var(--narrow); }
.faq-item { border-bottom: 1px solid var(--line); }
/* Block, not flex: a summary with inline <code> or <b> must wrap as one line of text.
   The chevron sits in the right padding. */
.faq-item summary {
  position: relative;
  display: block;
  min-height: 60px;
  padding: calc(var(--s-3) + 0.35em) calc(var(--s-2) + 2rem) var(--s-3) var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-2);
  transition: color var(--dur-1) var(--ease-out);
}
.faq-item summary:hover { color: var(--accent-hi); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: var(--s-3);
  top: calc(var(--s-3) + 0.7em);
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.faq-item summary code { font-size: 0.7em; }
.faq-item > :not(summary) { padding: 0 var(--s-2) var(--s-5); color: var(--text-2); max-width: 68ch; }

.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

/* Inside a window (<div class="window-body flush faq-list">: download, mac, faq): the window's frame and title
   bar replace the top rule and the last line, the questions take the window's inline padding and body size. */
.window-body.faq-list { max-width: none; border-top: 0; }
.window-body.faq-list > .faq-item:last-child { border-bottom: 0; }
.window-body.faq-list > .faq-item summary { padding-left: var(--s-4); font-size: var(--fs-md); }
.window-body.faq-list > .faq-item > :not(summary) { padding-inline: var(--s-4); }