/*
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.1
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: hsla(35, 30%, 30%, 0.15); /* Divisores e bordas em tom canela/areia suave */
    --ast-border-color: hsla(35, 30%, 30%, 0.15);
    --ast-single-post-border: hsla(35, 30%, 30%, 0.15);
    --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 editorial (otimizada para leitura confortável em EB Garamond) */
    --fs-body: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-h1: clamp(2.5rem, 1.8rem + 2.5vw, 3.85rem);
    --fs-h2: clamp(1.65rem, 1.35rem + 1.2vw, 2.35rem);
    --fs-h3: clamp(1.35rem, 1.18rem + 0.7vw, 1.75rem);
    --fs-h4: clamp(1.18rem, 1.08rem + 0.4vw, 1.4rem);
    --fs-small: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --fs-meta: clamp(0.88rem, 0.82rem + 0.2vw, 0.95rem);

    /* Layout */
    --content-width: 740px;
    --wide-width: 1120px;
    --spacing-section: clamp(2.2rem, 1.8rem + 2vw, 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.85;
    letter-spacing: 0.012em;
    -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. */
/* Molduras e profundidade dos cards na listagem e páginas */
.ast-separate-container .ast-article-inner {
    background-color: #ffffff !important;
    border: 1px solid hsla(35, 30%, 30%, 0.15) !important;
    border-radius: 6px !important;
    padding: clamp(1.8rem, 1.3rem + 1.8vw, 3rem) clamp(1.6rem, 1.1rem + 1.8vw, 2.8rem) !important;
    box-shadow: 0 4px 18px rgba(44, 24, 16, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.ast-separate-container .ast-article-post:hover .ast-article-inner {
    box-shadow: 0 10px 28px rgba(44, 24, 16, 0.08) !important;
    border-color: hsla(35, 30%, 30%, 0.28) !important;
}

.ast-separate-container .comments-area,
.ast-separate-container #secondary .widget {
    border: 1px solid hsla(35, 30%, 30%, 0.15);
    border-radius: 6px;
}

/* Espaço entre os cards na listagem do blog */
.ast-separate-container .ast-article-post {
    margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem) !important;
}

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

/* Listagem de posts (home/arquivo) em 1 coluna, não em grade */
#primary.ast-grid-3 .ast-article-post {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* =========================================
   Categorias / Taxonomias — Badge Editorial
   ========================================= */
.ast-taxonomy-container,
.cat-links,
.ast-article-post .cat-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    margin-bottom: 0.85em !important;
    font-size: 0 !important;
}

.ast-taxonomy-container a,
.cat-links a,
.ast-article-post .cat-links a {
    display: inline-block !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: clamp(0.78rem, 0.74rem + 0.15vw, 0.88rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--narniano-dourado-texto) !important;
    background-color: hsla(42, 45%, 45%, 0.1) !important;
    padding: 0.28em 0.8em !important;
    border-radius: 3px !important;
    border: 1px solid hsla(42, 45%, 45%, 0.22) !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0.55rem 0.15rem 0 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.ast-taxonomy-container a:hover,
.cat-links a:hover,
.ast-article-post .cat-links a:hover {
    color: var(--narniano-laranja) !important;
    background-color: hsla(21, 55%, 52%, 0.12) !important;
    border-color: var(--narniano-laranja) !important;
    transform: translateY(-1px);
}

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

/* Títulos: Cormorant Garamond com proporções elegantes */
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-top: 1.8em;
    margin-bottom: 0.6em;
}

h1,
.entry-title,
h1.entry-title,
.ast-single-post .entry-title {
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
    font-size: var(--fs-h1) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.022em !important;
    color: var(--narniano-canela) !important;
    margin-top: 0 !important;
    margin-bottom: 0.35em !important;
}

.ast-article-post .entry-title,
.ast-article-post h2.entry-title {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.018em !important;
    margin-top: 0.15em !important;
    margin-bottom: 0.4em !important;
}

.ast-article-post .entry-title a {
    color: var(--narniano-canela) !important;
    text-decoration: none !important;
    transition: color 0.22s ease !important;
}

.ast-article-post .entry-title a:hover {
    color: var(--narniano-laranja) !important;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.28;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.35;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.4;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

p {
    margin-bottom: 1.6em;
    line-height: 1.85;
}

.entry-content {
    font-size: var(--fs-body);
    line-height: 1.85;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.6em;
    padding-left: 1.8em;
}

.entry-content li {
    margin-bottom: 0.5em;
    line-height: 1.8;
}

/* =========================================
   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);
}

/* Peso do título — vinha em 400 (regular), fino demais pra ser o
   elemento de maior hierarquia do card. O botão "Leia mais" logo
   abaixo (600, maiúsculas) acabava com mais presença visual que o
   próprio título. Cormorant Garamond aguenta 600 bem (já importado). */


/* =========================================
   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,
.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 !important;
    font-weight: 700 !important;
    font-size: clamp(1.55rem, 1.45rem + 0.35vw, 1.85rem) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
}

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

/* Sobrescreve o background gerado pelo customizer do Astra.
   Era #1d1c1b (quase preto puro) — feedback do autor (2026-09-10):
   muito escuro, sem ligação com o resto da paleta. Trocado pro vinho
   (já usado em outros lugares do site, não é tom novo) — contraste
   ainda com folga: 5.78:1 pro texto do menu, 12.37:1 pro nome do site. */
.ast-primary-header-bar,
.main-header-bar,
.site-primary-header-wrap {
    background-color: var(--narniano-vinho) !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 Cabeçalho e Menus — Alinhamento em 1 Linha Contínua (Sem Quebra de Linha) */
.site-primary-header-wrap .ast-builder-grid-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 80px;
}

.site-header-primary-section-left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 1rem !important;
}

.site-header-primary-section-right {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
}

.site-header-primary-section-right .main-navigation {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.site-header-primary-section-right .main-header-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
}

.site-header-primary-section-right .main-header-menu ul {
    margin: 0 !important;
}

