/* =========================================================
   RÁDIO CRAQUE NETO — CSS principal do tema
   Paleta e tipografia fiéis aos mockups aprovados.
   ========================================================= */

:root{
  --rcn-amarelo: #ffd247;
  --rcn-amarelo-dim: #e0b639;
  --rcn-escuro: #181b23;
  --rcn-escuro-soft: #20242f;
  --rcn-escuro-linha: #2c303c;
  --rcn-claro: #f0ede6;
  --rcn-claro-dim: #b9b6ae;
  --rcn-verde: #3ddc84;
  --rcn-vermelho: #ff5c5c;
  --rcn-radius: 10px;
  --rcn-font-display: 'Archivo Expanded', sans-serif;
  --rcn-font-body: 'Archivo', sans-serif;
  --rcn-max-width: 1320px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  background: var(--rcn-escuro);
  color: var(--rcn-claro);
  font-family: var(--rcn-font-body);
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background: var(--rcn-amarelo); color: var(--rcn-escuro); }

:focus-visible{
  outline: 2px solid var(--rcn-amarelo);
  outline-offset: 2px;
  border-radius: 4px;
}

.rcn-container{
  max-width: var(--rcn-max-width);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 980px){
  .rcn-container{ padding: 0 20px; }
}

/* =========================================================
   HEADER PADRÃO (usado na Home)
   ========================================================= */
/* =========================================================
   HEADER PADRÃO (usado na Home, Estatísticas, Partidas, etc.)
   FIXO no topo em todas as páginas — decisão de produto explícita:
   o menu deve permanecer sempre visível e na mesma posição (topo),
   nunca migrar para uma sidebar lateral, mesmo em páginas com layout
   mais denso de conteúdo (ex: Tabelas e Classificações).
   ========================================================= */
.rcn-site-header{
  display:flex;
  align-items:center;
  gap: 32px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--rcn-escuro-linha);
  background: var(--rcn-escuro);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

/* Compensa a altura do header fixo, para o conteúdo da página não
   ficar escondido atrás dele. A altura aproximada do header (logo +
   padding) é usada como referência — ajustada via variável para
   reaproveitar em qualquer página que precise do mesmo espaçamento. */
:root{
  --rcn-altura-header: 89px;
}
#conteudo-principal{
  padding-top: var(--rcn-altura-header);
}

.rcn-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink: 0;
}
.rcn-brand img{ height: 52px; width:auto; max-width: none; }

.rcn-main-nav{
  display:flex;
  gap: 28px;
  flex: 1;
}
.rcn-main-nav ul{
  display:flex;
  gap: 28px;
  list-style:none;
}
.rcn-main-nav a{
  font-family: var(--rcn-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rcn-claro-dim);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  text-transform: uppercase;
}
.rcn-main-nav a:hover{ color: var(--rcn-claro); }
.rcn-main-nav .current-menu-item a,
.rcn-main-nav .current_page_item a,
.rcn-main-nav a.rcn-nav-current{
  color: var(--rcn-amarelo);
  border-bottom-color: var(--rcn-amarelo);
}

/* Suporte a dropdown de submenu (ex: "Campeonatos" > Brasileirão, Copa
   do Brasil, Libertadores...) — usa os itens-filho criados nativamente
   em Aparência > Menus (arrastando um item para debaixo/à direita de
   outro). O WordPress já marca o item pai com a classe
   "menu-item-has-children" automaticamente; não precisa de nenhuma
   configuração extra alem de estruturar o menu visualmente no admin. */
.rcn-main-nav li{
  position: relative;
}
.rcn-main-nav .sub-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  flex-direction: column;
  gap: 2px;
  z-index: 210;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.rcn-main-nav li:hover > .sub-menu,
.rcn-main-nav li:focus-within > .sub-menu{
  display: flex;
}
.rcn-main-nav .sub-menu a{
  text-transform: none;
  font-size: 13px;
  letter-spacing: normal;
  padding: 9px 12px;
  border-radius: 6px;
  border-bottom: none;
  white-space: nowrap;
}
.rcn-main-nav .sub-menu a:hover{
  background: var(--rcn-escuro-linha);
  color: var(--rcn-amarelo);
}
/* Pequena seta indicando que o item tem submenu. */
.rcn-main-nav .menu-item-has-children > a::after{
  content: '▾';
  margin-left: 5px;
  font-size: 10px;
  display: inline-block;
}

/* Preview de notícias com foto, ao passar o mouse no item "Notícias"
   do menu — injetado via JS no header.php (não é um submenu nativo do
   WordPress, é conteúdo dinâmico próprio, daí precisar de classes e
   regras de hover dedicadas em vez de reaproveitar .sub-menu). */
.rcn-tem-preview-noticias{
  position: relative;
}
.rcn-preview-noticias{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 600px;
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: 10px;
  padding: 14px;
  z-index: 210;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.rcn-tem-preview-noticias:hover > .rcn-preview-noticias,
.rcn-tem-preview-noticias:focus-within > .rcn-preview-noticias{
  display: grid;
}
.rcn-preview-noticias__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  transition: background .15s ease;
}
.rcn-preview-noticias__item:hover{
  background: var(--rcn-escuro-linha);
}
.rcn-preview-noticias__item img,
.rcn-preview-noticias__sem-imagem{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #0e0f14;
}
.rcn-preview-noticias__titulo{
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rcn-claro);
  text-transform: none;
  letter-spacing: normal;
}
.rcn-preview-noticias__ver-todas{
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--rcn-amarelo);
  padding: 10px 0 2px;
  border-top: 1px solid var(--rcn-escuro-linha);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: normal;
}
@media (max-width: 980px){
  .rcn-preview-noticias{ display: none !important; } /* menu mobile já some via .rcn-main-nav{display:none}; evita resíduo visual. */
}

