/*
Theme Name: Portal Virou Notícias
Author: Igor Sousa - SOZZA DEV
Version: 1.0.0
Description: Tema customizado de alta performance para portal de notícias Virou Notícia.
*/

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
}

/* Ajustes globais do carrossel */
.carrossel-destaques {
  --swiper-navigation-color: #ffffff; /* Cor da seta (quase preto, como na imagem) */
  --swiper-navigation-size: 8px; /* Tamanho da seta */
  --swiper-navigation-sides-offset: 0px; /* Cola os botões nas bordas laterais */
}

/* 1. PAGINAÇÃO (Transformando bolinhas em barras) */
.carrossel-destaques::part(pagination) {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 4px; /* Espaçamento lateral para não colar na borda */
  gap: 4px;
  bottom: 0;
}

.carrossel-destaques::part(bullet) {
  width: 100%; /* Faz as barras esticarem para preencher o espaço */
  height: 4px; /* Espessura da barra */
  border-radius: 4px; /* Bordas levemente arredondadas */
  background-color: #ffffff; /* Cor das barras inativas */
  opacity: 1; 
  transition: all ease 0.3s;
  margin: 0; /* Remove a margem padrão entre os bullets */
}

.carrossel-destaques::part(bullet-active) {
  background-color: var(--color-brand-200); /* Cor roxa da barra ativa (ajuste para o hex exato se precisar) */
  width: 100%; /* Faz as barras esticarem para preencher o espaço */
  height: 4px; /* Espessura da barra */
  border-radius: 4px; /* Bordas levemente arredondadas */
  opacity: 1; 
  margin: 0; /* Remove a margem padrão entre os bullets */
}

/* 2. NAVEGAÇÃO (Criando as caixas laterais transparentes) */
.carrossel-destaques::part(button-prev),
.carrossel-destaques::part(button-next) {
  height: 59px; /* Estica para cobrir a altura toda da imagem */
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  width: 32px; /* Largura da caixa da seta */
  background-color: rgba(255, 255, 255, 0.35); /* Fundo branco semi-transparente */
  transition: background-color 0.3s ease;
  padding: 16px 6px;
  box-sizing: border-box;
}

/* Alinhamento das caixas nas laterais */
.carrossel-destaques::part(button-prev) {
  left: 0;
}
.carrossel-destaques::part(button-next) {
  right: 0;
}

/* Efeito de hover (opcional, para ficar mais interativo) */
.carrossel-destaques::part(button-prev):hover,
.carrossel-destaques::part(button-next):hover {
  background-color: rgba(255, 255, 255, 0.5); 
}

/* Estilização da Paginação do WordPress com Tailwind */
.navigation.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  padding: 4px;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  transition: background-color 0.2s ease;
  background-color: white;
}

.navigation.pagination .page-numbers:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  transition: background-color 0.2s ease;
  background-color: #E2D5F0;
}

.navigation.pagination .page-numbers.current {
  background-color: var(--color-brand-200); /* Cor de fundo roxa para o número ativo */
  color: white; /* Cor do texto para o número ativo */
}

.navigation.pagination .page-numbers.current:hover {
  background-color: var(--color-brand-200); /* Mantém a cor de fundo roxa no hover do número ativo */
  color: white; /* Mantém a cor do texto branca no hover do número ativo */
}