/* @todo check px to rem */
/* @todo white header should be the default not the exception */
.top-link {
  font-family: var(--title-font);
}

ul.menu {
  margin: 0 0 0 1em;
}

header span.top-link {
  cursor: pointer;
  color: #000;
}

header .menu .menu-wrapper nav {
  display: flex;
}

header .primary-menu .main-menu {
  justify-content: flex-start;
  margin-left: 0px;
  display: flex;
  width: 100%;
  margin-left: 69px;
  /* margin-left: 9.86%; */
}

header .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.responsive,
header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.responsive,
header .back-to-firstLevel,
header .back-to-menu {
  display: none;
}

header .primary-menu .main-menu {
  justify-content: flex-start;
  display: flex;
  margin-left: 69px;
}

header .primary-menu .top-link {
  letter-spacing: 0;
  line-height: 20px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.page--contact header .primary-menu .top-link,
.page-node-type-ingredient header .primary-menu .top-link,
.page-node-type-natural-ingredient header .primary-menu .top-link,
.page-node-type-core-content-item header .primary-menu .top-link,
.page-node-type-webform .primary-menu .top-link,
header.active span.top-link,
header:hover span.top-link,
.path-frontpage header.black .primary-menu .top-link,
.path-frontpage header:hover .primary-menu .top-link,
.page-node-type-landing-page header.active .primary-menu .top-link,
.page-node-type-landing-page header:hover .primary-menu .top-link,
.page--locations header .primary-menu .top-link,
.page--locations header:hover .primary-menu .top-link,
.page--sitemap header .primary-menu .top-link,
.page-node-type-landing-page {
  color: #000000;
}

header .primary-menu ul.menu li {
  list-style: none;
  display: flex;
  padding-right: 30px;
  margin: 0;
}

header .secondary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper *,
header .primary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper *,
header .secondary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper,
header .primary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper {
  opacity: 0;
  height: 0;
  width: 0;
  top: -100%;
  position: absolute;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  background-color: var(--color-functional-50);
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

header .menu-wrapper .main-menu > .submenu-wrapper .highlight {
  background: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  flex: 4;
}

header .primary-menu ul.menu li {
  list-style: none;
  display: flex;
  padding-right: 30px;
  margin: 0;
}

header .primary-menu ul.menu li,
header .secondary-menu ul.menu li {
  list-style: none;
  /* @todo can we remove floats and use grid or flex instead? */
  float: left;
  display: flex;
}

header .menu-wrapper .main-menu > .submenu-wrapper .highlight {
  background: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  flex: 4;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span a.secondary-title,
header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span {
  display: block;
  margin-bottom: 10px;
  line-height: 52px;
  max-width: 100%;
  color: #000;
  font-family: var(--title-font);
  font-size: 1.5rem;
}

header .secondary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper *,
header .primary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper *,
header .secondary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper,
header .primary-menu ul.menu li > .top-link:not(.expanded-menu-item) + .submenu-wrapper {
  opacity: 0;
  height: 0;
  width: 0;
  position: absolute;
  left: 0;
  right: 0;
  background-color: transparent;
}

body header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper {
  transition: opacity 0.3s ease-in-out;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper {
  opacity: 1;
  transition: opacity 0.6s ease-in;
  width: var(--doc-width);
  left: auto;
  right: 0;
  position: absolute;
  display: flex;
}

header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li,
header .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li {
  display: inline-block;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  font-family: var(--text-font);
  color: var(--color-functional-black, #000);
  --color-500: var(--menu-color);
}

header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li > a,
header .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li > a {
  color: var(--color-functional-black, #000);
  line-height: 1.5;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight a.g-button {
  background-color: var(--menu-color, #000);
  border-color: var(--menu-color, #000);
  font-family: var(--text-font);
  --color-500: var(--menu-color);
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight a.g-button:hover {
  opacity: 0.8;
}

/** @todo mobile first? **/
header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span.secondary-title-text.mobile {
  display: none;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.second-level {
  /* @todo is grid better than flex for this? */
  display: grid;
  grid-template-columns: 32% 32% 32%;
  gap: 50px 2%;
  overflow: hidden;
  margin: 0 auto;
  flex: 9;
  z-index: 2;
  padding: 40px 14px 50px 50px;
}

header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu.third-level li,
header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu.third-level {
  display: flex !important;
  padding: 0;
}

header .secondary-menu {
  flex: 3;
}

header .secondary-menu .main-menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

header .secondary-menu .main-menu > .submenu-wrapper {
  width: 100%;
  text-align: right;
  margin: auto;
  display: flex;
  justify-content: flex-end;
}

header .secondary-menu .main-menu > .submenu-wrapper ul {
  margin-right: 9px;
}

header .secondary-menu ul.menu li {
  padding-right: 10px;
}

header .menu-wrapper .main-menu > .submenu-wrapper .highlight.active {
  height: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 50px;
  z-index: 2;
  display: flex;
}

header .highlight-wrapper {
  padding-left: 70px;
}

header .menu-wrapper .main-menu .third-level {
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

header .menu-wrapper .submenu-wrapper ul.second-level > li > a {
  font-family: var(--title-font);
}

header .menu-wrapper .submenu-wrapper ul.third-level > li > a > li > a {
  font-family: var(--text-font);
}

header .menu-wrapper .menu-close {
  position: absolute;
  right: 50px;
  cursor: pointer;
  display: none;
  z-index: 1;
  z-index: 4;
  top: calc(var(--header-height) + 2rem);
}

header .menu-wrapper .menu-close {
  width: 1.5rem;
  height: 1.5rem;
}

header .menu-wrapper .menu-close svg {
  width: 100%;
  height: 100%;
}

header .menu-wrapper .menu-close.active {
  display: block;
}

header .menu-wrapper .menu-close:hover path {
  fill: var(--menu-color, #000);
}

#header .mobile-menu-icon {
  display: none;
}

.highlight-wrapper .mobile {
  --color-500: var(--menu-color, #414141);
}

@media (max-width: 767px) {
  body header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper > div {
    padding: 10px 5% 7px;
  }
  #header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li {
    padding: 7px 5%;
  }
}

@media (max-width: 1119px) {
  #header .menu-wrapper .third-level-opened .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.third-level > li,
  #header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > a {
    padding: 7px 0;
  }
  #header .menu-wrapper .third-level-opened .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.third-level > li.landing-link a {
    --color-700: var(--menu-color, #414141);
    color: #fff;
    width: fit-content;
  }
  body.userway-widget-enabled #header .region-header-2 .menu,
  body.userway-widget-enabled #header .region-header-2 .menu-wrapper {
    display: inline-block;
  }
  #header .mobile-menu-icon::before {
    display: none;
  }
  #header .mobile-menu-icon {
    position: absolute;
    right: calc(5% + 2rem);
    top: 40px;
    z-index: 5;
    display: block;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
  }
  body.userway-widget-enabled #header .mobile-menu-icon {
    position: relative;
    top: 2px;
    right: 0;
  }
  header .mobile-menu-icon::before {
    content: "";
    background-image: url(../../icons/dehaze.svg);
    background-position: unset;
    height: 15px;
    width: 20px;
    background-size: contain;
    margin-right: 3px;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
  }
  header .menu .menu-wrapper nav {
    display: none;
  }
  header .primary-menu {
    border-top: 1px solid var(--color-functional-100, #e6e6e6);
  }
  #header.menu-opened .menu .menu-wrapper nav {
    position: absolute;
    background-color: #fff;
    right: 0;
    left: 0;
    top: var(--header-height);
    display: block;
    max-height: calc(100vh - var(--header-height));
    overflow-y: scroll;
  }
  header .secondary-menu,
  header .primary-menu {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  header .secondary-menu .main-menu > .submenu-wrapper,
  header .primary-menu .main-menu {
    padding: 0 5%;
    margin-left: 0;
  }
  header .submenu-wrapper {
    width: 90%;
  }
  header ul.menu {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    width: 100%;
  }
  header .primary-menu ul.menu li,
  header .secondary-menu ul.menu li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-functional-500, #404040);
    padding-right: 0px;
    float: none;
  }
  header ul.menu li > .top-link {
    width: 100%;
    position: relative;
    color: #000;
  }
  .primary-menu .top-link {
    font-size: 1.125rem;
  }
  header.menu-opened ul.menu li > .top-link:before {
    background-image: url(../../icons/arrow_forward_ios.svg);
    background-position: 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    height: 1.5rem;
    width: 1.5rem;
    z-index: 55555;
    background-repeat: no-repeat;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  header .second-level-opened .submenu-wrapper {
    padding: 20px 0;
  }
  header .third-level-opened .back-to-firstLevel,
  header .second-level-opened .back-to-menu {
    display: block;
    position: absolute;
    top: 0;
    z-index: 15;
    font-size: 11px;
  }
  /* @todo check transition */
  #header ul.menu li:not(.parent-active) {
    min-height: 1px;
    transition: min-height 0.3s ease-in-out;
  }
  header .second-level-opened ul.menu li {
    min-height: 50vh;
    width: 0;
    padding: 0;
    border-bottom: none;
  }
  header .second-level-opened ul.menu li > .top-link {
    display: none;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper {
    display: flex;
    flex-wrap: wrap;
    opacity: 1;
    top: 0;
    flex: 1;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper > ul,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper > div,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.second-level {
    width: 90%;
    padding: 0 5%;
  }
  header .highlight-wrapper {
    padding-left: 0px;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span.secondary-title-text {
    display: none;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span.secondary-title-text.mobile {
    display: block;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span.secondary-title-text.mobile a {
    text-decoration: none;
    color: #fff;
    font-family: var(--title-font);
  }
  #header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu {
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
    display: flex;
    gap: 1rem;
    margin: 0;
    width: 100%;
  }
  header .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.desktop,
  header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.desktop {
    display: none;
  }
  header .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.responsive,
  header .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li.responsive,
  header .third-level-opened .back-to-firstLevel {
    display: block;
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li .submenu-wrapper {
    display: none;
  }
  body header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.third-level li .menu__link,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li .menu__link,
  body header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.third-level li.menu__item.responsive a,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li.menu__item.responsive a {
    font-family: var(--title-font);
  }
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li .menu__link {
    width: 90%;
    display: flex;
    align-content: space-around;
    align-items: center;
    color: var(--color-functional-black, #0b1215);
  }
  header.menu-opened .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li span.menu__link:after {
    content: "";
    display: block;
    background-image: url(../../icons/chevron_forward.svg);
    background-position: center;
    height: 1.25rem;
    width: 1.25rem;
    position: absolute;
    right: 8%;
    background-color: transparent;
    left: auto;
  }
  header .third-level-opened .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul li span.menu__link:not(.is-opened),
  header .menu-wrapper .third-level-opened .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu > li:not(.child-is-opened),
  header .third-level-opened .back-to-menu,
  header .third-level-opened .highlight,
  header .menu-wrapper .third-level-opened .main-menu > .submenu-wrapper .highlight.active,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li .menu__link.is-opened {
    display: none;
  }

  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu li .menu__link.is-opened + div {
    display: block;
  }
  header .secondary-menu .main-menu > .submenu-wrapper ul {
    margin-right: 0;
  }
}
/* @todo check media queries should this be 1120px? */
@media (min-width: 1120px) {
  #header .top-link.expanded-menu-item {
    border-bottom: 6px solid var(--menu-color, #000);
  }

  .top-link,
  .region-header-3 > div {
    opacity: 0;
  }

  #wrapper #header .second-level a:hover,
  #wrapper #header .second-level a.active {
    color: var(--menu-color, #000);
  }
}

@media (min-width: 1120px) and (max-width: 3440px) {
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper,
  body.user-logged-in header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper {
    top: var(--header-height);
  }

  header .primary-menu ul.menu li:nth-child(1) > .top-link,
  header .primary-menu .top-link {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 24px 0px 17.5px;
  }

  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  header:hover .secondary-menu .top-link,
  .path-frontpage header:hover .secondary-menu .top-link,
  header .secondary-menu .top-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 26px 0px 19.75px;
  }

  #wrapper header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu.third-level li a {
    font-size: var(--font-body-medium);
    line-height: 1.5;
  }
}

@media all and (min-width: 1921px) {
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span a.secondary-title,
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight span {
    font-size: var(--font-body-large);
    line-height: var(--line-height-large);
  }

  #wrapper header.active .menu-wrapper .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li > a,
  #wrapper header.active .menu-wrapper .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li > a {
    font-size: var(--font-body-medium);
    line-height: var(--line-height-medium);
  }

  header .primary-menu ul.menu li:nth-child(1) > .top-link,
  header .primary-menu .top-link {
    font-size: var(--font-body-medium);
  }

  #wrapper header.active .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper ul.expanded-menu.thirdlevel li a,
  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  header:hover .secondary-menu .top-link,
  .path-frontpage header:hover .secondary-menu .top-link,
  header .secondary-menu .top-link {
    font-size: var(--font-body-small) !important;
    line-height: var(--line-height-small);
  }

  header .region-header-1 .site-name a {
    height: 2rem;
    width: 8rem;
  }

  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu li > .submenu-wrapper > .highlight a.main-action {
    font-size: var(--font-body-small);
    line-height: var(--line-height-small);
  }

  header .menu-wrapper .menu-close {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (min-width: 3441px) {
  header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper,
  body.user-logged-in header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper,
  body.page-node-type-story-item .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper,
  body.page-node-type-landing-page .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper,
  body.page-node-type-core-content-item header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu.expanded-menu-parent > li > .submenu-wrapper {
    top: var(--header-height);
  }

  body header .region-header-1 .site-name a {
    height: 3.2875rem;
    width: 20.6875rem;
  }

  body header .primary-menu ul.menu li:nth-child(1) > .top-link,
  body header .primary-menu .top-link {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  header .secondary-menu ul.menu li > .top-link,
  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  body header .primary-menu ul.menu li > .top-link,
  header .primary-menu ul.menu li:nth-child(1) > .top-link {
    padding: 80px 0px 28px !important;
  }

  header .menu-wrapper .menu-close {
    top: calc(var(--header-height) + 2rem);
    width: 3rem;
    height: 3rem;
  }
}