/* Folha de estilo do microblog — PRÓPRIA, não o bundle do Tailwind/Vite do SPA.
 *
 * Escrita a partir dos mesmos tokens de `src/estilo.css`, mas independente dele de propósito:
 * o blog não passa pelo `vite build`, e acoplar a um hash de asset do SPA faria o CSS do blog
 * quebrar a cada deploy do portal sem o blog ter mudado nada.
 *
 * ⚠️ **O preço dessa independência é ESTE arquivo envelhecer sozinho, e ele já envelheceu.**
 * Entre 30/08 e 05/09 o portal ganhou a marca inteira (ADR-0085) e aqui nada mudou: a `--acao`
 * daqui era um teal `#0D5C75` que não existe mais em lugar nenhum do portal, e a faixa noite,
 * o logo e o coral nunca chegaram. O blog não ficou só diferente do site — ficou de outra
 * marca, na única tela pública que o Google indexa de verdade.
 * Quando um token de `src/estilo.css` mudar, ele muda aqui também. Não há teste que uma folha
 * de CSS solta possa ter; o que existe é `testes/componente/blog-casca.test.tsx`, que cobra a
 * NAVEGAÇÃO — que é a metade que dá para provar.
 *
 * ⚠️ Os nomes com prefixo `--color-` existem porque o `Logo` importado de `src/componentes/`
 * os referencia por dentro do SVG. Ali eles vêm do `@theme` do Tailwind; aqui vêm daqui. */

:root {
  --papel: #E8EBEF;
  --tinta: #12161B;
  --tinta2: #404A55;
  --tinta3: #5F6875;
  --linha: #DCE1E7;
  --superficie: #fff;
  /* A ação são DUAS cores, e confundi-las é o erro clássico do portal: `--acao` é o coral do
     que se PREENCHE, `--acao-texto` é o azul do que se SUBLINHA. No blog só a segunda tem
     trabalho — não há botão aqui —, mas as duas ficam declaradas para a próxima pessoa não
     inventar uma terceira. */
  --acao: #C94019;
  --sobre-acao: #FFFFFF;
  --acao-texto: #2F54D0;

  /* ---- a faixa NOITE, que NÃO inverte ----------------------------------------------
     Marca não troca de cor conforme o sistema de quem abre (ADR-0085) — o mesmo argumento
     que mantém a folha do catálogo fora do tema escuro. Por isso estes cinco ficam fora do
     bloco `prefers-color-scheme` abaixo. */
  --color-noite: #0A1120;
  --color-sobre-noite: #DCE3F0;
  --color-sobre-noite-fraco: #9AA5BF;
  --color-marca-clara: #7C96F4;
  --color-marca-coral: #E8542F;

  --font-mono: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* As mesmas duas medidas do site: quanto ele ocupa do monitor, e quantos caracteres cabem
     numa linha. O corpo do post usa a segunda; a barra e o rodapé usam a primeira, senão o
     blog seria uma coluna estreita presa dentro de um site largo. */
  --visitante: 1080px;
  --leitura: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0F1318;
    --tinta: #E7EBF0;
    --tinta2: #B3BCC7;
    --tinta3: #8A94A1;
    --linha: #2A313A;
    --superficie: #171C23;
    /* O coral da peça volta inteiro no escuro: o degrau escurecido do tema claro existia para
       o rótulo BRANCO passar na WCAG, e aqui não há rótulo. */
    --acao: #E8542F;
    --sobre-acao: #0F1318;
    --acao-texto: #93A9FF;
  }
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

