/* ==========================================================================
   FAQ Section
   Block: .faq / .faq-section
   --------------------------------------------------------------------------
   Native <details> and <summary>, drawn to the FAQ page design: each question
   a card of its own, the marker a ring that fills with the brand gradient when
   the answer is open, and the panel sliding rather than snapping.

   There is still no script. The slide is a grid row going from 0fr to 1fr, so
   with CSS absent the details element simply opens, and with motion turned
   down it opens at once.
   ========================================================================== */

.faq-section {
  background-color: var(--color-background);
}

.faq-section--soft {
  background-color: var(--color-background-sunken);
}

.faq-section--dark {
  background-image: var(--gradient-ink);
}

/* ------------------------------------------------------------ Accordion */

.faq {
  display: grid;
  gap: var(--space-x-small);
}

.faq__item {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background-raised);
  transition: border-color var(--duration-base) var(--easing-out),
    box-shadow var(--duration-base) var(--easing-out);
}

/* The open question lifts off the ones around it, so the page shows where the
   reader is without the answer having to be the only thing on screen. */
.faq__item[open] {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-medium);
}

.faq__question {
  display: flex;
  gap: var(--space-medium);
  align-items: center;
  justify-content: space-between;
  min-height: var(--minimum-target-size);
  padding: var(--space-medium) var(--space-large);
  font-family: var(--font-family-display);
  font-size: var(--font-size-heading-4);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  cursor: pointer;
  list-style: none;
}

/* The default disclosure triangle is replaced by the marker below. */
.faq__question::-webkit-details-marker {
  display: none;
}

/* A flex item will not shrink below its longest word unless it is told it may,
   and the card clips what overflows, so without this a long question loses its
   last word off the edge. */
.faq__question-text {
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.faq__question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------- Marker */

.faq__marker {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-accent-text);
  transition: background-color var(--duration-base) var(--easing-out),
    border-color var(--duration-base) var(--easing-out),
    rotate var(--duration-base) var(--easing-out);
}

/* Two bars crossed into a plus. The upright one fades when the answer opens,
   leaving a minus, and the ring turns with it. */
.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.65rem;
  height: 2px;
  background-color: currentcolor;
  border-radius: var(--radius-pill);
  translate: -50% -50%;
  transition: opacity var(--duration-fast) var(--easing-out);
}

.faq__marker::after {
  rotate: 90deg;
}

.faq__item[open] .faq__marker {
  background-image: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-white);
  rotate: 180deg;
}

.faq__item[open] .faq__marker::after {
  opacity: 0;
}

/* -------------------------------------------------------------- Panel */

/* The answer slides open on a grid row. The inner element is what hides the
   overflow, because the row itself has to be free to measure its content. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--easing-out);
}

.faq__item[open] .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__answer {
  padding: 0 var(--space-large) var(--space-large);
  color: var(--color-text-muted);
}

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

.faq__answer ul,
.faq__answer ol {
  display: grid;
  gap: var(--space-3x-small);
  padding-inline-start: var(--space-medium);
}

.faq__answer ul {
  list-style: disc;
}

.faq__answer ol {
  list-style: decimal;
}

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