/* 
 * PortalBrasileiro - Dark Mode CSS
 * Estilos para o modo escuro do portal
 */

/* Variáveis do modo escuro */
.dark-mode {
  /* Cores principais */
  --color-primary: #4f9cf9;
  --color-primary-dark: #3a7bc2;
  --color-secondary: #ff7043;
  --color-accent: #ffd54f;
  
  /* Tons neutros */
  --color-dark: #f5f5f5;
  --color-dark-medium: #e0e0e0;
  --color-medium: #9e9e9e;
  --color-light-medium: #424242;
  --color-light: #212121;
  --color-white: #121212;
  
  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(255,255,255,0.08), 0 1px 2px rgba(255,255,255,0.12);
  --shadow-md: 0 3px 6px rgba(255,255,255,0.10), 0 3px 6px rgba(255,255,255,0.15);
  --shadow-lg: 0 10px 20px rgba(255,255,255,0.12), 0 6px 6px rgba(255,255,255,0.15);
}

/* Ajustes específicos para o modo escuro */
.dark-mode .site-header {
  background-color: #1a1a1a;
}

.dark-mode .header-top {
  background-color: #000000;
}

.dark-mode .main-navigation {
  background-color: var(--color-primary-dark);
}

.dark-mode .hero-main-content {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

.dark-mode .featured-card,
.dark-mode .news-card,
.dark-mode .category-card,
.dark-mode .sidebar-widget,
.dark-mode .article-author,
.dark-mode .comment {
  background-color: #1a1a1a;
}

.dark-mode .ad-container,
.dark-mode .ad-widget,
.dark-mode .article-share {
  background-color: #1a1a1a;
}

.dark-mode .ad-placeholder {
  background-color: #2a2a2a;
  color: #9e9e9e;
}

.dark-mode .section-header,
.dark-mode .category-header,
.dark-mode .widget-title,
.dark-mode .category-item,
.dark-mode .footer-widget-title {
  border-color: #333333;
}

.dark-mode .section-title::after,
.dark-mode .category-title::after,
.dark-mode .widget-title::after,
.dark-mode .footer-widget-title::after {
  background-color: var(--color-primary);
}

.dark-mode .site-footer {
  background-color: #0a0a0a;
}

.dark-mode .footer-bottom {
  background-color: #000000;
}

.dark-mode .footer-social a {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: #2a2a2a;
  border-color: #333333;
  color: var(--color-dark);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #666666;
}

.dark-mode .toast {
  background-color: #333333;
  color: #ffffff;
}

/* Ajustes para imagens no modo escuro */
.dark-mode img:not(.site-logo):not([src*=".svg"]) {
  filter: brightness(0.85);
}

/* Transição suave entre modos */
body, 
.site-header, 
.header-top, 
.main-navigation,
.featured-card,
.news-card,
.category-card,
.sidebar-widget,
.ad-container,
.ad-placeholder,
.site-footer,
.footer-bottom,
input, 
textarea,
select,
img:not(.site-logo):not([src*=".svg"]) {
  transition: all 0.3s ease;
}

/* Botão de alternar modo escuro */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-medium);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
}

.dark-mode-toggle:hover {
  color: var(--color-primary);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.dark-mode-toggle i {
  font-size: 1rem;
}

/* Posicionamento do botão */
.header-top .dark-mode-toggle {
  margin-left: auto;
}

/* Ajustes para o botão no modo escuro */
.dark-mode .dark-mode-toggle {
  color: var(--color-light-medium);
}

.dark-mode .dark-mode-toggle:hover {
  color: var(--color-primary);
}