/*
Theme Name: Arena Geral Curiosidades Hub
Theme URI: https://arenageral.com.br/
Author: Seu Nome / Equipe Arena Geral
Author URI: https://arenageral.com.br/
Description: Tema focado em curiosidades esportivas, utilizando um design limpo, mobile-first e inspirado no Guia dos Curiosos. Desenvolvido para atuar como um Hub de conteúdo de redes sociais.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive, custom-colors, blog, two-columns, custom-header
Text Domain: ag26
*/

/*@font-face {
    font-family: EvolveSans;
    src: url(./fonts/evolve_sans.otf);
    font-weight: normal;
}*/

@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Sans:wght@200..800&display=swap');


/* O restante do seu código CSS original segue aqui */
/* -------------------------------------------------------------------------- */
/* PALETA DE CORES E BASE                                                   */
/* -------------------------------------------------------------------------- */
:root {
   --brand-red: #A83C2F; /* Arena Red */
   --brand-yellow: #FCDA4D; /* Sport Yellow */
   --text-dark: #333333; /* Cinza de Leitura */
   --bg-light: #F8F8F8; /* Cinza de Fundo (Externo) */
   --white: #FFFFFF;
   --nav-link-hover: #e0e0e0;
   --footer-bg: #222222; /* Fundo do rodapé */
   --footer-text: #aaaaaa;
}