.rcn-header-actions{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-shrink: 0;
}

.rcn-icon-btn{
  width: 38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  color: var(--rcn-claro-dim);
  transition: background .15s ease, color .15s ease;
}
.rcn-icon-btn:hover{ background: var(--rcn-escuro-soft); color: var(--rcn-claro); }
.rcn-icon-btn svg{ width:19px; height:19px; }

.rcn-btn{
  font-family: var(--rcn-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 11px 22px;
  border-radius: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.rcn-btn-outline{
  border: 1.5px solid var(--rcn-amarelo);
  color: var(--rcn-amarelo);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.rcn-btn-outline:hover{ background: var(--rcn-amarelo); color: var(--rcn-escuro); }
.rcn-btn-solid{
  background: var(--rcn-amarelo);
  color: var(--rcn-escuro);
  border: 1.5px solid var(--rcn-amarelo);
  transition: filter .15s ease;
}
.rcn-btn-solid:hover{ filter: brightness(1.08); }

@media (max-width: 980px){
  .rcn-main-nav{ display:none; }
  .rcn-site-header{ padding: 16px 20px; gap:16px; }
  .rcn-btn-outline{ display:none; }
}

/* =========================================================
   SEÇÕES GENÉRICAS (usadas em várias páginas)
   ========================================================= */
.rcn-section-heading{
  display:flex; align-items:center; justify-content: space-between;
  margin: 44px 0 22px;
}
.rcn-section-heading h2{
  font-family: var(--rcn-font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  display:flex; align-items:center; gap: 12px;
  margin:0;
  text-transform: uppercase;
}

/* Título especial "Estamos ao vivo, garotinho!" (front-page.php) —
   única exceção à tipografia padrão de título de seção: Montserrat
   Black (peso 900) com letter-spacing bem apertado (-49%, valor
   solicitado explicitamente, bem mais agressivo que o letter-spacing
   padrão positivo usado nos outros títulos de seção). */
.rcn-titulo-ao-vivo{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.049em !important; /* equivalente a "-49" na escala do Canva (-100 a 100, cada unidade ≈ 0.001em) */
}
.rcn-section-heading h2::before{
  content:"";
  width: 4px; height: 24px;
  background: var(--rcn-amarelo);
  border-radius: 2px;
}
.rcn-pill-link{
  display:flex; align-items:center; gap:6px;
  border: 1px solid var(--rcn-escuro-linha);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rcn-claro);
  transition: border-color .15s ease, color .15s ease;
}
.rcn-pill-link:hover{ border-color: var(--rcn-amarelo); color: var(--rcn-amarelo); }

/* =========================================================
   HOME — Player de transmissão
   ========================================================= */
.rcn-home-main{ padding: 36px 0 64px; }

.rcn-player-card{
  background: #0e0f14;
  border-radius: var(--rcn-radius);
  overflow: hidden;
  border: 1px solid var(--rcn-escuro-linha);
  margin-bottom: 32px; /* espaço entre o player e a próxima seção
                           (Placar ao Vivo) — sem isso, ficavam colados
                           visualmente um no outro. */
}
.rcn-player-frame{
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}
.rcn-player-frame iframe{
  width: 100%; height: 100%; border:none;
}
.rcn-player-placeholder{
  position: absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(10,12,16,.15), rgba(10,12,16,.75) 78%),
    linear-gradient(180deg, #2a3a2e 0%, #1f2b22 38%, #16201a 100%);
  text-align:center;
  color: var(--rcn-claro-dim);
  font-size: 14px;
}
.rcn-player-placeholder a{ color: var(--rcn-amarelo); font-weight:700; }
.rcn-live-badge{
  position:absolute; top:18px; left:18px;
  display:flex; align-items:center; gap:7px;
  background: rgba(12,14,19,.85);
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--rcn-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rcn-live-dot{
  width: 8px; height:8px; border-radius:999px;
  background: var(--rcn-vermelho);
  display:inline-block;
  animation: rcn-pulse 1.8s infinite;
}
@keyframes rcn-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,92,92,.5); }
  70%{ box-shadow: 0 0 0 8px rgba(255,92,92,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,92,92,0); }
}

/* Variante "offline" do badge — usada quando não há transmissão ativa
   (ver front-page.php, detecção via YouTube IFrame API onError). Cor
   neutra (cinza) em vez do vermelho pulsante de "AO VIVO", e sem
   animação — sinaliza claramente "sem transmissão agora" em vez de
   sugerir, por engano, que algo está acontecendo. */
.rcn-live-badge--offline{
  background: rgba(12,14,19,.85);
}
.rcn-live-dot--offline{
  background: var(--rcn-claro-dim);
  animation: none;
}

/* =========================================================
   HOME — Grid de notícias
   ========================================================= */
.rcn-news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px){
  .rcn-news-grid{ grid-template-columns: 1fr; }
}
.rcn-news-card{
  background: #0e0f14;
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.rcn-news-card:hover{ border-color: var(--rcn-amarelo-dim); transform: translateY(-2px); }
.rcn-news-card__imagem{ display:block; aspect-ratio: 16/10; overflow:hidden; }
.rcn-news-card__imagem img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s ease;
}
.rcn-news-card:hover .rcn-news-card__imagem img{
  transform: scale(1.08); /* zoom contido pelo overflow:hidden do container pai — a foto cresce, mas nunca "escapa" do card. */
}
.rcn-news-card__imagem-placeholder{
  width:100%; height:100%;
  background: linear-gradient(135deg,#23262f,#181b23);
}
.rcn-news-card__corpo{ padding: 16px 18px 20px; }
.rcn-news-card__categoria{
  font-size: 11px; font-weight:700; color: var(--rcn-amarelo);
  letter-spacing: .04em;
}
.rcn-news-card__titulo{
  font-size: 15px; font-weight:700; margin: 8px 0 6px; line-height:1.35;
}
.rcn-news-card__titulo a:hover{ color: var(--rcn-amarelo); }
.rcn-news-card__data{ font-size: 12px; color: var(--rcn-claro-dim); }

.rcn-bloco__vazio{
  padding: 16px;
  color: var(--rcn-claro-dim);
  opacity: .6;
  font-size: 14px;
  text-align: center;
}
/* =========================================================
   FOOTER
   ========================================================= */

.rcn-site-footer{
  border-top: 1px solid var(--rcn-escuro-linha);
  padding: 48px 40px 0;
  margin-top: 60px;
  background: #11131a;
}
.rcn-site-footer__conteudo{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 36px;
}
.rcn-site-footer__marca{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* CAUSA RAIZ REAL de um bug visto em produção:
    o padrão de flex é "align-items: stretch", que força os itens FILHOS
    a ocuparem toda a largura do container pai (no eixo perpendicular ao
    da coluna, ou seja, a largura). Isso fazia a logo (filha direta deste
    container) ser ESTICADA horizontalmente para acompanhar a largura do
    item mais largo do grupo — que mudava dinamicamente conforme mais
    ícones de redes sociais eram preenchidos no Customizer, distorcendo
    a logo de forma diferente a cada vez. flex-start faz cada filho
    manter sua largura NATURAL, sem nenhum estiramento. */
  gap: 20px;
}
.rcn-site-footer__logo{
  height: 48px;
  width: auto;
  max-width: none; /* sobrescreve a regra global "img{ max-width:100% }" —
                       sem isso, em containers estreitos o navegador
                       comprimia a LARGURA mas mantinha a ALTURA fixa em
                       48px, distorcendo a logo (esmagada horizontalmente). */
  flex-shrink: 0; /* impede que o flexbox encolha a logo para "ajudar" a
                      caber outros itens — combinado com align-items:
                      flex-start acima, garante que a logo nunca seja
                      redimensionada por nada além do height:48px definido. */
}

.rcn-site-footer__redes{
  display: flex;
  gap: 10px;
}
.rcn-site-footer__rede-icone{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rcn-escuro-soft);
  border-radius: 999px;
  color: var(--rcn-claro-dim);
  transition: background .15s ease, color .15s ease;
}
.rcn-site-footer__rede-icone svg{ width: 18px; height: 18px; }
.rcn-site-footer__rede-icone:hover{
  background: var(--rcn-amarelo);
  color: var(--rcn-escuro);
}

