/* ==========================================================================
   Component · FAQ — acordeão
   Conteúdo vindo do site em produção (website/src/components/Faq.tsx +
   messages/pt.json → "Faq"). Usa <details>/<summary> nativo: abre sem JS,
   é acessível por teclado de graça e funciona em file://.
   ========================================================================== */

.faq {
  padding-block: calc(var(--section-pad) / 2);
}

.faq__list {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  max-width: 52rem;
  margin-inline: auto;
  border-top: 1px solid var(--color-hairline);
}

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

/* Remove o triângulo nativo (WebKit + padrão) */
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  cursor: pointer;
  list-style: none;
  color: var(--color-text-primary);
  font-size: var(--text-sub);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  transition: color var(--duration-fast) var(--ease-gentle);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--color-accent);
}

.faq__question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Ícone de + que vira × ao abrir */
.faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  transition: transform var(--duration-medium) var(--ease-spring);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.faq__icon::after {
  transition: opacity var(--duration-fast) var(--ease-gentle);
  rotate: 90deg;
}

.faq__item[open] .faq__icon {
  transform: rotate(135deg);
}

.faq__answer {
  padding-bottom: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  padding-inline-end: 2.75rem;
  max-width: 44rem;
  color: var(--color-text-secondary);
}

/* Animação de abertura onde o browser suporta (Chrome/Safari recentes);
   onde não suporta, abre instantâneo — sem quebrar nada. */
@supports (interpolate-size: allow-keywords) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size var(--duration-medium) var(--ease-gentle),
      content-visibility var(--duration-medium) var(--ease-gentle),
      opacity var(--duration-medium) var(--ease-gentle);
    transition-behavior: allow-discrete;
  }

  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon,
  .faq__item::details-content {
    transition: none;
  }
}