/* === Base Menu Styling === */
#superfish-main.sf-menu {
  background-color: var(--color-sf-main);
}

/* === Top-Level Links === */
#superfish-main.sf-menu > li > a {
  background-color: var(--color-sf-main);
  color: var(--color-black);
  transition: background 0.3s, color 0.3s;
}

/* === Submenu (Second Level) Links === */
#superfish-main.sf-menu ul li a {
  background-color: var(--color-white);
  color: var(--color-black);
  transition: background 0.3s, color 0.3s;
}

/* === Top-Level Hover, Active, Focus === */
#superfish-main.sf-menu > li:hover > a,
#superfish-main.sf-menu > li.sfHover > a,
#superfish-main.sf-menu > li.active-trail > a,
#superfish-main.sf-menu > li > a:focus {
  background-color: rgb(26, 94, 180);
  color: var(--color-white);
}

/* === Second-Level Hover === */
#superfish-main.sf-menu ul li a:hover,
#superfish-main.sf-menu ul li.sfHover > a {
  background-color: rgb(26, 94, 180);
  color: var(--color-white);
}

/* === Arrow Styling (» span) === */

/* Default arrow style — var(--color-black) when background is gray */
#superfish-main.sf-menu .sf-sub-indicator {
  color: var(--color-black) !important;
  transition: color 0.3s;
}

/* When top-level item is hovered/active */
#superfish-main.sf-menu > li:hover > a .sf-sub-indicator,
#superfish-main.sf-menu > li.sfHover > a .sf-sub-indicator,
#superfish-main.sf-menu > li.active-trail > a .sf-sub-indicator {
  color: var(--color-white);
}

/* When second-level item is hovered */
#superfish-main.sf-menu ul li a:hover .sf-sub-indicator,
#superfish-main.sf-menu ul li.sfHover > a .sf-sub-indicator {
  color: var(--color-white);
}

/* Top-level hovered/active/focused: make arrow white */
#superfish-main.sf-menu > li:hover > a .sf-sub-indicator,
#superfish-main.sf-menu > li.sfHover > a .sf-sub-indicator,
#superfish-main.sf-menu > li.active-trail > a .sf-sub-indicator,
#superfish-main.sf-menu > li > a:focus .sf-sub-indicator {
  color: var(--color-white) !important;
}

/* Second-level hovered/active: make arrow white */
#superfish-main.sf-menu ul li a:hover .sf-sub-indicator,
#superfish-main.sf-menu ul li.sfHover > a .sf-sub-indicator {
  color:var(--color-white) !important;
}

.sf-menu .sf-sub-indicator::after {
    color: var(--color-black) !important;
}

/* Base state: arrow is black */
#superfish-main.sf-menu .sf-sub-indicator {
  color: var(--color-black) !important;
  transition: color 0.3s ease;
}

/* FINAL override for arrow in top-level active state */
#superfish-main.sf-menu > li.active-trail.menuparent > a.is-active.sf-with-ul > .sf-sub-indicator {
  color: white !important;
}

.sf-menu.sf-accordion a { color: var(--color-black); }

@media only screen and (max-width: 880px) {
	 ul.sf-menu .sf-depth-1 {
		align-items: start !important;
		align-self: start !important;
		text-align: left;
		min-block-size: unset;
		border-bottom: 1px solid #fff;
	 }
	 #superfish-main-accordion ul.sf-menu .sf-depth-1 {
  	background-color: var(--theme-main);
  	color: var(--color-white);
	}
}

@media only screen and (max-width: 1120px) {
  a#superfish-main-toggle span {
    color: var(--color-black);
  }
}

ul.sf-menu.sf-accordion.sf-expanded, ul.sf-menu.sf-accordion li.sf-expanded > ul {
left: auto !important;
position: relative;
margin-top: 0 !important;
}