/* =========================================
   VARIÁVEIS DE CORES (PALETA NATUREZA)
   ========================================= */
:root {
    --verde-floresta: #2d5a27;    /* Verde escuro para cabeçalhos */
    --verde-musgo: #4a7c59;       /* Verde médio para detalhes */
    --verde-claro: #e8f5e9;       /* Fundo suave */
    --terra: #8b5a2b;             /* Marrom para destaques/links */
    --areia: #fdfbf7;             /* Fundo da página (off-white) */
    --texto-escuro: #333333;      /* Texto principal */
    --texto-suave: #555555;       /* Texto secundário */
    --cinza-borda: #e0e0e0;
}

body {
    background-color: var(--areia);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--texto-escuro);
    line-height: 1.6;
}

a {
    color: var(--terra);
    text-decoration: none;
}

/* =========================================
   ESTILO DO CABEÇALHO (SIMPLES)
   ========================================= */
.main-header {
    background-color: var(--verde-floresta);
    padding: 1rem 0;
    color: white;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.main-header nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.main-header nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

/* =========================================
   NAVBAR (NAVEGAÇÃO)
   ========================================= */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center; /* Alinha o menu/ícone ao centro no desktop */
    padding: 10px 5%; 
    color: #fff;
    position: relative; /* Para o posicionamento absoluto do menu no mobile */
}

.nav-links a {
    color: #fff;
}

.menu {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.menu li {
    position: relative;
}


.menu li a {
    display: block;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-weight: bold;
    backdrop-filter: blur(10px);
    color: #ffffff;
}

.menu li a:hover {
    background-color: #88B04B; /* Verde destaque */
    color: #1A3626;
    border-color: #88B04B;
    transform: translateY(-2px);
}

/* Dropdown (Peixes) */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(20, 66, 28, 0.9);
    min-width: 150px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 101;
}

.services:hover .dropdown {
    display: block;
}

.dropdown li a {
    background: none;
    border: none;
    text-align: center;
    margin-bottom: 5px;
}

/* Esconde checkbox e ícone no desktop */
#menu-toggle, .menu-icon {
    display: none;
}

/* =========================================
   ESTRUTURA DO ARTIGO (LAYOUT SEO)
   ========================================= */
.article-container {
    max-width: 1100px; /* Largura ideal para leitura humana */
    margin: 40px auto;
    padding: 0 20px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.05); /* Sombra suave */
    border-radius: 8px;
    overflow: hidden; /* Para bordas arredondadas funcionarem */
}

/* Breadcrumbs (Navegação estrutural) */
.breadcrumbs {
    font-size: 0.9rem;
    color: var(--texto-suave);
    margin-top: 30px;
    margin-bottom: 10px;
}

.breadcrumbs a {
    color: var(--verde-musgo);
    text-decoration: none;
}

/* Título e Meta Dados */
.post-title {
    font-size: 2.5rem;
    color: var(--verde-floresta);
    line-height: 1.2;
    margin-bottom: 15px;
    font-family: 'Georgia', serif; /* Serifada para títulos de notícias */
}

.post-meta {
    font-size: 0.95rem;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--cinza-borda);
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.post-meta strong {
    color: var(--terra);
}

/* Imagem de Destaque */
.featured-image {
    margin: 0 -20px 30px -20px; /* Quebra as margens para ficar full-width no mobile */
}

.featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.featured-image figcaption {
    font-size: 0.85rem;
    color: #777;
    text-align: center;
    padding: 10px;
    font-style: italic;
    background-color: #f9f9f9;
}

/* Corpo do Texto */
.post-body {
    font-size: 1.15rem; /* Letra um pouco maior para leitura confortável */
    line-height: 1.8;
    color: #2c2c2c;
    font-family: 'Georgia', serif; /* Serifada facilita leitura de textos longos */
    padding-bottom: 30px;
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body h2 {
    color: var(--verde-floresta);
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: 'Segoe UI', sans-serif;
}

.post-body h3 {
    color: var(--verde-musgo);
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: 'Segoe UI', sans-serif;
}

/* Destaque (Lide) */
.post-body .lead {
    font-size: 1.3rem;
    font-weight: 400;
    color: #444;
    border-left: 4px solid var(--verde-musgo);
    padding-left: 20px;
    font-style: italic;
}

/* Citação (Blockquote) */
blockquote {
    background-color: var(--verde-claro);
    border-left: 5px solid var(--verde-floresta);
    margin: 30px 0;
    padding: 20px 30px;
    font-style: italic;
    color: var(--verde-floresta);
    font-size: 1.2rem;
    border-radius: 0 10px 10px 0;
}

/* Listas dentro do artigo */
.post-body ul, .post-body ol {
    margin-bottom: 1.5rem;
    padding-left: 40px;
}

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

/* Tags e Rodapé do Post */
.post-footer {
    border-top: 1px solid var(--cinza-borda);
    padding: 20px 0 40px 0;
}

.tags span {
    font-weight: bold;
    color: var(--texto-escuro);
    margin-right: 10px;
}

.tags a {
    display: inline-block;
    background-color: var(--verde-claro);
    color: var(--verde-floresta);
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-right: 5px;
    transition: background 0.3s;
}

.tags a:hover {
    background-color: var(--verde-musgo);
    color: white;
}

/* Veja Também (Sidebar ou Bottom) */
.related-posts {
    background-color: #f4f4f4;
    padding: 30px;
    margin-top: 20px;
    border-top: 4px solid var(--terra);
}

.related-posts h3 {
    margin-top: 0;
    color: var(--verde-floresta);
}

.related-grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.mini-card {
    flex: 1;
}

.mini-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

.mini-card a {
    text-decoration: none;
    color: var(--verde-floresta);
    font-weight: bold;
}

/* =========================================
   FOOTER (RODAPÉ) - Estilo Floresta
   ========================================= */
footer {
    background-color: #2B543C;
    color: #E0D4B8;
    padding: 60px 0 0;
    font-family: 'Lora', serif;
    border-top: 5px solid #88B04B;
    margin-top: 80px;
}

.container-floresta {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
    flex-wrap: wrap;
    gap: 30px;
}

.coluna-contato, .coluna-navegacao, .coluna-legal-social {
    flex: 1;
    min-width: 280px;
    
}
.coluna-navegacao li{
    list-style-type: none;
}


footer h4 {
    color: #fff;
    border-bottom: 2px solid #88B04B;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

footer a {
    color: #A4CC68;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.newsletter-signup input[type="email"] {
    padding: 5px;
    border-radius: 5px 0 0 5px;
    background-color: #f5f5dc;
    width: 70%;
}
.newsletter-signup textarea {
    padding: 20px;
    border-radius: 5px 0 0 5px;
    background-color: #f5f5dc;
    width: 70%;
}

.newsletter-signup button {
    padding: 12px 20px;
    border-radius: 0 5px 5px 0;
    background-color: #88B04B;
    color: #1A3626;
    font-weight: bold;
    cursor: pointer;
    width: 25%;
}

.icones-sociais img {
    width: 32px;
    margin-right: 10px;
    border-radius: 50%;
    transition: transform 0.3s;
}

.icones-sociais img:hover {
    transform: scale(1.2) rotate(10deg);
}

.copyright-bar {
    background-color: #1A3626;
    color: #88B04B;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* Responsividade */
@media (max-width: 768px) {
    .post-title { font-size: 2rem; }
    .header-container { flex-direction: column; gap: 15px; }
    .related-grid { flex-direction: column; }
    .article-container { border-radius: 0; margin-top: 0; box-shadow: none; }
}