.content-header .wrapper-topmenu {
  background: transparent;
}

.wrapper-topmenu .main-nav {
  /* The bar fills the page; only the row of menu entries may be narrower. */
  width: 100%;
  max-width: none;
  background: var(--menu-bg-100vw);
  background: color-mix(in srgb, var(--menu-bg-100vw) var(--menu-background-opacity, 100%), transparent);
}

@media screen and (min-width: 769px) {
  .wrapper-topmenu #main-menu {
    max-width: var(--menu-max-width, 1280px);
    margin-left: auto;
    margin-right: auto;
  }
}

.wrapper-topmenu #main-menu.sm-clean {
  background: transparent;
}

.content-header .wrapper-topmenu #main-menu > li > a {
  color: var(--menu-link-color);
}

.content-header .wrapper-topmenu #main-menu > li > a:hover,
.content-header .wrapper-topmenu #main-menu > li > a:focus,
.content-header .wrapper-topmenu #main-menu > li > a:active,
.content-header .wrapper-topmenu #main-menu > li > a.highlighted {
  color: var(--menu-link-hover-color);
  background: var(--menu-hover-bg);
}

.content-header .wrapper-topmenu #main-menu > li > a.current,
.content-header .wrapper-topmenu #main-menu > li > a.active {
  color: var(--menu-link-hover-color);
  background: var(--menu-current-bg);
}

@media screen and (max-width: 768px) {
  #main-menu.sm-clean a .sub-arrow {
    color: var(--mobile-toggle-color);
    background: var(--mobile-toggle-bg);
    background: color-mix(in srgb, var(--mobile-toggle-bg) var(--mobile-toggle-bg-opacity, 90%), transparent);
  }
}

/* Fish-style vertical menu colors: transparent link tiles over the page background. */
#main-menu-v.vertical-menu {
  background: transparent;
}

#main-menu-v.vertical-menu > li > a {
  color: var(--menu-link-color);
  background: var(--menu-bg);
  background: color-mix(in srgb, var(--menu-bg) var(--menu-background-opacity, 100%), transparent);
}

#main-menu-v.vertical-menu > li > a:hover,
#main-menu-v.vertical-menu > li > a:focus,
#main-menu-v.vertical-menu > li > a:active,
#main-menu-v.vertical-menu > li > a.highlighted,
#main-menu-v.vertical-menu > li > a.active,
#main-menu-v.vertical-menu > li > a.current {
  color: var(--menu-link-hover-color);
  background: var(--menu-hover-bg);
}

/* Active child levels are part of the document flow. */
#main-menu-v.vertical-menu ul {
  display: none !important;
  visibility: visible !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 var(--gutter-half);
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
}

#main-menu-v.vertical-menu li.active > ul,
#main-menu-v.vertical-menu li.current > ul {
  display: block !important;
}

#main-menu-v.vertical-menu ul a {
  color: var(--submenu-link-color);
  background: var(--submenu-bg);
  background: color-mix(in srgb, var(--submenu-bg) var(--submenu-background-opacity, 100%), transparent);
}

#main-menu-v.vertical-menu ul a:hover,
#main-menu-v.vertical-menu ul a:focus,
#main-menu-v.vertical-menu ul a:active,
#main-menu-v.vertical-menu ul a.highlighted,
#main-menu-v.vertical-menu ul a.active,
#main-menu-v.vertical-menu ul a.current {
  color: var(--submenu-link-hover-color);
  background: var(--submenu-hover-bg);
}

#main-menu-v.vertical-menu li.has-submenu > a {
  padding-right: 2rem;
}

#main-menu-v.vertical-menu li.has-submenu > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gutter-half);
  width: 0;
  height: 0;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-left: 0.4rem solid currentColor;
  transform: translateY(-50%);
  transform-origin: center;
}

#main-menu-v.vertical-menu li.has-submenu.active > a::after,
#main-menu-v.vertical-menu li.has-submenu.current > a::after {
  transform: translateY(-50%) rotate(90deg);
}

@media screen and (min-width: 769px) {
  .vertical-menu-column {
    flex: 0 0 var(--vertical-menu-width, 320px);
    width: var(--vertical-menu-width, 320px);
  }

  .vertical-menu-content {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

ul.horizontal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
ul.horizontal li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
ul.horizontal li a,
ul.horizontal li > span {
  padding: var(--base-size-half) var(--gutter-half);
  display: inline-block;
}

nav ul.horizontal li:after {
  content: "|";
}
nav ul.horizontal li:first-child:before {
  content: "|";
}

.rootline {
  color: var(--font-color-light);
  font-size: var(--font-size-small);
  padding-left: var(--gutter);
  /* prevent safari bug */
}
@media (min-width: 1296px) {
  .rootline {
    padding-left: 0;
  }
}
.rootline ul.horizontal.small {
  padding-top: var(--base-size-half);
  padding-bottom: var(--base-size-half);
  width: 100%;
}
.rootline ul.horizontal.small li {
  display: initial;
}
.rootline ul.horizontal.small li a,
.rootline ul.horizontal.small li span {
  display: inline;
}

ul.horizontal.languagemenu .text-muted span {
  color: var(--font-color-light);
}
ul.horizontal.languagemenu .text-muted,
ul.horizontal.languagemenu .active {
  display: none;
}

@media screen and (min-width: 769px) {
  ul.horizontal.languagemenu {
    margin-right: var(--gutter);
  }
  ul.horizontal.languagemenu .active,
  ul.horizontal.languagemenu .text-muted {
    display: inline-block;
  }
}
@media screen and (min-width: 769px) {
  .onelevel-mdup ul#main-menu ul,
  .onelevel-mdup ul#main-menu .sub-arrow {
    display: none !important;
    visibility: hidden;
  }
}