.rcn-site-footer__colunas{
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.rcn-site-footer__coluna h4{
  font-family: var(--rcn-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rcn-claro);
  margin-bottom: 14px;
}

.rcn-footer-copy{
  font-size: 12.5px;
  color: var(--rcn-claro-dim);
  padding: 20px 0;
  border-top: 1px solid var(--rcn-escuro-linha);
}
.rcn-footer-links{
  display:flex;
  flex-direction: column;
  gap: 12px;
  list-style:none;
}
.rcn-footer-links a{
  font-size: 13px;
  color: var(--rcn-claro-dim);
  transition: color .15s ease;
}
.rcn-footer-links a:hover{ color: var(--rcn-amarelo); }

@media (max-width: 640px){
  .rcn-site-footer{ padding: 36px 20px 0; }
  .rcn-site-footer__conteudo{ flex-direction: column; gap: 28px; }
}

/* =========================================================
   FÓRUM — cabeçalho da página e estado "não instalado"
   ========================================================= */
.rcn-forum-header-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 36px 0 0;
  flex-wrap: wrap;
  gap: 16px;
}
.rcn-forum-header-row h1{
  font-family: var(--rcn-font-display);
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 6px;
}
.rcn-forum-header-row p{
  color: var(--rcn-claro-dim);
  font-size: 14.5px;
}

.rcn-account-pill{
  display:flex; align-items:center; gap: 8px;
  font-size: 13px; font-weight:600;
  color: var(--rcn-claro);
  padding: 6px 4px;
  border-radius: 999px;
}
.rcn-avatar-ring{
  border-radius: 999px;
  border: 1.5px solid var(--rcn-claro-dim);
}

.rcn-forum-aviso-instalacao{
  background: #0e0f14;
  border: 1px dashed var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
  padding: 40px;
  margin: 28px 0 64px;
  text-align: center;
}
.rcn-forum-aviso-instalacao h2{
  font-family: var(--rcn-font-display);
  font-size: 20px;
  margin-bottom: 12px;
}
.rcn-forum-aviso-instalacao p{
  color: var(--rcn-claro-dim);
  max-width: 560px;
  margin: 0 auto 22px;
  line-height: 1.6;
}

/* =========================================================
   FÓRUM (bbPress) — vestindo as classes padrão do plugin
   com a identidade visual do tema.
   ========================================================= */

/* Container geral: o bbPress por padrão assume um tema com fundo
   claro. Sem isto, a tabela de fóruns/tópicos renderiza com fundo
   branco/cinza-claro por baixo do nosso layout escuro, deixando o
   texto (que herdava cor clara do nosso tema) ilegível por cima de
   um fundo também claro. */
