/*
Theme Name: Redonda & Notícias
Theme URI: https://seusite.com/
Author: Seu Nome
Author URI: https://seusite.com/
Description: Um tema vibrante e interativo para notícias de futebol.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: news, football, sports
Text Domain: redonda-noticias
*/

/* ==========================================================================
   1. GERAL E RESET
   ========================================================================== */

/* Importando fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@400;700&display=swap');

html {
    height: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f5f7;
    color: #333333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
    color: #2d6a4f;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #FFD700;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. CABEÇALHO
   ========================================================================== */

.site-header {
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Barra Superior --- */
.header-top-bar {
    background-color: #1a1a1a;
    color: #cccccc;
    padding: 8px 0;
    font-size: 0.8rem;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links-top a {
    color: #cccccc;
    margin-left: 15px;
    font-weight: bold;
}
.social-links-top a:hover {
    color: #ffffff;
}

/* --- Cabeçalho Principal --- */
.header-main {
    background-color: #2d6a4f; /* Verde do tema */
    color: #ffffff;
    padding: 15px 0;
    /* Efeito "Sticky" - Fica fixo no topo ao rolar */
    position: sticky;
    top: 0;
    transition: padding 0.3s ease;
}

.header-main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding .site-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
}
.site-branding a:hover {
    color: #ffffff;
}

/* --- Navegação Principal (Desktop) --- */
.main-navigation .main-menu-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation .main-menu-ul li a {
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    padding: 10px 18px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-navigation .main-menu-ul li a:hover,
.main-navigation .main-menu-ul .current-menu-item > a {
    background-color: #FFD700;
    color: #1a1a1a;
}

/* --- Menu Mobile e Hamburguer --- */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}
.menu-toggle .line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
.menu-toggle.toggled .line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.menu-toggle.toggled .line:nth-child(2) { opacity: 0; }
.menu-toggle.toggled .line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* ==========================================================================
   3. CONTEÚDO PRINCIPAL
   ========================================================================== */

.main-content {
    flex-grow: 1; /* Empurra o rodapé para baixo em páginas curtas */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --- Grid de Notícias (index.php) - DESIGN DE CARDS MODERNOS --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.post-item {
    position: relative; /* Essencial para o posicionamento do texto */
    border-radius: 8px; /* Bordas mais arredondadas */
    overflow: hidden; /* Garante que a imagem não saia do card */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    /* Define uma proporção para que todos os cards tenham a mesma altura */
    aspect-ratio: 4 / 5; 
}

.post-item-link {
    display: block;
    width: 100%;
    height: 100%;
}

.post-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o card sem distorcer */
    transition: transform 0.4s ease;
}

/* Fundo padrão para posts sem imagem */
.post-item-no-image {
    width: 100%;
    height: 100%;
    background-color: #333;
}

/* O gradiente que fica sobre a imagem para o texto ser legível */
.post-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o conteúdo na parte de baixo */
    padding: 20px;
}

.post-item-content {
    color: #ffffff;
}

.post-item .post-meta {
    font-size: 0.8em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
}

.post-item .post-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
    transition: color 0.3s ease;
}

/* --- Efeitos Interativos do Card --- */
.post-item:hover .post-item-image {
    transform: scale(1.05); /* Efeito de zoom sutil na imagem */
}

.post-item:hover .post-title {
    color: #FFD700; /* Título fica dourado ao passar o mouse */
}


/* --- Notícia Completa (single.php) - DESIGN INTERATIVO --- */
.full-post {
    /* Removemos o fundo e a sombra do container principal */
    /* para dar foco total ao conteúdo de texto */
    background-color: transparent;
    box-shadow: none;
}

/* Centraliza todo o conteúdo da matéria para melhor leitura */
.post-header-full,
.social-share,
.post-content-full {
    max-width: 800px; /* Largura máxima ideal para leitura */
    margin-left: auto;
    margin-right: auto;
}

.post-title-full {
    font-size: 3.2rem; /* Título um pouco maior para mais impacto */
    font-family: 'Oswald', sans-serif;
    margin-top: 0;
    line-height: 1.1;
    margin-bottom: 15px;
    text-align: center; /* Título centralizado */
}

.post-meta {
    text-align: center; /* Metadados centralizados */
    margin-bottom: 30px;
}