body {
   background-color: var(--bg-light);
   font-family: 'Momo Trust Sans', 'Inter', sans-serif;
   color: var(--text-dark);
   line-height: 1.6;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Styling for all links */
a {
    color: var(--brand-red); /* Default link color */
    text-decoration: none; /* Remove underline */
}

/* Styling for links on hover */
a:hover {
    color: #5e0b01; /* Hover color */
    text-decoration: underline; /* Add underline on hover */
}

/* Styling for visited links */
a:visited {
    color: #663399; /* Visited link color */
}

/* Styling for active links (while being clicked) */
a:active {
    color: #ff0000; /* Active link color */
}


/* -------------------------------------------------------------------------- */
/* ESTRUTURA E ELEMENTOS REUSÁVEIS                                        */
/* -------------------------------------------------------------------------- */

/* Container Principal */
.ag-container {
   max-width: 1200px; 
   margin-left: auto;
   margin-right: auto;
   padding-left: 1rem;
   padding-right: 1rem;
}

/* Material Card */
.card {
   background-color: var(--white);
   border-radius: 12px; 
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
   transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}
.card:hover {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* Tags de Categoria */
.category-tag {
   color: var(--brand-red);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.75rem;
   display: block; 
   margin-bottom: 4px;
}

/* Título Principal da Seção */
.section-title {
   font-size: 2rem;
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 24px;
   border-left: 6px solid var(--brand-yellow);
   padding-left: 12px;
   line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* CABEÇALHO E NAVEGAÇÃO - CORREÇÃO DE SCROLL NO SUBMENU DESKTOP              */
/* -------------------------------------------------------------------------- */

header {
   background-color: var(--white); 
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
   position: sticky; 
   top: 0; 
   z-index: 10;
}

/* Área do Logo, Pesquisa e Menu Mobile */
.header-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 12px; 
   padding-bottom: 12px;
   gap: 16px; 
   position: relative; 
}

.logo-area {
   display: flex;
   align-items: center;
   text-decoration: none;
   flex-shrink: 0; /* Garante que o logo não encolha */
   z-index: 10; 
   transition: opacity 0.3s, transform 0.3s; /* Adicionei transform para transição suave */
}

/* Default size for large screens */
.logo-area img {
    width: 200px;
    height: auto;
}

/* Classe adicionada por JS para ocultar o logo na expansão da busca */
.logo-area.hidden-by-search {
   opacity: 0 !important;
   transform: translateX(-20px);
   pointer-events: none;
}

.toggle-button {
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   border-radius: 8px;
   transition: background-color 0.2s;
   color: var(--text-dark);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0; /* Garante que os botões não encolham */
}
.toggle-button:hover {
   background-color: var(--nav-link-hover);
}
.menu-toggle-button {
   z-index: 20; 
}

/* Adjust logo size for screens less than 768px (tablets/mobiles) */
@media (max-width: 768px) {
    .logo-area img {
        width: 100px; /* New width for smaller screens */
    }
}

h1.ag-h1-title {
    position: absolute;
    left: -9999px;
    text-indent: -9999px;
    overflow: hidden;
}

/* --------------------------------- */
/* Busca Expansível (Desktop/Tablet) */
/* --------------------------------- */

.search-wrapper {
   display: none; /* Padrão: Escondido no Mobile */
   align-items: center;
   flex-grow: 1; 
   justify-content: flex-end;
   position: relative;
}

.search-expandable {
   position: absolute;
   top: 50%;
   right: 0; 
   transform: translateY(-50%);
   width: 0; 
   opacity: 0; 
   display: flex;
   align-items: center;
   background: var(--white);
   z-index: 1; 
   transition: width 0.3s ease-in-out, opacity 0.2s;
   overflow: hidden;
   pointer-events: none;
}

/* Estado expandido */
.search-expandable.active {
   width: 100%; 
   max-width: 400px; 
   opacity: 1;
   padding: 0; 
   pointer-events: auto;
}

/* Quando a busca toma o espaço central completo (ao clicar na lupa) */
.search-wrapper.search-expanded .search-expandable.active {
   width: 100%;
   max-width: 100%; 
   left: 0;
   right: auto;
}

.search-wrapper.search-expanded #searchToggleButton {
   display: none; 
}

.search-input {
   width: 100%;
   padding: 10px 16px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 1rem;
   outline: none;
}

/* --------------------------------- */
/* Navegação Desktop (Menu Principal)*/
/* --------------------------------- */

#desktopNav {
   display: none; 
   background-color: var(--brand-red); 
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-list {
   display: flex;
   justify-content: flex-start; 
   list-style: none;
   padding: 0;
   margin: 0;
   gap: 0; 
   -ms-overflow-style: none; 
   scrollbar-width: none; 
}
.nav-list::-webkit-scrollbar {
   display: none;
}

.nav-item {
   position: relative;
   flex-shrink: 0; 
}

.nav-item a {
   display: flex;
   align-items: center;
   padding: 12px 16px;
   text-decoration: none;
   color: var(--white);
   font-size: 0.875rem;
   font-weight: 500;
   text-transform: uppercase;
   transition: background-color 0.2s;
   white-space: nowrap; 
}

.nav-item a:hover, .nav-item a.active {
   background-color: #923428; 
}

.ag-social-buttons {
   width: 200px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   padding-left: 16px;
}

.ag-social-buttons a {
   cursor: pointer;
}

.ag-social-icon {
   color: #ffffff;   
}

.ag-social-icon>svg {
   width: 23px;
   height: 23px;
}

.ag-container-menu {
   display: flex;
   max-width: 1200px; 
   margin-left: auto;
   margin-right: auto;
   padding-left: 1rem;
   padding-right: 1rem;
}

/* Dropdown Menu (Desktop) */
.dropdown-content {
   display: none;
   position: absolute;
   background-color: var(--white);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   z-index: 50;
   min-width: 200px;
   border-radius: 8px;
   overflow: hidden;
   padding: 8px 0;
   top: 100%; 
}

.dropdown-content a {
   color: var(--text-dark);
   padding: 10px 16px;
   font-weight: 400;
   text-transform: none;
}

.dropdown-content a:hover {
   background-color: var(--bg-light);
}

.dropdown:hover .dropdown-content {
   display: block;
}

.dropdown-left .dropdown-content {
   left: 0; 
}

.dropdown-right .dropdown-content {
   right: 0; 
   left: auto;
}

.dropdown-link svg {
   margin-left: 4px;
   transition: transform 0.2s;
}

.dropdown:hover .dropdown-link svg {
   transform: rotate(180deg);
}

/* --------------------------------- */
/* CORREÇÃO DE SCROLL DESKTOP       */
/* --------------------------------- */
@media (min-width: 1024px) {
   .dropdown-content {
         /* Altura máxima para evitar que o submenu saia da tela */
         max-height: calc(100vh - 100px); /* 100vh menos o espaço do header/margin */
         /* Adiciona scroll interno ao submenu se o conteúdo for maior que a max-height */
         overflow-y: auto; 
         /* Garante que a rolagem do body não seja afetada */
   }
}

/* --------------------------------- */
/* Menu Mobile Overlay               */
/* --------------------------------- */
.mobile-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--white);
   z-index: 15;
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
   padding-top: 60px; /* Espaço para o header */
   overflow-y: auto;
}

.mobile-menu-overlay.open {
   transform: translateX(0);
}

.mobile-search-container {
   padding: 0 16px 0 16px;
   max-width: 85%;
}

.mobile-nav-list {
   list-style: none;
   padding: 0 16px;
   margin: 0;
}

.mobile-nav-item {
   border-bottom: 1px solid #eee;
}

.mobile-nav-item a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 0;
   text-decoration: none;
   color: var(--text-dark);
   font-size: 1.1rem;
   font-weight: 600;
   width: 100%;
}

.mobile-nav-item a.active {
   color: var(--brand-red);
}

.mobile-submenu-content {
   display: none;
   padding-left: 16px;
   background-color: var(--bg-light);
   transition: max-height 0.3s ease-out;
   overflow: hidden;
   max-height: 0;
}

.mobile-submenu-content.open {
   display: block;
   max-height: 500px; 
}

.mobile-submenu-content a {
   font-size: 1rem;
   font-weight: 400;
   padding: 10px 0;
   color: #666;
   display: block;
}

.mobile-submenu-content a:last-child {
   padding-bottom: 14px;
}

