/* ==========================================================================
   1. MAPA DE CORES & VARIÁVEIS (Para fácil manutenção futura)
   ========================================================================== */
:root {
    --cor-fundo: #fdfbf7;       /* Marfim suave / Tom de papel antigo */
    --cor-texto: #2b2b2b;       /* Preto carvão atenuado (conforto visual) */
    --cor-subtil: #555555;      /* Cinza escuro para subtítulos */
    --cor-primaria: #8b0000;    /* Vinho / Bordéus clássico para destaques */
    --cor-primaria-hover: #b22222; /* Tom vinho mais vivo ao passar o rato */
    --cor-linha: #e0dad0;       /* Cor de pergaminho para divisórias */
    
    --fonte-literaria: "Garamond", "Georgia", serif;
}

/* ==========================================================================
   2. CONFIGURAÇÕES GERAIS (RESET & TIPOGRAFIA base)
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-literaria);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Torna a fonte mais nítida */
}

/* ==========================================================================
   3. CABEÇALHO PRINCIPAL (HEADER)
   ========================================================================== */
header {
    text-align: center;
    padding: 80px 20px 40px 20px;
}

header h1 {
    font-weight: normal;
    font-size: 2.8em;
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
}

header p {
    font-style: italic;
    color: var(--cor-subtil);
    margin-top: 12px;
    font-size: 1.2em;
    letter-spacing: 1px;
}

/* ==========================================================================
   4. MENU DE NAVEGAÇÃO (NAV)
   ========================================================================== */
nav {
    text-align: center;
    margin-bottom: 80px;
}

nav a {
    color: var(--cor-primaria);
    text-decoration: none;
    margin: 0 18px;
    font-size: 1.1em;
    letter-spacing: 1px;
    text-transform: lowercase; /* Estética minimalista moderna/antiga */
    font-style: italic;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
}

nav a:hover {
    color: var(--cor-primaria-hover);
    border-bottom: 1px solid var(--cor-primaria-hover);
}

/* Estado ativo: indica a página onde o leitor está */
nav a.active {
    font-weight: bold;
    border-bottom: 1px solid var(--cor-primaria);
}

/* ==========================================================================
   5. ESTRUTURA DE CONTEÚDO & COMPONENTES (MAIN & SECTIONS)
   ========================================================================== */
main {
    max-width: 650px; /* Largura áurea para leitura confortável de poesia */
    margin: 0 auto;
    padding: 0 24px;
}

/* Divisores de secção estilo editorial */
hr {
    border: 0;
    border-top: 1px solid var(--cor-linha);
    margin: 60px 0;
}

/* Bloco de Poesia */
.poema-bloco {
    text-align: center;
    margin-bottom: 60px;
    padding: 20px 0;
}

.poema-titulo {
    font-weight: normal;
    font-size: 1.8em;
    font-style: italic;
    color: var(--cor-primaria);
    margin-bottom: 35px;
    letter-spacing: 1px;
}

.poema-linhas {
    font-size: 1.3em;
    display: inline-block;
    text-align: left;    /* O bloco fica centrado, mas o texto alinha à esquerda */
    white-space: pre-line; /* Crucial: respeita os "Enters" dados no HTML */
    color: var(--cor-texto);
}

/* Secções de Destaque Extra (Livros, Notas) */
.destaque-obra {
    text-align: center;
    padding: 40px 20px;
}

/* ==========================================================================
   6. RODAPÉ (FOOTER)
   ========================================================================== */
footer {
    text-align: center;
    padding: 80px 20px 40px 20px;
    font-size: 0.9em;
    color: #999999;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   7. COMPONENTES ESPECÍFICOS: CATÁLOGO DE LIVROS (livros.html)
   ========================================================================== */
.livro-card {
    margin-bottom: 90px;
    text-align: center;
    padding: 20px 0;
}

/* Moldura e efeito de sombra para simular o volume de um livro real */
.livro-capa-moldura {
    margin-bottom: 30px;
    display: inline-block;
}

.livro-capa-moldura img {
    max-width: 210px;
    height: auto;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.12), 
                1px 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--cor-linha);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efeito subtil de elevação ao passar o rato na capa do livro */
.livro-capa-moldura img:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.18), 
                1px 2px 5px rgba(0, 0, 0, 0.1);
}

.livro-titulo {
    font-weight: normal;
    font-size: 1.8em;
    margin: 15px 0 5px 0;
    color: var(--cor-texto);
    letter-spacing: 0.5px;
}

.livro-subtitulo {
    font-style: italic;
    color: #888888;
    font-size: 1em;
    margin: 0 0 25px 0;
    letter-spacing: 0.5px;
}

/* Alinhamento justificado para blocos de prosa (sinopse), mantendo o rigor editorial */
.livro-sinopse {
    text-align: justify;
    font-size: 1.15em;
    color: var(--cor-texto);
    line-height: 1.8;
    margin: 0 auto 30px auto;
    max-width: 580px; /* Ligeiramente mais estreito para criar margens elegantes */
}

.livro-detalhes-tecnicos {
    font-size: 0.95em;
    color: var(--cor-subtil);
    font-style: italic;
    margin-bottom: 25px;
}

/* ==========================================================================
   8. COMPONENTES ESPECÍFICOS: ÍNDICE DE POEMAS (poemas.html)
   ========================================================================== */
