/* /static/theme-toggle.css */

/* ===== Botão de tema (usa classes já existentes btn btn--ghost btn--icon) ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
}

/* Ícones: mostra lua no light, sol no dark */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ===== Ajuste do "Navegar" no tema escuro =====
   Sem mudar HTML/funcionalidade: só cores/contorno para não ficar "feito pro claro".
*/
html[data-theme="dark"] .nav-combo--text .nav-combo__trigger {
  color: var(--color-text, #e7e7e7);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Se o select estiver visível/estilizado, garante contraste no dark */
html[data-theme="dark"] .nav-combo__select {
  color: var(--color-text, #e7e7e7);
}

/* Alguns browsers aplicam fundo branco nas opções */
html[data-theme="dark"] .nav-combo__select option {
  background: var(--color-surface, #14181d);
  color: var(--color-text, #e7e7e7);
}

/* Opcional: se o header tiver superfície clara fixa em algum ponto */
html[data-theme="dark"] .header {
  background: var(--color-surface, #14181d);
}