.header-below {
  position: relative;
  z-index: 10;
  box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.25);
}

.header__menu .menu {
  --color-link: var(--color-black);
  --color-link-focus: var(--color-black);
  background-color: var(--white);
  gap: 2rem;
}

.header__menu .menu .menu-item--level-0 {
  padding: 1.5rem 0;
}

.header__menu .menu .menu-item--level-0 > a,
.header__menu .menu .menu-item--level-0 > .sub-menu-item-toggle {
  border-bottom: 1px solid transparent;
  font-weight: 600;
}

.header__menu .menu .menu-item--level-0:hover > a,
.header__menu .menu .menu-item--level-0:focus > a,
.header__menu .menu .menu-item--level-0:active > a,
.header__menu .menu .menu-item--level-0.menu-item--active > a,
.header__menu .menu .menu-item--level-0.menu-item--active-trail > a,
.header__menu .menu .menu-item--level-0:hover > .sub-menu-item-toggle,
.header__menu .menu .menu-item--level-0:focus > .sub-menu-item-toggle,
.header__menu .menu .menu-item--level-0:active > .sub-menu-item-toggle,
.header__menu
  .menu
  .menu-item--level-0.menu-item--active
  > .sub-menu-item-toggle,
.header__menu
  .menu
  .menu-item--level-0.menu-item--active-trail
  > .sub-menu-item-toggle {
  border-color: var(--color-link);
}

.header__menu .menu a:hover,
.header__menu .menu a:focus,
.header__menu .menu a:active {
  text-decoration: none;
}

.header__menu .menu .sub-menu-item-toggle {
  justify-content: flex-end;
}

.header__menu .menu .sub-menu-item-toggle__icon {
  padding-right: 0;
}

/* mega menu */
.navigation--main {
  position: relative;
}

.header__menu .menu .menu-item--level-0.menu-item--has-sub-menu {
  position: static;
}

.header__menu .menu--sub-menu {
  min-width: 0;
  inset-inline: 0;
  background-color: var(--color-grey-light-aaa);
  flex-direction: column;
  z-index: 3;

  height: calc(6 * 3.5 * var(--spacing) + var(--spacing) * 2 + 5rem);
  gap: 0;
  padding-block: var(--spacing);
}

.header__menu .menu--sub-menu li {
  height: calc(100% / 6);
  padding-block: calc(0.25 * var(--spacing));
  width: calc(100% / 3);
  position: relative;
}

.header__menu .menu--sub-menu[data-disclosure-expanded="true"]::before {
  content: "";
  width: 100vw;
  position: absolute;
  z-index: -2;
  background-color: var(--color-grey-light-aaa);
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--spacing));
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.25);
}

@media screen and (min-width: 1280px) {
  .header__menu .menu--sub-menu[data-disclosure-expanded="true"]::before {
    left: calc(
      -0.5 * (100vw - var(--width-content-area)) - 1.5 * var(--spacing)
    );
  }
}

.header__menu .menu--sub-menu a {
  padding: calc(1 * var(--spacing)) var(--spacing);
  border-radius: 2rem;
}

.header__menu .menu--sub-menu a:hover,
.header__menu .menu--sub-menu a:focus,
.header__menu .menu--sub-menu a:active,
.header__menu .menu--sub-menu a.is-active,
.header__menu .menu--sub-menu .menu-item--active-trail > a {
  background-color: var(--color-white);
}

.header__menu .menu--sub-menu a .menu-item__title {
  padding-right: 1.5rem;
  background-size: 1rem auto;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: none;
}

.header__menu .menu--sub-menu a:hover .menu-item__title,
.header__menu .menu--sub-menu a:focus .menu-item__title,
.header__menu .menu--sub-menu a:active .menu-item__title,
.header__menu .menu--sub-menu a.is-active .menu-item__title,
.header__menu .menu--sub-menu .menu-item--active-trail > a .menu-item__title {
  background-image: url(arrow-right.svg);
}

.header__menu .menu--sub-menu .menu-item__title {
  height: var(--spacing);
}

.header__menu .menu--sub-menu {
  padding-bottom: 6rem;
}

.header__menu .menu-item.view-all {
  width: 100%;
  position: absolute;
  bottom: 1rem;
  inset-inline: 1rem;
  height: auto;
}

.header__menu .menu-item.view-all a {
  width: 100%;
  justify-content: center;
  border: 1px solid;
}