.site-header-primary-section-right .menu-item {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.site-header-primary-section-right .menu-item > a {
    color: hsl(42, 30%, 60%) !important;
    font-family: 'EB Garamond', serif !important;
    font-weight: 500 !important;
    font-size: clamp(0.76rem, 0.68rem + 0.22vw, 0.92rem) !important;
    letter-spacing: clamp(0.03em, 0.02em + 0.04vw, 0.07em) !important;
    text-transform: uppercase !important;
    padding: 0 clamp(0.35em, 0.2em + 0.4vw, 0.85em) !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

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

/* =========================================
   Botão Menu Mobile (Hambúrguer) — Alto Contraste no Header Escuro
   ========================================= */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon svg path,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle,
.ast-header-break-point .main-header-bar .ast-button-wrap .menu-toggle,
.ast-header-break-point .ast-mobile-menu-buttons .menu-toggle {
    color: var(--narniano-creme) !important;
    fill: var(--narniano-creme) !important;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:hover .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:hover svg path,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}
.main-header-bar .ast-button-wrap .menu-toggle,
.main-header-bar .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle,
[data-section="section-header-mobile-trigger"] .menu-toggle,
button.menu-toggle.main-header-menu-toggle,
button.ast-mobile-menu-trigger-minimal,
button.ast-mobile-menu-trigger-fill,
button.ast-mobile-menu-trigger-outline {
    color: var(--narniano-creme) !important;
    border-color: hsla(42, 35%, 65%, 0.3) !important;
    background: transparent !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.main-header-bar .menu-toggle svg,
.main-header-bar .menu-toggle svg path,
.menu-toggle .ast-mobile-svg,
.menu-toggle .ast-menu-svg,
.mobile-menu-toggle-icon svg,
.mobile-menu-toggle-icon svg path,
[data-section="section-header-mobile-trigger"] .ast-mobile-svg {
    fill: var(--narniano-creme) !important;
    color: var(--narniano-creme) !important;
    stroke: none !important;
    transition: fill 0.2s ease !important;
}

/* Hover e Foco no botão mobile */
.main-header-bar .menu-toggle:hover,
.main-header-bar .menu-toggle:focus,
[data-section="section-header-mobile-trigger"] .menu-toggle:hover,
[data-section="section-header-mobile-trigger"] .menu-toggle:focus {
    color: var(--narniano-creme) !important;
    transform: scale(1.05);
}

.main-header-bar .menu-toggle:hover svg,
.main-header-bar .menu-toggle:hover svg path,
.main-header-bar .menu-toggle:focus svg,
.main-header-bar .menu-toggle:focus svg path,
[data-section="section-header-mobile-trigger"] .menu-toggle:hover .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .menu-toggle:focus .ast-mobile-svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* =========================================
   Gaveta / Popup do Menu Mobile — Elegância em Vinho Escuro
   ========================================= */
.ast-mobile-header-content,
.ast-mobile-header-wrap,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-header,
.main-header-bar-navigation {
    background-color: var(--narniano-vinho) !important;
}

.ast-builder-menu-mobile .main-navigation,
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-mobile-header-content .main-header-menu,
.ast-mobile-popup-drawer .main-header-menu {
    background-color: transparent !important;
}

.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item > a,
.ast-mobile-header-content .menu-item a,
.ast-mobile-popup-drawer .menu-item a,
.ast-mobile-header-content .main-navigation a {
    color: var(--narniano-creme) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid hsla(42, 35%, 54%, 0.18) !important;
    padding: 0.9em 1.2em !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
}

.ast-builder-menu-mobile .main-navigation .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
.ast-mobile-header-content .menu-item a:hover,
.ast-mobile-popup-drawer .menu-item a:hover,
.ast-mobile-header-content .menu-item.current-menu-item a {
    color: var(--narniano-laranja-vivo) !important;
    background-color: hsla(42, 35%, 54%, 0.12) !important;
}

/* Ícones de seta do submenu mobile (chevron) */
.ast-builder-menu-mobile .main-navigation .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .ast-menu-toggle svg,
.ast-builder-menu-mobile .main-navigation .ast-menu-toggle svg path {
    color: var(--narniano-creme) !important;
    fill: var(--narniano-creme) !important;
}

/* Botão de Fechar do popup mobile (X) */
.ast-mobile-popup-drawer .ast-mobile-popup-close,
.ast-mobile-popup-drawer .ast-mobile-popup-close svg,
.ast-mobile-popup-drawer .ast-mobile-popup-close svg path {
    color: var(--narniano-creme) !important;
    fill: var(--narniano-creme) !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 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.85rem !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: var(--fs-meta) !important;
    letter-spacing: 0.04em !important;
    color: var(--narniano-pedra) !important;
}

.entry-meta, .entry-meta * {
    color: var(--narniano-pedra);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: var(--fs-meta);
    letter-spacing: 0.04em;
}

.entry-meta::before,
.entry-meta::after,
.entry-meta > *:first-child::before,
.entry-meta .posted-by::before,
.entry-meta .posted-on::before {
    content: none !important;
    display: none !important;
}

.ast-meta-separator {
    color: var(--narniano-pedra) !important;
    opacity: 0.6 !important;
    margin: 0 0.35em !important;
    font-style: normal !important;
    display: inline-block !important;
}

.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;
}

/* =========================================
   Resumo e Leia mais — Design Editorial
   ========================================= */
.ast-article-post .ast-excerpt-container {
    margin-top: 0.4em !important;
    margin-bottom: 1.2em !important;
}

.ast-article-post .ast-excerpt-container p {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: var(--fs-body) !important;
    line-height: 1.85 !important;
    color: var(--narniano-grafite) !important;
    margin-bottom: 0 !important;
}

.ast-read-more-container,
.ast-article-post .ast-read-more-container {
    margin-top: 1.1em !important;
    margin-bottom: 0 !important;
}

.ast-read-more-container a,
.ast-article-post .ast-read-more-container a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35em !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--narniano-laranja) !important;
    padding-bottom: 2px !important;
    border-bottom: 2px solid hsla(21, 55%, 52%, 0.3) !important;
    transition: all 0.25s ease !important;
}

.ast-read-more-container a:hover,
.ast-article-post .ast-read-more-container a:hover {
    color: var(--narniano-canela) !important;
    border-bottom-color: var(--narniano-canela) !important;
    transform: translateX(4px) !important;
}

/* =========================================
   Citações — moldura clássica
   ========================================= */