#bbpress-forums{
  background: transparent;
  color: var(--rcn-claro);
  font-family: var(--rcn-font-body);
}
#bbpress-forums a{ color: var(--rcn-claro); }
#bbpress-forums a:hover{ color: var(--rcn-amarelo); }

/* Breadcrumb (ex: "Home › Fóruns") */
.bbp-breadcrumb{
  font-size: 13px;
  color: var(--rcn-claro-dim);
  margin-bottom: 18px;
}
.bbp-breadcrumb a{ color: var(--rcn-claro-dim); }
.bbp-breadcrumb a:hover{ color: var(--rcn-amarelo); }
.bbp-breadcrumb-sep{ margin: 0 6px; color: var(--rcn-claro-dim); }

/* Tabela de listagem de fóruns/tópicos/respostas — esta é a peça que
   estava aparecendo com fundo claro e texto ilegível. O bbPress monta
   isso como uma <ul> com classes ul.bbp-forums / ul.bbp-topics, e cada
   "linha" (.bbp-forum, .bbp-topic, .bbp-body, .bbp-header, .bbp-footer)
   tem seu próprio fundo definido pelo CSS padrão do plugin — por isso
   forçamos o fundo em cada um desses níveis, não só no container pai. */
.bbp-forums-front,
.bbp-forums,
.bbp-topics,
.bbp-replies,
.bbp-forums .bbp-header,
.bbp-forums .bbp-body,
.bbp-forums .bbp-footer,
.bbp-topics .bbp-header,
.bbp-topics .bbp-body,
.bbp-topics .bbp-footer,
ul.bbp-forums,
ul.bbp-topics,
ul.bbp-replies,
.bbp-forum,
.bbp-topic,
.bbp-reply{
  background: transparent !important;
  color: var(--rcn-claro);
  border-color: var(--rcn-escuro-linha) !important;
}
.bbp-forums-list{ list-style: none; margin: 0; padding: 0; }

/* O cabeçalho da tabela (linha com "Fórum", "Tópicos", "Respostas",
   "Última atividade") normalmente vem com fundo cinza-claro fixo no
   CSS do bbPress — sobrescrevemos para o tom escuro do tema. */
.bbp-forums .bbp-header,
.bbp-topics .bbp-header{
  background: var(--rcn-escuro-soft) !important;
  border-bottom: 1px solid var(--rcn-escuro-linha);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rcn-claro-dim) !important;
  padding: 14px 16px;
}
.bbp-forums .bbp-header *,
.bbp-topics .bbp-header *{
  color: var(--rcn-claro-dim) !important;
}

/* Cada linha de fórum/tópico individual.
   NOTA: o bbPress varia a estrutura HTML exata entre temas/versões
   (às vezes .bbp-body > .bbp-forum, às vezes .bbp-forum diretamente
   dentro de ul.bbp-forums, ou ainda div.bbp-forum-info dentro de uma
   <li>). Cobrimos várias camadas possíveis com !important no fundo,
   mas só forçamos cor de texto nos filhos diretos — não em todo "*"
   dentro da linha, para não estragar badges/ícones que devem manter
   sua própria cor. */
.bbp-forums .bbp-body .bbp-forum,
.bbp-topics .bbp-body .bbp-topic,
ul.bbp-forums > li,
.bbp-forum-info,
.bbp-forum-content-wrap,
div.bbp-forum{
  background: #0e0f14 !important;
}
.bbp-forums .bbp-body .bbp-forum > *,
.bbp-topics .bbp-body .bbp-topic > *,
ul.bbp-forums > li > *{
  background: transparent !important;
  color: var(--rcn-claro);
}
.bbp-forums .bbp-body .bbp-forum:hover,
.bbp-topics .bbp-body .bbp-topic:hover,
ul.bbp-forums > li:hover{
  background: var(--rcn-escuro-soft) !important;
}
ul.bbp-forums > li{
  border-bottom: 1px solid var(--rcn-escuro-linha);
  padding: 16px;
}

ul.bbp-forums, ul.bbp-topics{
  list-style: none;
}
.bbp-body .bbp-forum-title, .bbp-body .bbp-topic-permalink{
  color: var(--rcn-claro) !important;
  font-weight: 700;
  font-family: var(--rcn-font-body);
}
.bbp-body .bbp-forum-title:hover, .bbp-body .bbp-topic-permalink:hover{
  color: var(--rcn-amarelo) !important;
}
.bbp-forum-content, .bbp-topic-content, .bbp-reply-content{
  color: var(--rcn-claro);
  line-height: 1.7;
}

/* Números de contagem (tópicos, respostas) e metadados de atividade —
   o bbPress aplica cor cinza-escura fixa nesses spans, que também
   ficava ilegível sobre fundo escuro. */
.bbp-topic-count, .bbp-reply-count, .bbp-forum-topic-count, .bbp-forum-reply-count,
.bbp-forum-freshness, .bbp-topic-freshness{
  color: var(--rcn-claro-dim) !important;
}
.bbp-forum-freshness a, .bbp-topic-freshness a{
  color: var(--rcn-claro-dim) !important;
}
.bbp-forum-freshness a:hover, .bbp-topic-freshness a:hover{
  color: var(--rcn-amarelo) !important;
}

.bbp-pagination, .bbp-pagination-count{
  color: var(--rcn-claro-dim);
}
.bbp-pagination-links .page-numbers{
  color: var(--rcn-claro-dim);
}
.bbp-pagination-links .page-numbers.current{
  color: var(--rcn-amarelo);
  font-weight: 700;
}