/* Nova Seção de Compartilhamento Social */
.social-share {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    margin-bottom: 30px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.share-label {
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}
.social-share a {
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}
.social-share a:hover {
    transform: scale(1.05);
}
.share-facebook { background-color: #1877F2; }
.share-twitter { background-color: #14171A; }
.share-whatsapp { background-color: #25D366; }


/* Imagem destacada menor e centralizada com sombra */
.post-thumbnail-full {
    max-width: 900px; /* Um pouco maior que o texto para se destacar */
    margin: 0 auto 40px auto; /* Centralizada e com margem inferior */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.post-thumbnail-full img {
    width: 100%;
    height: auto;
    display: block;
}

/* Conteúdo do post com tipografia melhorada */
.post-content-full p {
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Capitular: Primeira letra do artigo maior */
.post-content-full p:first-of-type::first-letter {
    font-family: 'Oswald', sans-serif;
    font-size: 4.5rem;
    float: left;
    line-height: 0.8;
    margin-right: 15px;
    padding-top: 5px;
    color: #2d6a4f;
}

/* Estilo para citações (blockquote) */
.post-content-full blockquote {
    border-left: 4px solid #FFD700;
    margin: 30px 0;
    padding: 15px 25px;
    font-style: italic;
    font-size: 1.2rem;
    background-color: #f9f9f9;
}

/* Barra de Progresso de Leitura */
#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #FFD700; /* Dourado */
    z-index: 9999;
    width: 0%; /* Começa com 0 e o JS aumenta */
}

/* ==========================================================================
   4. RODAPÉ (VERSÃO COMPACTA)
   ========================================================================== */

.site-footer {
    background-color: #1a1a1a;
    color: #a0a0a0; /* Um cinza um pouco mais claro */
    font-size: 0.9em;
    padding: 25px 0; /* Menor padding para um visual mais compacto */
    border-top: 4px solid #FFD700; /* Detalhe em dourado para dar um toque especial */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas pequenas */
    gap: 20px;
}

.copyright-info {
    flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaçamento entre os ícones */
}

.footer-social-icons a {
    color: #a0a0a0;
    display: inline-block;
}

.footer-social-icons a svg {
    width: 22px;
    height: 22px;
    fill: currentColor; /* O SVG usará a cor do link pai */
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social-icons a:hover {
    color: #ffffff; /* Ícone fica branco ao passar o mouse */
    transform: scale(1.1); /* Efeito de zoom sutil */
}

/* --- Responsividade do Novo Rodapé --- */
@media (max-width: 576px) {
    .footer-content {
        flex-direction: column; /* Coloca o copyright em cima dos ícones */
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   5. RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 992px) {
    /* --- Header Responsivo --- */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: #1a1a1a;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        padding-top: 80px;
    }
    .main-navigation.toggled {
        transform: translateX(0);
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }
    .main-navigation .main-menu-ul { flex-direction: column; align-items: center; width: 100%; }
    .main-navigation .main-menu-ul li { width: 100%; text-align: center; }
    .main-navigation .main-menu-ul li a { padding: 20px; width: 100%; border-bottom: 1px solid #333; border-radius: 0; }
    .menu-toggle { display: block; }

    /* --- Conteúdo Responsivo --- */
    .posts-grid { grid-template-columns: repeat(2, 1fr); }

    @media (max-width: 992px) {
    /* ... (outras regras responsivas que já estão aí) ... */

    /* NOVO: Layout de 1 coluna para tablets e celulares */
    .site-content-wrapper {
        grid-template-columns: 1fr; /* Apenas 1 coluna */
        grid-template-areas: 
            "content"
            "sidebar";
        gap: 40px; /* Aumenta o espaço quando empilhado */
    }
}
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; }
    .post-title-full { font-size: 2rem; }
}

@media (max-width: 576px) {
    .posts-grid { grid-template-columns: 1fr; }
    .top-bar-content .current-date { display: none; } /* Esconde data em telas muito pequenas */
    .top-bar-content { justify-content: center; }
}

/* ==========================================================================
   6. UTILIDADES E ACESSIBILIDADE
   ========================================================================== */

body.no-scroll { overflow: hidden; }
.skip-link { position: absolute; top: -40px; left: 0; background: #FFD700; color: #1a1a1a; padding: 8px; z-index: 9999; }
.skip-link:focus { top: 0; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

/* ==========================================================================
   7. SEÇÃO DE POSTS RELACIONADOS (SINGLE.PHP)
   ========================================================================== */

.related-posts {
    margin-top: 60px; /* Espaçamento acima da seção */
    padding-top: 40px; /* Espaçamento interno */
    border-top: 1px solid #e0e0e0; /* Linha de separação */
}

.related-posts-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    color: #333;
}

/* ==========================================================================
   NOVOS AJUSTES PARA DEIXAR OS CARDS RELACIONADOS MENORES
   ========================================================================== 
*/

/* Altera a proporção do card para deixá-lo mais retangular e menos alto */
.related-posts .post-item {
    aspect-ratio: 16 / 10;
}

/* Diminui o espaçamento interno do texto sobre a imagem */
.related-posts .post-item-overlay {
    padding: 15px;
}

/* Diminui o tamanho da fonte do título do card relacionado */
.related-posts .post-item .post-title {
    font-size: 1.1rem; /* Era 1.6rem na home */
    line-height: 1.3;
}

/* Diminui também o tamanho da data */
.related-posts .post-item .post-meta {
    font-size: 0.75em;
}

/* ==========================================================================
   8. PÁGINAS DE ARQUIVO, BUSCA E 404
   ========================================================================== */

/* --- Estilo do Cabeçalho de Arquivo e Busca --- */
.page-header {
    padding: 30px;
    margin-bottom: 40px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
    border-left: 5px solid #2d6a4f;
}

.page-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    margin: 0;
}

.search-header .page-title span {
    color: #2d6a4f; /* Destaque para o termo buscado */
}

.archive-description {
    margin-top: 10px;
    font-size: 1.1rem;
    color: #555;
}

/* --- Estilo da Página de Erro 404 --- */
.error-404 {
    text-align: center;
    padding: 60px 0;
}

.error-404 .page-title {
    font-size: 8rem;
    color: #e0e0e0;
    line-height: 1;
}

.error-404 h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    margin: 0 0 20px 0;
}

.error-404 .page-content p {
    font-size: 1.2rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

/* Estilo do formulário de busca na página 404 */
.error-404 .search-form {
    margin: 30px auto;
    max-width: 400px;
}
.error-404 .search-field {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.error-404 .search-submit {
    display: none; /* Esconde o botão, a busca funciona com Enter */
}

.button-404 {
    display: inline-block;
    background-color: #2d6a4f;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
}
.button-404:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* ==========================================================================
   9. SEÇÃO DE COMENTÁRIOS (wpDiscuz Compacto)
   ========================================================================== */

/* Deixa a caixa de comentários mais estreita e centralizada */
#comments {
    max-width: 850px; /* Largura máxima, ajuste se desejar */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 30px; /* Padding um pouco menor */
    margin-top: 60px; /* Espaçamento dos posts relacionados */
    border-radius: 5px;
    border-top: 1px solid #e0e0e0;
}

/* Diminui o título principal do wpDiscuz (Ex: "X Comentários") */
#wc-main-header-wrapper {
    margin-bottom: 20px !important; /* Diminui o espaço abaixo do título */
}
.wc-thread-count {
    font-size: 1.5rem !important; /* Diminui a fonte do título */
}

/* Diminui o tamanho dos avatares */
#wpdcom .wpd-avatar img {
    width: 45px !important;
    height: 45px !important;
}

/* Ajusta o espaçamento dos comentários individuais */
#wpdcom .wpd-comment {
    padding-bottom: 15px !important;
}

/* Diminui a fonte do nome do autor e do texto do comentário */
#wpdcom .wpd-comment-author {
    font-size: 0.9em !important;
}
#wpdcom .wpd-comment-text p {
    font-size: 0.95em !important;
    line-height: 1.6 !important;
}

/* Diminui a altura mínima da caixa de texto principal */
#wpdcom #wpd-main-form-wrapper textarea#wc-textarea-0_0 {
    min-height: 100px !important;
}