/* ⚠️ Coluna flex de altura mínima cheia, e o miolo cresce — o mesmo desenho da
   `CascaPublica` (`flex min-h-dvh flex-col` com `flex-1` no meio). Sem isto o rodapé sobe e
   gruda no fim do TEXTO: no índice, que tem um post só, sobrava meia tela de fundo claro
   ABAIXO da faixa noite do rodapé, e a página parecia cortada no meio. É o tipo de defeito
   que nenhum teste pega e que se vê em dois segundos abrindo a tela.
   ⚠️ `dvh` e não `vh`: no celular a barra do navegador entra e sai, e `vh` deixa o rodapé
   pendurado abaixo da dobra o tempo todo. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-corpo);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--acao-texto); }
a:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

/* ── A barra, igual à do site ────────────────────────────────────────────────────────
 *
 * ⚠️ Ela ROLA no celular e GRUDA a partir de 640px, como a `CascaPublica`. Medido lá: em
 * 390px, o wordmark mais os quatro destinos ocupam três linhas — grudados, seriam 18% de uma
 * tela de 844px comidos em toda página, para sempre. */
.blog-cabecalho {
  background: var(--color-noite);
  color: var(--color-sobre-noite);
}
@media (min-width: 640px) {
  .blog-cabecalho { position: sticky; top: 0; z-index: 10; }
}
/* ⚠️ `flex-wrap`, e não rolagem lateral nem hambúrguer: rolagem sem barra visível não se
   anuncia a quem tem mouse, e gaveta transforma a navegação em segredo atrás de um toque.
   Quebrar a linha mostra tudo, sempre — é a mesma decisão da casca do site. */
.blog-barra {
  max-width: var(--visitante);
  margin: 0 auto;
  min-height: 64px;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}
.blog-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-sobre-noite);
  text-decoration: none;
}
.blog-marca-digital { color: var(--color-marca-clara); }
@media (min-width: 640px) { .blog-marca { font-size: 26px; } }

.blog-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -8px; }
/* 44px de alvo de toque, como todo link de navegação do portal. */
.blog-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-sobre-noite);
}
.blog-nav a:hover { color: var(--color-marca-clara); }
@media (min-width: 640px) {
  .blog-nav { margin-left: 0; gap: 8px; }
  .blog-nav a { padding: 0 12px; }
}
/* ⚠️ O anel de foco é da faixa, e não o global: sobre a noite, um `outline` na cor da ação
   (coral escurecido) some. Ninguém apaga foco neste portal. */
.blog-cabecalho a:focus-visible,
.blog-rodape a:focus-visible {
  outline: 2px solid var(--color-marca-clara);
  outline-offset: 2px;
}

/* ⚠️ `--leitura`, e não uma medida própria: é quantos caracteres cabem numa linha antes de o
   olho perder a volta, e a resposta é a mesma de `/sobre` e `/privacidade`. */
.blog-corpo {
  flex: 1;
  width: 100%;
  max-width: var(--leitura);
  margin: 0 auto;
  padding: 40px 16px;
}

.blog-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta3);
  margin: 0 0 8px;
}

.blog-titulo {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.blog-data {
  font-size: 14px;
  color: var(--tinta3);
  margin: 0 0 32px;
}

.blog-artigo p { font-size: 18px; line-height: 1.7; margin: 0 0 20px; max-width: 68ch; }
.blog-artigo h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  margin: 40px 0 12px;
}
.blog-artigo a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.blog-lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.blog-lista li {
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--superficie);
}
.blog-lista h2 { margin: 0 0 4px; font-size: 20px; }
.blog-lista h2 a { text-decoration: none; color: var(--tinta); }
.blog-lista p { margin: 6px 0 0; color: var(--tinta2); font-size: 15px; }
.blog-lista time { font-size: 13px; color: var(--tinta3); }

/* O rodapé é a outra metade da navegação: barra + rodapé são o site inteiro, e nenhum rótulo
   está nos dois. Ele também é faixa noite, como no site. */
.blog-rodape {
  background: var(--color-noite);
  color: var(--color-sobre-noite-fraco);
}
.blog-rodape-dentro {
  max-width: var(--visitante);
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.blog-rodape-frase { margin: 0; }
.blog-rodape-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.blog-rodape-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--color-sobre-noite);
  font-weight: 600;
  text-decoration: none;
}
.blog-rodape-nav a:hover { text-decoration: underline; }