/* Formulário de busca do bbPress (campo + botão "Pesquisar") */
#bbp-search-form{
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
#bbp-search-form input[type="text"],
#bbpress-forums input[type="text"]#bbp_search{
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  color: var(--rcn-claro);
  border-radius: 8px;
  padding: 9px 14px;
}
#bbp-search-form button,
#bbp-search-form input[type="submit"]{
  background: var(--rcn-amarelo);
  color: var(--rcn-escuro);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}

/* Formulários de novo tópico/resposta */
#bbpress-forums fieldset.bbp-form{
  border-color: var(--rcn-escuro-linha);
  background: transparent;
}
#bbpress-forums legend{
  color: var(--rcn-claro);
}
#bbpress-forums textarea, #bbpress-forums input[type="text"],
#bbpress-forums input[type="email"]{
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  color: var(--rcn-claro);
  border-radius: 8px;
  padding: 10px 14px;
}
#bbpress-forums #bbp-submit-wrapper input[type="submit"],
#bbpress-forums button[type="submit"]{
  background: var(--rcn-amarelo);
  color: var(--rcn-escuro);
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-family: var(--rcn-font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
}

/* =========================================================
   ESTATÍSTICAS / PARTIDAS — layout sem sidebar
   Usa o header global fixo (.rcn-site-header) + container padrão,
   igual a qualquer outra página do site. Substituiu o layout anterior
   com sidebar lateral própria — decisão de produto: o menu principal
   permanece sempre no topo, nunca migra para a lateral.
   ========================================================= */
.rcn-stats-page{
  padding: 36px 0 60px;
}
.rcn-stats-top-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.rcn-stats-tabs{ display:flex; gap: 24px; flex-wrap: wrap; }
.rcn-stats-tabs a{
  font-family: var(--rcn-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--rcn-claro-dim);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.rcn-stats-tabs a.current{ color: var(--rcn-amarelo); border-bottom-color: var(--rcn-amarelo); }
.rcn-stats-tabs a:hover{ color: var(--rcn-claro); }

/* Abas internas (Visão Geral / Partidas / Times / Jogadores) — antes
   verticais numa sidebar, agora horizontais no topo do conteúdo. */
.rcn-stats-abas-internas{
  display:flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rcn-escuro-linha);
  margin-bottom: 28px;
  padding-bottom: 4px;
}
.rcn-stats-abas-internas a,
.rcn-stats-abas-internas__em-breve{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rcn-claro-dim);
  transition: background .15s ease, color .15s ease;
}
.rcn-stats-abas-internas a svg,
.rcn-stats-abas-internas__em-breve svg{ width:16px; height:16px; flex-shrink:0; }
.rcn-stats-abas-internas a:hover{ background: var(--rcn-escuro-soft); color: var(--rcn-claro); }
.rcn-stats-abas-internas a.current{
  background: var(--rcn-escuro-soft);
  color: var(--rcn-amarelo);
  font-weight: 700;
  border-bottom: 2px solid var(--rcn-amarelo);
  margin-bottom: -1px; /* compensa a borda, alinhando com a linha divisória abaixo */
}
.rcn-stats-abas-internas__em-breve{
  opacity: .5;
  cursor: default;
}
.rcn-stats-nav-badge{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--rcn-escuro-linha);
  color: var(--rcn-claro-dim);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.rcn-stats-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}
@media (max-width: 980px){
  .rcn-stats-grid{ grid-template-columns: 1fr; }
  .rcn-stats-page{ padding: 24px 0 40px; }
}

.rcn-panel{
  background: #0e0f14;
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
  padding: 22px;
}
.rcn-panel-divisor{
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--rcn-escuro-linha);
}
.rcn-panel-row-right{ display:flex; flex-direction:column; gap: 24px; }

