/*
Theme Name: Narniano
Theme URI: https://www.narniano.com/
Author: Rilson Joás
Description: Tema customizado para o portal Narniano & A Biblioteca.
Template: astra
Version: 1.4.0
Text Domain: narniano
*/

/* =========================================
   Design Narniano — Paleta & Tipografia
   ========================================= */

/* Google Fonts: Cormorant Garamond (títulos), EB Garamond (corpo), JetBrains Mono (código) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================
   Paleta de Cores — Design Narniano
   ========================================= */
:root {
    /* Variáveis do Astra (compatibilidade) — mapeadas pros 9 slots que o
       tema usa internamente (papel de cada um confirmado em
       class-astra-global-palette.php::get_palette_labels(), com
       color-palette-reorganize=false nesta instalação):
       0 Brand · 1 Alternate Brand · 2 Headings · 3 Text ·
       4 Secondary Background · 5 Primary Background ·
       6 Alternate Background · 7 Subtle Background · 8 Other Supporting.

       Auditoria completa dos 9 slots (2026-09-08), usando de fato onde
       cada um aparece no CSS renderizado (não só o nome do slot):

       - Slot 7 ("Subtle Background") — RESOLVIDO: estava em quase-preto,
         achado porque é esse slot que vira border-color entre conteúdo e
         sidebar (traço saía preto forte). Corrigido pra --narniano-card.
       - Slots 2 e 3 ("Headings"/"Text") — realinhados: o Astra usa slot 3
         direto em `body,h1-h6` e slot 2 em `.widget-title`/`.ast-archive-
         title`/etc, mas medindo o resultado renderizado de verdade
         (Playwright) a cor que REALMENTE aparece em título e corpo é a
         nossa (canela/grafite, via regras próprias deste child theme com
         mais especificidade) — os valores antigos desses 2 slots
         (vinho/cinza) nunca apareciam visíveis, mas ficariam errados em
         qualquer componente do Astra ainda não testado por aqui.
         Realinhados pra bater com o que já é real.
       - Slots 0,1,4,5 (Brand/Alt Brand/Secondary e Primary Background) —
         conferidos contra o uso real (link, hover, fundo de card/input) e
         fazem sentido, sem mudança.
       - Slot 6 ("Alternate Background") — só aparece como opção de cor
         de fundo escolhível no editor de blocos (Gutenberg), não em
         nenhum componente fixo do tema. Contraste calculado: texto padrão
         (grafite) sobre esse fundo dá 4.72:1, passa AA. Sem risco.
       - Slot 8 ("Other Supporting", quase-preto) — mesmo caso do 6, só
         opção no editor de blocos. **Risco real, não é bug de CSS**: se
         alguém escolher esse fundo sem também escolher texto claro, o
         texto padrão (grafite) dá 1.12:1 — praticamente ilegível. Não dá
         pra corrigir isso via CSS (depende da escolha de quem edita o
         conteúdo) — fica registrado como cuidado editorial no README. */
    --ast-global-color-0: #8A401C;
    --ast-global-color-1: #5E3A1E;
    --ast-global-color-2: #5E3A1E;
    --ast-global-color-3: #1A1A1A;
    --ast-global-color-4: #D9CEBD;
    --ast-global-color-5: #EDE6DA;
    --ast-global-color-6: #9A8254;
    --ast-global-color-7: #F4EFE6;
    --ast-global-color-8: #0D0D0D;

    /* Paleta principal — contrastes verificados (WCAG AA)
       Reauditado 2026-08-25: --laranja e --dourado no tom original só
       funcionam como cor decorativa/fundo — como TEXTO sobre --bege ou
       --creme eles ficavam em 2.4~3.7:1 (abaixo do mínimo 4.5:1 pra texto
       normal). Mesmo problema que o Lecionário já resolveu lá com o par
       dourado/dourado-texto — aplicando aqui a mesma solução: um tom
       escurecido só para uso como texto/link, mantendo o tom vivo pra
       fundos, bordas e ornamentos. */
    --narniano-canela: #5E3A1E;
    --narniano-laranja: #8A401C;        /* era #B85A2A — 2.98:1 no card / 3.73:1 no fundo. Este dá 4.77:1 / 5.98:1 */
    --narniano-laranja-vivo: #B85A2A;   /* tom original — só p/ fundo (branco em cima: 7.42:1) e acentos não-texto */
    --narniano-bege: #D9CEBD;
    --narniano-dourado: #9A8254;        /* só p/ uso decorativo: bordas, ornamento ✦ — como texto dá 2.37:1 no card */
    --narniano-dourado-texto: #63502F;  /* dourado escurecido p/ texto/links — 4.97:1 no card, 6.23:1 no fundo */
    --narniano-vinho: #3D2530;
    --narniano-grafite: #1A1A1A;
    --narniano-creme: #EDE6DA;
    --narniano-pedra: #4A4D50;          /* era #5A5D60 — 4.26:1 no card, abaixo do 4.5:1 exigido pra texto pequeno. Este dá 5.47:1 */

    /* Fundo dos cards */
    --narniano-card: #F4EFE6;

    /* Rodapé um pouco mais escuro que o fundo da página — se fosse o
       mesmo --bege, rodapé e conteúdo viram uma massa só (só o friso
       dourado no topo separava). pedra/dourado-texto (calibrados pro
       --bege claro) não alcançam 4.5:1 nesse tom mais escuro — por isso
       o texto do rodapé usa --canela/--vinho, que já existem na paleta. */
    --narniano-bege-escuro: #C2B291;

    /* Tipografia fluida */
    --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
    --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --fs-small: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
    --fs-meta: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);

    /* Layout */
    --content-width: 720px;
    --wide-width: 1100px;
    --spacing-section: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

