/*style.css*/
/*!
 Theme Name:     N10 News Portal
 Theme URI:      https://portaln10.com.br
 Author:         Portal N10 / Romário Nicácio
 Author URI:     https://portaln10.com.br
 Description:    Tema WordPress otimizado para portais de notícias...
 Version:        1.3.2
 Text Domain:    n10-news
*/

/* ==========================================================================  
   1. VARIÁVEIS GLOBAIS
   ========================================================================== */
:root {
  /* Tipografia */
  --font-sans: 'Source Sans Pro', Arial, sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, serif;

  /* Cores */
  --color-text: #333;
  --color-heading: #222;
  --color-link: #0066cc;
  --color-link-hover: #0055aa;

  /* Espaçamentos */
  --line-height: 1.6;
  --scale-ratio: 1.25;

  /* Breakpoints */
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 480px;
  --bp-xs: 600px;
}

/* ==========================================================================  
   2. RESET E CORPO
   ========================================================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color-text);
}

/* ==========================================================================  
   3. TIPOGRAFIA GLOBAL
   ========================================================================== */
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  color: var(--color-heading);
  line-height: 1.2;
  scroll-margin-top: 1rem;
}
h1 { font-size: 2.25rem; }
h2 { font-size: calc(2.25rem / var(--scale-ratio)); }
h3 { font-size: calc(2.25rem / var(--scale-ratio) / var(--scale-ratio)); }
h4 { font-size: 1rem; font-weight: 700; }
h5 { font-size: .875rem; font-weight: 700; }
h6 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

h2::after,
h3::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  background: var(--color-link);
  margin-top: .5rem;
  border-radius: 2px;
}

p {
  margin: 0 0 1.5rem;
}
ul, ol {
  margin: 0 0 1.5rem 1.5rem;
}
ul li, ol li {
  margin-bottom: .5rem;
}

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-link);
  background: #f9f9f9;
  font-style: italic;
}

/* ==========================================================================  
   4. BOTÕES E INPUTS
   ========================================================================== */
.button,
button,
input[type="submit"] {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 6px;
  background: var(--color-link);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--color-link-hover);
}

/* ==========================================================================  
   5. CONTAINER & BOXED STYLE
   ========================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.container:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}


/* ==========================================================================  
 13. COMENTÁRIOS
   ========================================================================== */
.comments-area {
  margin-top: 3rem;
  padding: 2rem;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.comments-header { margin-bottom: 1.5rem; }
.comments-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-heading);
  position: relative;
}
.comments-title span {
  color: var(--color-link);
  font-weight: normal;
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
}
.comment-list li {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #eee;
}
.comment-list li:last-child {
  border-bottom: none;
}
.comment-avatar img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.comment-content { flex: 1; }
.comment-author {
  font-weight: bold;
  margin: 0;
  color: var(--color-text);
}
.comment-meta {
  font-size: .875rem;
  color: #777;
  margin: .25rem 0 1rem;
}
.comment-text { color: #444; line-height: 1.6; }
.comment-reply-link {
  font-size: .875rem;
  color: var(--color-link);
}
.comment-reply-link:hover { text-decoration: underline; }
.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin: 1.5rem 0;
}
.nav-previous, .nav-next {
  font-size: .9rem;
  color: var(--color-link);
}
.comment-form-wrapper {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
}
.comment-form .button {
  margin-top: 1rem;
}

/* =========================================================================
   1) Wrapper “anuncio-fullscreen” que “escapa” do padding/overflow do post
   ========================================================================= */
.single-container .anuncio-fullscreen {
  position: relative;
  /* força a largura EXATA da viewport (100vw) */
  width: 100vw;
  max-width: 100vw;
  /* “empurra” o wrapper para alinhar nas bordas da tela, anulando o padding do pai (19px) */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: visible !important;
  /* opcional: remova qualquer altura fixa ou overflow que venha de .n10-ad */
}

