/*
 * Estilo do guia completo (`/guia`, `public/guia.html`), carregado DEPOIS do
 * `site.css` da `/conheca` — de lá vêm fontes, cores (`--fundo`,
 * `--superficie`, `--destaque`…), cabeçalho, botões e rodapé. Aqui só o que é
 * do guia. O HTML é gerado por `src/lib/guia-ajuda.ts`; este arquivo é
 * escrito à mão.
 */

/* `.botao` e outros põem `display`, que venceria o atributo `hidden`. */
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* O cabeçalho é fixo: a âncora não pode parar debaixo dele. */
[id] { scroll-margin-top: 76px; }

/* ── Topo ───────────────────────────────────────────────────────── */
.guia-topo { padding-block: 40px 20px; }
/* A largura de leitura vale para o miolo, não para o contêiner: a margem
   esquerda do topo fica alinhada com a dos cartões e do índice. */
.guia-topo > * { max-width: 860px; }
button { font: inherit; }
@media (min-width: 768px) { .guia-topo { padding-block: 72px 28px; } }
.guia-selo {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--destaque-claro); background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .3); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}
.guia-topo h1 { font-size: clamp(30px, 6vw, 48px); font-weight: 800; margin-bottom: 16px; overflow-wrap: anywhere; }
.guia-sub { font-size: clamp(16px, 2vw, 18px); color: var(--texto-2); margin-bottom: 24px; }
.guia-sub a, .guia-vazio a { color: var(--destaque-claro); text-decoration: underline; text-underline-offset: 3px; }

.guia-acoes { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .guia-acoes { flex-direction: row; align-items: stretch; } }
.guia-busca {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 10px;
  color: var(--texto-3); transition: border-color .15s;
}
.guia-busca:focus-within { border-color: var(--destaque); }
.guia-busca svg { flex: none; }
.guia-busca input {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent;
  color: var(--texto); font: inherit; font-size: 16px; /* 16px: o iPhone não dá zoom no foco */
}
.guia-busca input::placeholder { color: var(--texto-3); }
.guia-resultado { margin-top: 12px; font-size: 14px; color: var(--texto-2); min-height: 1.4em; }

/* ── Por onde começar ───────────────────────────────────────────── */
.guia-caminhos { padding-block: 8px 32px; }
.guia-caminhos h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.guia-caminhos-grade { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .guia-caminhos-grade { grid-template-columns: repeat(3, 1fr); } }
.guia-caminho { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.guia-caminho h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.guia-caminho > p { font-size: 14px; color: var(--texto-3); margin-bottom: 12px; }
.guia-caminho ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--texto-3); }
.guia-caminho li { padding-block: 3px; }
.guia-caminho a { color: var(--destaque-claro); }
.guia-caminho a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Índice + conteúdo ──────────────────────────────────────────── */
.guia-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 64px; }
@media (min-width: 1024px) { .guia-corpo { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; } }

/* No celular: uma fileira de tópicos que rola de lado. */
.guia-indice-titulo { display: none; }
.guia-indice ul {
  list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.guia-indice ul::-webkit-scrollbar { display: none; }
.guia-indice li { flex: none; }
.guia-indice a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--borda-forte); border-radius: 999px; font-size: 14px; color: var(--texto-2);
  white-space: nowrap; transition: color .15s, border-color .15s, background-color .15s;
}
.guia-indice a svg { width: 16px; height: 16px; flex: none; }
.guia-indice a:hover { color: var(--texto); border-color: var(--texto-3); }
.guia-indice a.ativo { color: var(--texto); border-color: var(--destaque); background: rgba(59, 130, 246, .12); }

