/* ==========================================================================
   SÉTIMA SEÇÃO — "Dúvidas frequentes"
   Consome exclusivamente tokens de css/design-system.css. Reaproveita a
   proporção de grid 1fr/1.5fr já usada em how-it-works.css, about.css e
   practical-info.css (intro estreita + conteúdo mais largo) para intro
   + lista de perguntas.

   O acordeão usa <details>/<summary> nativos — sem JavaScript, sem
   biblioteca. É a mesma técnica que o menu mobile do Header já usa
   (ver "MENU MOBILE" em header.css): abre, fecha e recebe foco de
   teclado só com HTML, e continua legível/utilizável mesmo sem CSS ou
   JS (cada resposta já está no DOM; sem JS, o navegador ainda assim
   abre/fecha nativamente via clique ou teclado).

   O indicador "+ / –" reaproveita a técnica de .site-header__toggle-bars
   (header.css): traços posicionados absolutamente, cor via currentColor,
   transição em --transition-base, estado lido do atributo [open] — só
   com 2 traços em vez de 3, girando 90° em vez de formar um X.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TRANSIÇÃO — troca para --color-bg-alt (branco), continuando o ritmo
   off-white / branco já estabelecido em todas as seções anteriores.
   Mesma linha fina superior em --color-border já usada em todas as
   transições anteriores.
   -------------------------------------------------------------------------- */
.faq {
  background-color: var(--color-bg-alt);
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-section);
}

/* --------------------------------------------------------------------------
   COMPOSIÇÃO — coluna única no mobile/tablet; a partir de 1024px, grid
   1fr/1.5fr (mesma proporção de how-it-works.css/about.css/
   practical-info.css) para intro + lista de perguntas.
   -------------------------------------------------------------------------- */
.faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .faq__inner {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   INTRO — eyebrow + H2.
   -------------------------------------------------------------------------- */
.faq__eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  font-weight: var(--weight-body-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-secondary);
}

.faq__heading {
  margin: 0;
}

/* --------------------------------------------------------------------------
   LISTA — quatro <details>, cada um delimitado só por uma linha fina
   superior (mesma linguagem de divisor já usada em when-to-seek.css e
   practical-info.css) — sem card, sem sombra, sem fundo, sem raio.
   -------------------------------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: var(--border-width) solid var(--color-border);
}

/* --------------------------------------------------------------------------
   PERGUNTA (<summary>) — remove o marcador nativo do navegador (mesma
   técnica de .site-header__toggle em header.css: list-style:none +
   ::-webkit-details-marker + ::marker) e organiza texto + indicador em
   linha. Padding vertical generoso para alvo de toque no mobile.
   summary:focus-visible já vem do design system (não repetido aqui).
   -------------------------------------------------------------------------- */
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-medium);
  color: var(--color-text);
}

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

.faq__question::marker {
  content: "";
}

/* --------------------------------------------------------------------------
   INDICADOR "+ / –" — funcional, não decorativo (aria-hidden no HTML).
   Dois traços absolutamente posicionados dentro de uma caixa quadrada
   pequena, currentColor, espessura = --border-width (reaproveita o
   token de linha fina em vez de inventar uma espessura nova). O traço
   vertical gira 90° no estado [open] e se sobrepõe ao horizontal,
   restando só "–".
   -------------------------------------------------------------------------- */
.faq__question-icon {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
}

.faq__question-icon span {
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transition-base);
}

.faq__question-icon span:first-child {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--border-width);
  transform: translateY(-50%);
}

.faq__question-icon span:last-child {
  top: 0;
  left: 50%;
  width: var(--border-width);
  height: 100%;
  transform: translateX(-50%);
}

.faq__item[open] .faq__question-icon span:last-child {
  transform: translateX(-50%) rotate(90deg);
}

/* --------------------------------------------------------------------------
   RESPOSTA — mesma tipografia de corpo do resto do site. max-width
   preserva a legibilidade da linha mesmo na coluna mais larga (1.5fr).
   -------------------------------------------------------------------------- */
.faq__answer {
  max-width: 60ch;
  margin: 0;
  padding-bottom: var(--space-md);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
}