/* =========================================
   Corpo — fundo sólido
   ========================================= */
body {
    color: var(--narniano-grafite);
    background-color: var(--narniano-bege);
    font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.8;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   Cards de conteúdo
   ========================================= */
/* Sem o prefixo .ast-separate-container: medi via DevTools que em página
   com Container = Plain (ex.: "Página de exemplo") o <article> não tinha
   NENHUM padding vertical — título colado no header (gap = 0px) e
   conteúdo colado no footer (gap = 0px), porque a regra só valia pro
   layout de card (.ast-separate-container). Tirando o prefixo, o padding
   passa a valer nos dois layouts — no card ele continua sendo o respiro
   interno de sempre; na página plana, ele passa a ser o respiro que
   faltava entre header/footer e o conteúdo. */
.ast-article-post,
.ast-article-single,
.comment-respond {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    box-shadow: none;
}

.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
    margin-bottom: 0;
}

/* O padding acima é do <article> (.ast-article-post), que fica transparente.
   Quem pinta o fundo do card de verdade é o .ast-article-inner por dentro
   dele — elemento diferente, e é nele que precisa de moldura pra não virar
   um retângulo solto sem definição. .comments-area e os widgets da sidebar
   (#secondary .widget) recebem o mesmo fundo (--ast-global-color-4) direto
   do Astra, então levam a mesma moldura pra não destoar do card do post. */
.ast-separate-container .ast-article-inner,
.ast-separate-container .comments-area,
.ast-separate-container #secondary .widget {
    border: 1px solid hsla(35, 30%, 30%, 0.15);
}

/* Espaço entre os cards na listagem do blog — sem isso eles se tocam
   direto, já que o padding do .ast-article-post fica todo por dentro. */
.ast-separate-container .ast-article-post {
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ast-separate-container .ast-article-post:last-child {
    margin-bottom: 0;
}

/* Listagem de posts (home/arquivo) em 1 coluna, não em grade —
   achado real (2026-09-08): o Astra força layout de grade (3 colunas)
   na listagem sempre que o addon pago "Astra Pro" não está ativo (ver
   inc/blog/blog.php, astra_primary_class_blog_layout — o próprio
   comentário do código já avisa: força blog-layout-4 se o Pro
   estiver desligado). Confirmado que o site real não usa Astra Pro,
   mas mesmo assim mostra lista de 1 coluna — causa exata não
   confirmável sem acesso ao servidor (suspeita: página em cache do
   LiteSpeed, servida de antes de alguma atualização do tema). Em vez
   de perseguir a causa exata pelo código, decisão pragmática: forçar
   o resultado visual certo direto por CSS, documentado como exceção
   deliberada (não é config nem achado escondido, é decisão
   de engenharia). */
#primary.ast-grid-3 .ast-article-post {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* =========================================
   Tipografia — hierarquia clara
   ========================================= */

/* Títulos: Cormorant Garamond */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    color: var(--narniano-canela);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.6em;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
}

