/* ACORDEÃO — a folha mínima que falta para a pergunta abrir com jeito.
 *
 * O DESENHO das duas variantes (fechada e aberta) já viaja no CSS do clone: é
 * de lá que vem o painel a `height: min-content`, o espaçamento e o sinal de
 * mais a virar. O que a folha do clone não pode trazer é a PASSAGEM de um
 * estado para o outro — na origem quem a fazia era JavaScript, escrevendo a
 * altura em píxeis a cada frame, e esse JavaScript foi removido no clone.
 *
 * Aqui a passagem é uma transição de CSS, com a mesma curva e a mesma duração
 * do resto do site. A altura é medida e escrita pelo kb-interact.js só durante
 * a animação; no fim sai do caminho e quem manda outra vez é a variante — é
 * isso que faz o painel continuar a acompanhar o texto quando o cliente o
 * muda no painel, ou quando o visitante aumenta o tamanho da letra.
 */
[data-kb-acordeao] [data-kb-painel] {
  transition: height 0.42s cubic-bezier(0.44, 0, 0.22, 1);
}

/* o gatilho é uma coisa em que se carrega: tem de o dizer ao teclado e a quem
   ouve a página, e tem de ter alvo de toque decente no telemóvel */
[data-kb-gatilho] {
  cursor: pointer;
  min-height: 44px;
}
[data-kb-gatilho]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  [data-kb-acordeao] [data-kb-painel] {
    transition: none;
  }
}