/* --- CSS: Estrutura Geral do Artigo --- */
 
/* Linha fixa no item ativo */
#menu li#li-ativo-artigo a::after {
    width: 100%;
}
/* Contêiner Principal */
#main-content {
    padding: 60px 0;
    background-color: #2e2e2e; /* Cor de fundo do seu tema */
}

/* Alinhamento e Limite de Largura */
#article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    color: #f1f1f1; /* Cor do texto claro */
}

/* O Artigo Injetado */
.single-article {
    line-height: 1.7;
    font-size: 1.1em;
}

/* --- Cabeçalho e Meta Informação --- */

.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.article-title {
    font-size: 2.8em;
    color: #ffc107; /* Cor dourada/amarela para destaque */
    margin-bottom: 10px;
    line-height: 1.2;
}

.article-meta {
    font-size: 0.9em;
    color: #aaa;
}

.article-meta span {
    font-weight: bold;
}

/* --- Corpo do Artigo --- */

.article-body h2 {
    font-size: 2em;
    color: #ffc107;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 4px solid #ffc107;
    padding-left: 15px;
}

.article-body p {
    margin-bottom: 25px;
}

/* Estilo para Listas (opcional) */
.article-body ul {
    margin: 20px 0 30px 20px;
    list-style-type: disc;
    padding-left: 20px;
}

.article-body ul li {
    margin-bottom: 10px;
}

/* Estilo para Imagens no Corpo */
.article-body img {
    max-width: 100%;
    height: auto;
    margin: 30px 0;
    border-radius: 8px;
    
}

/* --- Rodapé do Artigo --- */

.article-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tags {
    font-size: 0.9em;
    color: #aaa;
}

/* Estilo para Imagens no Corpo - Já está no seu CSS, verificado */
.article-body img {
    max-width: 100%;
    height: auto;
    margin: 30px auto; /* Centraliza a imagem se ela for menor que 100% */
    display: block; /* Essencial para centralizar */
    border-radius: 8px;
 
}  

/* Opcional: Estilo específico para as figuras, limitando o tamanho de capas */
.article-body figure {
    max-width: 300px; /* Limita a largura máxima da capa do livro */
    margin: 30px auto;
    text-align: center;
}

.article-body figure img {
    /* Garante que a capa do livro não ocupe a largura total */
    max-width: 100%; 
    height: auto;
    object-fit: contain;
}
/* ===== ESTILO PROFISSIONAL PARA O BOTÃO DE LEITURA (TEMA ESCURO) ===== */

.btn-read-article {
    /* Layout e Posição */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* Cores e Fundo */
    /* Fundo principal na cor de destaque para máxima visibilidade */
    background-color: var(--dourado); 
    color: #333; /* Texto escuro para alto contraste com o dourado */
    border: none; 
    
    /* Espaçamento e Formato */
    padding: 12px 25px;
    margin: 20px 0; 
    border-radius: 50px; /* Estilo de botão moderno (pílula) */
    cursor: pointer;
    
    /* Tipografia e Estética */
    font-size: 1rem;
    font-weight: 700; /* Mais negrito */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Para um toque mais comercial */
    
    /* Efeito e Transição */
    background-color: #b5883d; /* Um dourado ligeiramente mais escuro */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra mais escura no fundo escuro */
}

.btn-read-article:hover {
    /* Efeito sutil ao passar o mouse: escurece o dourado e adiciona leve elevação */
   background-color: #b5893da6; /* Um dourado ligeiramente mais escuro */
    color: #333;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px); 
}

/* Garante que o ícone (emoji) tenha o tamanho certo e contraste */
.btn-read-article > * {
    font-size: 1.2em;
}

/* Estado de Pausa/Ativo - Para manter o botão atraente quando for clicado */
.btn-read-article:active {
    background-color: #a87f38; 
    transform: translateY(0);
}