.submenu-arrow {
   transition: transform 0.3s;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT DE CONTEÚDO E GRID RESPONSIVO (mantido)                           */
/* -------------------------------------------------------------------------- */

.highlight-section {
   display: flex;
   flex-direction: column; 
   gap: 24px;
   margin-bottom: 40px;
}

.highlight-main {
   flex-grow: 1; 
   min-width: 0; 
}

.highlight-main-card .main-image {
   width: 100%;
   height: 250px; 
   object-fit: cover;
   border-radius: 12px 12px 0 0;
   display: block;
}

.highlight-main-card .main-content {
   padding: 16px;
}

.highlight-main-card h2 {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 8px 0 10px 0;
   line-height: 1.2;
}
.highlight-main-card .main-description {
   font-size: 0.95rem;
   color: #666;
   margin-bottom: 0;
}

.highlight-secondary {
   flex-shrink: 0;
   width: 100%; 
}

.secondary-card a {
   display: flex;
   align-items: center;
   padding: 12px 0; 
   text-decoration: none;
   color: var(--text-dark);
   border-bottom: 1px solid #eee;
   transition: background-color 0.2s;
}

.secondary-card a:last-child {
   border-bottom: none;
}

.secondary-card a:hover {
   background-color: #fafafa;
}

.secondary-card img {
   width: 80px;
   height: 60px;
   object-fit: cover;
   border-radius: 6px;
   margin-right: 12px;
   flex-shrink: 0;
}

.secondary-card h3 {
   font-size: 0.95rem;
   font-weight: 600;
   margin: 0;
   line-height: 1.3;
}


.article-grid, .media-grid {
   display: grid;
   gap: 24px;
   grid-template-columns: 1fr; 
   margin-bottom: 40px;
}

.article-card a {
   text-decoration: none;
   color: inherit;
}

.article-card img {
   width: 100%;
   height: 200px; 
   object-fit: cover;
   border-radius: 12px 12px 0 0;
   display: block;
}

.article-card-content {
   padding: 16px;
}

.article-card h3 {
   font-size: 1.1rem;
   font-weight: 700;
   margin: 8px 0;
}

.media-card {
   text-decoration: none;
   color: inherit;
}
.video-thumbnail {
   position: relative;
   overflow: hidden;
}
.video-thumbnail img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   border-radius: 12px 12px 0 0;
   display: block;
}
.play-icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--brand-red);
   padding: 12px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.9;
   transition: opacity 0.3s;
}
.media-card:hover .play-icon {
   opacity: 1;
}
.media-content {
   padding: 16px;
}
.media-content h3 {
   font-size: 1.2rem;
   font-weight: 700;
   margin: 8px 0 0 0;
}

/* Rodapé */
footer {
   background-color: var(--footer-bg);
   padding: 40px 0 20px 0;
   margin-top: 40px;
   color: var(--footer-text);
}

.footer-content {
   display: grid;
   gap: 24px;
   grid-template-columns: 1fr; 
   margin-bottom: 32px;
}

.footer-col h4 {
   color: var(--white);
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 16px;
   border-bottom: 2px solid var(--brand-yellow);
   display: inline-block;
   padding-bottom: 4px;
}

.footer-col ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-col ul a {
   color: var(--footer-text);
   text-decoration: none;
   display: block;
   padding: 6px 0;
   font-size: 0.9rem;
   transition: color 0.2s;
}

.footer-col ul a:hover {
   color: var(--white);
}

.footer-logo-area {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
}

.footer-logo-area img {
   width: 200px;
   height: auto;
   object-fit: contain;
}

.footer-copyright {
   text-align: center;
   border-top: 1px solid #444;
   padding-top: 20px;
   font-size: 0.8rem;
}

/* Botão Voltar ao Topo */
#scrollToTopBtn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 100;
   border: none;
   outline: none;
   background-color: var(--brand-red);
   color: white;
   cursor: pointer;
   padding: 12px;
   border-radius: 50%;
   opacity: 0;
   transition: opacity 0.3s, transform 0.3s;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
#scrollToTopBtn.show {
   display: flex;
   opacity: 1;
}
#scrollToTopBtn:hover {
   background-color: #8c3228;
   transform: translateY(-2px);
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVIDADE GERAL                                                     */
/* -------------------------------------------------------------------------- */

/* Tablets (min-width 768px) */
@media (min-width: 768px) {
   
   .search-wrapper {
         display: flex; 
   }
   .menu-toggle-button {
         display: none; 
   }
   
   .article-grid {
         grid-template-columns: repeat(2, 1fr);
   }
   .media-grid {
         grid-template-columns: repeat(2, 1fr);
   }
   
   .footer-content {
         grid-template-columns: repeat(2, 1fr);
   }
}


