/* =======================
   1. VARIÁVEIS DE COR (TEMAS)
   ======================== */

:root {
    /* Cores Globais (Não mudam com o tema) */
    --cor-primaria: #b91c1c; /* Vermelho Escuro (CNN) */
    --cor-primaria-hover: #991b1b;
    --cor-titulo-vermelho: #e53e3e; /* Vermelho mais claro para manchetes */
    --cor-titulo-azul: #e53e3e; 
    
    --fonte-principal: 'Inter', sans-serif;

    /* TEMA CLARO (Light Mode) - Oposto do padrão */
    --cor-fundo: #f4f4f5;         /* Fundo do Site (cinza claro) */
    --cor-card: #ffffff;         /* Fundo dos Cards (branco) */
    --cor-borda: #e5e7eb;         /* Bordas (cinza-200) */
    --texto-principal: #111827;   /* Texto (preto) */
    --texto-secundario: #6b7280;  /* Texto (cinza-500) */
    --texto-link: #2563eb;       
}

body.dark-mode {
    /* TEMA ESCURO (Dark Mode) - Padrão (Estilo Gemini) */
    --cor-fundo: #000000;         /* Fundo do Site (cinza-800) */
    --cor-card: #000000;         /* Fundo dos Cards (cinza-700) */
    --cor-borda: #4b5563;         /* Bordas (cinza-600) */
    --texto-principal: #f3f4f6;   /* Texto (branco) */
    --texto-secundario: #9ca3af;  /* Texto (cinza-400) */
    --texto-link: #60a5fa;
}


/* =======================
   2. RESET E BASE
   ======================== */
body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--texto-principal);
    margin: 0;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: var(--texto-link);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--texto-link-hover);
}

/* Classes de Cor de Título */
.titulo-vermelho { color: var(--cor-titulo-vermelho) !important; }
.titulo-azul { color: var(--cor-titulo-azul) !important; }


/* =======================
   3. CABEÇALHO (Header) - Estilo Vermelho
   ======================== */
.site-header {
    background-color: var(--cor-primaria); /* Vermelho */
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--cor-primaria-hover);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.logo h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.logo a {
    color: white; /* Texto "SELIGAMANAUX" em BRANCO */
    text-decoration: none;
}

/* === NOVO ESTILO WHATSAPP === */
.whatsapp-denuncia {
    display: inline-block;
    vertical-align: middle;
    opacity: 0.7; /* Deixa o ícone discreto */
    transition: opacity 0.2s ease;
    color: #ffffff; /* Cor BRANCA para combinar com o header */
    margin-left: 10px; /* Espaço depois do logo */
    padding: 5px;
    line-height: 0; /* Alinha o SVG */
}
.whatsapp-denuncia svg {
    vertical-align: middle;
}
.whatsapp-denuncia:hover {
    opacity: 1; /* Opacidade total ao passar o mouse */
}
/* === FIM NOVO ESTILO WHATSAPP === */


.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white; /* Hamburger BRANCO */
    position: relative;
    transition: background-color 0.2s ease;
}
.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: white;
    left: 0;
    transition: transform 0.3s ease;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }
/* Hamburger ativo (X) */
.hamburger.ativo { background-color: transparent; }
.hamburger.ativo::before { transform: rotate(45deg); top: 0; }
.hamburger.ativo::after { transform: rotate(-45deg); bottom: 0; }

.nav-principal {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.nav-principal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}
.nav-principal a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.nav-principal a:hover,
.nav-principal a.ativo {
    border-bottom-color: white;
    opacity: 0.8;
}

/* --- Navegação Mobile --- */
@media (max-width: 768px) {
    /* === AJUSTE LAYOUT HEADER MOBILE === */
    .header-container {
        flex-wrap: wrap; 
    }
    .logo {
        flex-grow: 1; /* Faz o logo ocupar o espaço */
    }
    .whatsapp-denuncia {
        order: 2; /* Posição do ícone */
        margin-left: auto; /* Empurra para a direita */
        margin-right: 15px; /* Espaço do menu hamburguer */
    }
    .nav-toggle {
        display: block;
        order: 3; /* Posição do menu */
    }
    .nav-principal {
        order: 4; /* Posição do menu aberto */
        width: 100%; /* Ocupa a largura toda */
    /* === FIM AJUSTE === */
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        /* width: 100%; -> movido para cima */
        background-color: var(--cor-primaria);
        border-top: 1px solid var(--cor-primaria-hover);
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 0;
    }
    .nav-principal.ativo {
        display: flex;
    }
    .nav-principal ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .nav-principal li {
        border-bottom: 1px solid var(--cor-primaria-hover);
        width: 100%;
    }
    .nav-principal a {
        display: block;
        padding: 1rem;
        border-bottom: none;
    }
    .nav-principal a:hover {
        background-color: var(--cor-primaria-hover);
    }
    /* Move o toggle para o menu mobile */
    .theme-switch-wrapper {
        padding: 1rem;
        border-top: 1px solid var(--cor-primaria-hover);
    }
}

