/*
Theme Name: Black Nerd FC
Theme URI: https://blacknerdfc.com.br
Author: Black Nerd FC
Description: Tema custom do Black Nerd FC — portal de notícias com paleta oficial do clube (preto e laranja).
Version: 4.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: blacknerdfc
*/

:root {
  --preto: #0A0A0A;
  --preto-suave: #161616;
  --laranja: #F87800;
  --laranja-claro: #F8A038;
  --creme: #F8F0E8;
  --cinza: #2A2A2A;
  --vermelho: #C0392B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--preto);
  color: var(--creme);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

a { color: var(--laranja-claro); text-decoration: none; }
a:hover { color: var(--laranja); text-decoration: underline; }

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- HEADER ---------- */
.site-header {
  background: var(--preto);
  border-bottom: 3px solid var(--laranja);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1400px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-branding img {
  height: 56px;
  width: auto;
}

.site-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--creme);
  margin: 0;
}

.site-title span { color: var(--laranja); }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--creme);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.main-nav a:hover { color: var(--laranja); text-decoration: none; }

/* ---------- HERO (destaque principal da home) ---------- */
.hero-post {
  display: block;
  background: var(--preto-suave);
  border: 1px solid var(--cinza);
  border-radius: 10px;
  overflow: hidden;
  margin: 28px 0 12px;
}

/* Proporção alinhada exatamente com o banner gerado (1200x675, 16:9) —
   antes era 21:9 com max-height:320px, o que forçava a caixa a ficar bem
   mais "larga" proporcionalmente que a imagem, cortando altura e dando uma
   sensação de composição descentralizada (mesmo problema já resolvido nos
   cards "também em destaque" com o mesmo ajuste, em 21/08). Sem max-height
   fixo: a altura acompanha a largura real do container, sem cortar nada. */
.hero-post-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--cinza); }
.hero-post-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hero-post-body { padding: 18px 28px; text-align: center; }
.hero-post-body .post-card-cat { margin-left: auto; margin-right: auto; }

.hero-post-title { font-size: 26px; line-height: 1.2; margin: 10px 0 10px; color: var(--creme); }
.hero-post-title a { color: inherit; }
.hero-post-title a:hover { color: var(--laranja-claro); }

.hero-post-excerpt { font-size: 15px; color: #B8B8B8; margin: 0 0 8px; }

.section-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--laranja);
  border-bottom: 2px solid var(--cinza);
  padding-bottom: 10px;
  margin: 32px 0 4px;
}

@media (max-width: 760px) {
  .hero-post-body { padding: 20px; }
  .hero-post-title { font-size: 24px; }
}

/* ---------- FEATURED ROW (também em destaque) ---------- */
.featured-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 8px;
}

.overlay-card {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cinza);
  border: 1px solid var(--cinza);
}

.overlay-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.overlay-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.35) 55%, rgba(10,10,10,0) 100%);
}

.overlay-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  z-index: 2;
}

.overlay-card-cat {
  display: inline-block;
  background: var(--laranja);
  color: var(--preto);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.overlay-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--creme);
  margin: 8px 0 0;
}

.overlay-card:hover .overlay-card-title { color: var(--laranja-claro); }

@media (max-width: 760px) {
  .featured-row { grid-template-columns: 1fr; }
}

/* ---------- POSTS GRID ---------- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 32px 0;
}

.post-card {
  background: var(--preto-suave);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--cinza);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.post-card:hover { transform: translateY(-3px); border-color: var(--laranja); }

.post-card-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--cinza); }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.post-card-body { padding: 16px; }

.post-card-cat {
  display: inline-block;
  background: var(--laranja);
  color: var(--preto);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  letter-spacing: 0.4px;
}

.post-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--creme);
}

.post-card-title a { color: inherit; }
.post-card-title a:hover { color: var(--laranja-claro); }

.post-card-excerpt { font-size: 14px; color: #B8B8B8; margin: 0 0 10px; }

.post-card-meta { font-size: 12px; color: #888; }

/* ---------- SINGLE POST ---------- */
.single-post { padding: 32px 0 60px; max-width: 760px; margin: 0 auto; }

/* Página "Classificação" (body.page-id-266) precisa de mais largura pra
   tabela + jogos lado a lado sem precisar rolar na horizontal — 760px é
   pensado pra leitura de texto corrido, estreito demais pra essa tela.
   Escopado só nessa página (por ID, não existe classe por slug aqui) pra
   não alargar posts de notícia nem nenhuma outra página. */