/* Desktops (mínimo de 1024px) */
@media (min-width: 1024px) {
   
   #desktopNav {
         display: block; 
   }
   
   .footer-content {
         grid-template-columns: 1.5fr 1fr 1fr 1fr;
   }

   .highlight-section {
         flex-direction: row;
   }
   
   /*.highlight-main {
          75% 
         flex-basis: 75%;
         max-width: 75%;
   }*/

   .highlight-secondary {
         /* 25% */
         flex-basis: 25%;
         max-width: 25%;
   }

   .highlight-main-card .main-image {
         height: 400px; 
   }
   
   .article-grid {
         grid-template-columns: repeat(3, 1fr);
   }
   
   /* Ajuste de Padding/Espaçamento para Desktop */
   .nav-list {
         justify-content: flex-start;
         gap: 8px; /* Adiciona um pequeno gap entre os itens */
   }
   .nav-item a {
         padding: 12px 12px;
   }
}

/* Desktops Maiores (mínimo de 1280px) */
@media (min-width: 1280px) {
   .nav-list {
         gap: 16px; /* Aumenta o gap em telas maiores para mais ar */
   }
   .nav-item a {
         padding: 12px 16px;
   }
}

/* Menu */
a.ag-menu-item-inicio::before {
   /* content: url('caminho/do/seu-icone.png');*/ /* Insere a imagem */
   content: '\f015';
}

a.ag-menu-item-ag-news::before {
   /* content: url('caminho/do/seu-icone.png');*/ /* Insere a imagem */
   content: '\f1ea';
}

a.ag-menu-item-seu-time::before {
   /* content: url('caminho/do/seu-icone.png');*/ /* Insere a imagem */
   content: '\f1e3';
}

a.ag-menu-item-copa-2026::before {
   content: "";
   width: 20px; 
   height: 20px; 
   background-image: url('img/logo-wc26.png');
   background-size: contain;
   background-repeat: no-repeat;
}

a.ag-menu-item-podcasts::before {
   content: '\f130';
}

a.ag-menu-item-perfil::before {
   content: '\f007';
}

a.ag-menu-item-data-ag::before {
   content: '\f201';
}


a.ag-menu-item-inicio::before,
a.ag-menu-item-ag-news::before,
a.ag-menu-item-seu-time::before,
a.ag-menu-item-copa-2026::before,
a.ag-menu-item-podcasts::before,
a.ag-menu-item-data-ag::before,
a.ag-menu-item-perfil::before {
   display: inline-block;
   margin-right: 8px; 
   vertical-align: middle; 
   font: var(--fa-font-solid); 
   color: white; 
   margin-right: 5px;
}

ul.sidebar-nav-list {
   list-style: none;
   padding: 0px !important;   
}

.sidebar-nav-list .menu-item a {
   display: block;
}

.sidebar-nav-list .menu-item {
   padding: 12px 0;
   background-color: var(--brand-red);
   
   margin-bottom: 5px;
}

.sidebar-nav-list .menu-item a {
   margin: 0 16px 0;
   color: white !important;
}

.sidebar-nav-list .menu-item a:hover {
   font-weight: 600 !important;
   text-decoration: none;
}

.sidebar-nav-list .menu-item a:active {
   font-weight: 200 !important;
}

/* -------------------------------------------------------------------------- */
/* ESTILOS ESPECÍFICOS DO POST                                              */
/* -------------------------------------------------------------------------- */
.post-header {
   max-width: 900px;
   margin: 0 auto 2rem;
   padding-top: 1rem;
}

.post-title {
   font-size: 2rem;
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 0.5rem;
   color: var(--text-dark);
}

.post-subtitle {
   font-size: 1.1rem;
   color: #666;
   margin-bottom: 1rem;
   font-weight: 400;
}

.post-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap; 
   font-size: 0.85rem;
   color: #888;
   margin-bottom: 1.5rem;
   border-bottom: 1px solid #eee;
   padding-bottom: 0.5rem;
}

.post-meta > * {
   margin-bottom: 0.25rem; 
}
/* Ajusta a margem do separador para mobile */
.post-meta span[style*="margin: 0 10px;"] {
   margin: 0 8px !important; 
}

.post-meta a {
   color: var(--brand-red);
   font-weight: 600;
   text-decoration: none;
}

.post-image {
   width: 100%;
   height: auto;
   max-height: 500px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 1.5rem;
}