/* 2) Dentro desse wrapper, qualquer <iframe> ou <script> que gere um bloco de anúncio */
.single-container .anuncio-fullscreen iframe,
.single-container .anuncio-fullscreen .n10-ad {
  width: 100vw !important;
  max-width: 100vw !important;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

/* 3) Ajuste para dispositivos móveis (quando houver padding .container de 1rem) */
@media (max-width: 768px) {
  /* aqui anulamos o padding:1rem que a .container impõe nos blocos de anúncio */
  .single-container .anuncio-fullscreen {
    margin-left: calc(-1 * 1rem);     /* “-1rem” cancela o padding:1rem da .container */
    margin-right: calc(-1 * 1rem);
    width: calc(100vw + 2 * 1rem);     /* expande a largura para compensar o -1rem + -1rem */
    max-width: calc(100vw + 2 * 1rem);
  }
  /* garantir que o html/body permitam overflow do ad: */
  html, body {
    overflow-x: visible !important;
  }
}

/* ==========================================================================  
   14. LAYOUT SINGLE POST (Mantenha todo o resto do seu CSS)
   ========================================================================== */

/* Container principal do single post */
.single-container {
  max-width: 1200px;
  margin: 0 auto 0;
  padding: 0.2rem 0.5rem; /* o “1rem” daqui é o recuo que estamos removendo apenas para o ad no mobile */
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.single-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

/* Mobile First: A princípio, .article-body ocupa 100% do container */
.article-body {
  display: block;
  margin: 0;   /* Sem padding extra aqui */
  padding: 0;
  box-sizing: border-box;
}

/* Em telas maiores (≥ 801px), passamos para grid: conteúdo principal + sidebar */
@media (min-width: 801px) {
  .article-body {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 do espaço para conteúdo, 1/3 para sidebar */
    gap: 2rem;
  }
}

/* Garante que imagens dentro do conteúdo não ultrapassem o contêiner */
.content-area img,
.post-thumbnail img,
.wp-block-post-featured-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Se o AdSense estiver “dentro” de .content-area, isto também evita transbordo */
.content-area .insertion-block.n10-ad--in-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* =

/* ==========================================================================  
   Tudo Sobre – Card Circular e Elegante
   ========================================================================== */
/* Mobile First: Default styles for .tudo-sobre-card */
.tudo-sobre-card {
  display: flex;
  flex-direction: column; /* Mobile: stack vertically */
  text-align: center; /* Mobile: center text */
  background: rgba(255,255,255,0.95);
  border-radius: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 1.5rem; /* Mobile padding */
  margin: 2.5rem 0;
  transition: transform .3s ease, box-shadow .3s ease;
}

.tudo-sobre-card .ts-card-image {
  flex-shrink: 0;
  width: 100px; /* Mobile image size */
  height: 100px; /* Mobile image size */
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-link);
  margin: 0 auto 1rem; /* Mobile margin */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tudo-sobre-card .ts-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tudo-sobre-card .ts-card-content {
  flex: 1;
}

.tudo-sobre-card .ts-card-content p {
  margin: 0 0 .75rem;
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.4;
}

.tudo-sobre-card .ts-card-content p strong {
  font-size: 1.25rem; /* Mobile strong size */
  color: var(--color-link);
  display: block;
  margin-top: .25rem;
}

.tudo-sobre-card .ts-card-button {
  display: inline-block;
  margin: 1rem auto 0; /* Mobile button margin */
  background: var(--color-link);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .5px;
  transition: background .3s ease, transform .2s ease;
}

.tudo-sobre-card .ts-card-button:hover {
  background: var(--color-link-hover);
  transform: translateY(-2px);
}

.tudo-sobre-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Tablet and larger screens (769px+) */
@media (min-width: 769px) {
  .tudo-sobre-card {
    flex-direction: row; /* Desktop: align horizontally */
    text-align: left; /* Desktop: align text left */
    padding: 1.5rem 2rem; /* Desktop padding */
  }

  .tudo-sobre-card .ts-card-image {
    width: 120px; /* Desktop image size */
    height: 120px; /* Desktop image size */
    margin-right: 1.75rem; /* Desktop margin */
    margin-left: 0;
    margin-bottom: 0;
  }

  .tudo-sobre-card .ts-card-content p strong {
    font-size: 1.375rem; /* Desktop strong size */
  }

  .tudo-sobre-card .ts-card-button {
    margin: 1rem 0 0; /* Desktop button margin */
  }
}


/* ==========================================================================  
   15. HERO IMAGE + CAPTION + CONTENT AREA
   ========================================================================== */
.post-hero {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 8px;
}

.post-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Mobile First: Default styles for .post-hero-caption */
.post-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: .5rem; /* Mobile padding */
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-style: italic;
  word-break: break-word;
  font-size: .6rem; /* Mobile font size */
  line-height: 1.3; /* Mobile line height */
}

/* Larger screens (481px+) */
@media (min-width: 481px) {
  .post-hero-caption {
    padding: .75rem 1rem; /* Desktop padding */
    font-size: 1rem; /* Restore default/desktop font size if needed, assuming 1rem was implicit */
    line-height: var(--line-height); /* Restore default/desktop line height */
  }
}

/* Estilos para legendas de imagens dentro do conteúdo */
.content-area figure {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 8px;
}

.content-area figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.content-area figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: .5rem; /* Mobile padding */
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-style: italic;
  word-break: break-word;
  font-size: .6rem; /* Mobile font size */
  line-height: 1.3; /* Mobile line height */
}