p {
    margin-bottom: 1.5em;
}

/* =========================================
   Tabelas — sem estilo próprio, achado real testando (2026-09-08)
   ========================================= */
/* O Astra dá border a table/td/th por padrão, mas usa a mesma variável
   --ast-border-color do traço divisor conteúdo/sidebar (--ast-global-
   color-7, "Subtle Background", corrigida acima pra um tom bem claro).
   Funciona pro divisor (quer ser quase invisível), mas falha na tabela:
   sem fundo próprio, a borda quase-branca some contra o bege da página
   — tabela vira texto solto sem estrutura nenhuma visível. Mesma causa
   raiz da linha divisória, efeito oposto (lá sobrava contraste, aqui
   falta). Fundo próprio + borda dourada (mesmo tom já usado como borda
   de destaque no rodapé e na citação, linhas 514/579). */
.entry-content table {
    width: 100%;
    margin: 0 0 1.5em;
    background-color: var(--narniano-card);
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 0.7em 1em;
    border: 1px solid var(--narniano-dourado);
    text-align: left;
}

.entry-content th {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    background-color: var(--narniano-bege);
}

/* =========================================
   Post fixado (sticky) — indicador visual
   ========================================= */
/* Achado do Theme Unit Test (2026-09-08): o WordPress marca o post com
   a classe .sticky, mas sem estilo próprio ele fica indistinguível de
   um post comum — o próprio teste pede que seja "reconhecível". Usa o
   mesmo vocabulário decorativo já estabelecido no site (✦ dourado, já
   usado nas citações e no rodapé), não inventa elemento novo. */
.sticky .entry-header::before {
    content: "✦ Em destaque";
    display: block;
    margin-bottom: 0.6em;
    font-family: 'EB Garamond', serif;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--narniano-dourado-texto);
}

/* =========================================
   Capitular — letra iluminada na abertura do post
   ========================================= */
/* Elemento do Design Narniano (Guia Técnico do vault), técnica de
   manuscrito medieval, zero asset. Só no post individual (não na
   listagem, ficaria estranho num resumo cortado) e só no primeiro
   parágrafo. Cor --vinho, não --dourado — achado de contraste já
   documentado no próprio Guia Técnico (dourado sobre fundo claro dá
   ~2:1, falha WCAG; vinho dá 9.22:1 sobre --bege-areia). */
.ast-single-post .entry-content > p:first-of-type::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5em;
    font-weight: 700;
    line-height: 0.8;
    float: left;
    margin: 0.05em 0.1em 0 0;
    color: var(--narniano-vinho);
}

/* Largura máxima do texto — .entry-title e .entry-meta (a linha "Por
   [autor] / [data]") entram no mesmo grupo do .entry-content: são
   filhos de .entry-header, irmão de .entry-content dentro do
   <article>, e sem o mesmo max-width+centralização cada um fica com
   uma largura efetiva diferente — visível como desalinhamento entre
   título/data/corpo do texto (mais visível ainda em página com
   Container = Plain, que é bem mais larga que o card do blog).
   Achado real, medido com Playwright em 2026-09-08: .entry-meta tinha
   ficado de fora dessa lista na correção original do .entry-title, e
   sobrava 15px desalinhada da margem dos outros dois. */
.entry-content,
.page-content,
.post-content,
.entry-title,
.entry-meta,
.comments-area {
    max-width: var(--content-width);
}

/* =========================================
   Links — contraste adequado
   ========================================= */
