/* =========================================
   FAQ — reusable component
   template-parts/sections/faq.php; behaviour in assets/js/components/faq.js.
========================================= */

.faq__inner {
  display: grid;
  grid-template-columns: 100%;
  gap: var(--space-3lg);
  padding-block: var(--space-2xl);
}

.faq__title {
  color: var(--black);
}

.faq__list {
  border-top: 1px solid var(--border-default);
}

.faq__item {
  border-bottom: 1px solid var(--border-default);
}

.faq__heading {
  font: inherit;
}

/* Question row */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg) 2px;
  border: 0;
  background: none;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}

.faq__q:hover,
.faq__item.is-open .faq__q {
  color: var(--black);
}

.faq__q:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* + that turns into − when open (Figma: 10px) */
.faq__icon {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-out);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__icon::after {
  transform: rotate(0deg);
}

/* Answer: height animates from 0 to the text's own height */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

/* Hidden from screen readers and Tab while closed – after the close animation */
.faq__a-in {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}

.faq__item.is-open .faq__a-in {
  visibility: visible;
  transition-delay: 0s;
}

.faq__a-text {
  padding: 0 var(--space-4lg) var(--space-lg) 2px;
  color: var(--text-muted);
}

.faq__a-text > * + * {
  margin-top: var(--space-3sm);
}

.faq__a-text a {
  color: var(--purple);
  text-decoration: underline;
}

@media (min-width: 1025px) {
  .faq__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 60px; /* Figma */
    align-items: start;
    padding-block: var(--space-4xl);
  }
  .faq__q.text-lg[aria-expanded="true"] {
      padding-bottom: 24px;
  }
  .faq__q {
    padding-block: var(--space-3lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__q,
  .faq__icon::before,
  .faq__icon::after,
  .faq__a,
  .faq__a-in {
    transition: none;
  }
}