blockquote,
.wp-block-quote,
.wp-block-quote.is-style-large,
.wp-block-quote.is-large,
.wp-block-quote.is-style-plain {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    border: 1px solid hsla(25, 30%, 30%, 0.12) !important;
    border-radius: 4px;
    background-color: #ffffff !important;
    padding: clamp(1.4em, 1.1em + 1.8vw, 2.4em) !important;
    margin: var(--spacing-section) 0 !important;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
    line-height: 1.8;
    color: var(--narniano-canela);
    overflow-wrap: break-word;
    word-break: normal;
}

blockquote p,
.wp-block-quote p,
.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
    margin: 0 0 0.8em 0 !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0 !important;
}

blockquote p:last-child,
.wp-block-quote p:last-of-type,
.wp-block-quote.is-style-large p:last-of-type,
.wp-block-quote.is-large p:last-of-type {
    margin-bottom: 0 !important;
}

/* Tamanho de destaque para citações grandes */
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    line-height: 1.65;
}

/* Ornamentos nos cantos (✦) exclusivos para blockquotes normais */
blockquote:not(.wp-block-pullquote blockquote)::before,
.wp-block-quote:not(.wp-block-pullquote blockquote)::before {
    content: "✦";
    position: absolute;
    top: -0.55em;
    left: 1.2em;
    background-color: var(--narniano-card);
    padding: 0 0.35em;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--narniano-dourado);
    font-style: normal;
    z-index: 2;
}

blockquote:not(.wp-block-pullquote blockquote)::after,
.wp-block-quote:not(.wp-block-pullquote blockquote)::after {
    content: "✦";
    position: absolute;
    bottom: -0.55em;
    right: 1.2em;
    background-color: var(--narniano-card);
    padding: 0 0.35em;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--narniano-dourado);
    font-style: normal;
    z-index: 2;
}

/* Itálico-assinatura na atribuição da citação */
blockquote cite, 
.wp-block-quote cite, 
.wp-block-quote__citation,
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-large cite {
    display: block;
    margin: 1.2em 0 0 0 !important;
    padding: 0 !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
    font-style: italic;
    font-weight: 600;
    color: var(--narniano-canela) !important;
    letter-spacing: 0.02em;
    text-align: right;
    line-height: 1.4;
}

blockquote cite::before,
.wp-block-quote cite::before,
.wp-block-quote__citation::before,
.wp-block-quote.is-style-large cite::before {
    content: "— ";
}

/* Anula quebras de linha acidentais dentro do cite inseridas pelo editor */
blockquote cite br,
.wp-block-quote cite br {
    display: none !important;
}

/* Alinhamentos do bloco Gutenberg */
.wp-block-quote.has-text-align-right {
    text-align: right;
}

.wp-block-quote.has-text-align-center {
    text-align: center;
}

.wp-block-quote.has-text-align-center cite {
    text-align: center;
}

.wp-block-quote.has-text-align-left {
    text-align: left;
}

/* =========================================
   Pullquote Gutenberg — Destaque Nobre
   ========================================= */
.wp-block-pullquote,
figure.wp-block-pullquote {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
    margin: var(--spacing-section) 0 !important;
    padding: clamp(2rem, 1.6rem + 1.5vw, 3rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.8rem) !important;
    background-color: #ffffff !important;
    border-top: 2px solid var(--narniano-dourado) !important;
    border-bottom: 2px solid var(--narniano-dourado) !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
}

/* Anula o ícone de aspas Helvetica 6rem injetado pelo Astra Dynamic CSS */
.wp-block-pullquote::before,
.wp-block-pullquote::after,
figure.wp-block-pullquote::before,
figure.wp-block-pullquote::after,
.wp-block-pullquote blockquote::before,
.wp-block-pullquote blockquote::after,
figure.wp-block-pullquote blockquote::before,
figure.wp-block-pullquote blockquote::after {
    content: none !important;
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    transform: none !important;
}

.wp-block-pullquote blockquote,
figure.wp-block-pullquote blockquote {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.wp-block-pullquote p,
figure.wp-block-pullquote p {
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
    font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem) !important;
    line-height: 1.55 !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: var(--narniano-canela) !important;
    margin: 0 0 0.8em 0 !important;
    padding: 0 !important;
}

.wp-block-pullquote cite,
.wp-block-pullquote figcaption,
.wp-block-pullquote .wp-block-pullquote__citation,
figure.wp-block-pullquote cite,
figure.wp-block-pullquote figcaption {
    display: block !important;
    margin-top: 1.2em !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: var(--fs-small) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--narniano-dourado-texto) !important;
    text-align: center !important;
}

.wp-block-pullquote cite::before,
.wp-block-pullquote figcaption::before,
.wp-block-pullquote .wp-block-pullquote__citation::before,
figure.wp-block-pullquote cite::before,
figure.wp-block-pullquote figcaption::before {
    content: "✦ " !important;
    color: var(--narniano-dourado) !important;
}

.wp-block-pullquote.is-style-solid-color {
    background-color: #ffffff !important;
}

.entry-meta,
.ast-single-post .entry-meta,
.ast-article-post .entry-meta {
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
    font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.18rem) !important;
    color: var(--narniano-pedra) !important;
    margin-top: 0.2em !important;
    margin-bottom: 1.8em !important;
    line-height: 1.4 !important;
}

.entry-meta a,
.entry-meta .author-name,
.entry-meta .posted-by a,
.entry-meta .posted-on a {
    color: var(--narniano-dourado-texto) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    transition: color 0.2s ease !important;
}

.entry-meta a:hover {
    color: var(--narniano-laranja) !important;
}

/* =========================================
   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 — Design Narniano
   ========================================= */
.comments-area,
.comment-respond {
    margin-top: var(--spacing-section);
}

.comment-reply-title {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
    font-size: var(--fs-h2) !important;
    font-weight: 600 !important;
    color: var(--narniano-canela) !important;
    margin-top: 0 !important;
    margin-bottom: 0.4em !important;
}

.comment-notes,
.logged-in-as {
    font-family: 'EB Garamond', serif !important;
    font-size: var(--fs-small) !important;
    font-style: italic !important;
    color: var(--narniano-pedra) !important;
    margin-bottom: 1.5em !important;
    line-height: 1.6 !important;
}

