/* ==========================================================================
   disclosure.css — FAQ
   Native <details>/<summary>. Fully functional with JS disabled.
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
}

.disclosure {
  border-block-start: var(--border-w) solid var(--border);
}

.disclosure:last-child {
  border-block-end: var(--border-w) solid var(--border);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  justify-content: space-between;
  min-height: 2.75rem;
  padding-block: var(--space-5);

  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);

  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

/* Remove the default marker in both engines. */
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::marker { content: ""; }

.disclosure__summary:hover { color: var(--accent-ink); }

.disclosure__summary:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* Custom marker: a plus that becomes a minus. Shape changes, not just
   colour, so the state is legible without hue. */
.disclosure__marker {
  position: relative;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

.disclosure__marker::before,
.disclosure__marker::after {
  content: "";

  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;

  width: 100%;
  height: var(--border-w-strong);

  background-color: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}

.disclosure__marker::after { transform: translateY(-50%) rotate(90deg); }

.disclosure[open] .disclosure__marker::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.disclosure__panel {
  padding-block-end: var(--space-6);
}

.disclosure__panel p {
  max-width: var(--measure);
  color: var(--text-secondary);
}

.disclosure__panel > * + * { margin-block-start: var(--space-3); }

/* Open animation, only where motion is welcome and the engine supports
   interpolating to auto. Degrades to an instant open everywhere else. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .disclosure__panel {
      block-size: 0;
      overflow: hidden;
      transition: block-size var(--dur-base) var(--ease);
      interpolate-size: allow-keywords;
    }

    .disclosure[open] .disclosure__panel { block-size: auto; }
  }
}