/**
 * Brasil Fiança — Estilos complementares do portal de notícias
 * Arquivo: assets/noticias.css
 *
 * Carregado via wp_enqueue_style() — apenas nas páginas do CPT noticias.
 * Não sobrescreve estilos globais do tema.
 */

/* ══════════════════════════════════════════════════════
   TOKENS — espelham o tema principal
══════════════════════════════════════════════════════ */
:root {
  --bf-news-accent:     #2e8b1e;
  --bf-news-accent-d:   #1f6213;
  --bf-news-accent-l:   #eaf5e6;
  --bf-news-accent-b:   #b5d9ab;
  --bf-news-yellow:     #f5c400;
  --bf-news-coal:       #2e2e2e;
  --bf-news-border:     #e2e8f0;
  --bf-news-off:        #f8f9fa;
  --bf-news-txm:        #4a5568;
  --bf-news-txl:        #718096;
  --bf-news-font:       'Barlow', sans-serif;
  --bf-news-font-c:     'Barlow Condensed', sans-serif;
  --bf-news-r:          6px;
  --bf-news-rm:         12px;
  --bf-news-rl:         20px;
  --bf-news-sh:         0 2px 12px rgba(0,0,0,.07);
  --bf-news-sh-md:      0 6px 24px rgba(0,0,0,.10);
}


/* ══════════════════════════════════════════════════════
   TIPOGRAFIA DO CONTEÚDO EDITORIAL
   Aplicado dentro de .article-content gerado pelo WP
══════════════════════════════════════════════════════ */

/* Parágrafos introdutórios logo após um H2 */
.article-content > h2 + p {
  font-size: 15.5px;
  color: var(--bf-news-coal);
  font-weight: 500;
  line-height: 1.75;
}

/* Lead paragraph (primeiro parágrafo do artigo) */
.article-content > p:first-of-type {
  font-size: 16.5px;
  line-height: 1.8;
  color: #2e2e2e;
}

/* Highlight inline */
.article-content mark {
  background: #fff3cd;
  color: #856404;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Caixa de destaque (IA pode inserir via classe) */
.article-content .bf-callout {
  background: var(--bf-news-accent-l);
  border-left: 4px solid var(--bf-news-accent);
  padding: 16px 20px;
  border-radius: 0 var(--bf-news-r) var(--bf-news-r) 0;
  margin: 20px 0;
  font-size: 15px;
  color: var(--bf-news-accent-d);
  font-weight: 500;
  line-height: 1.7;
}

.article-content .bf-callout--warning {
  background: #fff8e1;
  border-color: var(--bf-news-yellow);
  color: #7a5f00;
}

.article-content .bf-callout--danger {
  background: #fff3f3;
  border-color: #dc3545;
  color: #842029;
}

/* Data e fonte da notícia (inserida pela IA) */
.article-content .bf-fonte {
  font-size: 12px;
  color: var(--bf-news-txl);
  font-style: italic;
  margin-top: -10px;
  margin-bottom: 20px;
  display: block;
}


/* ══════════════════════════════════════════════════════
   SEÇÕES ESTRUTURADAS (H2 obrigatórios da IA)
   Cada h2 recebe estilo diferenciado por ordem via CSS
   para reforçar visualmente a hierarquia do artigo.
══════════════════════════════════════════════════════ */

/* Ícone numérico antes de cada H2 */
.article-content h2 {
  counter-increment: article-section;
}

.article-content {
  counter-reset: article-section;
}

.article-content h2::before {
  content: counter(article-section, decimal-leading-zero);
  font-family: var(--bf-news-font-c);
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.9);
  background: var(--bf-news-accent);
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 10px;
  letter-spacing: .04em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════
   BADGE DE "NOVA" NOTÍCIA
   Adicionado via JS se publicado há menos de 24h
══════════════════════════════════════════════════════ */

.noticia-card[data-new="true"] .noticia-card__img-wrap::after {
  content: 'NOVA';
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--bf-news-font-c);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 3px 8px;
  background: var(--bf-news-yellow);
  color: var(--bf-news-coal);
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════
   SKELETON LOADING — para quando itens carregam via JS
══════════════════════════════════════════════════════ */

.bf-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: bf-shimmer 1.5s infinite;
  border-radius: var(--bf-news-r);
}

@keyframes bf-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.bf-skeleton-card {
  background: white;
  border: 1px solid var(--bf-news-border);
  border-radius: var(--bf-news-rl);
  overflow: hidden;
}

.bf-skeleton-img   { height: 200px; }
.bf-skeleton-title { height: 20px; margin: 16px; width: 80%; }
.bf-skeleton-text  { height: 14px; margin: 8px 16px; width: 60%; }


/* ══════════════════════════════════════════════════════
   PRINT STYLES — artigos imprimíveis
══════════════════════════════════════════════════════ */

@media print {
  .hero { height: auto; min-height: 0; }
  .hero__img, .hero__overlay { display: none; }
  .hero__content { background: var(--bf-news-coal); color: white; padding: 20px; }
  .sidebar, .share-bar, .article-cta, .related-section,
  #reading-progress, .cat-filters, .search-bar { display: none !important; }
  .article-layout { grid-template-columns: 1fr; }
  .article-content { font-size: 12pt; line-height: 1.6; }
  .article-content h2 { page-break-after: avoid; }
  .article-content p { orphans: 3; widows: 3; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #666; }
}