/* ==========================================================================
   1. IMPORTAÇÃO DE FONTES E CONFIGURAÇÕES GERAIS (RESET)
   ========================================================================== */
/* Importa as fontes do Google: Merriweather (serifada para títulos) e Open Sans (para leitura) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@400;600;700&display=swap');

/* Reset básico para garantir que o site fica igual em todos os navegadores */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: #fefdfa; /* Tom creme/bege muito suave (faz lembrar as paredes caiadas) */
    color: #4a5568; /* Cinzento escuro para leitura confortável, evitando o preto puro */
    font-family: 'Open Sans', sans-serif; 
    line-height: 1.8; /* Espaçamento entre linhas para facilitar a leitura */
}

/* Contentor padrão para limitar a largura do conteúdo nas telas grandes */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 80px 20px; 
}

/* Cores de fundo para alternar e dar ritmo visual às secções */
.bg-light { background-color: #f7fafc; }
.bg-warm { background-color: #fff8e1; } /* Amarelo muito suave e acolhedor */


/* ==========================================================================
   2. TÍTULOS E IDENTIDADE VISUAL
   ========================================================================== */
.section-title { 
    text-align: center; 
    margin-bottom: 50px; 
}

.section-title h2 {
    font-family: 'Merriweather', serif; 
    color: #1a365d; /* Azul escuro institucional */
    font-size: 2.3rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Linha dourada decorativa por baixo dos títulos principais */
.section-title h2::after {
    content: ''; 
    display: block; 
    width: 60px; 
    height: 5px;
    background-color: #d69e2e; /* Amarelo ouro/dourado alentejano */
    margin: 10px auto 0 auto; 
    border-radius: 10px;
}

/* Pequeno subtítulo em maiúsculas usado na secção Sobre Nós */
.subtitulo-alentejo { 
    color: #d69e2e; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 0.9rem; 
}


/* ==========================================================================
   3. COMPONENTES REUTILIZÁVEIS (BOTÕES)
   ========================================================================== */
.btn-principal {
    display: inline-block; 
    background-color: #d69e2e; 
    color: #ffffff;
    padding: 12px 30px; 
    border-radius: 10px 25px 10px 25px; /* Corte de cantos assimétrico e orgânico */
    text-decoration: none; 
    font-weight: 700; 
    border: none; 
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(214, 158, 46, 0.3); /* Sombra suave na cor do botão */
    transition: all 0.3s ease;
}

.btn-principal:hover { 
    background-color: #b7791f; /* Tom mais escuro ao passar o rato */
    transform: translateY(-2px); /* Efeito de levitar ligeiramente */
}


/* ==========================================================================
   4. CABEÇALHO E MENU DE NAVEGAÇÃO
   ========================================================================== */
header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 50px; 
    background: #ffffff; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    position: sticky; 
    top: 0; 
    z-index: 1000; /* Garante que o menu fica sempre por cima de tudo ao fazer scroll */
}

header .logo { 
    font-family: 'Merriweather', serif; 
    font-size: 1.3rem; 
    font-weight: 700; 
    color: #1a365d; 
}

header .logo i { 
    color: #d69e2e; 
    margin-right: 10px; 
}

header nav ul { 
    display: flex; 
    list-style: none; 
    gap: 25px; 
    align-items: center; 
}

header nav ul li a { 
    text-decoration: none; 
    color: #4a5568; 
    font-weight: 600; 
    font-size: 0.95rem; 
    transition: color 0.3s;
}

header nav ul li a:hover { 
    color: #d69e2e; 
}

/* Botão de destaque para a área de Login/Admin no menu */
header nav ul li a.btn-admin { 
    background: #1a365d; 
    color: #ffffff !important; 
    padding: 8px 18px; 
    border-radius: 30px; 
}


/* ==========================================================================
   5. SECÇÃO HERO (PÁGINA INICIAL)
   ========================================================================== */
.hero {
    /* Gradiente que escurece a imagem de fundo para dar leitura ao texto branco */
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.9) 0%, rgba(214, 158, 46, 0.6) 100%), 
                url('image.png') no-repeat center center/cover;
    min-height: 70vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ffffff; 
    text-align: center;
}

/* Moldura circular para o logótipo no centro do Hero */
.hero-logo-frame { 
    width: 140px; 
    height: 140px; 
    background: #ffffff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 6px solid rgba(255, 255, 255, 0.2); 
    overflow: hidden; 
    margin: 0 auto 30px auto; 
}

.hero-logo-frame img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.hero h1 { 
    font-family: 'Merriweather', serif; 
    font-size: 2.8rem; 
    margin-bottom: 15px; 
}


/* ==========================================================================
   6. SECÇÃO SOBRE NÓS
   ========================================================================== */
.sobre-editorial { 
    display: flex; 
    gap: 50px; 
    align-items: center; 
    flex-wrap: wrap; 
    margin-bottom: 50px; 
}

.sobre-editorial .imagem-moldura { 
    flex: 1; 
    min-width: 300px; 
}

.sobre-editorial img { 
    width: 100%; 
    border-radius: 20px 5px 20px 5px; 
}

.editorial-texto { 
    flex: 1.2; 
    min-width: 300px; 
}

/* Caixa de citação ou frase de destaque */
.destaque-frase { 
    border-left: 5px solid #d69e2e; 
    padding-left: 20px; 
    margin-bottom: 25px; 
    font-size: 1.25rem; 
    color: #1a365d; 
    font-style: italic; 
}

