/* css/sitio-chrome.css — o cromo do sítio: o que TODA página da trilha nova
   precisa e o pacote compilado (`ds/sitio/`) não traz.

   Por que este arquivo existe
   ───────────────────────────
   `ds/sitio/elementos-sitio.css` desenha `.cromo`, `.cromo__nav`, `.cromo__elo`
   e `.cromo__fim` — mas NÃO desenha o botão do menu compacto
   (`.cromo__compacto`), nem o painel revelável (`.cromo__menu`), nem o
   pular-para-o-conteúdo, nem o `.ico`. No kit de origem o cabeçalho é uma peça
   de vitrine: nada linka de verdade e nada colapsa. Quem colapsa é o site.

   Até 13/08/2026 essas regras moravam SÓ em `css/home.css`, porque a home era
   a única página da trilha nova. Ao converter a segunda superfície (o hub de
   tutoriais) elas viraram, de fato, camada compartilhada — e duplicar o bloco
   em cada folha de página seria a maneira mais silenciosa possível de as cinco
   superfícies divergirem: o menu de uma delas para de fechar e ninguém nota,
   porque o console fica limpo.

   O conteúdo abaixo é o MESMO bloco de `css/home.css` (linhas 8–110 na
   revisão b02e460), copiado sem alteração de valor. A home ainda o declara por
   conta própria; a consolidação — apagar de lá e linkar isto — é trabalho de
   quando as duas frentes de conversão se juntarem. Enquanto as duas
   declarações forem idênticas, quem carregar as duas não vê diferença
   nenhuma: mesma especificidade, mesmo valor.

   Pré-requisitos: `ds/sitio/tokens.css`, `sistema.css`, `elementos.css`,
   `elementos-sitio.css` e `css/sitio-web.css` carregados ANTES — este arquivo
   lê `--sitio-sangria`, que nasce no `:root` de `sitio-web.css`, e `--sitio-
   cromo-altura`, que nasce nos tokens. Nenhum valor de cor literal aqui.

   Carregado por: `LandingPage/tutoriais/index.html`. */

/* O pictograma em <use>: o sprite é `/assets/icones.svg` (22 símbolos). */
.ico { width: 1em; height: 1em; flex: none; }

/* `.cromo__marca` virou <a href="/"> — no kit nada linka de verdade (os elos
   são href="#" com preventDefault), então o <span> original era artefato de
   protótipo. `.sitio a` (elementos-sitio.css) tem a MESMA especificidade e vem
   antes na cascata, então sem isto o link herda cor de sinal e perde a tinta
   cheia que `.cromo__marca` declara. */
a.cromo__marca,
a.cromo__marca:hover {
  color: var(--sitio-tinta-cheia);
  text-decoration: none;
}

.sitio__pular {
  position: absolute;
  left: -9999px;
}
.sitio__pular:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--sitio-raio-fino);
  background: var(--sitio-sinal);
  color: var(--sobre-sinal);
}

/* ── O menu compacto ────────────────────────────────────── */

/* Acima do breakpoint o botão não existe e o painel é transparente ao layout:
   nav e fim voltam a ser filhos diretos do cromo. */
.cromo__compacto { display: none; }
.cromo__menu { display: contents; }

/* O ícone de hambúrguer não existe em assets/icones.svg (22 símbolos, nenhum
   "menu"), e acrescentar um símbolo ao sprite é escopo maior (passa por
   scripts/baixar_icones.py). Três traços em CSS puro: o miolo é o background
   do próprio span, os outros dois são pseudo-elementos em cima e embaixo. */
.cromo__compacto {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sitio-traco-forte);
  border-radius: var(--sitio-raio-fino);
  background-color: var(--sitio-superficie);
  cursor: pointer;
  transition: border-color var(--t-toque) var(--e-entrada);
}
.cromo__compacto:hover { border-color: var(--sitio-tinta-fraca); }

.cromo__compacto-icone,
.cromo__compacto-icone::before,
.cromo__compacto-icone::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--sitio-tinta-cheia);
  transition: transform var(--t-toque) var(--e-entrada), opacity var(--t-toque) var(--e-entrada), top var(--t-toque) var(--e-entrada);
}
.cromo__compacto-icone { position: relative; }
.cromo__compacto-icone::before,
.cromo__compacto-icone::after { position: absolute; left: 0; }
.cromo__compacto-icone::before { top: -6px; }
.cromo__compacto-icone::after { top: 6px; }

/* Painel aberto: os dois traços de fora viram um X, o do meio some. */
.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone {
  background-color: transparent;
}
.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone::before {
  top: 0;
  transform: rotate(45deg);
}
.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1180px) {
  .cromo__compacto { display: grid; place-items: center; }
  .cromo__menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: var(--sitio-cromo-altura);
    /* --sitio-sangria vive em sitio-web.css (:root, 32px acima de 680px,
       20px abaixo) — sem fallback aqui de propósito, pra não voltar a
       mascarar o token não existir num escopo por acidente. */
    padding: 16px var(--sitio-sangria) 24px;
    background: var(--sitio-cromo);
    border-block: 1px solid var(--sitio-traco);
    box-shadow: var(--sitio-relevo);
  }
  .cromo__menu.is-open { display: grid; gap: 16px; }
  .cromo__nav { display: grid; gap: 4px; }
}