/*!
 * DESIGN SYSTEM — camada de padronização visual
 * Tema: Movie Critic Review (temcoragemnao.com.br)
 *
 * O QUE É ISTO:
 * O tema (style.css) e o front-page (custom-home-page.php) foram construídos
 * em várias etapas diferentes, cada uma criando suas próprias classes de
 * botão, badge e título (ex: .rating-badge, .rating-badge-modern,
 * .rating-badge-small, .movie-rating-badge, .rating-badge-movie — 5 nomes
 * para a "mesma coisa"). Em vez de reescrever cada template PHP (arriscado),
 * este arquivo cria UM padrão visual único e sobrepõe todas essas variações,
 * carregando por último com prioridade sobre bootstrap.css e style.css.
 *
 * Se algum elemento novo escapar deste padrão no futuro, adicione o seletor
 * dele na seção correspondente abaixo — não crie CSS solto em outro lugar.
 */

/* ==========================================================================
   1. TOKENS — a única fonte de cor/forma do site
   ========================================================================== */
:root {
  /* Cor de marca — usada em botões, links, categorias, destaques */
  --ds-primary: #E5253D;
  --ds-primary-dark: #B71C30;
  --ds-primary-soft: rgba(229, 37, 61, 0.12);

  /* Neutros — fundo escuro (seções dark), fundo claro (cards), texto */
  --ds-dark: #14151A;
  --ds-dark-2: #1E2027;
  --ds-light: #FFFFFF;
  --ds-gray-100: #F4F4F6;
  --ds-gray-300: #D8D9DE;
  --ds-text: #1A1A1E;
  --ds-text-muted: #7C7E88;
  --ds-text-on-dark: #EDEDF0;
  --ds-text-on-dark-muted: #A6A8B3;

  /* Único acento fora da paleta principal: reservado EXCLUSIVAMENTE
     para nota/avaliação (estrela), por ser uma convenção universal. */
  --ds-rating: #F5A623;

  /* Forma */
  --ds-radius-pill: 999px;   /* badges, tags, chips */
  --ds-radius-btn: 8px;      /* botões */
  --ds-radius-card: 12px;    /* cards/imagens */

  /* Tipografia */
  --ds-title-font-weight: 700;
  --ds-tracking-label: 0.06em; /* letter-spacing dos rótulos em caixa alta */

  /* Escala de botão — 3 tamanhos com propósito, não 1 tamanho pra tudo.
     LG  = CTA de seção inteira ("Ver todas as notícias", "Ver todos os vídeos")
     MD  = ação principal de um card grande/destaque ("Leia mais" no post em destaque)
     SM  = ação dentro de uma linha/lista compacta ("Assistir" na mini-lista lateral) */
  --ds-btn-pad-lg: 14px 32px;
  --ds-btn-font-lg: 0.85rem;
  --ds-btn-pad-md: 10px 22px;
  --ds-btn-font-md: 0.76rem;
  --ds-btn-pad-sm: 6px 14px;
  --ds-btn-font-sm: 0.68rem;
}

/* ==========================================================================
   2. TÍTULOS — regra única de caixa e peso por nível
   --------------------------------------------------------------------------
   Nível A "Rótulo de seção" (ex: "NOTÍCIAS MAIS RECENTES", "EM CARTAZ"):
     sempre CAIXA ALTA, mesmo peso/tamanho/tracking em todo o site.
   Nível B "Título de card/matéria" (nome de filme, manchete):
     NUNCA caixa alta — Title Case natural do texto, mesmo peso em todo card.
   ========================================================================== */

/* --- Nível A: cabeçalhos de seção/bloco --- */
.section-title,
.section-heading,
.heading-text,
.slider-heading,
.featured-heading,
.middle-bar h6,
.sidebar-title {
  text-transform: uppercase !important;
  font-weight: var(--ds-title-font-weight) !important;
  letter-spacing: var(--ds-tracking-label) !important;
  font-size: 1.5rem !important;
  color: var(--ds-text) !important;
}
/* Títulos de widget da sidebar/footer já nascem sobre fundo escuro
   (ver seção 7 mais abaixo) — texto sempre claro, nunca --ds-text. */