/* Todos os campos de texto do formulário (textarea, autor, email, url) — alta especificidade contra Astra */
.ast-separate-container .comment-respond input[type="text"],
.ast-separate-container .comment-respond input[type="email"],
.ast-separate-container .comment-respond input[type="url"],
.ast-separate-container .comment-respond textarea,
#ast-commentform input[type="text"],
#ast-commentform input[type="email"],
#ast-commentform input[type="url"],
#ast-commentform textarea,
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea,
#author, #email, #url, #comment {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid hsla(25, 30%, 30%, 0.18) !important;
    border-radius: 4px !important;
    padding: 0.85em 1.1em !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: var(--fs-body) !important;
    background-color: #ffffff !important;
    color: var(--narniano-grafite) !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.comments-area textarea,
.comment-respond textarea,
#ast-commentform textarea,
#comment {
    min-height: 140px !important;
    margin-bottom: 1.2em !important;
}

/* Placeholders harmoniosos e elegantes em EB Garamond */
.comments-area input::placeholder,
.comments-area textarea::placeholder,
.comment-respond input::placeholder,
.comment-respond textarea::placeholder,
#ast-commentform input::placeholder,
#ast-commentform textarea::placeholder {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-style: italic !important;
    color: var(--narniano-pedra) !important;
    opacity: 0.85 !important;
    font-size: 1em !important;
}

/* Estado de foco suave */
.ast-separate-container .comment-respond input:focus,
.ast-separate-container .comment-respond textarea:focus,
#ast-commentform input:focus,
#ast-commentform textarea:focus,
.comments-area input:focus,
.comments-area textarea:focus {
    border-color: var(--narniano-laranja) !important;
    outline: 2px solid var(--narniano-dourado) !important;
    outline-offset: 1px !important;
    background-color: #ffffff !important;
}

/* Alinhamento perfeito das colunas Nome / E-mail / Site com o Textarea acima */
.ast-comment-formwrap.ast-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.6rem !important;
    margin-right: -0.6rem !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
}

.ast-comment-formwrap .comment-form-author,
.ast-comment-formwrap .comment-form-email,
.ast-comment-formwrap .comment-form-url {
    flex: 1 1 0% !important;
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    margin-bottom: 1em !important;
    box-sizing: border-box !important;
    float: none !important;
}

@media (max-width: 599px) {
    .ast-comment-formwrap.ast-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ast-comment-formwrap .comment-form-author,
    .ast-comment-formwrap .comment-form-email,
    .ast-comment-formwrap .comment-form-url {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0.9em !important;
    }
}

/* Consentimento de cookies e checkbox */
.comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.7em !important;
    margin: 1.2em 0 1.6em 0 !important;
    line-height: 1.5 !important;
}

.comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 0.3em !important;
    accent-color: var(--narniano-laranja) !important;
    width: 1.1em !important;
    height: 1.1em !important;
    cursor: pointer !important;
}

.comment-form-cookies-consent label {
    font-family: 'EB Garamond', serif !important;
    font-size: var(--fs-small) !important;
    color: var(--narniano-pedra) !important;
    cursor: pointer !important;
}

/* Botão Enviar Comentário */
.comments-area .form-submit input[type="submit"],
.comments-area .form-submit button,
.comment-respond .form-submit input[type="submit"],
#commentform input[type="submit"] {
    background-color: var(--narniano-laranja) !important;
    color: #ffffff !important;
    border: 1px solid var(--narniano-laranja) !important;
    border-radius: 4px !important;
    padding: 0.9em 2.4em !important;
    font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
}

.comments-area .form-submit input[type="submit"]:hover,
.comments-area .form-submit button:hover,
.comment-respond .form-submit input[type="submit"]:hover,
#commentform input[type="submit"]:hover {
    background-color: var(--narniano-canela) !important;
    border-color: var(--narniano-canela) !important;
    color: #ffffff !important;
}

/* =========================================
   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 — Design Editorial Nobre
   ========================================= */
.ast-single-related-posts-container {
    background-color: var(--narniano-card) !important;
    border: 1px solid hsla(35, 30%, 30%, 0.15) !important;
    border-radius: 6px !important;
    margin-top: var(--spacing-section) !important;
    margin-bottom: var(--spacing-section) !important;
    padding: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) !important;
    box-shadow: 0 4px 18px rgba(44, 24, 16, 0.04) !important;
}

/* Título da Seção: ✦ Posts Relacionados ✦ */
.ast-related-posts-title-section {
    position: relative !important;
    text-align: center !important;
    margin-bottom: 1.8rem !important;
    padding: 0 !important;
    border: none !important;
}

.ast-related-posts-title-section::before {
    content: none !important;
    display: none !important;
}

.ast-related-posts-title,
.ast-single-related-posts-container .ast-related-posts-title {
    font-family: "Cormorant Garamond", "EB Garamond", serif !important;
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.95rem) !important;
    font-weight: 700 !important;
    color: var(--narniano-canela) !important;
    text-align: center !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6em !important;
}

.ast-related-posts-title::before,
.ast-related-posts-title::after {
    content: "✦";
    font-size: 0.85rem;
    color: var(--narniano-dourado);
    font-weight: normal;
}

/* Grid / Wrapper de Posts Relacionados */
.ast-related-posts-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
}