/* ==========================================================================
   10. ESTILO DE PÁGINAS ESTÁTICAS (PAGE.PHP)
   ========================================================================== */

.page-content-wrapper {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 5px;
    /* Adicionado max-width e margin auto para centralizar o conteúdo da página */
    max-width: 900px; /* Largura ideal para a leitura de páginas */
    margin-left: auto;
    margin-right: auto;
}

/* Em páginas, o título da página fica melhor alinhado à esquerda */
.page .post-title-full {
    text-align: left;
    font-size: 2.5rem; /* Título um pouco menor que o da notícia para páginas */
    margin-bottom: 25px;
}

/* Garante que o conteúdo textual da página siga a largura da caixa */
.page .post-content-full {
    max-width: 100%; /* Ocupa toda a largura do seu container .page-content-wrapper */
}

/* Estilos para o formulário de contato (WPForms) dentro de páginas */
.page .wpforms-container {
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 30px;
}
.page .wpforms-form label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block;
}
.page .wpforms-field-label {
    font-size: 1.1em;
}
.page .wpforms-field-medium {
    width: 100% !important;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.page .wpforms-field-text,
.page .wpforms-field-email,
.page .wpforms-field-textarea {
    width: 100%;
}
.page .wpforms-submit {
    background-color: #2d6a4f;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.page .wpforms-submit:hover {
    background-color: #1a1a1a;
}

/* ==========================================================================
   11. SLIDER DA PÁGINA INICIAL
   ========================================================================== */

.homepage-slider {
    margin-bottom: 50px;
}

.splide__slide {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 7; /* Proporção widescreen para o slide */
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    color: #ffffff;
}

.slide-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.slide-link:hover .slide-title {
    color: #FFD700;
}

/* Título da grade de posts abaixo do slider */
.home-grid-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    color: #333;
}

