/* ==========================================================================
   b.elzark — Página de perguntas frequentes
   Complementa home.css, que já entrega .faq-lista / .faq-item (o acordeão),
   .caminhos-grade/.caminho, .contato/.cta-whats, header, rodapé e barra fixa.
   Aqui só o que é exclusivo desta página: hero curto, índice de categorias,
   busca e agrupamento das perguntas.
   ========================================================================== */

/* Esta página não entra no menu principal (a navegação já tem quatro itens
   mais o CTA). Ela é alcançada pelo rodapé, pelos botões "Ver todas as
   perguntas" das dobras de FAQ e pela busca. Por isso não há regra de
   aria-current de menu aqui, ao contrário de lp.css. */

/* --- Breadcrumb ------------------------------------------------------------
   Espelha .trilha de catalogo.css. As duas folhas nunca carregam juntas
   (catalogo.css é só do catálogo), então a repetição é intencional: evita
   puxar 490 linhas de estilo de página de produto só pelo breadcrumb.
   Se mexer aqui, mexer lá. */
.trilha { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  gap: var(--e-2);
  font-size: var(--t-peq);
  color: var(--branco-64);
}
.trilha li { display: flex; align-items: center; gap: var(--e-2); }
.trilha li:not(:last-child)::after {
  content: "›";
  color: var(--branco-40);
}
.trilha a {
  text-decoration: none;
  color: var(--branco-64);
  transition: color var(--tempo) var(--curva);
}
.trilha a:hover { color: var(--branco); }
.trilha [aria-current="page"] { color: var(--branco); font-weight: var(--peso-medium); }

/* --- Hero curto -------------------------------------------------------------
   .hero do home.css nasce com 100svh e align-content:end, dimensão de home.
   Aqui a dobra é utilitária: a pessoa veio buscar resposta, não impressão. */
.hero-faq {
  min-height: 0;
  align-content: start;
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}
.hero-faq h1 {
  font-size: var(--t-h1);
  max-width: 18ch;
}
.hero-faq .lede { max-width: 54ch; }

/* --- Índice de categorias ---------------------------------------------------
   Gruda abaixo do header (4.5rem de .topo-linha) para que a pessoa troque de
   assunto sem voltar ao topo em uma página longa.
   position:sticky sobrevive ao overflow-x:clip do body porque `clip` não cria
   scroll container (ao contrário de `hidden`) — o contexto continua sendo a
   viewport. */
.faq-navegacao {
  position: sticky;
  top: 4.5rem;
  z-index: 50;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
  padding-block: var(--e-3);
}
.faq-indice-lista {
  display: flex;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* sangra até a borda no mobile: o último chip não fica "escondido" atrás
     da margem, sinalizando que a faixa rola */
  margin-inline: calc(var(--margem-x) * -1);
  padding-inline: var(--margem-x);
  scroll-padding-inline: var(--margem-x);
}
.faq-indice-lista::-webkit-scrollbar { display: none; }
.faq-indice-lista a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: var(--t-peq);
  font-weight: var(--peso-medium);
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--tempo) var(--curva),
              border-color var(--tempo) var(--curva),
              background-color var(--tempo) var(--curva);
}
.faq-indice-lista a:hover {
  color: var(--fundo);
  background: var(--texto);
  border-color: var(--texto);
}

/* --- Busca ------------------------------------------------------------------
   Filtro client-side. Sem JS o campo não existe (o CSS só o revela sob
   html.js), e a página continua completa: todas as perguntas ficam no HTML
   renderizado, abertas ao Ctrl+F do navegador e ao rastreador. */
.faq-busca { display: none; }
html.js .faq-busca { display: block; margin-top: var(--e-6); }

.faq-busca-campo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: 32rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
  transition: border-color var(--tempo) var(--curva);
}
.faq-busca-campo:focus-within { border-color: var(--texto); }
.faq-busca-campo svg { flex: none; color: var(--texto-suave); }
.faq-busca-campo input {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--toque-min) - 1.5rem);
  border: 0;
  outline: 0;
  background: none;
  font-size: var(--t-corpo);
  color: var(--texto);
}
.faq-busca-campo input::placeholder { color: var(--preto-40); }
/* Nativo do Safari/Chrome: o "x" do type=search vem com estilo próprio */
.faq-busca-campo input::-webkit-search-cancel-button { cursor: pointer; }

.faq-busca-status {
  margin-top: var(--e-3);
  font-size: var(--t-peq);
  color: var(--texto-suave);
  min-height: 1.5rem;
}

/* --- Grupos de perguntas ---------------------------------------------------- */
.faq-grupos { padding-block: var(--secao-y); }

.faq-grupo {
  /* header fixo (4.5rem) + faixa do índice (~3.5rem) + respiro */
  scroll-margin-top: 9.5rem;
}
.faq-grupo + .faq-grupo { margin-top: clamp(3rem, 8vw, 5rem); }

.faq-grupo-head {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-4);
}
.faq-grupo-num {
  font-size: var(--t-peq);
  font-weight: var(--peso-medium);
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.faq-grupo-head h2 {
  font-size: var(--t-h3);
  max-width: 24ch;
}

/* Pergunta alvo de link direto (compartilhada por WhatsApp, por exemplo):
   marca visualmente qual das perguntas da lista a pessoa veio ler. */
.faq-item { scroll-margin-top: 9.5rem; }
.faq-item.destacada summary { color: var(--texto); }
.faq-item.destacada {
  border-left: 3px solid var(--texto);
  padding-left: var(--e-4);
  margin-left: calc(var(--e-4) * -1);
}

/* Estado de filtro: some do fluxo sem apagar do DOM */
.faq-item[hidden],
.faq-grupo[hidden] { display: none; }

.faq-vazio {
  margin-top: var(--e-8);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-suave);
  max-width: 52rem;
}
.faq-vazio strong { color: var(--texto); font-weight: var(--peso-bold); }

/* --- Atalhos para as outras páginas ------------------------------------------
   Reaproveita .caminhos-grade/.caminho do home.css; aqui só a terceira coluna,
   que a home não tem (lá são dois caminhos, aqui três destinos). */
@media (min-width: 64rem) {
  .faq-atalhos .caminhos-grade { grid-template-columns: repeat(3, 1fr); }
}
.faq-atalhos .caminho { min-height: 14rem; }