.ast-related-post {
    flex: 1 1 280px !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.ast-related-posts-inner-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Imagem de Destaque */
.ast-related-post-featured-section {
    margin-bottom: 0.9em !important;
}

.ast-related-post-featured-section img {
    border-radius: 4px !important;
    border: 1px solid hsla(35, 30%, 30%, 0.15) !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ast-related-post:hover .ast-related-post-featured-section img {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(44, 24, 16, 0.12) !important;
}

/* TÍTULO DO POST RELACIONADO — Override de alta especificidade */
.ast-related-post .ast-related-post-title,
.ast-related-post h3.ast-related-post-title,
.ast-related-post h3.entry-title,
.ast-related-post .entry-title,
.ast-related-post h3 {
    font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif !important;
    font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.45rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.012em !important;
    margin-top: 0 !important;
    margin-bottom: 0.45em !important;
    color: var(--narniano-canela) !important;
}

.ast-related-post .ast-related-post-title a,
.ast-related-post h3.entry-title a,
.ast-related-post .entry-title a {
    color: var(--narniano-canela) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ast-related-post .ast-related-post-title a:hover,
.ast-related-post h3.entry-title a:hover,
.ast-related-post .entry-title a:hover {
    color: var(--narniano-laranja) !important;
}

/* Metadados do Post Relacionado — Linha contínua harmoniosa */
.ast-related-post .entry-meta,
.ast-related-post header.entry-header .entry-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35em !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.92rem) !important;
    font-style: italic !important;
    color: var(--narniano-pedra) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.ast-related-post .entry-meta a {
    color: var(--narniano-dourado-texto) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    transition: color 0.2s ease !important;
}

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

.ast-related-post .entry-meta .ast-taxonomy-container,
.ast-related-post .entry-meta .cat-links {
    display: inline-flex !important;
    margin: 0 !important;
    gap: 0.35em !important;
}

.ast-related-post .entry-meta .cat-links a {
    font-size: 0.72rem !important;
    padding: 0.15em 0.55em !important;
    margin: 0 !important;
}

/* =========================================
   Revisão manual 2026-09-10 — 2ª leva de achados
   ========================================= */
/* Título de widget clássico (ex.: "Posts recentes") — creme sobre bege,
   1.36:1, quase invisível. Diferente do widget em bloco Gutenberg que
   já funcionava certo; este é .widget-title do Astra clássico. */
.widget-title {
    color: var(--narniano-grafite) !important;
}

/* Ícones de redes sociais — o preenchimento do ícone (laranja-texto)
   ficava quase da mesma cor do fundo do círculo (canela), 1.35:1.
   Ícone precisa de um tom bem mais claro que o círculo. */
.wp-block-social-links .wp-social-link svg {
    fill: var(--narniano-creme) !important;
}

/* "Conheça também" no rodapé (bloco HTML customizado do site real, com
   estilo inline pensado pra fundo escuro — cor branca, borda branca a
   15%). Aqui o fundo é --bege-escuro (mais claro), então o branco quase
   some (2.09:1). Mesma correção que já valeu pra "Posts relacionados":
   troca pra --canela, que já é comprovado (4.8:1) nesse fundo — é a
   mesma cor que o resto do rodapé (.ast-footer-copyright) já usa. */
.footer-widget-area-inner div:has(> nav[aria-label*="Outros projetos"]) {
    border-top-color: hsla(25, 30%, 30%, 0.2) !important;
}

.footer-widget-area-inner div:has(> nav[aria-label*="Outros projetos"]) > span {
    color: var(--narniano-canela) !important;
}

nav[aria-label*="Outros projetos"] a {
    color: var(--narniano-canela) !important;
}

nav[aria-label*="Outros projetos"] a:hover {
    color: var(--narniano-vinho) !important;
}

/* Linha cinza genérica (#eeeeee) acima da área de comentários — mesmo
   padrão já corrigido em "Posts relacionados", achado num 2º lugar. */
.comments-area {
    border-top-color: hsla(25, 30%, 30%, 0.15) !important;
}

/* =========================================
   Bloco de doação (Jetpack) — passe de design (2026-09-10)
   ========================================= */
/* A correção anterior mirava classes erradas (chutadas, não conferidas
   no DOM real) — não fazia efeito nenhum, por isso a bagunça continuou.
   Nomes reais do bloco (Playwright no staging):
   .donations__amounts (container) > .donations__amount (cada valor,
   div comum, não button/input) · .donations__custom-amount (valor
   customizado, "R$" + .donations__amount-value contenteditable) ·
   .donations__donate-button (o link de enviar).
   Problema de layout (não só cor): os 3 valores tentavam ficar lado a
   lado num espaço de sidebar estreito, "R$5,00"/"R$15,00" com larguras
   diferentes e "R$100,00" sozinho na linha debaixo — torto de
   propósito nenhum. Em vez de forçar uma grade apertada demais pro
   espaço disponível, empilha em coluna — mesma largura, decisão
   deliberada pra esse contexto estreito, não tentativa de caber uma
   grade que não cabe. */
.donations__amounts {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.donations__amount {
    border: 1px solid hsla(25, 30%, 30%, 0.35);
    background-color: var(--narniano-card);
    color: var(--narniano-grafite);
    padding: 0.7em 1em;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.donations__amount:hover,
.donations__amount.is-selected {
    border-color: var(--narniano-laranja);
    background-color: var(--narniano-bege);
}

.donations__custom-amount {
    display: flex;
    align-items: center;
    gap: 0.4em;
    border: 1px solid hsla(25, 30%, 30%, 0.35);
    background-color: var(--narniano-card);
    color: var(--narniano-grafite);
    padding: 0.7em 1em;
}

.donations__custom-amount:focus-within {
    border-color: var(--narniano-laranja);
    box-shadow: 0 0 0 2px hsla(25, 60%, 45%, 0.2);
}

.donations__amount-value {
    color: var(--narniano-grafite);
    outline: none;
}

/* Botão "Doar" — trocado pro mesmo botão primário que "Leia mais" e
   "Enviar comentário" já usam no resto do site (fundo laranja sólido,
   texto branco maiúsculo), em vez do outline apagado do Jetpack. O
   estado desabilitado (antes de escolher um valor) usa opacity — ainda
   sinaliza "não clique ainda", mas como o botão de base agora tem peso
   visual de verdade, fica legível mesmo esmaecido. */
.donations__donate-button {
    background-color: var(--narniano-laranja) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.8em 2em !important;
    font-family: 'EB Garamond', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.donations__donate-button:not(.is-disabled):hover {
    background-color: var(--narniano-canela) !important;
}

/* Era opacity:0.5 sobre o laranja — misturado com o fundo bege por
   trás, dava um tom rosado/pastel sem sentido (achado real, 2026-09-10:
   o autor relatou "ilegível", e o cálculo confirmou que não tinha cor
   fixa nenhuma, dependia do fundo por trás). Cor sólida em vez de
   opacidade: sempre previsível, e ainda com contraste de verdade
   (5.47:1 sobre bege) em vez de ficar ao acaso. */
.donations__donate-button.is-disabled {
    background-color: var(--narniano-bege) !important;
    color: var(--narniano-pedra) !important;
    opacity: 1 !important;
}

/* Abas "Uma vez / Mensal / Anual" — vinham sem nenhum estilo próprio,
   difícil notar qual estava ativa. Régua embaixo da aba ativa (mesmo
   gesto discreto já usado nas citações/rodapé), não uma "pílula" — foge
   do visual de app genérico. */
.donations__nav {
    display: flex;
    gap: 1.5em;
    border-bottom: 1px solid hsla(25, 30%, 30%, 0.2);
    margin-bottom: 1.2em;
}

.donations__nav-item {
    padding: 0.6em 0;
    color: var(--narniano-pedra);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.donations__nav-item:hover {
    color: var(--narniano-canela);
}

.donations__nav-item.is-active {
    color: var(--narniano-canela);
    border-bottom-color: var(--narniano-laranja);
    font-weight: 600;
}

/* =========================================
   Ícones de redes sociais — grade fixa
   ========================================= */
/* Achado real (2026-09-10): o mesmo bloco aparecia em 3+3 na home e
   4+2 no post individual — não por decisão nenhuma, só porque o
   flex-wrap original é sensível a pixel (287px vs 299px de largura
   disponível já bastava pra mudar o ponto de quebra). Grade fixa de 3
   colunas garante o mesmo resultado em qualquer largura de sidebar. */
.wp-block-social-links {
    display: grid !important;
    grid-template-columns: repeat(3, auto) !important;
    justify-content: center !important;
    gap: 0.85em !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, .wp-block-pullquote {
        padding: 1.2em 1em;
        margin: 1.5em 0;
        clear: both;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .alignleft,
    .alignright,
    .wp-block-image.alignleft,
    .wp-block-image.alignright {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        max-width: 100% !important;
    }

    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; }
}


/* =========================================
   Separadores, Divisores e Bordas Estruturais — Paleta Narniana
   ========================================= */
#secondary,
.ast-right-sidebar #secondary,
.ast-left-sidebar #secondary,
.ast-separate-container #secondary,
#primary,
.site-content,
.ast-separate-container,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-inner,
.ast-separate-container .comments-area,
.ast-separate-container #secondary .widget,
#secondary .widget,
.secondary .widget,
.widget,
.ast-pagination,
.ast-divider,
.page-links,
.navigation,
.ast-single-related-posts-container {
    border-color: hsla(35, 30%, 30%, 0.15) !important;
}

/* Divisor vertical entre Conteúdo e Barra Lateral */
.ast-right-sidebar #secondary,
.ast-left-sidebar #secondary {
    border-color: hsla(35, 30%, 30%, 0.18) !important;
}

/* =========================================
   Campos de Formulário Gerais — Fundo Branco Puro (#ffffff) & Foco Dourado
   ========================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background-color: #ffffff !important;
    color: var(--narniano-grafite) !important;
    border: 1px solid hsla(25, 30%, 30%, 0.2) !important;
    border-radius: 4px !important;
    padding: 0.75em 1em !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: var(--fs-body) !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease !important;
}

/* Foco em dourado / laranja em todos os campos gerais */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.comment-respond input:focus,
.comment-respond textarea:focus,
#ast-commentform input:focus,
#ast-commentform textarea:focus,
.comments-area input:focus,
.comments-area textarea:focus {
    border-color: var(--narniano-laranja) !important;
    outline: 2px solid var(--narniano-dourado) !important;
    outline-offset: 1px !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px hsla(21, 55%, 52%, 0.12) !important;
}


/* =========================================
   Formulários de Busca — Alinhamento Pixel-Perfect & Proporções Compactas
   (Sidebar Gutenberg, Sidebar Clássica, Página 404 e Header)
   ========================================= */

/* Reset absoluto para qualquer container/wrapper de busca em qualquer página */
.ast-404-layout-1 .widget_search,
.ast-404-layout-1 .ast-404-search,
.ast-404-search,
.ast-404-search .widget,
.ast-404-search .widget_search,
.error404 .page-content .widget,
.error404 .page-content .widget_search,
.error404 .ast-404-search,
.error404 .widget_search,
.error404 .search-form,
.error-404 .search-form,
.widget_search,
.widget_search form,
.widget_search .search-form,
.search-form,
form.search-form,
.ast-search-box,
.wp-block-search,
.wp-block-search__inside-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 1. Barra Lateral Gutenberg (.wp-block-search) e Clássica (.widget_search) */
.wp-block-search,
.wp-block-search.wp-block-search__button-inside,
.wp-block-search.wp-block-search__button-outside,
.wp-block-search.wp-block-search__text-button,
.wp-block-search.wp-block-search__icon-button,
.widget_search form,
.widget_search {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5em 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.wp-block-search .wp-block-search__label,
.wp-block-search__label,
.widget_search label {
    display: block !important;
    width: 100% !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: var(--fs-meta) !important;
    color: var(--narniano-pedra) !important;
    margin-bottom: 0.45em !important;
    text-align: left !important;
}

.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-outside .wp-block-search__inside-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 36px !important;
    padding: 0 0.85rem !important;
    margin: 0 !important;
    border: 1px solid hsla(25, 30%, 30%, 0.22) !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    background-color: #ffffff !important;
    color: var(--narniano-grafite) !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 1.05rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
html[data-theme="dark"] .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input,
html[data-theme="dark"] .wp-block-search__input {
    background-color: #22181C !important;
    color: #EAE2D5 !important;
    border: 1px solid hsla(42, 30%, 50%, 0.28) !important;
    border-right: none !important;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search__button {
    flex: 0 0 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 36px !important;
    padding: 0 0.85rem !important;
    margin: 0 !important;
    border: 1px solid var(--narniano-laranja) !important;
    border-radius: 0 4px 4px 0 !important;
    background-color: var(--narniano-laranja) !important;
    color: #ffffff !important;
    font-family: "Cormorant Garamond", "EB Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.wp-block-search__button:hover {
    background-color: var(--narniano-canela) !important;
    border-color: var(--narniano-canela) !important;
}

.wp-block-search__button svg {
    fill: currentColor !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 0.35rem !important;
}

/* 2. Formulário de Busca Padrão do Tema / Página 404 (.search-form) */
.ast-404-search {
    margin: 1.5rem auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
}

form.search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}

form.search-form label {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    box-sizing: border-box !important;
}

form.search-form .search-field {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 36px !important;
    padding: 0 0.85rem !important;
    margin: 0 !important;
    border: 1px solid hsla(25, 30%, 30%, 0.22) !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    background-color: #ffffff !important;
    color: var(--narniano-grafite) !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 1.05rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

form.search-form .search-submit {
    flex: 0 0 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 36px !important;
    padding: 0 0.85rem !important;
    margin: 0 !important;
    border: 1px solid var(--narniano-laranja) !important;
    border-radius: 0 4px 4px 0 !important;
    background-color: var(--narniano-laranja) !important;
    color: #ffffff !important;
    font-family: "Cormorant Garamond", "EB Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

form.search-form .search-submit:hover {
    background-color: var(--narniano-canela) !important;
    border-color: var(--narniano-canela) !important;
}

/* Foco Dourado/Laranja nos campos de busca */
form.search-form .search-field:focus,
.wp-block-search__input:focus,
input[type="search"]:focus {
    border-color: var(--narniano-laranja) !important;
    outline: 2px solid var(--narniano-dourado) !important;
    outline-offset: 1px !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px hsla(21, 55%, 52%, 0.12) !important;
}

/* Oculta botão duplicado ou ícone SVG fantasma */
form.search-form .ast-search-submit,
form.search-form button.ast-search-submit {
    display: none !important;
}

/* =========================================
   Eye Candy Editorial Narniano
   ========================================= */

/* 1. Seleção de Texto em Tom Dourado Imperial */
::selection {
    background-color: hsla(42, 65%, 52%, 0.35);
    color: var(--narniano-grafite);
}
::-moz-selection {
    background-color: hsla(42, 65%, 52%, 0.35);
    color: var(--narniano-grafite);
}

html[data-theme="dark"] ::selection {
    background-color: hsla(42, 70%, 55%, 0.45);
    color: #ffffff;
}
html[data-theme="dark"] ::-moz-selection {
    background-color: hsla(42, 70%, 55%, 0.45);
    color: #ffffff;
}

/* 2. Microtextura / Gradação Sutil de Papel/Pergaminho no Fundo */
body {
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 70%),
                      radial-gradient(circle at 100% 100%, rgba(138, 64, 28, 0.04) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
}

/* 3. Marcadores de Lista Elegantes com Estrela Narniana ✦ (Apenas listas de texto do artigo) */
.entry-content ul:not([class*="share"]):not([class*="social"]):not(.sd-content *):not(.sharedaddy *):not(.wp-block-social-links *):not(.wp-block-categories *):not(.wp-block-archives *) {
    list-style: none !important;
    padding-left: 1.4em !important;
}

.entry-content ul:not([class*="share"]):not([class*="social"]):not(.sd-content *):not(.sharedaddy *):not(.wp-block-social-links *):not(.wp-block-categories *):not(.wp-block-archives *) > li {
    position: relative;
    margin-bottom: 0.6em;
    padding-left: 0.4em;
}

.entry-content ul:not([class*="share"]):not([class*="social"]):not(.sd-content *):not(.sharedaddy *):not(.wp-block-social-links *):not(.wp-block-categories *):not(.wp-block-archives *) > li::before {
    content: "✦";
    position: absolute;
    left: -1.2em;
    top: 0.05em;
    color: var(--narniano-laranja);
    font-size: 0.8em;
    opacity: 0.85;
}

/* Reset explícito para Jetpack Sharedaddy e Botões Sociais */
.entry-content .sharedaddy ul > li::before,
.entry-content .sd-content ul > li::before,
.entry-content .sd-social-icon ul > li::before,
.entry-content .wp-block-social-links > li::before,
.entry-content .jetpack-likes-widget-wrapper > li::before {
    display: none !important;
    content: none !important;
}

.entry-content .sharedaddy ul,
.entry-content .sd-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.entry-content .sharedaddy ul > li,
.entry-content .sd-content ul > li {
    padding-left: 0 !important;
    margin-bottom: 0.4em !important;
}

/* 4. Proteção do Botão de Curtir Padrão (Jetpack Likes) */
.jetpack-likes-widget-wrapper,
.post-likes-widget,
#likes-other-gravatars {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 4. Fechamento Editorial de Ensaios / Posts (Fleuron ✦ ✦ ✦) */
.single .entry-content::after {
    content: "✦  ✦  ✦";
    display: block;
    text-align: center;
    margin: 3.5rem auto 1.5rem auto;
    font-size: 1.15rem;
    letter-spacing: 0.6rem;
    color: var(--narniano-dourado);
    opacity: 0.8;
}

/* 5. Barra de Leitura Dourada no Topo */
#narniano-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, var(--narniano-laranja), var(--narniano-dourado));
    z-index: 999999;
    box-shadow: 0 0 10px rgba(184, 90, 42, 0.5);
    transition: width 0.1s ease-out;
}

/* 6. Botão de Alternância do Modo Noturno (Ícone Editorial em Ouro Antigo / Pergaminho) */
#narniano-theme-toggle {
    background: hsla(42, 35%, 55%, 0.08) !important;
    border: 1px solid hsla(42, 35%, 55%, 0.25) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin-left: 0.85rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--narniano-creme) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#narniano-theme-toggle svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    transition: transform 0.25s ease !important;
}

#narniano-theme-toggle:hover {
    color: var(--narniano-dourado-texto) !important;
    border-color: var(--narniano-dourado) !important;
    background: hsla(42, 45%, 55%, 0.18) !important;
    box-shadow: 0 0 10px hsla(42, 45%, 55%, 0.25) !important;
}

#narniano-theme-toggle:hover svg {
    transform: rotate(18deg) scale(1.08);
}

html[data-theme="dark"] #narniano-theme-toggle {
    background: hsla(42, 45%, 55%, 0.1) !important;
    border-color: hsla(42, 45%, 55%, 0.3) !important;
    color: var(--narniano-dourado-texto) !important;
}

html[data-theme="dark"] #narniano-theme-toggle:hover {
    color: var(--narniano-laranja-vivo) !important;
    border-color: var(--narniano-laranja) !important;
    background: hsla(21, 55%, 52%, 0.15) !important;
    box-shadow: 0 0 10px hsla(21, 55%, 52%, 0.25) !important;
}

/* 7. Efeito Passe-Partout em Imagens e Pinturas */
.wp-block-image img,
.entry-content figure.wp-block-image img {
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(44, 24, 16, 0.08) !important;
    border: 1px solid hsla(35, 30%, 30%, 0.12) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.wp-block-image img:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(44, 24, 16, 0.14) !important;
}

/* =========================================
   Modo Noturno Opcional (Vinho Imperial & Pergaminho Noturno)
   ========================================= */
html[data-theme="dark"] {
    --narniano-bege: #171013;
    --narniano-card: #22181C;
    --narniano-canela: #F0E8DC;
    --narniano-grafite: #EAE2D5;
    --narniano-pedra: #B5A89E;
    --narniano-dourado: #C4A76D;
    --narniano-dourado-texto: #D6B26E;
    --narniano-laranja: #E07A41;
    --narniano-laranja-vivo: #EB854C;
    --narniano-bege-escuro: #110B0D;
    --narniano-vinho: #110B0D;

    --ast-global-color-7: hsla(42, 30%, 50%, 0.18);
    --ast-border-color: hsla(42, 30%, 50%, 0.18);
    --ast-single-post-border: hsla(42, 30%, 50%, 0.18);
}

html[data-theme="dark"] body {
    background-color: var(--narniano-bege) !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
                      radial-gradient(circle at 100% 100%, rgba(224, 122, 65, 0.03) 0%, transparent 60%) !important;
    color: var(--narniano-grafite) !important;
}

/* 1. Títulos e Subtítulos em Creme Pergaminho Luminoso */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-sub-title,
html[data-theme="dark"] .comments-title,
html[data-theme="dark"] .comment-reply-title,
html[data-theme="dark"] .ast-related-posts-title,
html[data-theme="dark"] .ast-related-post-title a {
    color: #F0E8DC !important;
}

/* 2. Capitular (Drop Cap) em Dourado Imperial Iluminado */
html[data-theme="dark"] .ast-single-post .entry-content > p:first-of-type::first-letter,
html[data-theme="dark"] .has-drop-cap:not(:focus)::first-letter {
    color: var(--narniano-dourado-texto) !important;
    text-shadow: 0 0 12px rgba(214, 178, 110, 0.25);
}

/* 3. Cabeçalho e Rodapé */
html[data-theme="dark"] .ast-primary-header-bar,
html[data-theme="dark"] .main-header-bar,
html[data-theme="dark"] .site-primary-header-wrap {
    background-color: var(--narniano-vinho) !important;
    border-bottom-color: hsla(42, 30%, 50%, 0.22) !important;
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-below-footer-wrap {
    background-color: var(--narniano-bege-escuro) !important;
    border-top-color: var(--narniano-dourado) !important;
}

/* 4. Cards de Artigos, Barra Lateral e Seções */
html[data-theme="dark"] .ast-separate-container .ast-article-inner,
html[data-theme="dark"] .ast-separate-container .comments-area,
html[data-theme="dark"] .ast-separate-container #secondary .widget,
html[data-theme="dark"] .ast-single-related-posts-container {
    background-color: var(--narniano-card) !important;
    border-color: hsla(42, 30%, 50%, 0.18) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

/* 5. Citações e Blocos Pullquote */
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .wp-block-quote,
html[data-theme="dark"] .wp-block-pullquote {
    background-color: #1F1519 !important;
    border-color: hsla(42, 30%, 50%, 0.25) !important;
    color: #F0E8DC !important;
}

/* 6. Campos de Formulário e Comentários — Fundo Escuro Nobre & Foco Seguro */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .search-field,
html[data-theme="dark"] .wp-block-search__input,
html[data-theme="dark"] .comment-form input,
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] #commentform input,
html[data-theme="dark"] #commentform textarea,
html[data-theme="dark"] #ast-commentform input,
html[data-theme="dark"] #ast-commentform textarea {
    background-color: #22181C !important;
    color: #EAE2D5 !important;
    border: 1px solid hsla(42, 30%, 50%, 0.28) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-field::placeholder,
html[data-theme="dark"] .wp-block-search__input::placeholder {
    color: #8F8379 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .search-field:focus,
html[data-theme="dark"] .wp-block-search__input:focus,
html[data-theme="dark"] .comment-form input:focus,
html[data-theme="dark"] .comment-form textarea:focus,
html[data-theme="dark"] #commentform input:focus,
html[data-theme="dark"] #commentform textarea:focus,
html[data-theme="dark"] #ast-commentform input:focus,
html[data-theme="dark"] #ast-commentform textarea:focus {
    background-color: #2E2026 !important;
    color: #ffffff !important;
    border-color: var(--narniano-laranja) !important;
    outline: 2px solid var(--narniano-dourado) !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 3px hsla(21, 55%, 52%, 0.25) !important;
}

/* 7. Badges de Categorias e Links */
html[data-theme="dark"] .cat-links a,
html[data-theme="dark"] .ast-taxonomy-container a {
    background-color: hsla(42, 50%, 45%, 0.15) !important;
    color: var(--narniano-dourado-texto) !important;
    border-color: hsla(42, 50%, 45%, 0.3) !important;
}

html[data-theme="dark"] .cat-links a:hover,
html[data-theme="dark"] .ast-taxonomy-container a:hover {
    background-color: hsla(21, 55%, 52%, 0.2) !important;
    color: var(--narniano-laranja-vivo) !important;
    border-color: var(--narniano-laranja-vivo) !important;
}

html[data-theme="dark"] a {
    color: var(--narniano-laranja);
}

html[data-theme="dark"] a:hover {
    color: var(--narniano-dourado-texto);
}

/* 8. Tabelas e Metadados */
html[data-theme="dark"] .entry-content table {
    background-color: var(--narniano-card) !important;
}
html[data-theme="dark"] .entry-content th,
html[data-theme="dark"] .entry-content td {
    border-color: hsla(42, 30%, 50%, 0.28) !important;
    color: var(--narniano-grafite) !important;
}
html[data-theme="dark"] .entry-content th {
    background-color: #1F1519 !important;
    color: #F0E8DC !important;
}
html[data-theme="dark"] .sticky .entry-header::before {
    color: var(--narniano-dourado-texto) !important;
}
html[data-theme="dark"] .ast-comment-content {
    color: var(--narniano-grafite) !important;
}
html[data-theme="dark"] .comment-notes,
html[data-theme="dark"] .logged-in-as {
    color: var(--narniano-pedra) !important;
}