/* Ajuste para imagens alinhadas (esquerda/direita) */
.content-area figure.alignleft,
.content-area figure.alignright {
  max-width: 50%; /* Limita a largura para alinhamento */
}

.content-area figure.alignleft {
  margin-right: 1.5rem;
  float: left;
}

.content-area figure.alignright {
  margin-left: 1.5rem;
  float: right;
}

.content-area figure.aligncenter {
  text-align: center;
}
.content-area figure.aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

/* Limpar floats após figuras alinhadas */
.content-area .entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Remover ou suavizar efeito de fade-in do lazy loading */
.content-area img.lazyloaded {
  /* Remove a transição de opacidade se houver */
  transition: none !important;
  opacity: 1 !important; /* Garante opacidade total imediatamente */
}

/* Estilos para o estado de carregamento (se houver overlay/animação) */
.content-area img.lazyloading {
  /* Remove background ou filtros que possam causar o efeito de overlay */
  background: none !important;
  filter: none !important;
  opacity: 1 !important; /* Mantém a imagem visível durante o carregamento */
  /* Se ainda houver um placeholder visual indesejado, pode ser necessário ajustar o JS ou usar: */
  /* background-color: #eee; */ 
}

/* Estilos para o wrapper do placeholder (se usado e causar problemas) */
.content-area .image-placeholder {
  /* Remove estilos que possam causar overlay ou animação */
  background: none !important;
  border: none !important;
  /* Garante que o wrapper não adicione espaço extra */
  line-height: 0;
  font-size: 0;
  display: inline-block; 
  width: auto; 
  height: auto; 
}



/* ==========================================================================  
   ENTRY HEADER & META – AJUSTES GERAIS (SEM CORES FIXAS)  
   ========================================================================== */

/* Container do header */
.entry-header {
  padding: 0.5rem 1.5rem 1.5rem;
  margin: 0 auto 0.5rem;
  max-width: 1200px;
}

/* 1. BREADCRUMB */
.breadcrumbs.small {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.breadcrumbs.small a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs.small a:hover {
  text-decoration: underline;
}

/* ===========================
   2. TÍTULO – Estilo aprimorado
   =========================== */
.entry-header .entry-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 3rem);  /* Aumentei um pouco o tamanho máximo */
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25;                    /* Maior espaço entre linhas para melhor leitura */
  margin: 0;                  /* Margem inferior mais generosa */
  text-align: center;
  letter-spacing: 0.02em;               /* Leve espaçamento entre letras para sofisticar */
  position: relative;
  padding-bottom: 0.5rem;               /* Espaço para a borda decorativa */
}

/* Borda decorativa discreta abaixo do título */
.entry-header .entry-title::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  background-color: var(--color-accent); /* Utilize uma cor de destaque do tema */
  margin: 0.25rem auto 0;               /* Centraliza a barra abaixo do título */
  border-radius: 1px;
}

/* ===========================
   3. SUBTÍTULO – Estilo aprimorado
   =========================== */
.entry-header .entry-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 3vw, 1.3rem);  /* Leve aumento máximo para melhor visibilidade */
  font-weight: 300;
  font-style: italic;                   /* Itálico sutil para reforçar o papel de descrição */
  color: var(--color-text-secondary);
  line-height: 1.6;                     /* Espaçamento confortável entre linhas */
  text-align: center;
  margin: 0 0 1rem;                     /* Margem inferior maior para separar da metainformação */
  letter-spacing: 0.01em;               /* Pequeno espaçamento para dar leveza */
  max-width: 48rem;                     /* Limita a largura para não ficar “esticado” em telas muito grandes */
  margin-left: auto;
  margin-right: auto;
}

