/**
 * Dark Variant CSS
 * Transparent header, inverted logo and menu trigger
 */

#header.transparent-header.dark {
  background: transparent !important;
}

#header-wrap.transparent-header.dark,
#header.transparent-header.dark #header-wrap {
  background-color: inherit !important;
}

/* When scrolled, header becomes white (handled by critical CSS) */
#header.transparent-header.dark.scrolled,
#header.transparent-header.dark.scrolled #header-wrap {
  background-color: #fff !important;
  background: #fff !important;
}

/* Invert logo and menu trigger for dark variant */
#header.transparent-header.dark #logo {
  filter: invert(1);
}

#header.transparent-header.dark #mmenu-trigger {
    filter: invert(1);
}

/* Right nav normal (no filter) */
#header.transparent-header.dark .rightside-main-nav {
  filter: none;
}

/* When scrolled in dark mode - invert logo back to normal and make right nav black */
#header.transparent-header.dark.scrolled #logo {
  filter: invert(0) !important; /* Invert back to show normal logo on white background */
}

#header.transparent-header.dark.scrolled #mmenu-trigger {
  filter: invert(0) !important; /* Invert to make icons black on white background */
}

#header.transparent-header.dark.scrolled .rightside-main-nav {
  filter: invert(1) !important; /* Invert to make icons black on white background */
}

/* Ensure menu accordion icons are transparent in dark mode */
#header.transparent-header.dark #mmenu .woh,
#header.transparent-header.dark #mmenu .woh.activa,
#header.transparent-header.dark #mmenu .woh.activa2,
#header.transparent-header.dark #mmenu li .woh,
#header.transparent-header.dark #mmenu li .woh.activa,
#header.transparent-header.dark #mmenu li .woh.activa2 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
}

/* Remove activa background in dark mode for menu items */
#header.transparent-header.dark #mmenu>ul>li.activa,
#header.transparent-header.dark #mmenu ul li .secondheader ul li .activa,
#header.transparent-header.dark #mmenu>ul>li.activa>a,
#header.transparent-header.dark #mmenu ul li .secondheader ul li .activa>a,
#header.transparent-header.dark #mmenu li.activa,
#header.transparent-header.dark #mmenu li.activa2 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
}