#sidebar h3,
#sidebar h2,
#sidebar .widget_block h3 {
  text-transform: uppercase !important;
  font-weight: var(--ds-title-font-weight) !important;
  letter-spacing: var(--ds-tracking-label) !important;
  font-size: 1.5rem !important;
  color: var(--ds-text-on-dark) !important;
}
/* variante em fundo escuro */
.bg-dark .section-title,
.bg-dark .heading-text,
.dark-section .section-title,
#footer .heading-text {
  color: var(--ds-text-on-dark) !important;
}
.section-subtitle {
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--ds-text-muted) !important;
}

/* --- Nível B: títulos de card / matéria / filme (NUNCA uppercase) --- */
.movie-title,
.post-title,
.featured-title,
.video-title,
.video-item-title,
.category-title,
.slider-title,
.post-main-box h2,
.post-main-box h3,
article h2.entry-title,
article h3.entry-title {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
.movie-title a,
.post-title a,
.featured-title a,
.video-title a,
.slider-title a {
  color: var(--ds-text) !important;
}
.bg-dark .movie-title a,
.dark-section .movie-title a,
#slider .slider-title a {
  color: var(--ds-text-on-dark) !important;
}
.movie-title a:hover,
.post-title a:hover,
.featured-title a:hover,
.video-title a:hover {
  color: var(--ds-primary) !important;
}

/* ==========================================================================
   3. BOTÕES — um estilo primário (sólido) e um secundário (contorno)
   --------------------------------------------------------------------------
   Substitui todas as combinações soltas de Bootstrap
   (btn-danger / btn-outline-danger / btn-warning / btn-outline-warning /
   btn-lg / btn-sm misturados) e as classes proprietárias do tema
   (.more-btn a, .read-more-btn, .featured-btn, .videos-btn,
   .watch-btn-small, .featured-read-more-btn, .video-link-btn).
   ========================================================================== */
