/*
* Texto do post do blog (decisão 0010). Mesmo visual da leitura no painel da Psi Acadêmica:
* texto em Literata, títulos em IBM Plex Sans, links em azul-petróleo.
* Vale em três lugares: a página do post, a prévia do painel e dentro do editor do painel.
* Tudo fica dentro de .post-conteudo, para não mexer no resto do site (nem no Tailwind).
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;600&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&display=swap");
.post-conteudo {
--post-tinta: #1d2326;
--post-suave: #5b6670;
--post-linha: #d9dee2;
--post-acento: #1f5f73;
--post-caixa: #eef3f5;
--post-texto: Literata, Georgia, "Times New Roman", serif;
--post-titulo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--post-dados: "IBM Plex Mono", ui-monospace, Consolas, monospace;
color: var(--post-tinta);
font: 400 1.0625rem/1.7 var(--post-texto);
overflow-wrap: break-word;
}
.post-conteudo::after { content: ""; display: block; clear: both; }
/* Parágrafos */
.post-conteudo p { margin: 0 0 1.1em; }
.post-conteudo > :first-child { margin-top: 0; }
.post-conteudo > :last-child { margin-bottom: 0; }
/* Títulos (h2 a h4). A barra do topo do site é fixa: a âncora para um pouco abaixo dela. */
.post-conteudo h1,
.post-conteudo h2,
.post-conteudo h3,
.post-conteudo h4 {
color: var(--post-tinta);
font-family: var(--post-titulo);
font-weight: 600;
line-height: 1.3;
text-wrap: balance;
}
.post-conteudo h1 { font-size: 1.75rem; margin: 1.6em 0 .5em; }
.post-conteudo h2 { font-size: 1.35rem; margin: 2em 0 .6em; }
.post-conteudo h3 { font-size: 1.1rem; margin: 1.6em 0 .5em; }
.post-conteudo h4 { font-size: 1rem; margin: 1.4em 0 .4em; }
.post-conteudo [id] { scroll-margin-top: 110px; }
/* Ênfase */
.post-conteudo strong, .post-conteudo b { font-weight: 600; color: var(--post-tinta); }
.post-conteudo em, .post-conteudo i { font-style: italic; }
/* Links */
.post-conteudo a { color: var(--post-acento); text-decoration: underline; text-underline-offset: .15em; }
.post-conteudo a:hover { text-decoration-thickness: 2px; }
/* Listas (o Tailwind tira os marcadores; aqui eles voltam) */
.post-conteudo ul, .post-conteudo ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.post-conteudo ul { list-style: disc; }
.post-conteudo ol { list-style: decimal; }
.post-conteudo ul ul { list-style: circle; }
.post-conteudo li { margin: 0 0 .5em; padding-left: .2em; }
.post-conteudo li::marker { color: var(--post-suave); }
.post-conteudo li > ul, .post-conteudo li > ol { margin: .5em 0 0; }
/* Itens vazios dos posts antigos (
): sem marcador solto. Só o marcador some; o texto, se houver, fica. */
.post-conteudo li:has(> br:only-child)::marker { color: transparent; }
/* Citação em destaque */
.post-conteudo blockquote {
margin: 1.5em 0;
padding: .9em 1.2em;
background: var(--post-caixa);
border-left: 3px solid var(--post-acento);
border-radius: 0 8px 8px 0;
}
.post-conteudo blockquote p { margin: .4em 0; }
/* Linha divisória */
.post-conteudo hr { border: 0; border-top: 1px solid var(--post-linha); margin: 2em 0; }
/* Números de nota e citações */
.post-conteudo sup { font-size: .7em; line-height: 0; vertical-align: super; }
.post-conteudo sup.t a { text-decoration: none; font: 600 1em var(--post-titulo); }
/* Código */
.post-conteudo code { font: .9em var(--post-dados); background: var(--post-caixa); padding: .1em .3em; border-radius: 4px; }
.post-conteudo pre { overflow-x: auto; background: var(--post-caixa); padding: 1em; border-radius: 8px; }
.post-conteudo pre code { background: none; padding: 0; }
/* Imagens */
.post-conteudo img { max-width: 100%; height: auto; border-radius: 8px; }
.post-conteudo figure { margin: 1.8em 0; }
.post-conteudo figure img { display: block; margin: 0 auto; }
.post-conteudo figcaption {
margin-top: .5em;
font: .85rem/1.45 var(--post-titulo);
color: var(--post-suave);
text-align: center;
}
/* Imagens dos posts antigos (WordPress e Froala) */
.post-conteudo img.aligncenter, .post-conteudo img.fr-dib { display: block; margin: 1em auto; }
.post-conteudo .wp-block-image { margin: 1.5em 0; }
@media (min-width: 640px) {
.post-conteudo img.alignleft, .post-conteudo img.fr-fil { float: left; margin: .3em 1.2em 1em 0; max-width: 50%; }
.post-conteudo img.alignright, .post-conteudo img.fr-fir { float: right; margin: .3em 0 1em 1.2em; max-width: 50%; }
.post-conteudo .wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; align-items: center; }
}
@media (max-width: 639px) {
.post-conteudo img.alignleft, .post-conteudo img.alignright { display: block; margin: 1em auto; }
}
/* Tabelas (a skill manda dentro de