/* No computador: coluna fixa ao lado do conteúdo. */
@media (min-width: 1024px) {
  .guia-indice { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
  .guia-indice-titulo { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin-bottom: 10px; padding-left: 12px; }
  .guia-indice ul { flex-direction: column; gap: 2px; overflow: visible; padding: 0; }
  .guia-indice a { display: flex; border: 0; border-radius: 8px; padding: 8px 12px; min-height: 0; white-space: normal; }
  .guia-indice a:hover { background: var(--superficie); }
}

/* ── Tópico ─────────────────────────────────────────────────────── */
.guia-topico { padding-top: 32px; }
.guia-topico + .guia-topico { margin-top: 24px; border-top: 1px solid var(--borda); }
.guia-topico-cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.guia-topico-icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--destaque-claro); background: rgba(59, 130, 246, .12);
}
.guia-topico h2 { font-size: clamp(24px, 4vw, 30px); font-weight: 800; overflow-wrap: anywhere; }
.guia-topico-cabecalho p { font-size: 14px; color: var(--texto-3); margin-top: 4px; }

.guia-sumario { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guia-sumario a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 8px;
  background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; color: var(--texto-2);
}
.guia-sumario a:hover { color: var(--texto); border-color: var(--borda-forte); }
.guia-topico.buscando .guia-sumario { display: none; }

/* ── Artigo ─────────────────────────────────────────────────────── */
.guia-artigo {
  margin-top: 16px; padding: 20px 18px; border-radius: var(--raio);
  background: rgba(17, 24, 39, .6); border: 1px solid var(--borda);
}
@media (min-width: 768px) { .guia-artigo { padding: 28px 32px; } }
.guia-artigo:target { border-color: var(--destaque); }
.guia-artigo h3 { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.guia-artigo h3 a:hover { color: var(--destaque-claro); }
.guia-resumo { font-size: 14px; color: var(--texto-3); margin-top: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }

.guia-texto { padding-top: 16px; font-size: 15px; line-height: 1.7; color: var(--texto-2); overflow-wrap: anywhere; }
@media (min-width: 768px) { .guia-texto { font-size: 16px; } }
.guia-texto > * + * { margin-top: 12px; }
.guia-texto strong { color: var(--texto); font-weight: 600; }
.guia-texto h4 { font-size: 16px; font-weight: 700; color: var(--texto); margin-top: 22px; }
.guia-texto ul { margin-bottom: 0; padding-left: 20px; }
.guia-texto li + li { margin-top: 6px; }
.guia-texto li::marker { color: var(--texto-3); }

.guia-na-ajuda { margin-top: 18px; font-size: 13px; }
.guia-na-ajuda a { color: var(--texto-3); }
.guia-na-ajuda a:hover { color: var(--destaque-claro); }
.guia-voltar { margin-top: 20px; font-size: 14px; }
.guia-voltar a { color: var(--texto-3); }
.guia-voltar a:hover { color: var(--texto); }
.guia-vazio { padding: 32px 0; color: var(--texto-2); }

/* ── Impressão / PDF ────────────────────────────────────────────── */
@media print {
  @page { margin: 16mm 14mm; }
  :root { --texto: #000; --texto-2: #1f2937; --texto-3: #4b5563; --borda: #d1d5db; }
  body { background: #fff; color: #000; }
  header, footer, .guia-acoes, .guia-resultado, .guia-caminhos, .guia-indice,
  .guia-sumario, .guia-na-ajuda, .guia-voltar, .guia-vazio { display: none !important; }
  .container { max-width: none; padding: 0; }
  .guia-topo { padding: 0 0 12px; }
  .guia-topo > * { max-width: none; }
  .guia-selo { border-color: #9ca3af; background: none; color: #000; }
  .guia-corpo { display: block; padding: 0; }
  .guia-topico { padding-top: 0; break-before: page; }
  .guia-topico + .guia-topico { margin-top: 0; border-top: 0; }
  .guia-topico-icone { background: none; color: #000; border: 1px solid #9ca3af; }
  .guia-artigo { background: none; border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: 14px 0 0; margin-top: 14px; }
  .guia-artigo h3, .guia-texto h4 { break-after: avoid; }
  .guia-texto { font-size: 11pt; line-height: 1.5; }
  .guia-texto li, .guia-texto p { break-inside: avoid; }
  a { color: inherit !important; }
}