.rcn-stats-aviso-formato{
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
}
.rcn-stats-aviso-formato h3{
  font-family: var(--rcn-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--rcn-claro);
  margin-bottom: 10px;
}
.rcn-stats-aviso-formato p{
  font-size: 13.5px;
  color: var(--rcn-claro-dim);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

/* =========================================================
   CONTEÚDO GENÉRICO — páginas e posts individuais
   ========================================================= */
.rcn-generic-content{ padding: 40px 0 64px; max-width: 760px; margin: 0 auto; }
.rcn-page-title{
  font-family: var(--rcn-font-display);
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 16px;
}
.rcn-page-content{
  font-size: 16px;
  line-height: 1.75;
  color: var(--rcn-claro);
}
.rcn-page-content p{ margin-bottom: 1.2em; }
.rcn-page-content a{ color: var(--rcn-amarelo); text-decoration: underline; }
.rcn-page-content h2, .rcn-page-content h3{
  font-family: var(--rcn-font-display);
  margin: 1.6em 0 .6em;
}
.rcn-single-thumbnail{
  margin: 24px 0;
  border-radius: var(--rcn-radius);
  overflow: hidden;
}
.rcn-single-thumbnail img{
  width: 100%;
  height: auto; /* nunca força altura fixa — preserva a proporção
                    original da foto, evitando o achatamento/distorção
                    que acontece quando uma altura fixa é imposta sobre
                    uma imagem com proporção diferente do esperado. */
  display: block;
}
.rcn-single-thumbnail figcaption{
  font-size: 12.5px;
  color: var(--rcn-claro-dim);
  padding: 8px 4px 0;
  font-style: italic;
}

/* Feed de Notícias (page-noticias.php) */
.rcn-noticias-feed{
  padding: 36px 0 60px;
}
.rcn-noticias-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.rcn-noticia-card{
  display: flex;
  flex-direction: column;
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.rcn-noticia-card:hover{
  border-color: var(--rcn-amarelo);
  transform: translateY(-2px);
}
.rcn-noticia-card__imagem{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e0f14;
}
.rcn-noticia-card__imagem img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* aqui SIM cortamos para um card uniforme — diferente
                         da página de post individual, onde a imagem
                         destacada nunca deve ser cortada/distorcida.
                         Em formato de card pequeno, um corte consistente
                         (object-fit: cover) é o padrão esperado e não
                         distorce a imagem, só recorta as bordas. */
  transition: transform .7s ease;
}
.rcn-noticia-card:hover .rcn-noticia-card__imagem img{
  transform: scale(1.08);
}
.rcn-noticia-card__corpo{
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rcn-noticia-card__data{
  font-size: 11.5px;
  color: var(--rcn-claro-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rcn-noticia-card__titulo{
  font-family: var(--rcn-font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--rcn-claro);
  margin: 0;
}
.rcn-noticia-card__resumo{
  font-size: 13.5px;
  color: var(--rcn-claro-dim);
  margin: 0;
  line-height: 1.5;
}
.rcn-noticias-paginacao{
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
}

/* =========================================================
   FORMULÁRIOS (Fale Conosco / Anuncie Conosco)
   ========================================================= */
.rcn-pagina-formulario{
  padding: 36px 0 70px;
  max-width: 640px;
}
.rcn-pagina-formulario__intro{
  color: var(--rcn-claro-dim);
  font-size: 14.5px;
  margin: 8px 0 28px;
  line-height: 1.6;
}

.rcn-form-aviso{
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 24px;
}
.rcn-form-aviso--sucesso{
  background: rgba(61,220,132,.12);
  border: 1px solid rgba(61,220,132,.3);
  color: var(--rcn-verde);
}
.rcn-form-aviso--erro{
  background: rgba(255,92,92,.12);
  border: 1px solid rgba(255,92,92,.3);
  color: var(--rcn-vermelho);
}

.rcn-form-contato{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rcn-form-campo{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcn-form-campo label{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rcn-claro-dim);
}
.rcn-form-campo__opcional{
  text-transform: none;
  font-weight: 400;
  opacity: .7;
}
.rcn-form-campo input,
.rcn-form-campo select,
.rcn-form-campo textarea{
  background: #0e0f14;
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--rcn-claro);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s ease;
}
.rcn-form-campo input:focus,
.rcn-form-campo select:focus,
.rcn-form-campo textarea:focus{
  outline: none;
  border-color: var(--rcn-amarelo);
}
.rcn-form-campo textarea{ resize: vertical; min-height: 120px; }

.rcn-form-lgpd{
  background: #0e0f14;
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: 8px;
  padding: 16px;
  margin-top: 6px;
}
.rcn-form-lgpd__texto{
  font-size: 12px;
  line-height: 1.6;
  color: var(--rcn-claro-dim);
  margin: 0 0 12px;
}
.rcn-form-lgpd__checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rcn-claro);
  cursor: pointer;
}
.rcn-form-lgpd__checkbox input{
  margin-top: 3px;
  flex-shrink: 0;
}

.rcn-form-contato .rcn-btn{
  align-self: flex-start;
  margin-top: 8px;
}

/* Página de Times (page-times.php) */
.rcn-times-page{
  padding: 36px 0 70px;
}
.rcn-times-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.rcn-time-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--rcn-escuro-soft);
  border: 1px solid var(--rcn-escuro-linha);
  border-radius: var(--rcn-radius);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.rcn-time-card:hover{
  border-color: var(--rcn-amarelo);
  transform: translateY(-2px);
}
.rcn-time-card img{
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.rcn-time-card__nome{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rcn-claro);
  text-align: center;
  line-height: 1.3;
}

/* Variante compacta do grid de times, usada na Home (front-page.php)
   — mais densa que a versão da página dedicada /times, similar ao
   exemplo de referência (grid horizontal com escudos pequenos e nome
   abaixo). Mesma estrutura HTML (.rcn-time-card), só o container pai
   tem essa classe extra para sobrescrever o tamanho das colunas. */
.rcn-times-grid--home{
  grid-template-columns: repeat(10, 1fr); /* fixo em 10 colunas — com
    os 20 times do Brasileirão, isso forma exatamente 2 linhas de 10,
    por pedido explícito (não usar grid responsivo automático aqui). */
  gap: 14px;
  margin-bottom: 8px;
}
.rcn-times-grid--home .rcn-time-card{
  padding: 14px 8px;
  gap: 8px;
}
.rcn-times-grid--home .rcn-time-card img{
  width: 44px;
  height: 44px;
}
.rcn-times-grid--home .rcn-time-card__nome{
  font-size: 11px;
}
@media (max-width: 980px){
  .rcn-times-grid--home{ grid-template-columns: repeat(5, 1fr); } /* 4 linhas de 5 em telas médias */
}
@media (max-width: 640px){
  .rcn-times-grid--home{ grid-template-columns: repeat(4, 1fr); } /* 5 linhas de 4 em telas pequenas */
}

/* Link "Todos os times", usado na página de notícias filtradas por
   time, para voltar ao grid completo. */
.rcn-voltar-link{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--rcn-claro-dim);
  margin-bottom: 16px;
}
.rcn-voltar-link:hover{ color: var(--rcn-amarelo); }

/* =========================================================
   REELS DO INSTAGRAM (Home) — carrossel de scroll horizontal,
   formato vertical 9:16 (Reels/Stories), com barra de scroll fina
   visível embaixo (estilo de referência: grid de "Shorts" com
   thumbnails e play, scrollbar customizada).
   ========================================================= */