.btn,
.btn-danger,
.btn-outline-danger,
.btn-warning,
.btn-outline-warning,
.more-btn a,
.read-more-btn,
.featured-read-more-btn,
.videos-btn,
.watch-btn-small,
.video-link-btn,
.slider-btn a,
.pro-button a,
.share-btn,
#comments input[type="submit"],
#comments a.comment-reply-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--ds-radius-btn) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ds-tracking-label) !important;
  line-height: 1.2 !important;
  border: 2px solid var(--ds-primary) !important;
  background: var(--ds-primary) !important;
  background-image: none !important; /* remove gradientes multicoloridos herdados do customizer */
  color: #fff !important;
  box-shadow: none !important;
  width: auto !important; /* nunca esticar pra 100% só por herdar de um container flex/grid */
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover,
.btn-danger:hover,
.more-btn a:hover,
.read-more-btn:hover,
.featured-read-more-btn:hover,
.videos-btn:hover,
.watch-btn-small:hover,
.video-link-btn:hover,
.slider-btn a:hover,
.pro-button a:hover,
.share-btn:hover {
  background: var(--ds-primary-dark) !important;
  border-color: var(--ds-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Decisão de padrão: NENHUM botão usa contorno/outline no site — todo
   botão é sólido, em todos os níveis. .btn-outline-* do Bootstrap e
   watch-btn-small.btn-outline-danger caem na mesma regra sólida acima. */
.btn-outline-danger,
.btn-outline-warning {
  background: var(--ds-primary) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------
   Escala de tamanho — é aqui que padronização vira proporção.
   A regra não é "todo botão do mesmo jeito", é "todo botão do MESMO
   NÍVEL do mesmo jeito". 3 níveis, do menor contexto pro maior.

   IMPORTANTE sobre a ordem abaixo: quando um elemento tem duas classes
   de nível ao mesmo tempo (ex: class="btn btn-sm"), quem decide o
   tamanho é a regra que vier DEPOIS no arquivo (mesma especificidade +
   !important = vence a última declarada). Por isso a ordem aqui é
   sempre MD -> SM -> LG, nunca solta.
   -------------------------------------------------------------------- */

/* NÍVEL MD (padrão/base) — ação principal de um card/post individual,
   mesmo que seja o post em destaque: "Leia mais". Tamanho-base do .btn. */
.btn,
.read-more-btn.featured-btn,
.featured-read-more-btn,
.pro-button a,
#comments input[type="submit"] {
  padding: var(--ds-btn-pad-md) !important;
  font-size: var(--ds-btn-font-md) !important;
}

/* NÍVEL SM — ação dentro de uma linha/lista compacta (miniatura + texto),
   nunca o protagonista do bloco: "Assistir" na lista lateral de vídeos,
   compartilhar, "Detalhes" em card pequeno. */
.btn-sm,
.watch-btn-small,
.video-link-btn,
.share-btn,
.read-more-btn:not(.featured-btn),
#comments a.comment-reply-link {
  padding: var(--ds-btn-pad-sm) !important;
  font-size: var(--ds-btn-font-sm) !important;
  letter-spacing: 0.03em !important;
  gap: 4px;
}

/* NÍVEL LG — CTA que fecha uma seção inteira ou ocupa um bloco grande
   (hero/slider, "Ver todas as notícias", "Ver todos os vídeos"). */
.btn-lg,
.more-btn a,
.videos-btn,
.slider-btn a {
  padding: var(--ds-btn-pad-lg) !important;
  font-size: var(--ds-btn-font-lg) !important;
}

/* ==========================================================================
   4. BADGES / TAGS — pill em todo lugar, cor com significado
   --------------------------------------------------------------------------
   - Categoria/gênero  -> pill vermelho (marca)
   - Nota/avaliação    -> pill escuro + estrela dourada (única exceção de cor)
   - Meta (data, "novo", contagem) -> pill neutro translúcido
   Substitui: .cat-badge, .category-badge, .category-badge-modern,
   .post-date-badge, .most-expected-badge, .movie-today-badge,
   .post-categories li a, .tags-bg a, e todos os .badge.bg-* do Bootstrap.
   ========================================================================== */
.badge,
.cat-badge,
.category-badge,
.category-badge-modern,
.post-date-badge,
.most-expected-badge,
.movie-today-badge,
.post-categories li a,
.tags-bg a,
.wp-block-tag-cloud a {
  display: inline-flex !important;
  align-items: center;
  border-radius: var(--ds-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* Categoria / gênero → sempre vermelho de marca, nunca cor aleatória */
.cat-badge,
.category-badge,
.category-badge-modern,
.post-categories li a,
.tags-bg a,
.wp-block-tag-cloud a,
.badge.bg-info,
.badge.bg-success,
.badge.bg-primary,
.badge.bg-secondary {
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary) !important;
  width: auto !important;
  height: auto !important;
}
.cat-badge:hover,
.category-badge:hover,
.category-badge-modern:hover,
.post-categories li a:hover,
.tags-bg a:hover {
  background: var(--ds-primary) !important;
  color: #fff !important;
}
/* Anula o gerador de cor aleatória usado no bloco "Mais Lidos" da sidebar */
.category-badge[style*="background-color"] {
  background: var(--ds-primary) !important;
}

/* Nota / avaliação → única badge que pode usar a cor dourada, com ícone de estrela */
.badge.bg-warning,
.rating,
.rating-badge,
.rating-badge-modern,
.rating-badge-small,
.rating-badge-movie,
.rating-badge.featured,
.movie-rating-badge,
.video-rating {
  background: var(--ds-dark) !important;
  color: var(--ds-rating) !important;
}
.badge.bg-warning::before,
.rating-badge::before,
.rating-badge-modern::before,
.movie-rating-badge::before {
  content: "\2605"; /* ★ */
  margin-right: 4px;
  font-size: 0.85em;
}

/* Meta / novidade / contagem → neutro, nunca colorido */
.slider-badge,
.badge.bg-danger,
.badge.bg-light,
#footer .badge,
.post-date-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--ds-text-on-dark) !important;
}
/* mesma badge de meta sobre fundo claro (cards brancos) */
.post-main-box .post-date-badge,
.movie-card .post-date-badge {
  background: var(--ds-gray-100) !important;
  color: var(--ds-text-muted) !important;
}