/* 1. ENTRY META – Mobile first: itens lado a lado, com wrap */
.entry-meta-top {
  display: flex;
  flex-direction: row;       /* Dispor em linha no mobile */
  flex-wrap: wrap;           /* Permitir quebra de linha */
  justify-content: center;   /* Centraliza os itens */
  gap: 0;          /* Espaço vertical e horizontal entre itens */
  font-size: 0.65rem;
  color: #575252;
  padding: 0 0.25rem;
}

/* 2. Autor */
.entry-meta-top .entry-author {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;                 /* Remove margem inferior */
}

.entry-meta-top .entry-author a {
  color: var(--color-link);
  text-decoration: none;
}

.entry-meta-top .entry-author a:hover {
  text-decoration: underline;
}

/* 3. Separador (opcional): pequeno traço “|” entre itens */
.entry-meta-top .meta-sep {
  display: inline-block;
  content: "|";
  margin: 0 0.25rem;
  color: #000000;
}

/* 4. Data de publicação */
.entry-meta-top time.entry-date,
.entry-meta-top .updated-date {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}

/* 5. Tempo de leitura */
.entry-meta-top .entry-reading-time {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

.entry-meta-top .entry-reading-time::before {
  content: "⏱";
  margin-right: 0.25em;
  font-size: 1.1em;
}


/* Larger screens (769px+) - Apply horizontal layout */
@media (min-width: 769px) {
  .entry-meta-top {
    flex-direction: row; /* Desktop: horizontal layout */
    flex-wrap: wrap;
    justify-content: center; /* Desktop: center alignment */
    gap: 0.5rem 1rem; /* Desktop gap */
    font-size: 0.85rem; /* Desktop font size */
    padding-top: 1rem; /* Restore desktop padding */
    padding-left: 0;
    padding-right: 0;
  }

  .entry-meta-top .entry-author {
    margin-bottom: 0; /* Reset mobile margin */
  }

  .entry-meta-top .meta-sep {
    display: inline; /* Show separators on desktop */
    margin: 0;
    color: var(--color-divider);
  }

  .entry-meta-top .entry-reading-time {
    margin-top: 0; /* Reset mobile margin */
  }
}

/* Specific adjustments for entry-header padding on mobile */
.entry-header {
  padding: 0rem; /* Mobile padding */
  margin: 0 auto 0.5rem;
  max-width: 1200px;
}

/* Restore entry-header padding on larger screens (769px+) */
@media (min-width: 769px) {
  .entry-header {
     padding: 0.5rem 1.5rem 1.5rem; /* Desktop padding */
  }
}


/* ==========================================================================  
 17. ARTICLE BODY & SIDEBAR
   ========================================================================== */
/* Mobile First: Default to block layout for article body */
.article-body {
  display: block; /* Mobile default */
}

/* Apply grid layout for larger screens (801px+) */
@media (min-width: 801px) {
  .article-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
}
.content-area img {
  max-width: 100%;
  border-radius: 4px;
}
.post-sidebar {
  background: #fafafa;
  padding: 1rem;
  border-radius: 6px;
}

/* ==========================================================================
   2. GRID RESPONSIVO DE CARDS
   ========================================================================== */
.related-posts {
  margin: 2rem 0;
}

/* 2.1 TÍTULO DA SEÇÃO */
.related-section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text);
}

/* 2.2 CONTAINER EM GRID (Mobile First) */
.related-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 coluna no mobile */
  gap: 1rem;                  /* Espaçamento entre cards */
}

/* 2.3 481px+ — 2 colunas */
@media (min-width: 481px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* 2.4 769px+ — mantém 2 colunas, mas aumenta gap */
@media (min-width: 769px) {
  .related-grid {
    gap: 1.5rem;
  }
}

/* 2.5 1025px+ — mantém 2 colunas, gap maior ainda */
@media (min-width: 1025px) {
  .related-grid {
    gap: 2rem;
  }
}


/* ==========================================================================
   3. CARD (ESTRUTURA, FUNDO, SOMBRA E HOVER)
   ========================================================================== */
.related-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  /* Sombra suave para destaque */
  box-shadow: 0 2px 4px var(--color-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--color-shadow);
  border-color: var(--color-link);
}
.related-card a:hover,
.related-card a:focus {
  text-decoration: none;
}

