/* Acordeão das perguntas frequentes — ver src/lib/faq.ts.
 *
 * Regra de ouro: o estado FECHADO só existe quando o JavaScript está vivo
 * (`html.kb-faq-js`, posto por um script minúsculo no <head>, antes da
 * primeira pintura — não há salto). Sem JavaScript não há regra nenhuma a
 * aplicar: as respostas ficam todas à vista, que é a degradação honesta.
 *
 * O desenho é o do tema. Daqui só sai o que abrir e fechar exige. */

/* o cabeçalho da pergunta passou a <button>: tirar-lhe a pele de botão e
 * devolver-lhe a do tema (a classe framer-* continua lá e continua a mandar) */
.kb-faq-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kb-faq-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* o texto da pergunta nunca sai da caixa nem parte palavras a meio */
.kb-faq-btn > * {
  min-width: 0;
}

/* ── estado fechado (só com JavaScript) ─────────────────────────────── */

/* o intervalo entre pergunta e resposta passa do cartão para DENTRO do painel:
 * fechado, o cartão fica com a mesma altura que tinha no tema */
html.kb-faq-js .kb-faq-card {
  gap: 0;
}

/* margem no filho e não padding no painel: dentro do `overflow:hidden` a
 * margem é cortada com o resto, e o cartão fechado fica com a altura exacta
 * que tinha no tema (com padding sobrava sempre a folga de 15px à vista) */
html.kb-faq-js .kb-faq-corpo > * {
  margin-top: 15px;
}

html.kb-faq-js .kb-faq-painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.44, 0, 0.22, 1);
}

html.kb-faq-js .kb-faq-painel > .kb-faq-corpo {
  overflow: hidden;
  min-height: 0;
}

html.kb-faq-js .kb-faq-item[data-aberto="1"] .kb-faq-painel {
  grid-template-rows: 1fr;
}

/* o sinal do tema (+) roda para × quando o item está aberto — é o indicador
 * que já lá estava, não um ícone novo */
html.kb-faq-js .kb-faq-sinal {
  transition: transform 0.28s cubic-bezier(0.44, 0, 0.22, 1);
}

html.kb-faq-js .kb-faq-item[data-aberto="1"] .kb-faq-sinal {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  html.kb-faq-js .kb-faq-painel,
  html.kb-faq-js .kb-faq-sinal {
    transition: none;
  }
}