.rcn-reels-carrossel{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 4px;
  scroll-snap-type: x proximate;
  /* Barra de scroll customizada, fina e sempre visível (WebKit) */
  scrollbar-width: thin;
}
.rcn-reels-carrossel::-webkit-scrollbar{ height: 5px; }
.rcn-reels-carrossel::-webkit-scrollbar-track{ background: var(--rcn-escuro-linha); border-radius: 999px; }
.rcn-reels-carrossel::-webkit-scrollbar-thumb{ background: var(--rcn-claro-dim); border-radius: 999px; }

.rcn-reel-card{
  position: relative;
  /* Largura calculada para mostrar exatamente 5 cards de cada vez no
     espaço visível (mesmo tendo 10 no total) — os outros 5 ficam
     acessíveis rolando o carrossel horizontalmente. Cálculo: (100% do
     container - 4 gaps de 14px) dividido por 5 colunas visíveis.
     Versão anterior dividia por 10 (para alinhar com o grid de
     Times), o que fazia TODOS os 10 caberem na tela ao mesmo tempo,
     encolhidos — não era o efeito de carrossel pretendido. */
  flex: 0 0 calc((100% - 4 * 14px) / 5);
  min-width: 130px;
  aspect-ratio: 9/16;
  border-radius: var(--rcn-radius);
  overflow: hidden;
  border: 1px solid var(--rcn-escuro-linha);
  background: #0e0f14;
  cursor: pointer;
  padding: 0;
  scroll-snap-align: start;
}
.rcn-reel-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.rcn-reel-card:hover img{ transform: scale(1.05); }
.rcn-reel-card__play{
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  backdrop-filter: blur(2px); /* leve desfoque do fundo, visual mais moderno que o emoji de texto anterior. */
}
.rcn-reel-card__play svg{
  width: 14px;
  height: 14px;
  margin-left: 1px; /* compensa visualmente a assimetria do triângulo de play, centralizando melhor ao olho. */
}
@media (max-width: 640px){
  .rcn-reel-card{ flex: 0 0 150px; }
}

/* Modal de exibição do Reel */
.rcn-reel-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.rcn-reel-modal--aberto{ display: flex; }
.rcn-reel-modal__fundo{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}
.rcn-reel-modal__conteudo{
  position: relative;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  /* Largura mínima maior, para o embed do Instagram (que define sua
     própria largura internamente, geralmente ~328px por padrão) não
     ficar pequeno demais dentro do modal — força um espaço mínimo
     razoável, sem interferir na proporção vertical natural do Reel. */
  min-width: min(90vw, 500px);
}
.rcn-reel-modal__conteudo .instagram-media{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Variante do modal usada para vídeos do YouTube — mais larga e com
   proporção 16:9 (diferente do modal de Reels do Instagram, que é
   estreito e vertical, 9:16). */
.rcn-video-modal__conteudo{
  width: min(90vw, 900px) !important;
  max-width: none !important;
  aspect-ratio: 16/9;
  max-height: none;
}
/* Container intermediário entre .rcn-video-modal__conteudo (que tem
   aspect-ratio) e o <iframe> em si — precisa ocupar 100% do espaço do
   pai explicitamente, senão o iframe com width/height:100% colapsa
   para o tamanho mínimo padrão do navegador (causa real do player
   aparecendo pequeno demais, em formato parecido com miniplayer). */
#rcn-video-modal__embed{
  width: 100%;
  height: 100%;
}
.rcn-video-modal__conteudo iframe{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: 12px;
}

.rcn-reel-modal__fechar{
  position: absolute;
  top: -38px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
}

/* =========================================================
   VÍDEOS DO YOUTUBE (Home) — vídeo em destaque (grande, à
   esquerda) + 4 vídeos recentes em lista (à direita), estilo de
   referência similar a portais de notícia esportivos.
   ========================================================= */
.rcn-videos-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 8px;
}
.rcn-video-destaque{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--rcn-radius);
  overflow: hidden;
  border: 1px solid var(--rcn-escuro-linha);
  background: #0e0f14;
  padding: 0; /* reset de <button> — antes era <a>, sem padding por padrão. */
  cursor: pointer;
}
.rcn-video-destaque img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rcn-video-destaque__play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  backdrop-filter: blur(2px);
  transition: background .15s ease;
}
.rcn-video-destaque__play svg{
  width: 24px;
  height: 24px;
  margin-left: 2px;
}
.rcn-video-destaque:hover .rcn-video-destaque__play{ background: var(--rcn-amarelo); color: var(--rcn-escuro); }

