/* =========================================================
   Component — Accordion

   Built on native <details>/<summary>: it opens without
   JavaScript, it is announced as a disclosure by a screen reader,
   and the browser's own find-in-page can open it. shell.js only
   adds "one open at a time" on top of that.
   ========================================================= */
.accordion {
  display: flex;
  flex-direction: column;
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}
.accordion__item:first-child { border-top: 1px solid var(--color-line); }

.accordion__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Kill both the WebKit triangle and the Firefox one */
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head::marker { content: ""; }

.accordion__head:hover { color: var(--color-gold-text); }
.accordion__head:focus-visible { outline-offset: -2px; }

/* A plus drawn from two rules, one of which retracts on open, so
   the sign becomes a minus without swapping a glyph or a file. */
.accordion__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: var(--color-gold-text);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1.6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  translate: 0 -50%;
  transition: rotate var(--dur-base) var(--ease-out);
}
.accordion__sign::after { rotate: 90deg; }
.accordion__item[open] .accordion__sign::after { rotate: 0deg; }

.accordion__body {
  max-width: 62ch;
  margin: 0;
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__sign::before,
  .accordion__sign::after { transition: none; }
}