/* Caixa informativa sobre a resposta social */
.resposta-social-content { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
    flex-wrap: wrap; 
    padding: 35px; 
    background-color: #ebf8ff; /* Fundo azul muito claro */
    border-radius: 15px; 
}

.resposta-destaque { 
    flex: 1; 
    min-width: 250px; 
}

.resposta-destaque h3 { 
    font-family: 'Merriweather', serif; 
    color: #1a365d; 
    margin-bottom: 10px; 
}

/* Pequenas etiquetas/badges de valências */
.suporte-badges { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
    margin-top: 15px; 
}

.badge-item { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    padding: 8px 15px; 
    border-radius: 30px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 700; 
    color: #1a365d; 
    font-size: 0.85rem; 
}

.badge-item i { 
    color: #d69e2e; 
}


/* ==========================================================================
   7. SECÇÃO SERVIÇOS
   ========================================================================== */
.servicos-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
}

.servico-card { 
    background: #ffffff; 
    padding: 35px; 
    border-radius: 15px; 
    border-top: 5px solid #1a365d; /* Linha superior azul vincada */
    position: relative; 
}

.servico-icon { 
    width: 50px; 
    height: 50px; 
    background: #ebf8ff; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    color: #1a365d; 
    font-size: 1.4rem; 
}

.servico-card h4 { 
    font-family: 'Merriweather', serif; 
    color: #1a365d; 
    margin-bottom: 10px; 
}

/* Etiqueta vermelha para quando um serviço está indisponível */
.badge-suspenso { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: #fff5f5; 
    color: #c53030; 
    font-size: 0.75rem; 
    font-weight: bold; 
    padding: 4px 10px; 
    border-radius: 15px; 
    border: 1px solid #feb2b2; 
}


/* ==========================================================================
   8. SECÇÃO PUBLICAÇÕES (GRELHA DE DOCUMENTOS PDF)
   ========================================================================== */
.pdf-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 30px; 
}

.pdf-card { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 30px 20px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.pdf-icon { 
    font-size: 3rem; 
    color: #c53030; /* Vermelho clássico associado a ficheiros PDF */
    margin-bottom: 15px; 
}

.pdf-card h4 { 
    font-family: 'Merriweather', serif; 
    color: #1a365d; 
    font-size: 1.1rem; 
}

.pdf-card span { 
    color: #a0aec0; 
    font-size: 0.8rem; 
    margin-bottom: 15px; 
}

.btn-download { 
    color: #d69e2e; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.9rem; 
}


/* ==========================================================================
   9. SECÇÃO CONTACTOS
   ========================================================================== */
.grid-2 { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px; 
}

.item-contacto { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 25px; 
    align-items: center; 
}

.item-contacto i { 
    font-size: 1.2rem; 
    color: #d69e2e; 
    background: #fff8e1; 
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
}

.item-contacto h4 { 
    font-family: 'Merriweather', serif; 
    color: #1a365d; 
    font-size: 1rem; 
}

/* Campos de preenchimento do formulário */
.form-contacto input, .form-contacto textarea { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    border: 2px solid #e2e8f0; 
    border-radius: 8px; 
    font-size: 0.95rem; 
}


/* ==========================================================================
   10. ÁREA DE ADMINISTRAÇÃO PRIVADA (DENTRO DA ABA ADMIN)
   ========================================================================== */
/* Caixa principal que engloba o painel */
.admin-box { 
    background: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); 
    overflow: hidden; 
    border-top: 5px solid #1a365d; 
}

/* Barra azul no topo do painel admin */
.admin-nav { 
    background: #1a365d; 
    color: #ffffff; 
    padding: 15px 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* Divisão em duas colunas (Formulário à esquerda / Tabela à direita) */
.admin-content { 
    display: grid; 
    grid-template-columns: 1fr 1.2fr; 
    gap: 35px; 
    padding: 35px; 
}

.admin-content h4 { 
    font-family: 'Merriweather', serif; 
    color: #1a365d; 
    margin-bottom: 15px; 
}

.admin-form label { 
    display: block; 
    font-size: 0.8rem; 
    font-weight: 700; 
    color: #718096; 
    margin-bottom: 5px; 
}

.admin-form input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; 
    border: 2px solid #e2e8f0; 
    border-radius: 6px; 
}

.admin-form input[type="file"] { 
    margin-bottom: 20px; 
    font-size: 0.85rem; 
}

/* Linha vertical amarela que separa as duas metades do painel admin */
.table-wrapper { 
    border-left: 2px solid #fff8e1; 
    padding-left: 25px; 
}

/* Tabela onde vês a lista dos PDFs atuais */
.pdf-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.85rem; 
}

.pdf-table th, .pdf-table td { 
    padding: 10px; 
    text-align: left; 
    border-bottom: 1px solid #e2e8f0; 
}

.pdf-table th { 
    color: #1a365d; 
    font-weight: 700; 
}

/* Botão vermelho discreto para remover documentos */
.btn-delete { 
    background: #fff5f5; 
    color: #c53030; 
    border: none; 
    padding: 4px 8px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: 700; 
}


/* ==========================================================================
   11. RODAPÉ (FOOTER)
   ========================================================================== */
footer { 
    background: #1a202c; /* Cinzento quase preto */
    color: #ffffff; 
    text-align: center; 
    padding: 25px; 
    font-size: 0.9rem; 
}