/* Additional CSS to fix header colors in dark mode */

/* Apply proper header text colors in dark mode */
body.dark-background #header,
body.dark-background .header {
  color: var(--contrast-color);
  background-color: var(--background-color);
}

/* Fix navigation menu colors in dark mode */
body.dark-background .navmenu a,
body.dark-background .navmenu a:focus {
  color: var(--contrast-color);
}

body.dark-background .navmenu li:hover>a,
body.dark-background .navmenu .active,
body.dark-background .navmenu .active:focus {
  color: var(--accent-color);
}

/* Fix mobile navigation menu colors */
body.dark-background .mobile-nav-toggle {
  color: var(--contrast-color);
}

/* Fix dropdown menu in dark mode */
body.dark-background .navmenu .dropdown ul {
  background: var(--surface-color);
}

body.dark-background .navmenu .dropdown ul a {
  color: var(--contrast-color);
}

body.dark-background .navmenu .dropdown ul a:hover,
body.dark-background .navmenu .dropdown ul .active:hover,
body.dark-background .navmenu .dropdown ul li:hover>a {
  color: var(--accent-color);
}

/* Ensure logo text is visible in dark mode */
body.dark-background .header .logo h1 {
  color: var(--accent-color);
}

/* Make the get started button visible in dark mode */
body.dark-background .header .btn-getstarted,
body.dark-background .header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
}

body.dark-background .header .btn-getstarted:hover,
body.dark-background .header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}