/* ACR SCHOOL · pages/faq.css
   Exclusivo de /faq, em :where(), especificidade zero.
   O acordeão em si é componente do tema. Aqui ficam só o índice de temas
   e o campo de busca, que existem por causa do tamanho desta página. */

/* índice: atalho para o tema, sem rolar a página inteira.
   São âncoras e não filtros porque a pessoa costuma chegar com uma dúvida
   específica e sair lendo as vizinhas. */
:where(.faq-topo){display:grid;gap:var(--acr-s3);
  padding:var(--acr-s4) 0;border-block:var(--acr-rule) solid var(--acr-line-3)}
:where(.faq-indice){display:flex;flex-wrap:wrap;gap:var(--acr-s2)}
:where(.faq-indice) a{font-family:var(--acr-font-ui);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:var(--acr-tracking-nav);color:var(--acr-ink-2);
  padding:9px 16px;border:var(--acr-rule) solid var(--acr-line-3);
  transition:background-color var(--acr-dur-1) var(--acr-ease),
             color var(--acr-dur-1) var(--acr-ease),
             border-color var(--acr-dur-1) var(--acr-ease)}
:where(.faq-indice) a:hover{background:var(--acr-ink);color:var(--acr-surface);
  border-color:var(--acr-ink)}

:where(.faq-busca){display:grid;gap:8px}
:where(.faq-busca__linha){display:flex;gap:var(--acr-s2)}
:where(.faq-busca__linha) .acr-field{flex:1 1 auto}
:where(.faq-busca__linha) .acr-btn{flex:0 0 auto}
:where(.faq-vazio){font-family:var(--acr-font-ui);font-size:15px;color:var(--acr-ink-2);
  padding-block:var(--acr-s5)}

/* grupo de perguntas: título de tema e o acordeão logo abaixo */
/* título de tema: barra dourada em cima, numeral e contagem ao lado.
   Sem isso, seis grupos de acordeão viram uma lista só e a pessoa perde
   a noção de onde um assunto termina e o outro começa. */
:where(.faq-grupo)+:where(.faq-grupo){margin-top:var(--acr-section-y-sm)}
:where(.faq-grupo__cabeca){display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--acr-s2) var(--acr-s3);
  padding-top:var(--acr-s3);border-top:var(--acr-rule-accent) solid var(--acr-accent);
  scroll-margin-top:calc(var(--acr-header-total) + var(--acr-s4))}
:where(.faq-grupo__cabeca) h2{display:flex;align-items:baseline;gap:var(--acr-s2);
  font-size:clamp(26px,3vw,38px)}
:where(.faq-grupo__n){font-family:var(--acr-font-display);font-weight:800;
  font-size:.55em;color:var(--acr-accent);letter-spacing:.06em}
:where(.faq-grupo__conta){font-family:var(--acr-font-ui);font-size:12px;
  text-transform:uppercase;letter-spacing:var(--acr-tracking-nav);color:var(--acr-ink-3)}
:where(.faq-grupo) .acr-faq{margin-top:var(--acr-s4)}