.site-header {
  position: relative;
}

.header-logo {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  z-index: var(--z-index-header);
}

.header-logo img {
  height: var(--size-lg);
  display: block;
}

.topmenu-nav,
.mainnav-nav {
  height: var(--size-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family-heading);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.topmenu-nav {
  font-size: var(--font-size-md);
}

.nav-icon {
  font-size: var(--font-size-3xl);
}

.topmenu-nav {
  background-color: var(--color-bg-default);
  color: var(--color-black);
}

.mainnav-nav {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  position: relative;
}

.topmenu-nav ul {
  display: flex;
}

.topmenu-nav ul,
.mainnav-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-evenly;
}

.mainnav-nav > .nav-left > ul,
.mainnav-nav > .nav-right > ul {
  display: flex;
  height: 100%;
}

.mainnav-nav > .nav-left > ul > li,
.mainnav-nav > .nav-right > ul > li {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-left,
.nav-right {
  width: calc(50% - (var(--size-lg) / 2));
  height: 100%;
  display: flex;
  align-items: center;
}

.mainnav-nav button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.has-submenu {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  width: max-content;
  max-width: 90vw;
  z-index: var(--z-index-header);
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.submenu li {
  padding: var(--space-sm) var(--space-lg);
}

.has-submenu .submenu {
  display: none;
}

.has-submenu.open > .submenu {
  display: block;
}

.has-submenu button::after {
  content: "\f078";
  font-family: var(--font-family-icon);
  font-weight: 900;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.has-submenu button:hover::after,
.has-submenu button:focus-visible::after {
  color: var(--color-accent);
}

.has-submenu.open button::after {
  transform: rotate(180deg);
  color: var(--color-accent);
}

@media (hover: hover) {

  .has-submenu:hover > .submenu {
    display: block;
  }

  .has-submenu:hover > button::after {
    transform: rotate(180deg);
    color: var(--color-accent);
  }

  .has-submenu:hover > button .link-text::after {
    width: 100%;
  }

}