/* Achado real (2026-09-10, no staging clonado do site real): o Astra
   (nesta versão, 4.13.11) tem uma regra própria — `body, h1-h6,
   .entry-title a, .entry-content :where(h1-h6) { color: var(--ast-
   global-color-7) }` — com especificidade MAIOR que um `a` solto
   (0,1,1 contra 0,0,1). Como especificidade decide antes de ordem de
   carregamento, essa regra do Astra ganhava do nosso link mesmo sendo
   ele carregado depois — só o :hover empatava em especificidade e aí
   sim a ordem (nosso tema por último) desempatava a nosso favor. Por
   isso o link aparecia pálido (cor de fundo sutil, --ast-global-
   color-7) só no estado padrão, e certo (laranja) só no hover.
   `!important` resolve de vez — e por isso as outras regras de link
   mais específicas deste arquivo (entry-meta, leia-mais, rodapé, menu
   do header) também precisam de `!important` pra continuar
   ganhando desta regra base, não só do Astra. */
a {
    color: var(--narniano-laranja) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--narniano-canela) !important;
}

/* =========================================
   Título do site — claro no header escuro
   ========================================= */
.site-title a,
.site-title a:focus,
.site-title a:hover,
.site-title a:visited {
    color: var(--narniano-creme) !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    letter-spacing: 0.02em;
}

/* =========================================
   Cabeçalho — escuro sólido
   ========================================= */

/* Sobrescreve o background gerado pelo customizer do Astra */
.ast-primary-header-bar,
.main-header-bar,
.site-primary-header-wrap {
    background-color: #1d1c1b !important;
}

/* Altura do header */
.site-primary-header-wrap {
    min-height: 80px !important;
}

/* Borda dourada inferior */
.ast-primary-header-bar {
    border-bottom-color: hsla(42, 35%, 54%, 0.3) !important;
}

/* Grid do Astra: alinhar conteúdo ao centro */
.site-primary-header-wrap .ast-builder-grid-row {
    align-items: center;
    min-height: 80px;
}

/* Seções do grid: alinhar verticalmente */
.site-header-primary-section-left,
.site-header-primary-section-right {
    align-self: center;
}

/* Menu: mesmo alinhamento vertical que o título */
.site-header-primary-section-right .main-header-menu {
    display: flex;
    align-items: center;
}

/* Achado (DevTools): o <ul> do menu herda o reset genérico `ol,ul{margin:0
   0 1.5em 3em}` do Astra (pensado pra listas de conteúdo, não pra nav) —
   isso empurrava o menu inteiro pro topo do header em vez de centralizar,
   apesar do align-items:center acima. Sem essa margem de 1.5em/3em, o
   menu centraliza igual ao título. */
.site-header-primary-section-right .main-header-menu ul {
    margin: 0;
}

.site-header-primary-section-right .menu-item {
    display: flex;
    align-items: center;
}

.site-header-primary-section-right .menu-item > a {
    color: hsl(42, 30%, 60%) !important;
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1em;
    transition: color 0.2s ease;
}

.site-header-primary-section-right .menu-item > a:hover {
    color: hsl(21, 55%, 52%) !important;
}

/* Botão mobile */
.main-header-bar .ast-button-wrap .menu-toggle {
    color: hsl(42, 30%, 60%) !important;
}

/* =========================================
   Botões
   ========================================= */
button, input[type=submit] {
    border-radius: 0;
    padding: 0.75em 1.8em;
    border: 0;
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
}

button:hover, input[type=submit]:hover {
    opacity: 0.9;
}

/* =========================================
   Meta de entrada — contraste adequado
   ========================================= */
.entry-meta, .entry-meta * {
    color: var(--narniano-pedra);
    font-family: 'EB Garamond', serif;
    font-size: var(--fs-meta);
    letter-spacing: 0.04em;
}

.entry-meta a:not(.ast-button) {
    color: var(--narniano-dourado-texto) !important;
}

.entry-meta a:not(.ast-button):hover,
.entry-meta a:not(.ast-button):focus {
    color: var(--narniano-laranja) !important;
}

/* =========================================
   Leia mais
   ========================================= */
.ast-read-more-container a {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--narniano-laranja) !important;
}

.ast-read-more-container a:hover {
    color: var(--narniano-canela) !important;
}

/* =========================================
   Citações — moldura clássica
   ========================================= */
blockquote, .wp-block-quote {
    position: relative;
    border: 1px solid hsla(25, 30%, 30%, 0.1);
    background-color: var(--narniano-card);
    padding: clamp(1.5em, 1em + 2vw, 2.5em);
    margin: var(--spacing-section) 0;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    line-height: 1.7;
    color: var(--narniano-canela);
}

