/*
Theme Name: Loadscreen
Theme URI: https://seusite.com.br
Author: Seu Nome
Author URI: https://seusite.com.br
Description: Tema 3.0 para o portal de notícias e cultura geek Loadscreen.
Version: 3.1 (Stable with Fixed Footer)
*/

/* --- 1. GLOBAIS: VARIÁVEIS E IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&family=Roboto:wght@400;700&display=swap');
:root{--cor-fundo:#0a0a0f;--cor-fundo-secundaria:#1a1a2e;--cor-texto:#e0e0e0;--cor-texto-secundario:#a0a0b0;--cor-destaque:#00bfff;--cor-interacao:#ff00ff;--fonte-titulos:'Rajdhani',sans-serif;--fonte-corpo:'Roboto',sans-serif}

/* --- 2. RESET E ESTILOS GERAIS --- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--fonte-corpo);background-color:var(--cor-fundo);color:var(--cor-texto);line-height:1.6;padding-bottom:100px}
a{color:var(--cor-destaque);text-decoration:none;transition:all .3s ease}
a:hover{color:var(--cor-interacao);text-shadow:0 0 8px var(--cor-interacao)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--fonte-titulos);color:var(--cor-destaque);text-transform:uppercase;text-shadow:0 0 5px rgba(0,191,255,.5)}

/* --- 3. CABEÇALHO E NAVEGAÇÃO --- */
.site-header{background-color:var(--cor-fundo-secundaria);border-bottom:2px solid var(--cor-destaque);padding:15px 40px;position:relative;z-index:100}
.site-header-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;width:100%;gap:20px}
.site-title a{font-size:2rem;color:#fff;text-shadow:0 0 10px var(--cor-destaque),0 0 20px var(--cor-destaque)}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:20px}
.main-navigation li{position:relative}
.main-navigation a{font-family:var(--fonte-titulos);font-size:1.1rem;color:var(--cor-texto);text-transform:uppercase;padding:10px 15px;display:block;position:relative}
.main-navigation .menu-item-has-children > a::before{content:'▾';font-size:1.2em;margin-right:5px;position:relative;top:1px}
.main-navigation .sub-menu{display:block;position:absolute;z-index:1000;top:100%;left:0;min-width:220px;background-color:var(--cor-fundo-secundaria);border:1px solid #444;border-top:2px solid var(--cor-destaque);border-radius:0 0 5px 5px;box-shadow:0 5px 15px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease-in-out}
.main-navigation li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.main-navigation .sub-menu a{padding:12px 20px;font-size:.95rem;text-transform:none;border-bottom:1px solid #333}
.main-navigation .sub-menu li:last-child a{border-bottom:none}
.main-navigation .sub-menu a:hover{background-color:var(--cor-destaque);color:var(--cor-fundo);text-shadow:none}

/* --- 4. LAYOUTS GERAIS E TÍTULOS DE SEÇÃO --- */
.content-container{max-width:1400px;margin:40px auto;padding:0 20px}
.section-title{text-align:center;margin:40px 0 30px 0;text-transform:uppercase;font-family:var(--fonte-titulos);font-size:1.2rem;letter-spacing:2px;color:var(--cor-texto-secundario);display:flex;align-items:center}
.section-title::before,.section-title::after{content:'';flex-grow:1;background:#444;height:1px;margin:0 20px}

/* --- 5. GRELHA DE POSTS E CARDS --- */
.posts-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.post-card{background-color:var(--cor-fundo-secundaria);border:1px solid #333;border-radius:5px;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column}
.post-card:hover{border-color:var(--cor-destaque);box-shadow:0 0 15px rgba(0,191,255,.4);transform:translateY(-5px)}
.post-card-thumbnail{width:100%;height:180px;background-size:cover;background-position:center;position:relative}
.post-card-thumbnail a{display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.post-card-content{padding:20px;flex-grow:1;display:flex;flex-direction:column}
.post-card-content .entry-header{flex-grow:1}
.post-card .entry-title{font-size:1.4rem;line-height:1.3;margin:0 0 10px 0}
.post-card .entry-title a{color:var(--cor-texto)}
.post-card:hover .entry-title a{color:var(--cor-destaque)}
.post-card-meta{margin-top:auto;padding-top:10px;font-size:.8rem;color:var(--cor-texto-secundario);text-transform:uppercase}

/* --- 6. PÁGINA DE POST E PÁGINAS --- */
.single-content-container{max-width:900px;margin:40px auto;padding:0 20px}
.entry-header-single{text-align:center;margin-bottom:30px}
.entry-title-single{font-size:3rem;line-height:1.2;margin-bottom:15px}
.entry-meta-single{font-size:.9em;color:var(--cor-texto-secundario);text-transform:uppercase}
.entry-meta-single span{margin:0 10px}
.post-thumbnail-single img{display:block;width:100%;max-width:800px;margin:0 auto;border-radius:5px;margin-bottom:30px}
.entry-content p{font-size:1.1rem;line-height:1.7;margin-bottom:1.5em}
.entry-footer-single{margin-top:40px;padding-top:20px;border-top:1px solid #444}
.tag-label{font-family:var(--fonte-titulos);color:var(--cor-destaque);margin-right:10px}
.post-tags a{background-color:#333;padding:5px 10px;border-radius:3px;font-size:.8em;color:var(--cor-texto)}
.post-tags a:hover{background-color:var(--cor-destaque);color:var(--cor-fundo);text-shadow:none}

/* --- 7. RODAPÉ --- */
.site-footer{background-color:var(--cor-fundo-secundaria);border-top:1px solid #444;padding:20px;position:fixed;bottom:0;left:0;width:100%;z-index:1000}
.footer-content-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.site-info{color:var(--cor-texto-secundario);font-size:.9em}
.footer-social-links{display:flex;gap:15px}
.footer-social-links a{color:var(--cor-texto-secundario)}
.footer-social-links a:hover{color:var(--cor-destaque);transform:translateY(-3px)}

/* --- 8. PESQUISA E OUTROS ELEMENTOS --- */
.custom-search-form{display:flex;align-items:center;border:1px solid #444;border-radius:5px;background-color:#05050a}
.custom-search-field{background-color:transparent;border:none;color:var(--cor-texto);padding:8px 12px;width:100%}
.custom-search-field:focus{outline:none}
.custom-search-submit{background-color:transparent;color:var(--cor-destaque);border:none;border-left:1px solid #444;padding:8px 12px;cursor:pointer}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
#back-to-top-btn{position:fixed;bottom:100px;right:20px;z-index:1000;background-color:var(--cor-destaque);color:var(--cor-fundo);border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .4s ease;opacity:0;visibility:hidden;transform:translateY(20px)}
#back-to-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top-btn:hover{background-color:var(--cor-interacao);box-shadow:0 0 15px var(--cor-interacao);transform:scale(1.1)}

/* --- 9. RESPONSIVIDADE --- */
.menu-toggle{display:none}
@media (max-width:992px){.site-header-inner{flex-wrap:wrap;justify-content:center}.header-search-form{margin-top:15px;order:3;width:100%}}
@media (max-width:768px){.site-header{padding:15px 20px}.site-title a{font-size:1.8rem}.menu-toggle{display:block;background:transparent;border:2px solid var(--cor-destaque);border-radius:3px;padding:5px;cursor:pointer}.hamburger-icon{display:block;width:25px;height:3px;background-color:var(--cor-destaque);position:relative}.hamburger-icon::before,.hamburger-icon::after{content:'';position:absolute;width:100%;height:100%;background-color:var(--cor-destaque);left:0;transition:transform .3s ease}.hamburger-icon::before{top:-8px}.hamburger-icon::after{bottom:-8px}.menu-toggle[aria-expanded="true"] .hamburger-icon{background-color:transparent}.menu-toggle[aria-expanded="true"] .hamburger-icon::before{transform:translateY(8px) rotate(45deg)}.menu-toggle[aria-expanded="true"] .hamburger-icon::after{transform:translateY(-8px) rotate(-45deg)}.main-navigation{display:none;width:100%;margin-top:15px}.main-navigation.toggled-on{display:block}.main-navigation ul{flex-direction:column;align-items:center;gap:0}.main-navigation a{padding:15px;text-align:center;border-bottom:1px solid #333}.footer-content-container{justify-content:center;flex-direction:column}}

/* --- 10. ESTILOS DO SLIDER (VERSÃO MINIMALISTA E CENTRALIZADA) --- */

.home-slider-container {
    margin-bottom: 40px;
    padding: 0 20px;
}

.swiper {
    /* AJUSTADO: Define um tamanho máximo e centra o slider na página */
    max-width: 1200px; 
    margin: 0 auto;

    width: 100%;
    height: 400px; /* AJUSTADO: Altura do slider ligeiramente menor */
    border-radius: 5px;
    overflow: hidden;
}

.swiper-slide {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.slide-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

/* REMOVIDO: O efeito de zoom ao passar o mouse foi apagado daqui. */

.slide-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(10, 10, 15, 0.95), transparent);
    z-index: 3;
}

.slide-title {
    font-size: 2.2rem; /* AJUSTADO: Tamanho do título proporcional ao novo slider */
    line-height: 1.1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    color: #fff !important;
}

/* Estilo das setas e bolinhas de navegação do Swiper */
.swiper-button-next,
.swiper-button-prev {
    color: var(--cor-destaque) !important;
}

.swiper-pagination-bullet {
    background: rgba(255,255,255,0.5) !important;
}

.swiper-pagination-bullet-active {
    background: var(--cor-destaque) !important;
}

/* --- 10. REPAGEAMENTO MOBILE 3.1 --- */

@media (max-width: 768px) {

    /* --- 1. NAVEGAÇÃO MOBILE (MENU LATERAL DESLIZANTE) --- */

    /* Posiciona a navegação fora do ecrã por padrão */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px; /* Largura do painel */
        max-width: 80%;
        height: 100vh; /* Altura total do ecrã */
        background-color: var(--cor-fundo-secundaria);
        transform: translateX(100%); /* Começa escondido à direita */
        transition: transform 0.4s ease-in-out;
        z-index: 9998; /* Fica abaixo do botão, mas acima do resto */
        overflow-y: auto; /* Permite rolar se o menu for grande */
    }

    /* Mostra a navegação quando o botão é clicado */
    .main-navigation.toggled-on {
        transform: translateX(0); /* Desliza para dentro do ecrã */
        box-shadow: -5px 0 20px rgba(0,0,0,0.5);
    }

    /* Ajusta o conteúdo do menu para o formato vertical */
    .main-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 20px 20px 20px;
    }

    .main-navigation a {
        padding: 15px;
        text-align: left;
        width: 100%;
    }

    /* O botão hamburger fica fixo para estar sempre acessível */
    .menu-toggle {
        position: fixed;
        top: 15px;
        right: 20px;
        z-index: 9999; /* Fica no topo de tudo */
    }
    
    /* Quando o menu está aberto, o botão X fica alinhado com o painel */
    .menu-toggle[aria-expanded="true"] {
        right: 320px; /* Ajuste para mover o botão junto com o painel */
        transition: right 0.4s ease-in-out;
    }


    /* --- 2. HOMEPAGE COM GRELHA DE 2 COLUNAS --- */

    /* Altera a grelha principal para duas colunas */
    .posts-grid-container {
        grid-template-columns: 1fr 1fr; /* Duas colunas de largura igual */
        gap: 15px; /* Espaço menor entre os cards */
    }

    /* Ajusta o card para o novo tamanho */
    .post-card-thumbnail {
        height: 120px; /* Imagem um pouco menor */
    }
    .post-card-content {
        padding: 15px;
    }
    .post-card .entry-title {
        font-size: 1rem; /* Fonte menor para caber melhor */
        line-height: 1.2;
    }
    .post-card-meta {
        font-size: 0.7rem;
    }


    /* --- 3. LEITURA OTIMIZADA NOS POSTS --- */

    /* Aumenta o tamanho da fonte e o espaçamento no corpo do texto */
    .single-content-container .entry-content p {
        font-size: 1.15rem; /* Fonte maior */
        line-height: 1.8; /* Mais espaço entre as linhas */
    }
    .entry-title-single {
        font-size: 2.2rem; /* Título um pouco menor para caber melhor */
    }


    /* --- 4. RODAPÉ INTELIGENTE (NÃO-FIXO) --- */

    /* Faz o rodapé voltar a ser estático, ficando no final da página */
    .site-footer {
        position: static;
        padding-bottom: 20px;
    }

    /* Ajusta o padding do body para remover o espaço extra */
    body {
        padding-bottom: 0;
    }

    /* Reposiciona o botão "Voltar ao Topo" para o seu lugar original */
    #back-to-top-btn {
        bottom: 20px;
    }

}

/* --- 11. ATUALIZAÇÃO DA PESQUISA MOBILE 3.1 --- */

/* Esconde o novo botão de pesquisa em telas grandes */
.header-action-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--cor-texto);
    cursor: pointer;
    padding: 5px;
}
.header-action-btn:hover {
    color: var(--cor-destaque);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Estilos da tela de pesquisa (Overlay) */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Estado inicial: escondido */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-content {
    width: 90%;
    max-width: 600px;
}

/* Faz o formulário dentro do overlay ser maior e mais proeminente */
.search-overlay .custom-search-form {
    border: none;
    background: transparent;
}
.search-overlay .custom-search-field {
    font-size: 2rem;
    padding: 15px 0;
    border-bottom: 2px solid var(--cor-texto-secundario);
    text-align: center;
}
.search-overlay .custom-search-field::placeholder {
    color: var(--cor-texto-secundario);
}
.search-overlay .custom-search-field:focus {
    border-color: var(--cor-destaque);
}
.search-overlay .custom-search-submit {
    display: none; /* Esconde o botão de lupa, a pesquisa é feita com Enter */
}

/* Botão de fechar (X) */
.search-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    color: var(--cor-texto-secundario);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.search-close-btn:hover {
    color: var(--cor-destaque);
    transform: rotate(90deg);
}


/* --- AJUSTES FINAIS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
    /* Esconde a barra de pesquisa antiga no cabeçalho */
    .header-search-form-desktop {
        display: none;
    }

    /* Mostra o novo botão de pesquisa (ícone) */
    .header-action-btn {
        display: block;
    }

    /* Ajusta o posicionamento do botão de menu mobile */
    .menu-toggle {
        position: static; /* Remove o posicionamento fixo */
    }
}

/* --- ESTILOS PARA O BANNER DE PROPAGANDA --- */

.ad-banner-container {
    margin: 40px auto; /* Adiciona espaço em cima/baixo e centraliza */
    text-align: center; /* Garante que a imagem dentro fique centralizada */
    max-width: 728px; /* Largura padrão para um "leaderboard ad" */
    padding: 0 20px;
}

.ad-banner-container img {
    max-width: 100%; /* Garante que a imagem seja responsiva */
    height: auto; /* Mantém a proporção */
    border-radius: 5px; /* Adiciona uma borda arredondada subtil */
    transition: opacity 0.3s ease;
}

.ad-banner-container a:hover img {
    opacity: 0.85; /* Efeito subtil ao passar o mouse */
}