article.post-content {
   background-color: var(--white);
   padding: 1rem; 
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.post-content h2, .post-content h3 {
   font-weight: 700;
   margin-top: 2rem;
   margin-bottom: 1rem;
   line-height: 1.3;
}

.post-content h2 {
   font-size: 1.6rem;
   border-left: 4px solid var(--brand-yellow);
   padding-left: 0.75rem;
}

.post-content h3 {
   font-size: 1.3rem;
   color: var(--brand-red);
   border-left: 3px solid var(--brand-yellow);
   padding-left: 0.5rem;
}

.post-content p {
   margin-bottom: 1.2rem;
   font-size: 1.05rem;
}

.post-content blockquote {
   border-left: 5px solid var(--brand-red);
   padding: 1rem 1.5rem;
   margin: 1.5rem 0;
   background-color: var(--white);
   font-style: italic;
   color: #555;
   font-size: 1.1rem;
   border-radius: 0 4px 4px 0;
}

.post-content ul, .post-content ol {
   margin-left: 1.5rem;
   margin-bottom: 1.5rem;
}

.post-content img {
   margin-right: auto;
   margin-left: auto;
   display: block;
   clear: both;
}

.post-content p,
.post-content blockquote,
.post-content ul,
.post-content ol {
   word-break: break-word; 
   overflow-wrap: break-word; 
}

.wp-caption-text {
    font-size: 0.9em !important; 
    color: #666; 
    text-align: center; 
    margin-top: 0px; 
    padding: 5px 10px;
    background-color: #f8f8f8; 
    border-radius: 3px; 
    line-height: 1.4; 
    font-style: italic;
}

/* Layout Grid para Desktop */
.post-layout {
   display: block;
   grid-template-columns: 1fr;
   gap: 2rem;
}

@media (min-width: 1024px) {
   .post-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
   }
   .post-title {
      font-size: 2.5rem; 
   }
   .post-content h2 {
      font-size: 1.8rem; 
   }
   .post-content h3 {
      font-size: 1.5rem; 
   }
}

/* Restaura o padding maior para tablets e desktops */
@media (min-width: 768px) {
    article.post-content {
        padding: 1.5rem; 
    }
}

.fact-box{
   margin: 24px 0; 
   padding: 24px 16px; 
   border-left: 5px solid var(--brand-red); 
   background-color: var(--bg-light);
}

/* SIDEBAR */
.sidebar {
   background-color: var(--white);
   padding: 1.5rem 1rem;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.author-box {
   text-align: center;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid #eee;
}

.author-box-img {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto 10px;
   border: 3px solid var(--brand-yellow);
}

.author-name {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--brand-red);
}

.author-bio {
   font-size: 0.9rem;
   color: #666;
   margin-top: 0.5rem;
}

.related-posts {
   margin-top: 1.5rem;
}

.related-posts h4 {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 1rem;
   border-left: 3px solid var(--brand-red);
   padding-left: 0.5rem;
}

.related-posts ul {
   list-style: none;
   padding: 0;
}

.related-posts li {
   margin-bottom: 1rem;
   border-bottom: 1px dashed #eee;
   padding-bottom: 1rem;
}

.related-posts li a {
   display: block;
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--text-dark);
   text-decoration: none;
}

.related-posts li a:hover {
   color: var(--brand-red);
}

@media (min-width: 768px) {
    .sidebar {
        padding: 1.5rem; /* Restaura o padding original para telas maiores/tablet */
    }
}

/* -------------------------------------------------------------------------- */
/* ESTILOS DE COMENTÁRIOS                                                     */
/* -------------------------------------------------------------------------- */
.ag-area-comentarios {
    max-width: 900px;
    margin: 3rem auto 0;
    background-color: var(--white);
    padding: 2rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ag-titulo_comentario {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-red);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--brand-yellow);
    padding-bottom: 0.5rem;
}

/* Lista de Comentários */
.ag-listagem-comentários {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ag-listagem-comentários li {
    border-bottom: 1px solid #eee;
    padding: 1.5rem 0;
}

.comment-body {
    display: flex;
    gap: 0.75rem;
}

.comment-author.vcard {
    display: block;
    align-items: center;
    gap: 0;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.comment-author img {
    width: 40px; 
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: 2px solid var(--brand-yellow);
}

.comment-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.8rem;
}

.comment-content p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.reply a {
    color: var(--brand-red);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Navegação de Comentários */
.ag-nav.comentarios-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.ag-nav-info {
    display: none;
}

.ag-nav a {
    color: var(--brand-red);
    font-weight: 600;
    text-decoration: none;
}

/* Formulário de Comentário */
#respond {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed #ccc;
}

#reply-title {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.comment-form-comment label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.comment-form-comment textarea, .comment-form input:not([type="submit"]):not([type="checkbox"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-submit input[type="submit"] {
    background-color: var(--brand-red);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
    width: 100%;
    max-width: 250px;
}

.form-submit input[type="submit"]:hover {
    background-color: #8D3025;
}

.form-submit {
    text-align: left; 
}

@media (min-width: 768px) {
    .ag-area-comentarios {
        padding: 2rem; /* Restaura o padding original de 2rem */
    }
    .ag-titulo_comentario {
        font-size: 1.8rem; /* Restaura o tamanho original */
    }
    .comment-body {
        gap: 1rem; /* Restaura o gap original */
    }
    .comment-author img {
        /* Retorna a um tamanho ligeiramente maior ou mantém o 40px se for o suficiente */
        width: 48px; 
        height: 48px;
        min-width: 48px; 
    }
    .form-submit {
        text-align: right; /* Alinha o botão à direita em telas maiores, se preferir */
    }
    .form-submit input[type="submit"] {
        width: auto; /* Deixa o botão com largura automática em telas maiores */
    }
}