/* ==========================================================================
   4. THUMBNAIL: PROPORÇÃO FIXA E “CROP” COMPLETO
   ========================================================================== */
.related-thumb {
  position: relative;     /* Necessário para posicionar possíveis badges */
  width: 100%;
  aspect-ratio: 16 / 9;   /* Mantém 16:9 */
  overflow: hidden;
  background-color: var(--color-border); /* Cor de fallback enquanto carrega */
}

.related-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Preenche e corta se necessário */
  object-position: center; /* Centraliza a imagem */
  display: block;
}


/* ==========================================================================
   5. CONTEÚDO DO CARD (TÍTULO, DATA, EXCERPT E BOTÃO)
   ========================================================================== */
.related-content {
  flex: 1;                     /* Faz o conteúdo ocupar todo o espaço vertical */
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
}

/* 5.1 TÍTULO (RESPONSIVO) */
/* Mobile First: título menor para caber bem em telas pequenas */
.related-title {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  color: var(--color-text);
  flex: 1;               /* Ocupa o máximo de espaço para empurrar o botão para baixo */
  line-height: 1.3;
  font-weight: 600;
}

/* 481px+ — restaura tamanho e margem maiores */
@media (min-width: 481px) {
  .related-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

/* 5.2 DATA DO POST */
/* Opcional: estiliza pequenas para diferenciá-las do título */
.related-date {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  font-style: italic;
}

/* 5.3 EXCERPT (RESUMO) */
/* Usa uma cor cinza equilibrada para garantir legibilidade */
.related-excerpt {
  font-size: 0.9rem;
  color: #555555;  /* cinza médio, garante contraste sem ficar muito pesado */
  margin: 0 0 1rem;
  line-height: 1.4;
  flex: 1;  /* Preenche espaço restante antes do botão */
}


/* 5.4 CTA (BOTÃO “Ler Agora”) */
.related-cta {
  display: inline-block;
  background-color: var(--color-link);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: calc(var(--border-radius) / 1.5);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  border: none;
  align-self: flex-start; /* Botão alinhado à esquerda dentro do fluxo do conteúdo */
}

.related-cta:hover {
  background-color: var(--color-link-hover);
  transform: translateY(-1px);
}

/* Se quiser que o botão ocupe toda a largura do card no mobile: */
/* 
@media (max-width: 480px) {
  .related-cta {
    width: 100%;
    text-align: center;
  }
}
*/

/* ==========================================================================  
   4. BADGE DO SITE REMOTO (quando is_remote === true)
   ========================================================================== */
.remote-site-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  line-height: 1;
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .remote-site-badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.4rem;
  }
}




/* ==========================================================================  
 20. NAVIGAÇÃO & FOOTER LINKS
   ========================================================================== */
.post-navigation,
.entry-footer,
.entry-comments {
  margin: 2rem 0;
}
.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
}
.post-navigation a,
.entry-footer a {
  color: var(--color-link);
}
.post-navigation a:hover,
.entry-footer a:hover {
  text-decoration: underline;
}
.entry-footer {
  font-size: .875rem;
  color: #555;
}
.entry-footer .post-cats a,
.entry-footer .tags-links a {
  margin-right: .5rem;
}



/* ==========================================================================  
 21. MEDIA QUERIES FINAIS
   ========================================================================== */
@media (max-width: var(--bp-lg)) {
  .home-grid {
    grid-template-areas:
      "ticker"
      
      "latest"
      "cats"
      "sidebar";
    grid-template-columns: 1fr;
  }
}