/* Números de ranking (1º, 2º, 3º na lista "Mais Lidos") seguem circulares,
   mas com apenas duas cores: destaque (top 3) e neutro (demais) */
.badge.bg-warning.rounded-circle,
.badge.bg-secondary.rounded-circle {
  border-radius: 50% !important;
  background: var(--ds-gray-300) !important;
  color: var(--ds-text) !important;
}
.badge.bg-warning.rounded-circle {
  background: var(--ds-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   5. Selo "New" do top bar e demais chips soltos
   ========================================================================== */
.top-bar .badge {
  background: var(--ds-primary) !important;
  color: #fff !important;
  border-radius: var(--ds-radius-pill) !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
}

/* ==========================================================================
   6. LINHAS/GRADIENTES DECORATIVOS SOLTOS
   --------------------------------------------------------------------------
   O style.css tem trechos de CSS "de demonstração" nunca customizados,
   cada um com uma cor diferente e sem relação com a marca do site:
   .section-title:after (roxo/azul #667eea→#764ba2), .section-divider
   (definido 2x — um roxo, outro azul #007bff), .movie-director (gradiente
   verde #28a745→#20c997), .rating-star (dourado solto). Isso é a origem
   dos traços azuis/roxos embaixo de alguns títulos e do verde do selo
   "HOJE!". Aqui eliminamos a variação e fixamos tudo em 1 cor de marca
   (ou no dourado exclusivo de nota, quando fizer sentido semântico).
   ========================================================================== */
.section-title:after,
.section-divider {
  background: var(--ds-primary) !important;
  background-image: none !important;
  opacity: 1 !important;
}
.movie-director {
  background: var(--ds-dark) !important;
  background-image: none !important;
  color: var(--ds-text-on-dark) !important;
}
.rating-star {
  color: var(--ds-rating) !important;
}
.movie-countdown {
  border-left-color: var(--ds-primary) !important;
}
.section-title i,
.movie-title i,
.section-title .fa-star,
.section-title .fa-bolt {
  color: var(--ds-primary) !important;
}

/* ==========================================================================
   7. SIDEBAR / WIDGETS — títulos escuros com texto claro, nunca blocos
   coloridos soltos (o "Pesquisar"/"Posts Recentes"/"Comentários" em caixa
   amarela vem do campo legado "First Color" do customizer, que não tem
   mais controle visível no painel — foi substituído pelas duas cores
   novas em "Padrão Visual (Cores)"). Título de widget passa a seguir o
   mesmo padrão dos demais cabeçalhos de seção: sóbrio, com um traço da
   cor primária, texto sempre claro sobre fundo escuro.
   ========================================================================== */
#sidebar h3,
#sidebar h2,
#sidebar .widget_block h3,
.middle-bar h6 {
  background: var(--ds-dark-2) !important;
  background-image: none !important;
  color: var(--ds-text-on-dark) !important;
  border-left: 3px solid var(--ds-primary) !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
}
#sidebar input[type="submit"],
#sidebar .search-button,
#sidebar .wp-block-search .wp-block-search__button,
#footer .wp-block-search .wp-block-search__button,
#footer input[type="submit"] {
  background: var(--ds-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ds-radius-btn) !important;
}
.pagination span,
.pagination a,
.pagination .current,
span.post-page-numbers.current,
.scrollup i,
#preloader {
  background: var(--ds-primary) !important;
  background-image: none !important;
  color: #fff !important;
}

/* ==========================================================================
   8. CONTRASTE — fundo escuro sempre com texto claro
   --------------------------------------------------------------------------
   Regra de segurança para qualquer bloco/seção que herde um fundo escuro
   (o padrão do site): parágrafos, metadados e links dentro dele nunca
   ficam em cinza-escuro/preto, que fica ilegível.
   ========================================================================== */
.bg-dark,
.dark-section,
#footer,
#sidebar {
  color: var(--ds-text-on-dark);
}
.bg-dark p,
.bg-dark span,
.bg-dark small,
.dark-section p,
.dark-section span,
#footer p,
#footer li,
#footer a {
  color: var(--ds-text-on-dark-muted);
}