/*=============================================================*/
/* BOTÕES SOCIAIS */
.ag-social-video-bar {
    display: flex;
    justify-content: center; /* Centers buttons horizontally */
    flex-wrap: wrap; /* Allows buttons to wrap onto multiple lines on small screens */
    gap: 10px; /* Space between buttons */
    padding: 15px;
    background-color: #f1f1f1;
    width: 100%;
    box-sizing: border-box; /* Ensures padding/border are included in width calculation */
}

.ag-social-video-icon {
    display: inline-flex; /* Makes centering the icon inside the link easier */
    align-items: center;
    justify-content: center;
    width: 160px; /* Adjust size as needed */
    height: 50px;
    border-radius: 30px; /* Creates round buttons */
    color: white;
    text-decoration: none;
    font-size: 24px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.ag-social-video-icon:hover {
    transform: scale(1.1); /* Adds a slight zoom effect on hover */
    opacity: 0.8;
}

/* Specific colors for each platform */
.ag-icon-video-youtube {
    background-color: #ff0000;
}

.ag-icon-video-instagram {
    /* Instagram has a gradient, so a linear gradient is a good choice */
    background-image: linear-gradient(to top right, #fcb045, #fd1d1d, #833ab4);
}

.ag-icon-video-tiktok {
    background-color: #000000;
}

a.ag-icon-video-youtube,  
a.ag-icon-video-instagram, 
a.ag-icon-video-tiktok {
    text-decoration: none !important;
}

/* Responsiveness for very small screens */
@media (max-width: 400px) {
    .ag-social-video-bar {
        flex-direction: column; /* Stacks buttons vertically on extra small screens */
        align-items: center;
    }
}
/*==============================================================*/

/*Página Inicial*/

.ag-card-curiosidade p{
   margin: 0 auto;
   font-weight: bold;
}

.ag-card-curiosidade p {
   font-size: 14px;
}

/* Single */

.tag-list {
    display: flex;    
    flex-wrap: wrap;     
    gap: 8px 5px;    
    margin-top: 8px;
}


.tag-item { 
   padding: 5px 8px;
   border-radius: 12px;
   text-transform: lowercase;
   background-color: var(--brand-red);
   color: var(--white);
   display: block; 
   flex-shrink: 0;
   margin: 0;
}
.tag-item a { 
   color:var(--white);
   font-size:small;
   font-weight:bold;
   white-space: nowrap;
}

.post-tags {
    margin-top: 24px;
    padding-bottom: 12px;
    border-top: 1px dashed #eee;
}

.post-tags h4{
   margin: 0 0 5px 0;
   font-size: 1rem;
   color: var(--text-dark);
}

/* Archive */

/* --- ESTILOS DE ARQUIVO (Categoria, Tag, Data) --- */

.archive-header {
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-bottom: 2px solid var(--brand-yellow);
}

.archive-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.archive-description {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* LAYOUT PRINCIPAL DO ARQUIVO (Mobile-First: Coluna Única) */
.archive-layout {
    display: grid;
    /* Coluna única no mobile: posts e sidebar empilhados */
    grid-template-columns: 1fr; 
    gap: 2rem;
}

/* BREAKPOINT: LAYOUT DE DUAS COLUNAS EM TELAS MAIORES */
@media (min-width: 1024px) {
    .archive-layout {
        /* Layout de duas colunas: posts (2fr) e sidebar (1fr) */
        grid-template-columns: 2fr 1fr; 
    }
}

/* Curiosidades */

.type-curiosidade a:hover {
   text-decoration: none !important;
   font-weight: bold;
}

/* --- ESTILOS DO CARD DE POST (ITENS DA LISTAGEM) --- */

.post-card {
    display: flex;
    flex-direction: column; /* MOBILE-FIRST: Imagem acima do conteúdo */
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee; /* Separador entre os cards */
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sutil sombra para destacar o card */
    padding: 1rem;
}

.post-card:last-child {
    border-bottom: none; /* Remove o separador do último item */
}

/* Imagem de Destaque */
.post-card-image {
    flex-shrink: 0; /* Impede que a imagem encolha se o texto for longo */
    width: 100%; /* Ocupa 100% da largura no mobile */
    max-height: 250px; /* Limita a altura da imagem no mobile */
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Conteúdo de Texto */
.post-card-content {
    flex-grow: 1;
}

.post-card-title {
    font-size: 1.4rem; /* Tamanho do título mobile */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-card-title a {
    color: var(--text-dark);
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--brand-red);
}

.post-card-meta {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.post-card-meta a {
    color: #999;
}

.post-card-meta a:hover {
    text-decoration: underline;
}

.post-card-excerpt {
    font-size: 0.95rem;
    color: #555;
}

/* BREAKPOINT: LAYOUT DE DUAS COLUNAS PARA O CARD (Tablet/Desktop) */
@media (min-width: 768px) {
    .post-card {
        flex-direction: row; /* Layout horizontal (Imagem à esquerda, Conteúdo à direita) */
        align-items: flex-start;
        padding: 1.5rem; /* Aumenta o padding do card em telas maiores */
    }

    .post-card-image {
        width: 300px; /* Largura fixa para a imagem em telas maiores */
        max-height: 150px;
    }
    
    .post-card-content {
        padding-left: 1.5rem; /* Adiciona espaço entre imagem e texto */
    }

    .post-card-title {
        font-size: 1.6rem; /* Aumenta o tamanho do título no desktop */
    }
}

/* --- ESTILOS DE PAGINAÇÃO --- */
.pagination {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    gap: 1rem;
}

.pagination a, .pagination span {
    padding: 10px 15px;
    border: 1px solid var(--brand-yellow);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    transition: background-color 0.2s;
}

.pagination .current {
    background-color: var(--brand-yellow);
    color: var(--text-dark);
}

.pagination a:hover {
    background-color: #fce79f; /* Um tom mais claro do amarelo */
}

/* --- ESTILOS DE SIDEBAR (Garante que ela mantenha o estilo existente) --- */
.archive-sidebar {
    /* Reutiliza o estilo .sidebar existente */
    margin-top: 0; /* Não precisa de margem superior extra se for um grid item */
}


/*Página de Times*/

.page-hero-content {
  position: relative;
  padding: 30px 0;
  z-index: -20;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.page-hero-title {
  color: inherit;
  margin: 0;
  position: absolute;
  left: 100px;
  top: 35%;
}

.ag-header-clube {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: anchor-center;
   gap: 10px;
   height: 50px;
}

.tag-header-clube{
   padding-top: 0 !important;
   border-bottom: 0px !important;
}

.ag-header-clube img {
   height: 100px;
   position: absolute;
   top: 10px;
}

.ag-img-clube-contain{
   object-fit: contain;
}

.ag-header-clube .page-hero-title{
	font-size: 30px;
   text-transform: uppercase;
   line-height: 1 !important;
      
}

.ag-header-clube-palmeiras,
.ag-header-clube-fluminense {
   color: #ffffff; 
   background-color: #34765A; 
   border: 5px solid #34765A;
}

.ag-header-clube-botafogo,
.ag-header-clube-atletico-mg,
.ag-header-clube-vasco,
.ag-header-clube-santos,
.ag-header-clube-corinthians {
   color: #ffffff; 
   background-color: #000000; 
   border: 5px solid #000000;
}

.ag-header-clube-cruzeiro {
   color: #ffffff; 
   background-color: #1e00c7; 
   border: 5px solid #1e00c7;
}

.ag-header-clube-gremio {
   color: #ffffff; 
   background-color: #72aef3; 
   border: 5px solid #72aef3;
}

.ag-header-clube-flamengo,
.ag-header-clube-internacional,
.ag-header-clube-sao-paulo {
   color: #ffffff; 
   background-color: #db0303; 
   border: 5px solid #db0303;
}

.ag-ficha-clube {
   margin-bottom: 15px;
}

@media (min-width: 768px) {
   .page-hero-title{
      font-size: 50px !important; 
      top: 30% !important;
      left: 110px !important;
   }
}

/*Página de Eventos*/
.ag-header-clube-brasileirao,
.ag-header-clube-serie-b,
.ag-header-clube-serie-c,
.ag-header-clube-serie-d {
   color: #000000; 
   background-color: #fffec8; 
   border: 5px solid #fffec8;
}

.ag-header-clube-copa-do-brasil,
.ag-header-clube-copa-2026,
.ag-header-clube-la-2028 {
   color: #020202; 
   background-color: #c0ad00; 
   border: 5px solid #c0ad00;
}

/*============================================================================*/
/*Social Share*/
/*============================================================================*/

#div_block-5-13647 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
   position: fixed;
   top: 50%;
   left: 0px;
   z-index: 10;
   width: auto;
   flex-direction: column;
   line-height: 0 !important;
}

#div_block-5-13647 .ct-fancy-icon>svg{
   fill: white !important;
}

#div_block-5-13647 p{
   margin: 0px !important;
}

#div_block-77-13647 {
   background-color: #e1eaf8
}

#div_block-77-13647:hover {
   background-color: #a98cff
}

#link-72-13647 {
   text-align: center;
   display: flex;
   
}