blockquote::before, .wp-block-quote::before {
    content: "✦";
    position: absolute;
    top: -0.6em;
    left: 1.5em;
    background-color: var(--narniano-card);
    padding: 0 0.3em;
    font-size: 1rem;
    line-height: 1;
    color: var(--narniano-dourado);
    font-style: normal;
}

blockquote::after, .wp-block-quote::after {
    content: "✦";
    position: absolute;
    bottom: -0.6em;
    right: 1.5em;
    background-color: var(--narniano-card);
    padding: 0 0.3em;
    font-size: 1rem;
    line-height: 1;
    color: var(--narniano-dourado);
    font-style: normal;
}

/* Itálico-assinatura (Guia Técnico do vault) — gesto tipográfico
   recorrente da identidade, usado aqui na atribuição da citação e no
   nome do autor do post. Cormorant Garamond itálico + --canela, no
   lugar do texto normal/cinza que tinha antes. */
blockquote cite, .wp-block-quote cite {
    display: block;
    margin-top: 0.8em;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-body);
    font-style: italic;
    font-weight: 500;
    color: var(--narniano-canela);
    letter-spacing: 0.02em;
}

.entry-meta .author-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
}

/* =========================================
   Links "Responder" / "Editar" de cada comentário
   ========================================= */
/* Achado real (2026-09-08): o Astra dá display:block de fábrica pro link
   "Responder" e deixa "Editar" (só aparece pra quem tem permissão) como
   inline — cada um quebra de um jeito diferente, ficam desalinhados. A
   cor/hover em si já batem (os dois herdam --narniano-laranja), só o
   layout que precisava de ajuste. */
.ast-comment-edit-reply-wrap {
    display: flex;
    align-items: center;
    gap: 1em;
}

.ast-comment-edit-reply-wrap .comment-reply-link,
.ast-comment-edit-reply-wrap .comment-edit-link {
    display: inline-block;
    vertical-align: baseline;
}

/* =========================================
   Formulário de comentários
   ========================================= */
.comments-area .comment-form-comment textarea,
.comments-area .comment-form-comment input[type="text"] {
    width: 100%;
    border: 1px solid hsla(25, 30%, 30%, 0.15);
    border-radius: 0;
    padding: 0.8em;
    margin-bottom: 0.8em;
    font-family: 'EB Garamond', serif;
    font-size: var(--fs-body);
    background-color: var(--narniano-card);
    color: var(--narniano-grafite);
}

.comments-area .comment-form-comment textarea:focus,
.comments-area .comment-form-comment input[type="text"]:focus {
    outline: 2px solid var(--narniano-dourado);
    outline-offset: 2px;
}

.comments-area .form-submit input[type="submit"],
.comments-area .form-submit button {
    background: var(--narniano-laranja);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 0.8em 2em;
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.comments-area .form-submit input[type="submit"]:hover,
.comments-area .form-submit button:hover {
    background: var(--narniano-canela);
}

/* =========================================
   Rodapé — bege com borda sutil
   ========================================= */

/* Caixa externa do rodapé — fundo mais escuro que o conteúdo (senão os
   dois viram uma massa só, só separada pelo friso) + friso dourado no topo */
.site-footer,
.site-below-footer-wrap {
    background-color: var(--narniano-bege-escuro) !important;
    border-top: 1px solid var(--narniano-dourado) !important;
}

/* Conteúdo interno — .ast-footer-overlay não existe nesta versão do Astra
   (a classe real da linha do rodapé é .ast-builder-footer-grid-columns);
   por isso o padding generoso e o ornamento ✦ abaixo nunca apareciam.
   Texto em --canela, não --pedra: pedra/dourado-texto são calibrados pro
   --bege claro do conteúdo (4.5:1+) e caem pra ~3.7-4.1:1 no
   --bege-escuro do rodapé — --canela mantém 4.8:1 aqui. */
.ast-builder-footer-grid-columns {
    text-align: center;
    padding: var(--spacing-section) 1.5em;
    font-family: 'EB Garamond', serif;
    font-size: var(--fs-meta);
    color: var(--narniano-canela);
}

.ast-builder-footer-grid-columns::before {
    content: "✦";
    display: block;
    font-size: 1rem;
    color: var(--narniano-canela);
    margin-bottom: 0.8em;
}

/* Texto do copyright no rodapé */
.ast-footer-copyright,
.ast-footer-copyright p,
.ast-footer-copyright a {
    color: var(--narniano-canela) !important;
    background-color: transparent !important;
}

.ast-footer-copyright a:hover {
    color: var(--narniano-vinho) !important;
}

/* =========================================
   Separador decorativo
   ========================================= */
hr {
    border: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--narniano-dourado),
        transparent
    );
    margin: var(--spacing-section) 0;
    opacity: 0.5;
}