.lista-poemas-content {
    margin-top: 40px;
    padding: 10px 0;
}

/* Remoção dos pontos nativos da lista e controlo de margens */
.indice-poesia {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cada linha do índice */
.indice-poesia li {
    border-bottom: 1px dashed var(--cor-linha); /* Linha tracejada estilo editorial */
    padding: 18px 0;
    display: flex;
    justify-content: space-between; /* Alinha a data à esquerda e o link à direita (ou vice-versa) */
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Pequeno efeito ao passar o rato na linha do índice */
.indice-poesia li:hover {
    background-color: rgba(224, 218, 208, 0.15); /* Destaque muito subtil */
}

/* Formatação da data (subtil e recuada) */
.indice-data {
    font-size: 0.9em;
    color: var(--cor-subtil);
    font-style: italic;
    letter-spacing: 0.5px;
}

/* O link do poema dentro do índice */
.indice-link {
    font-size: 1.2em;
    color: var(--cor-texto);
    text-decoration: none;
    font-style: italic;
    transition: color 0.3s ease, padding-right 0.3s ease;
}

/* Efeito dinâmico elegante: o título desloca-se ligeiramente ao passar o rato */
.indice-link:hover {
    color: var(--cor-primaria);
    padding-right: 5px;
}

/* ==========================================================================
   9. COMPONENTES ESPECÍFICOS: BIOGRAFIA & CONTACTOS (sobre.html)
   ========================================================================== */

/* Organização Vertical e Centralizada */
.biografia-content.vertical-layout {
    display: flex;
    flex-direction: column; /* Força a foto a ficar em cima e o texto em baixo */
    align-items: center;    /* Centra todos os elementos na página */
    gap: 35px;
    margin-top: 40px;
    margin-bottom: 50px;
}

/* Moldura para a fotografia do autor */
.biografia-content.vertical-layout .autor-foto-moldura {
    text-align: center;
    width: 100%;
}

.biografia-content.vertical-layout .autor-foto {
    width: 220px;        /* Largura equilibrada para exibição central */
    height: 220px;       /* Proporção 1:1 (Quadrada) */
    object-fit: cover;
    border-radius: 50%;  /* Transforma a foto num medalhão circular clássico */
    border: 1px solid var(--cor-linha, #e0dad0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efeito ao passar o rato na imagem */
.biografia-content.vertical-layout .autor-foto:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* Formatação do texto biográfico abaixo da foto */
.biografia-content.vertical-layout .biografia-texto {
    max-width: 620px;     /* Largura máxima ideal para leitura confortável de prosa */
    text-align: justify;
    font-size: 1.1em;
    color: var(--cor-texto, #333);
    line-height: 1.8;
}

.biografia-content.vertical-layout .biografia-texto h2 {
    font-weight: normal;
    font-style: italic;
    color: var(--cor-primaria, #8b0000);
    text-align: center;   /* Centra o título do texto para combinar com o layout */
    margin-top: 10px;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.biografia-content.vertical-layout .biografia-texto p {
    margin-bottom: 20px;
    text-indent: 1.5em;   /* Avanço clássico na primeira linha de cada parágrafo */
}

/* Divisor Subtil */
.divisor-subtil {
    border: 0;
    border-top: 1px solid var(--cor-linha, #e0dad0);
    margin: 40px auto;
    max-width: 620px;     /* Alinha o tamanho da linha ao tamanho do texto */
}

/* Secção de Contactos */
.contacto-content {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 60px;
}

.contacto-titulo {
    font-weight: normal;
    font-size: 1.6em;
    color: var(--cor-primaria, #8b0000);
    margin-bottom: 10px;
}

.contacto-subtitulo {
    color: var(--cor-subtil, #666);
    font-style: italic;
    font-size: 1em;
    margin-bottom: 30px;
}

/* Lista de Canais de Contacto */
.contacto-lista {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 550px;
}

.contacto-lista li {
    padding: 14px 0;
    border-bottom: 1px solid var(--cor-linha, rgba(224, 218, 208, 0.3));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05em;
}

.contacto-lista strong {
    font-weight: bold;
    color: var(--cor-texto, #444);
}

.contacto-link {
    color: var(--cor-primaria, #8b0000);
    text-decoration: none;
    border-bottom: 1px dotted var(--cor-primaria, #8b0000);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.contacto-link:hover {
    color: var(--cor-primaria-hover, #b30000);
    border-bottom-style: solid;
}

.contacto-lista span {
    font-size: 0.85em;
    color: #999;
    font-style: italic;
    margin-left: 8px;
}

/* ==========================================================================
   10. AJUSTES PARA AS PÁGINAS INDIVIDUAIS DE POEMAS
   ========================================================================== */
.voltar-antologia {
    margin-bottom: 40px; 
    text-align: left;
}

.voltar-antologia a {
    font-size: 0.95em;
    text-transform: lowercase;
    color: var(--cor-primaria);
    text-decoration: none;
    font-style: italic;
    transition: color 0.3s ease;
}

.voltar-antologia a:hover {
    color: var(--cor-primaria-hover);
    text-decoration: underline;
}

.poema-assinatura {
    margin-top: 40px; 
    font-style: italic; 
    color: #888888; 
    font-size: 0.9em;
    letter-spacing: 0.5px;
}