/* =======================
   4. BOTÃO DARK MODE
   ======================== */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.theme-switch-label {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}
.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
/* Botão ATIVADO (Dark Mode) */
input:checked + .slider {
    background-color: #777
}
/* Botão DESATIVADO (Light Mode) */
input:not(:checked) + .slider {
    background-color: #777;
}
input:checked + .slider:before {
    transform: translateX(20px);
}


/* =======================
   5. CARD DE NOTÍCIA
   ======================== */
.card-noticia {
    background-color: var(--cor-card); /* Fundo do card usa variável */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.card-noticia:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.card-noticia a {
    text-decoration: none;
    color: var(--texto-principal);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-noticia img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-bottom: 1px solid var(--cor-borda);
}
.card-noticia a:hover img {
    transform: scale(1.05);
}
.card-conteudo {
    padding: 1rem; /* Padding menor */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.categoria-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--texto-link); /* Categoria AZUL */
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.card-conteudo h3, .card-conteudo h4 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    color: var(--texto-principal);
    transition: color 0.2s ease;
}
.card-conteudo p {
    font-size: 0.95rem;
    color: var(--texto-secundario);
    margin: 0;
    flex-grow: 1;
    line-height: 1.5;
}
/* Título fica da cor da categoria no hover */
.card-noticia a:hover h3, .card-noticia a:hover h4 {
    color: var(--texto-link); 
}


/* =======================
   6. NOVO GRID G1 (Homepage)
   ======================== */
.hero-grid-g1 {
    width: 100%;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .hero-grid-g1 {
        /* 2 colunas no tablet */
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "principal lateral"
            "principal lateral"
            "secundaria1 secundaria2"
            "terciaria1 terciaria2";
    }
    .card-principal { grid-area: principal; }
    .card-lateral-1 { grid-area: lateral; }
    .card-secundaria-1 { grid-area: secundaria1; }
    .card-secundaria-2 { grid-area: secundaria2; }
    .card-terciaria-1 { grid-area: terciaria1; }
    .card-terciaria-2 { grid-area: terciaria2; }
}

@media (min-width: 1024px) {
    .hero-grid-g1 {
        /* Grid G1 no Desktop */
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 1.5rem;
        grid-template-areas:
            "principal secundaria1 secundaria2"
            "principal terciaria1 terciaria2";
    }
   .card-principal { grid-area: principal; }
   .card-secundaria-1 { grid-area: secundaria1; }
   .card-secundaria-2 { grid-area: secundaria2; }
   .card-terciaria-1 { grid-area: terciaria1; }
   .card-terciaria-2 { grid-area: terciaria2; }
}

/* Estilos dos cards G1 */
.card-principal .card-conteudo h3 {
    font-size: 2.5rem;
    line-height: 1.1;
    /* Cor será aplicada via JS (vermelho ou azul) */
}
.card-principal .card-conteudo p {
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* Cards menores não têm resumo */
.card-secundaria-1 p, .card-secundaria-2 p,
.card-terciaria-1 p, .card-terciaria-2 p {
    display: none; 
}
.card-secundaria-1 h4, .card-secundaria-2 h4 {
    font-size: 1.1rem;
}
.card-terciaria-1 h4, .card-terciaria-2 h4 {
    font-size: 1rem;
}


/* =======================
   7. FEED (Outras Páginas)
   ======================== */
.page-title {
    font-size: 2.5rem;
    font-weight: 900;
    border-bottom: 3px solid var(--cor-primaria);
    padding-bottom: 0.5rem;
    margin: 2rem 0;
    color: var(--texto-principal);
}
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* =======================
   8. ADMIN FORM
   ======================== */
.page-title-admin {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--texto-principal);
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 1rem;
}
.admin-form {
    max-width: 700px;
    margin: 2rem auto;
    background-color: var(--cor-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.admin-form div {
    margin-bottom: 1.5rem;
}
.admin-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--texto-principal);
}
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    color: var(--texto-principal);
    border-radius: 6px;
    font-family: var(--fonte-principal);
    font-size: 1rem;
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}
.admin-form input:focus, 
.admin-form select:focus, 
.admin-form textarea:focus {
    outline: none;
    border-color: var(--texto-link);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}
