/* === Global Header Style === */
#main-header {
  background-color: var(--tt-bg, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background-color .3s ease, border-color .3s ease;
}

#main-header .et-menu a {
  font-weight: 500;
  color: var(--tt-text, #222);
  padding: 14px 18px;
  text-decoration: none;
  transition: color .3s ease;
}

#main-header .et-menu a:hover,
#main-header .et-menu .current-menu-item > a {
  color: var(--tt-accent, #0078ff);
}

/* Logo */
#main-header .logo_container img {
  max-height: 52px;
  transition: filter .3s ease;
}

/* === Dark Mode Variables === */
body.dark-mode {
  --tt-bg: #121212;
  --tt-text: #f3f3f3;
  --tt-accent: #33aaff;
}

/* Optional: invert logo in dark mode */
body.dark-mode #main-header .logo_container img {
  filter: invert(1) hue-rotate(180deg);
}