/* FAQ: questions that open to their answer, ruled between, a plus that
   turns into a cross */
.faq__item {
  border-block-start: var(--border-width) solid var(--color-subtle);

  &:last-child {
    border-block-end: var(--border-width) solid var(--color-subtle);
  }
}

.faq__question {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-s);
  justify-content: space-between;
  list-style: none;
  padding-block: var(--space-s);

  &::-webkit-details-marker {
    display: none;
  }

  &::after {
    aspect-ratio: 1;
    background: var(--color-surface-2);
    block-size: 1.75rem;
    border-radius: var(--radius-pill);
    content: "+";
    display: grid;
    flex-shrink: 0;
    font-size: var(--step-1);
    line-height: var(--leading-flat);
    place-items: center;
    transition: rotate var(--duration-base) var(--ease-out);
  }

  h3 {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
  }
}

.faq__item[open] .faq__question::after {
  rotate: 45deg;
}

.faq__answer {
  color: var(--color-muted);
  padding-block-end: var(--space-s);
}