.admin-form textarea {
    min-height: 150px;
}
.admin-form button {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    background-color: var(--cor-primaria);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.admin-form button:hover {
    background-color: var(--cor-primaria-hover);
}
.admin-form button:disabled {
    background-color: var(--cor-borda);
    cursor: not-allowed;
}

/* Mensagens de feedback */
.message {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: 600;
}
.message.success {
    background-color: #166534; /* green-800 */
    color: #dcfce7; /* green-100 */
}
.message.error {
    background-color: #991b1b; /* red-900 */
    color: #fee2e2; /* red-100 */
}

/* =======================
   9. ADMIN (GERENCIAMENTO)
   ======================== */
#manage-section {
    max-width: 700px;
    margin: 3rem auto;
    background-color: var(--cor-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
}
#post-list-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}
.post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--cor-borda);
}
.post-item:last-child {
    border-bottom: none;
}
.post-item span {
    color: var(--texto-principal);
    font-weight: 600;
    flex-grow: 1;
    margin-right: 1rem;
}
.delete-post-btn {
    background-color: #4b5563; /* cinza */
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
}
.delete-post-btn:hover {
    background-color: var(--cor-primaria); /* Fica vermelho no hover */
}


/* =======================
   10. RODAPÉ
   ======================== */
.site-footer {
    background-color: var(--cor-primaria); /* Vermelho */
    color: white;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 3rem;
    border-top: 3px solid var(--cor-primaria-hover);
}

/* =======================
   11. PÁGINA DO ARTIGO (artigo.html)
   ======================== */
/* Todos os estilos do <style> do artigo.html foram movidos para cá */
#article-container {
    max-width: 800px; 
    margin: 2rem auto;
    background-color: var(--cor-card); /* Fundo branco ou escuro */
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease;
}
.article-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--texto-principal); /* Texto principal do tema */
}
.article-body p {
    margin-bottom: 1.5rem;
}
.article-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-meta {
    font-size: 0.9rem;
    color: var(--texto-secundario); /* Texto secundário do tema */
    margin-bottom: 2rem;
}

/* === MODAL DE EDIÇÃO === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #262626;
    padding: 30px;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #404040;
    padding-bottom: 15px;
}

.modal-header h2 {
    color: #dc2626;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    width: auto;
    padding: 0;
    margin: 0;
}

.modal-close:hover {
    color: #dc2626;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions button {
    flex: 1;
}

    .page-title {
      font-size: clamp(1.5rem, 6.2vw, 2.25rem);
      line-height: 1.2;
      word-break: break-word;
      margin-top: .5rem;
      margin-bottom: .5rem;
    }

    /* Parágrafos mais confortáveis */
    .article-body p {
      font-size: clamp(1rem, 3.8vw, 1.125rem);
      line-height: 1.75;
      margin: 0 0 1rem 0;
    }

    .article-meta {
      color: var(--texto-secundario, #6b7280);
      font-size: .95rem;
      margin-bottom: 1rem;
    }

    /* Imagens fluidas dentro do corpo */
    .article-image {
      width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
      margin: 1rem 0;
    }

    /* ====== Bloco extra: publicidade ====== */
    .article-extras {
      margin-top: 2rem;
      border-top: 1px solid rgba(0,0,0,.06);
      padding-top: 1.25rem;
    }

    .ad-wrap {
      background: var(--bg-soft, #f8fafc);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 12px;
      padding: 1rem;
      position: relative;
    }

    .ad-badge {
      position: absolute;
      top: .5rem;
      right: .5rem;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid rgba(0,0,0,.06);
      font-size: .75rem;
      padding: .15rem .4rem;
      border-radius: 6px;
      letter-spacing: .02em;
    }

    .ad-card {
      display: grid;
      gap: .75rem;
    }

    .ad-video {
      width: 100%;
      max-height: 60vh;
      border-radius: 10px;
      display: block;
      background: #000;
    }

    .ad-cta {
      display: inline-block;
      text-align: center;
      width: 100%;
      padding: .9rem 1rem;
      border-radius: 10px;
      font-weight: 700;
      text-decoration: none;
      background: #ef4444; /* vermelho SLM */
      color: #fff;
      transition: filter .2s ease;
    }
    .ad-cta:hover { filter: brightness(0.95); }

    /* container principal pode já existir no seu CSS; isto só suaviza o padding no mobile */
    .container { padding-left: clamp(12px, 3.5vw, 24px); padding-right: clamp(12px, 3.5vw, 24px); }

    /* Reduz espaços exagerados do cabeçalho no mobile */
    @media (max-width: 420px) {
      .site-header .logo img { height: 3.2em !important; }
    }