.rcn-videos-lista{
  display: flex;
  flex-direction: column;
  gap: 24px; /* aumentado de 14px — preenche melhor o espaço vertical ao lado do vídeo em destaque, que antes sobrava vazio. */
  justify-content: space-between;
  height: 100%;
}
.rcn-video-item{
  display: flex;
  gap: 14px;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0; /* reset de <button> — antes era <a>. */
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.rcn-video-item__thumb{
  position: relative;
  flex: 0 0 150px; /* aumentado de 110px */
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #0e0f14;
}
.rcn-video-item__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rcn-video-item__play{
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px; /* aumentado de 22px, proporcional à thumbnail maior */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(2px);
}
.rcn-video-item__play svg{
  width: 12px;
  height: 12px;
  margin-left: 1px;
}
.rcn-video-item__titulo{
  font-size: 14.5px; /* aumentado de 13px */
  font-weight: 600;
  color: var(--rcn-claro);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: center;
}
.rcn-video-item:hover .rcn-video-item__titulo{ color: var(--rcn-amarelo); }

@media (max-width: 640px){
  .rcn-video-item__thumb{ flex: 0 0 120px; }
  .rcn-video-item__titulo{ font-size: 13px; }
}

@media (max-width: 980px){
  .rcn-videos-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .rcn-video-item__thumb{ flex: 0 0 90px; }
  .rcn-video-item__titulo{ font-size: 12px; }
}

/* =========================================================
   POSTS RELACIONADOS (recurso nativo do Jetpack/WordPress.com,
   ativado em wp-admin > Jetpack > Configurações > Tráfego >
   "Mostrar conteúdo relacionado após os posts", com "Mostrar imagem
   em miniatura" habilitado). O Jetpack processa e insere esse HTML
   automaticamente após o conteúdo do post — não é gerado pelo nosso
   tema, então sobrescrevemos via CSS as classes que ele já usa
   (#jp-relatedposts, .jp-relatedposts-post, etc.) para aplicar o
   mesmo visual de bordas arredondadas + zoom no hover usado nos
   outros cards de notícia do site (.rcn-news-card, .rcn-noticia-card).
   ========================================================= */
#jp-relatedposts{
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rcn-escuro-linha);
}
#jp-relatedposts h3.jp-relatedposts-headline{
  font-family: var(--rcn-font-display);
  font-size: 20px;
  color: var(--rcn-claro);
  margin-bottom: 20px;
}
#jp-relatedposts h3.jp-relatedposts-headline em{ font-style: normal; }

/* Arredondamento e zoom aplicados SÓ na imagem em si — não no card
   inteiro. Por isso não tocamos no fundo/borda do .jp-relatedposts-post
   (que continua com o visual padrão do Jetpack, sem moldura extra), e
   o overflow:hidden + border-radius ficam diretamente na própria
   imagem, não em nenhum container pai (evita o card inteiro parecer
   "emoldurado" e evita o zoom vazar para elementos de texto vizinhos). */
#jp-relatedposts .jp-relatedposts-post-img{
  display: block;
  border-radius: var(--rcn-radius) !important;
  overflow: hidden;
  margin-bottom: 10px; /* afasta o título — sem isso, o zoom da imagem no hover parecia "invadir" visualmente o espaço do texto abaixo. */
  transition: transform .5s ease;
}
#jp-relatedposts .jp-relatedposts-post a:hover .jp-relatedposts-post-img{
  transform: scale(1.06);
}
#jp-relatedposts .jp-relatedposts-post-title,
#jp-relatedposts .jp-relatedposts-post-title a{
  color: var(--rcn-claro) !important;
  font-family: var(--rcn-font-display);
  font-size: 14px;
}
#jp-relatedposts .jp-relatedposts-post-title a:hover{
  color: var(--rcn-amarelo) !important;
}
#jp-relatedposts .jp-relatedposts-post-context,
#jp-relatedposts .jp-relatedposts-post-date{
  color: var(--rcn-claro-dim) !important;
  font-size: 11.5px;
}

/* =========================================================
   PÁGINA COPA DO MUNDO (page-copa-do-mundo.php)
   Grid de notícias estilo "1 destaque grande + 4 menores", com
   overlay de texto sobre a imagem (título + resumo), seguindo o
   padrão visual de referência mostrado pelo cliente.
   ========================================================= */
.rcn-copa-page{
  padding: 36px 0 60px;
}
.rcn-copa-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px; /* reduzido de 48px — o link "Ver mais" abaixo já adiciona seu próprio espaçamento até a seção de estatísticas. */
}
.rcn-copa-ver-mais{
  text-align: right; /* canto, em vez de centralizado — evita o link "esticar" visualmente em toda a largura do grid. */
  margin-bottom: 48px;
}
.rcn-copa-ver-mais .rcn-pill-link{
  display: inline-flex; /* não ocupa a largura toda — mantém o botão compacto, só do tamanho do próprio texto. */
  border-color: var(--rcn-amarelo);
  color: var(--rcn-escuro);
  background: var(--rcn-amarelo);
  font-size: 12px;
  padding: 7px 14px;
}
.rcn-copa-ver-mais .rcn-pill-link:hover{
  background: transparent;
  color: var(--rcn-amarelo);
}
.rcn-copa-destaque{
  position: relative;
  display: block;
  border-radius: var(--rcn-radius);
  overflow: hidden;
  background: #0e0f14;
  min-height: 420px;
}
.rcn-copa-destaque img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.rcn-copa-destaque:hover img{ transform: scale(1.05); }
.rcn-copa-destaque__overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%);
}
.rcn-copa-destaque__titulo{
  font-family: var(--rcn-font-display);
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.rcn-copa-destaque__resumo{
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 90%;
}

.rcn-copa-secundarios{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rcn-copa-card{
  position: relative;
  display: block;
  border-radius: var(--rcn-radius);
  overflow: hidden;
  background: #0e0f14;
  aspect-ratio: 4/3;
}
.rcn-copa-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.rcn-copa-card:hover img{ transform: scale(1.06); }
.rcn-copa-card__overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 75%);
}
.rcn-copa-card__titulo{
  font-family: var(--rcn-font-display);
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.rcn-copa-card__resumo{
  font-size: 12px;
  color: rgba(255,255,255,.8);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcn-copa-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 980px){
  .rcn-copa-grid{ grid-template-columns: 1fr; }
  .rcn-copa-destaque{ min-height: 300px; }
  .rcn-copa-stats{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .rcn-copa-secundarios{ grid-template-columns: 1fr; }
  .rcn-copa-destaque__titulo{ font-size: 22px; }
}