/* Mobile First: Default styles for .news-ticker (smallest screens) */
.news-ticker.modern .ticker-window { padding: .5rem 1rem; }
.news-ticker.modern .ticker-btn { display: none; }
.news-ticker.modern .ticker-track {
  animation: none;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.news-ticker.modern .ticker-track::-webkit-scrollbar { display: none; } /* Chrome/Safari/Opera */

/* Medium screens (var(--bp-sm) = 480px+) */
@media (min-width: 481px) { /* Assuming bp-sm is 480px */
  .news-ticker.modern .ticker-btn { display: inline-flex; } /* Show button */
  .news-ticker.modern .ticker-track {
    /* Re-enable animation if desired, or keep scroll */
    /* If re-enabling animation, remove overflow-x and scrollbar styles */
     animation: ticker-scroll 40s linear infinite; /* Example animation re-enable */
     overflow-x: hidden; /* Hide scrollbar if using animation */
  }
}

/* Larger screens (var(--bp-md) = 768px+) */
@media (min-width: 769px) { /* Assuming bp-md is 768px */
  .news-ticker.modern .ticker-window { padding: .5rem 2rem; }
  /* Animation duration might change for larger screens if needed */
  /* .news-ticker.modern .ticker-track { animation-duration: 30s; } */
}



/* ==========================================================================  
   RESET DO WRAPPER INTERNO DO FOOTER  
   ========================================================================== */
.site-footer .footer-container {
  background: #202020 !important;
  border-radius: 0        !important;
  box-shadow: none        !important;
  padding: 0              !important;
  margin-top: 3rem; /* espaço acima do footer */
}

/* Mobile First: Default styles for footer widgets (stacked) */
.site-footer .footer-container .footer-widgets--flex {
  display: flex;
  flex-direction: column; /* Mobile: stack vertically */
  gap: 1rem; /* Mobile gap */
  margin-bottom: 2.5rem;
}

.site-footer .footer-container .footer-widget-area.card,
.site-footer .footer-container .footer-newsletter.card {
  flex: 1 1 100%; /* Mobile: full width */
  min-width: auto; /* Reset min-width */
}

/* Mobile First: Default styles for footer bottom (stacked) */
.site-footer .footer-container .footer-bottom {
  display: flex;
  flex-direction: column; /* Mobile: stack vertically */
  text-align: center; /* Mobile: center text */
  gap: 1rem;
  border-top: 1px solid var(--footer-border);
  padding: 1.5rem var(--footer-padding-h);
}

/* Larger screens (769px+) - Apply horizontal layout for widgets and bottom */
@media (min-width: 769px) { /* Corresponds to --bp-md */
  .site-footer .footer-container .footer-widgets--flex {
    flex-direction: row; /* Desktop: horizontal layout */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem; /* Desktop gap */
  }

  .site-footer .footer-container .footer-widget-area.card,
  .site-footer .footer-container .footer-newsletter.card {
    flex: 1 1 calc(33.333% - 1rem); /* Desktop: 3 columns */
    min-width: 220px; /* Restore min-width */
  }

  .site-footer .footer-container .footer-bottom {
    flex-direction: row; /* Desktop: horizontal layout */
    justify-content: space-between;
    align-items: center;
    text-align: left; /* Reset text alignment */
  }
}

/* ==========================================================================  
   16. BOTÕES DE COMPARTILHAMENTO SOCIAL (CTA Share)
   ========================================================================== */
.post-cta--share {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 8px;
  text-align: center;
}

.post-cta__title {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.post-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-size: 0; /* Esconde o texto, se houver */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.share-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* Garante que o SVG herde a cor do texto do botão */
  display: inline-block; /* Garante que o SVG seja renderizado corretamente */
  vertical-align: middle; /* Alinha verticalmente o SVG */
}

/* Cores específicas para cada botão */
.share-btn--whatsapp {
  background-color: #25D366;
}

.share-btn--facebook {
  background-color: #1877F2;
}

.share-btn--twitter {
  background-color: #1DA1F2;
}

.share-btn--linkedin {
  background-color: #0A66C2;
}

/* cores de fundo oficiais para o CTA de inscrição / redes sociais */
.post-cta--subscribe .button--whatsapp {
  background-color: #25D366;
}
.post-cta--subscribe .button--whatsapp:hover {
  background-color: #1DA851;
}

.post-cta--subscribe .button--facebook {
  background-color: #1877F2;
}
.post-cta--subscribe .button--facebook:hover {
  background-color: #155BB5;
}

.post-cta--subscribe .button--instagram {
  background-color: #E1306C;
}
.post-cta--subscribe .button--instagram:hover {
  background-color: #C12757;
}

/* Newsletter — utilize o azul do seu portal ou outra cor de identidade */
.post-cta--subscribe .button--newsletter {
  background-color: var(--color-link);
}
.post-cta--subscribe .button--newsletter:hover {
  background-color: var(--color-link-hover);
}

.post-cta--subscribe .button--googlenews {
  background-color: #4285F4;
}
.post-cta--subscribe .button--googlenews:hover {
  background-color: #3367D6;
}