/* ================================================
   FAQ PAGE – accordion stijlen
   Gebruikt section-faq__* klassen (zelfde als faq.js verwacht)
   Geladen op faq.html via <link rel="stylesheet">
   ================================================ */

.faq-intro {
  font-size: var(--t-lead);
  color: rgba(1, 58, 58, 0.65);
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
  max-width: 55ch;
  line-height: 1.55;
}

.section-faq__list {
  max-width: 720px;
  margin-top: var(--s-5);
}

.section-faq__item {
  border-bottom: 1px solid var(--color-line);
}

.section-faq__item:first-child {
  border-top: 1px solid var(--color-line);
}

.section-faq__q {
  display: block;
}

.section-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--color-ink-deep);
  text-align: left;
  gap: var(--s-3);
  transition: color var(--dur-short) var(--ease-soft);
}

.section-faq__btn:hover {
  color: var(--color-brand);
}

.section-faq__btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.section-faq__icon {
  flex-shrink: 0;
  transition: transform var(--dur-short) var(--ease-soft);
}

.section-faq__btn[aria-expanded="true"] .section-faq__icon {
  transform: rotate(180deg);
}

.section-faq__a {
  padding-bottom: var(--s-4);
}

.section-faq__a p {
  font-size: var(--t-body);
  color: rgba(1, 58, 58, 0.75);
  line-height: 1.7;
  max-width: 65ch;
}

.section-faq__a a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CTA blok onderaan */
.faq-cta {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-line);
  max-width: 720px;
}

.faq-cta p {
  font-size: var(--t-body);
  color: rgba(1, 58, 58, 0.6);
  margin-bottom: var(--s-2);
}

.faq-cta a {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-small);
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: opacity var(--dur-short) var(--ease-soft);
}

.faq-cta a:hover {
  opacity: 0.75;
}