#link-13-13647 {
   text-align: center;
   display: flex;
   
}

#link-17-13647 {
   text-align: center;
   display: flex;
   
}

#link-21-13647 {
   text-align: center;
   display: flex;
   
}

#link-25-13647 {
   text-align: center;
   display: flex;
   
}

#link-64-13647 {
   text-align: center;
   display: flex;
   
}

#link-68-13647 {
   text-align: center;
   display: flex;
   
}

body.single .entry-content .social-icons-container p {
	line-height: 0px;
}

.social-button {
   border-radius: 5px;
   background-color: #efefef;
   transition-duration: 0.5s;
   margin-right: 5px;
   margin-bottom: 5px;
   margin-left: 5px;
}

.social-icon {
   color: #ffffff;
}

.social-icon>svg {
   width: 23px;
   height: 23px;
}

.social-text {
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
   font-weight: 400;
}

.social-text:not(.ct-section),
.social-text.ct-section .ct-section-inner-wrap {
   display: none;
   flex-direction: unset;
}

.social-icon-container {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   padding-top: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
}

.social-fb:hover {
   background-color: #354e83;
}

.social-fb {
   background-color: #43609c;
}

.social-tw:hover {
   background-color: #292929;
}

.social-tw {
   background-color: #000000;
}

.social-ld:hover {
   background-color: #044568;
}