/* =========================================
   Código — JetBrains Mono
   ========================================= */
code, pre, .wp-block-code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.88em;
}

pre {
    background-color: var(--narniano-grafite);
    color: var(--narniano-bege);
    padding: clamp(1em, 0.8em + 1vw, 1.5em);
    border-left: 3px solid var(--narniano-dourado);
    overflow-x: auto;
    line-height: 1.6;
}

code {
    background-color: var(--narniano-card);
    padding: 0.15em 0.4em;
    border: 1px solid hsla(25, 30%, 30%, 0.1);
}

/* =========================================
   Imagens
   ========================================= */
img {
    border-radius: 2px;
    max-width: 100%;
    height: auto;
}

.wp-block-image figcaption {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--narniano-pedra);
    font-size: var(--fs-meta);
    margin-top: 0.5em;
}

/* =========================================
   Posts relacionados — contraste no fundo dourado
   ========================================= */
/* Achado real (2026-09-10, no staging com conteúdo real): o Astra pinta
   essa seção com fundo dourado (mesmo tom do slot 6 já auditado como
   "Alternate Background") mas usa as cores de texto pensadas pra fundo
   CLARO (canela, creme, grafite-cinza, dourado-texto) — nenhuma delas
   foi pensada pra esse fundo médio específico. Medido com Playwright:
   os 4 elementos ficavam entre 2.09:1 e 3.22:1, todos abaixo do mínimo
   de 4.5:1. Testadas as opções da paleta contra esse fundo exato
   (#9A8254) — só a grafite passa (4.72:1); nem as claras nem as
   escuras da paleta "normal" davam conta desse tom médio. Unificado
   tudo em grafite; o link de categoria segue o mesmo padrão do resto
   do site (cor igual ao texto, muda só no hover). */
.ast-related-posts-title,
.ast-related-post-title a,
.ast-related-post .entry-meta,
.ast-related-post .entry-meta a {
    color: var(--narniano-grafite) !important;
}

.ast-related-post .entry-meta a:hover {
    color: var(--narniano-vinho) !important;
}

/* Linha divisória acima da seção — vinha no cinza genérico do Astra
   (#eeeeee), destoando do resto do site (tudo em tom quente). */
.ast-related-posts-title-section {
    border-color: hsla(25, 30%, 30%, 0.15) !important;
}

/* =========================================
   Responsividade
   ========================================= */
@media (max-width: 576px) {
    body {
        line-height: 1.7;
        padding-left: 1em;
        padding-right: 1em;
    }

    .main-header-bar {
        padding: 0.4em 0;
    }

    .main-header-bar .main-header-menu .menu-item > a {
        font-size: var(--fs-meta);
        padding: 0.5em 0.6em;
    }

    blockquote, .wp-block-quote {
        padding: 1em 1.2em;
        margin-left: 0;
        margin-right: 0;
    }

    pre {
        padding: 1em;
        font-size: 0.82em;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    .entry-content,
    .page-content,
    .post-content,
    .entry-title,
    .comments-area {
        max-width: 90%;
    }
}

@media (min-width: 993px) {
    .entry-content,
    .page-content,
    .post-content,
    .entry-title,
    .comments-area {
        max-width: var(--content-width);
        margin-left: auto;
        margin-right: auto;
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    a { color: #000; text-decoration: underline; }

    .main-header-bar,
    .ast-footer-overlay,
    .ast-read-more-container,
    .comments-area { display: none; }
}