body.page-id-266 .single-post { max-width: 1100px; }

/* Página "Prováveis" (body.page-id-330, 2026-08-27) — mesma lógica: cards de
   confronto com escudo + texto de escalação/desfalques ficam apertados nos
   760px pensados pra leitura de texto corrido. */
body.page-id-330 .single-post { max-width: 900px; }

/* Página "Times" (body.page-id-343, 2026-08-27) — mesma lógica: grade de
   escudos e cards de notícia ficam apertados nos 760px de leitura de texto
   corrido. */
body.page-id-343 .single-post { max-width: 900px; }

.single-post .post-card-cat { margin-bottom: 16px; }

.single-post h1 {
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--creme);
}

.single-post .post-meta {
  font-size: 13px;
  color: #999;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cinza);
  padding-bottom: 20px;
}

.single-post .featured-image {
  margin: 0 0 8px;
  border-radius: 8px;
  overflow: hidden;
}

.single-post .featured-image-credito {
  margin: 0 0 24px;
  font-size: 12px;
  color: #888;
  text-align: right;
}

.single-post .entry-content { font-size: 17px; color: #E8E0D8; }
.single-post .entry-content p { margin: 0 0 18px; }
.single-post .entry-content em { color: #A8A8A8; font-size: 14px; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--preto-suave);
  border-top: 3px solid var(--laranja);
  margin-top: 40px;
  padding: 36px 0 20px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.footer-col h4 {
  color: var(--laranja);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

.footer-col a { color: var(--creme); font-size: 14px; display: block; margin-bottom: 6px; }

.social-links { display: flex; gap: 14px; }
.social-links a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cinza);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.social-links a:hover { background: var(--laranja); color: var(--preto); }
.social-links svg { display: block; }

.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #777;
  border-top: 1px solid var(--cinza);
  padding-top: 16px;
}

.empty-state { padding: 60px 0; text-align: center; color: #999; }

/* ---------- CLASSIFICAÇÃO (tabela) ---------- */
.bnfc-tabela-wrap { overflow-x: auto; margin: 24px 0; }

.bnfc-tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--preto-suave);
  border: 1px solid var(--cinza);
  border-radius: 8px;
  overflow: hidden;
  min-width: 560px;
}

.bnfc-tabela th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--laranja);
  border-bottom: 2px solid var(--cinza);
  padding: 10px 12px;
}

.bnfc-tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cinza);
  font-size: 14px;
  color: var(--creme);
}

.bnfc-tabela tr:last-child td { border-bottom: none; }

.bnfc-linha-libertadores { border-left: 4px solid var(--laranja); background: rgba(248, 120, 0, 0.14); }
.bnfc-linha-sulamericana { border-left: 4px solid var(--laranja-claro); background: rgba(248, 160, 56, 0.1); }
.bnfc-linha-rebaixamento { border-left: 4px solid var(--vermelho); background: rgba(192, 57, 43, 0.14); }

.bnfc-legenda-zonas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 0;
  font-size: 12px;
  color: #999;
}

.bnfc-legenda-item { display: flex; align-items: center; gap: 6px; }

.bnfc-legenda-cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bnfc-legenda-libertadores { background: var(--laranja); }
.bnfc-legenda-sulamericana { background: var(--laranja-claro); }
.bnfc-legenda-rebaixamento { background: var(--vermelho); }

/* ---------- BRASILEIRÃO (tabela + jogos lado a lado) ---------- */
.bnfc-brasileirao-wrap {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 24px 0;
}

.bnfc-coluna-tabela { flex: 3; min-width: 0; }
.bnfc-coluna-jogos { flex: 2; min-width: 0; }

.bnfc-coluna-titulo {
  margin: 0;
  color: var(--laranja);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bnfc-tabela-time { display: flex; align-items: center; gap: 8px; }
.bnfc-tabela-escudo { flex-shrink: 0; object-fit: contain; }

.bnfc-jogos-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 12px;
}

.bnfc-jogos-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--cinza);
  border-radius: 50%;
  background: var(--preto-suave);
  color: var(--laranja);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.bnfc-jogos-seta:hover { background: var(--laranja); color: var(--preto); text-decoration: none; }