/* Estilo para as setas e bolinhas de navegação do Splide */
.splide__arrow {
    background-color: rgba(0,0,0,0.5);
}
.splide__arrow svg {
    fill: #ffffff;
}
.splide__pagination__page {
    background-color: rgba(255,255,255,0.5);
}
.splide__pagination__page.is-active {
    background-color: #FFD700;
}

/* ==========================================================================
   12. ESTILO DA PAGINAÇÃO (VERSÃO UNIFICADA)
   ========================================================================== */

/* Container principal da paginação (funciona para a home e para os arquivos) */
.pagination-wrapper,
.pagination {
    margin-top: 50px;
    padding-bottom: 50px;
    font-family: 'Oswald', sans-serif;
    display: flex;
    justify-content: center;
}

/* O container dos links gerado pela função the_posts_pagination() */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    gap: 8px; /* Espaço entre os botões */
}

/* Estilo base para todos os "botões" em TODAS as paginações */
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 12px;
    /* Remove a margem extra da versão anterior para usar o 'gap' */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Efeito ao passar o mouse */
.page-numbers:hover {
    background-color: #FFD700; /* Dourado */
    color: #1a1a1a;
    border-color: #FFD700;
}

/* Estilo para o número da PÁGINA ATUAL */
.page-numbers.current {
    background-color: #2d6a4f; /* Verde do tema */
    color: #ffffff;
    border-color: #2d6a4f;
    cursor: default;
}

.page-numbers.current:hover {
    background-color: #2d6a4f;
    color: #ffffff;
}

/* Estilo para as reticências (...) */
.page-numbers.dots {
    background-color: transparent;
    border: none;
    cursor: default;
    padding: 0;
}

/* Responsividade para a paginação em telas muito pequenas */
@media (max-width: 480px) {
    .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 0.9rem;
        padding: 0 8px;
    }
    
    .pagination .nav-links,
    .pagination-wrapper {
        gap: 5px; /* Diminui o espaço entre os botões no mobile */
    }
}

/* ==========================================================================
   13. AJUSTES RESPONSIVOS DO SLIDER (MOBILE)
   ========================================================================== */

@media (max-width: 768px) {

    /* Altera a proporção do slide para ser mais 'quadrado' no mobile,
       dando mais espaço para a imagem aparecer. */
    .splide__slide {
        aspect-ratio: 4 / 3;
    }

    /* Diminui o espaçamento interno do conteúdo sobre o slide */
    .slide-content {
        padding: 20px;
    }

    /* Reduz drasticamente o tamanho da fonte do título no mobile */
    .slide-title {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    /* Diminui o tamanho das setas de navegação */
    .splide__arrow {
        width: 2.5em;
        height: 2.5em;
    }

    /* Afasta um pouco as bolinhas de navegação da borda inferior */
    .splide__pagination {
        bottom: 0.8em;
    }

}

@media (max-width: 480px) {

    /* Deixa o título ainda menor em telas de celular muito pequenas */
    .slide-title {
        font-size: 1.3rem;
    }
}