/* FAQ accordion — native <details>, no JavaScript. */

.faq details {
  border-bottom: 1px solid var(--border-color);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font: 400 clamp(1.1rem, 0.6vw + 1rem, 1.35rem) / 1.3 var(--font-title);
  position: relative;

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

  &::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: linear-gradient(var(--accent), var(--accent)) center / 2px 9px no-repeat;
    transition: transform 0.4s var(--ease);
  }

  &:hover {
    color: var(--accent-hi);
  }
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq details p {
  color: var(--text-soft);
  max-width: 68ch;
  padding-bottom: 18px;
}