.social-ld {
   background-color: #0077b5;
}

.social-pt:hover {
   background-color: #af040a;
}

.social-pt {
   background-color: #c92228;
}

.social-wa:hover {
   background-color: #176e0b;
}

.social-wa {
   background-color: #34af23;
}

.social-icons-container {
   transform: translateY(-50%);
}

.social-te:hover {
   background-color: #4084a6;
}

.social-te {
   background-color: #0088cc;
}

.social-mail:hover {
   background-color: #999;
}

.social-mail {
   background-color: #a8a8a8;
}

.ct-fancy-icon>svg {
   fill: currentColor;
}

a.social-button {
   text-decoration: none
}

.ct-link {
   display: flex;
   flex-wrap: wrap;
   text-align: center;
   text-decoration: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

@media (max-width:1120px) {
   #div_block-5-13647 {
      position: relative;
      flex-direction: row;
      display: flex;
      justify-content: center;
      text-align: center;
      margin-bottom: 10px;
      top: 0px;
      width: 100%;
      z-index: 0;
      left: auto;
      right: auto
   }

   #div_block-77-13647 {
      flex-direction: unset;
      display: none
   }

   .social-button {
      margin-bottom: 2px !important;
   }

   .social-text:not(.ct-section),
   .social-text.ct-section .ct-section-inner-wrap {
      display: block;
      flex-direction: unset;
   }

   .social-icon-container {
      background-color: #354e83;
   }

   .social-icon-tw {
      background-color: #000000;
   }

   .social-icons-container {
      transform: translateY(0);
   }

   .social-icon-wa {
      background-color: #176e0b;
   }

   .social-icon-ld {
      background-color: #044568;
   }

   .social-icon-mail {
      background-color: #999;
   }

   .social-icon-te {
      background-color: #4084a6;
   }

   .social-icon-pt {
      background-color: #af040a;
   }

   .no-popup:not(.ct-section),
   .no-popup.ct-section .ct-section-inner-wrap {
      flex-direction: unset;
   }

   .social-mail {
      background-color: #a8a8a8;
   }

   .social-mail:hover {
      background-color: #999;
   }

   .social-te {
      background-color: #0088cc;
   }

   .social-te:hover {
      background-color: #4084a6;
   }

   .social-button:not(.ct-section),
   .social-button.ct-section .ct-section-inner-wrap {
      flex-direction: row;
   }
}

@media (max-width: 479px) {

   .social-text:not(.ct-section),
   .social-text.ct-section .ct-section-inner-wrap {
      display: none;
      flex-direction: unset;
   }

   #div_block-5-13647 {
      position: fixed;
      top: 100%;
      z-index: 10
   }

   #link-21-13647 {
      flex-direction: unset;
      display: none
   }

   #link-68-13647 {
      flex-direction: unset;
      display: none
   }

   .social-button {
      margin-right: 0px !important;
   }

   .social-icon-container,
   .social-icon-tw,
   .social-icon-ld,
   .social-icon-pt {
      background-color: transparent;
   }

   .social-icon-pt {
      background-color: #af040a;
   }

   .social-pt:not(.ct-section),
   .social-pt.ct-section .ct-section-inner-wrap {
      flex-direction: unset;
   }

   .social-icons-container {
      transform: translateY(-95%);
   }

   .social-button {
      margin-top: 0px;
      margin-left: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      border-radius: 0px;
      width: 20%;
      padding-top: 3px;
      padding-bottom: 3px;
   }
}

/*Genério*/

.ag-rounded-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 160px;
   height: 50px;
   border-radius: 30px;
   color: white;
   text-decoration: none;
   font-size: 24px;
   background-color: var(--brand-red);
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
   padding-left: 20px;
   padding-right: 20px;
}


a.ag-rounded-button:visited {
   color: white !important;
   font-weight: bolder;
   text-decoration: none;
}