.bnfc-jogos-seta-desativada { opacity: 0.3; }

.bnfc-lista-jogos { display: flex; flex-direction: column; gap: 10px; }

.bnfc-jogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--preto-suave);
  border: 1px solid var(--cinza);
  border-radius: 8px;
  padding: 16px;
}

.bnfc-jogo-equipe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--creme);
}

.bnfc-jogo-fora { justify-content: flex-end; text-align: right; }
.bnfc-jogo-equipe span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnfc-jogo-escudo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }

.bnfc-jogo-info { flex-shrink: 0; min-width: 68px; text-align: center; }
.bnfc-jogo-placar { font-size: 20px; font-weight: 700; color: var(--laranja); }
.bnfc-jogo-data { font-size: 13px; line-height: 1.4; color: #999; }

/* Nomes de time cortando com reticências em telas estreitas (achado testando
   375px de verdade — escudo+nome+data+nome+escudo não cabe numa linha só
   nesse tamanho, mesmo tirando espaço da coluna de jogos). Deixa o nome
   quebrar em 2 linhas em vez de truncar — a linha do confronto já tem altura
   sobrando, então quebrar não estica o card feio. */
@media (max-width: 480px) {
  .bnfc-jogo-equipe span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .bnfc-jogo-equipe { align-items: center; gap: 6px; font-size: 13px; }
  .bnfc-jogo-escudo { width: 26px; height: 26px; }
  .bnfc-jogo-info { min-width: 50px; }
}

@media (max-width: 900px) {
  .bnfc-brasileirao-wrap { flex-direction: column; align-items: stretch; }
}

/* ---------- PROVÁVEIS ---------- */
.bnfc-provaveis-cabecalho { text-align: center; margin: 0 0 20px; }

.bnfc-provaveis-lista { display: flex; flex-direction: column; gap: 16px; }

.bnfc-provavel-card {
  background: var(--preto-suave);
  border: 1px solid var(--cinza);
  border-radius: 10px;
  padding: 18px;
}

.bnfc-provavel-jogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cinza);
}

.bnfc-provavel-corpo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.bnfc-provavel-time { flex: 1; min-width: 220px; }

.bnfc-provavel-time strong {
  display: block;
  margin-bottom: 6px;
  color: var(--laranja);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bnfc-provavel-time p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--creme); }
.bnfc-desfalques { color: var(--vermelho) !important; font-size: 13px !important; }
.bnfc-provavel-fonte { width: 100%; margin-top: 4px; }

@media (max-width: 600px) {
  .bnfc-provavel-corpo { flex-direction: column; gap: 14px; }
}

@media (max-width: 600px) {
  .site-header-inner { flex-direction: column; align-items: flex-start; }
  .single-post h1 { font-size: 24px; }
}

/* ---------- PÁGINA "TIMES" (2026-08-27, NOVO) ---------- */
.bnfc-times-cabecalho { margin-bottom: 24px; }
.bnfc-times-cabecalho h1 { margin: 0 0 6px; }
.bnfc-times-cabecalho p { margin: 0; color: #B8B8B8; font-size: 14px; }

.bnfc-times-voltar {
  display: inline-block;
  color: var(--laranja);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.bnfc-times-voltar:hover { color: var(--laranja-claro); }

.bnfc-times-titulo { display: flex; align-items: center; gap: 12px; }
.bnfc-times-titulo img { width: 40px; height: 40px; object-fit: contain; }
.bnfc-times-titulo h1 { margin: 0; }

.bnfc-times-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 16px;
}

.bnfc-time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--preto-suave);
  border: 1px solid var(--cinza);
  border-radius: 8px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.bnfc-time-item:hover { transform: translateY(-3px); border-color: var(--laranja); }
.bnfc-time-item img { width: 56px; height: 56px; object-fit: contain; }
.bnfc-time-item span { font-size: 13px; font-weight: 600; color: var(--creme); }
/* ---------- BLOCO PROMOCIONAL NO CABEÇALHO (2026-08-27) ---------- */
.header-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.header-promo:hover .header-promo-text { color: var(--laranja-claro); }

.header-promo-photo {
  width: 90px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 12%;
  flex-shrink: 0;
}

.header-promo-badge {
  width: 20px;
  height: 20px;
  background: #E62117;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-promo-text {
  color: var(--creme);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .header-promo-text { white-space: normal; }
}