/* Nav */

.nav {
  height: calc(var(--header-height) + 1.25rem);
}

.nav__group {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.nav__list {
  padding: 0;
  list-style: none;
}

.nav__link {
  text-decoration: none;
}

.nav__link--disabled {
  pointer-events: none;
}

.nav__toggle {
  position: relative;
  width: 1.875rem;
  height: 0.875rem;
  background: transparent;
  cursor: pointer;
  border: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAzMCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHk9IjYiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB5PSIxMiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.menu-open .nav__toggle {
  width: 1.375rem;
  height: 1.375rem;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC4zMTM0NzciIHk9IjIxLjUyNzMiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMC4zMTM0NzcgMjEuNTI3MykiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjEuNDE0MDYiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxLjQxNDA2IDApIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=');
}

.nav__burger,
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    opacity 0.1s,
    transform 0.4s;
}

.nav__arrow {
  font-size: 1.25rem;
  display: none;
}

.nav__close {
  opacity: 0;
}

.nav__menu {
  display: none;
}

/* Nav wrapper */

.nav__menu--desktop .nav__wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 400ms ease;
}

.nav__content {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;

  padding: 3.75rem 2rem 2.875rem;
  color: var(--clr-white);
  background-color: var(--clr-secondary-mid);
}

.nav-sub__list,
.nav-sub__list ul {
  width: 100%;
  max-width: 436px;
  padding: 0;
  list-style-type: none;
}

.nav-sub__list {
  padding: 3.75rem 0 2.875rem 2rem;
}

.nav-sub__list > * + * {
  margin-block-start: 2.875rem;
}

.nav-sub__list > li > a,
.nav-sub__list > li > span {
  position: relative;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  text-transform: uppercase;
  text-decoration: none;
}

.nav-sub__list > li > ul > li {
  position: relative;
}

.nav-sub__list > li > ul > li > a,
.nav-sub__list > li > ul > li > ul > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  text-decoration: none;
  background-color: transparent;
  transition: background-color 400ms ease;
}

.nav-sub__list > li > ul > li > a > svg {
  transform: translate3d(-8px, 0, 0);
  transition: transform 400ms ease;
}

.nav-sub__list > li > ul > li:hover > a,
.nav-sub__list > li > ul > li:focus-within > a {
  background-color: var(--clr-secondary);
}

.nav-sub__list > li > ul > li:hover > a > svg,
.nav-sub__list > li > ul > li:focus-within > a > svg {
  transform: translate3d(0, 0, 0);
}

.nav-sub__list > li > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    visibility 0s linear 150ms;
  position: absolute;
  top: 0;
  bottom: auto;
  left: calc(436px - 2rem);
}

.nav-sub__list > li > ul > li > ul.submenu--flip-y {
  top: auto;
  bottom: 0;
}

.nav-sub__list > li > ul > li > a:hover ~ ul,
.nav-sub__list > li > ul > li > ul:hover,
.nav-sub__list > li > ul > li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 200ms;
}

@media (max-width: 1199px) {
  .nav__menu--desktop {
    position: absolute;
    left: 0;
    top: calc(var(--header-height) + 1.25rem);
    width: 100%;
    height: calc(100vh - calc(var(--header-height) + 1.25rem));
    overflow: auto;
    pointer-events: none;
    display: none;
  }

  .nav__menu--desktop::-webkit-scrollbar {
    width: 0;
  }

  .nav__list {
    height: 100%;
    background-color: var(--clr-white);
    padding-block: 1rem;
    box-shadow: var(--box-shadow);
  }
}

.nav__link {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  background-color: transparent;
  padding: 1.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  transition:
    color 300ms ease-in,
    background-color 300ms ease-in;
}

.nav__link > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 3.125rem;
  height: 2px;
  margin-inline: auto;
  background-color: transparent;
  transition: background-color 0.4s;
}

.nav__link:hover > span::after,
.nav__link:focus > span::after,
.nav__link--active > span::after,
.nav__item--children.open .nav__link > span::after {
  background-color: var(--clr-primary);
}

.nav__wrapper .nav__link--active,
.nav__wrapper .nav-sub__link--active {
  color: var(--clr-primary);
}

.nav__actions {
  display: none;
  align-items: center;
  gap: 1rem;
}

.nav__action:not(.nav__action--switch) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--clr-white);
  background-color: var(--clr-secondary);
  text-decoration: none;
  transition:
    color 300ms ease-in,
    background-color 300ms ease-in;
}

.nav__action:not(.nav__action--switch):hover,
.nav__action:not(.nav__action--switch):focus {
  color: var(--clr-secondary);
  background-color: var(--clr-white);
}

.nav__action--switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;

  padding: 0.75rem;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-primary);
  text-transform: uppercase;
  text-decoration: none;
}

.nav__action--language {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}

.nav__content .nav__action--switch {
  padding: unset;
}

.nav__meta > * + * {
  margin-block-start: 1rem;
}

.nav__meta > a {
  display: flex;
  flex-direction: column;

  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  text-transform: uppercase;
  text-decoration: none;
}

.nav__search {
  max-width: 342px;
  margin-block-start: auto;
  padding-inline: 1rem;
  border: 1px solid var(--clr-white);
}

.nav__search form {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__search button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clr-white);
  cursor: pointer;
}

.nav__search button::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0iI2ZmZmZmZiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0iTTE4LjUwMTkgOS43NTAzNEMxOC41MDE5IDUuMTkxMTggMTQuODA3IDEuNTAzMzYgMTAuMjUyOCAxLjUwMzM2QzUuNjk4NjUgMS41MDMzNiAxLjk5NzYgNS4xOTExOCAxLjk5NzYgOS43NTAzNEMxLjk5NzYgMTQuMzA5NSA1LjY5MjUxIDE3Ljk5NzMgMTAuMjQ2NyAxNy45OTczQzE0LjgwMDkgMTcuOTk3MyAxOC40OTU4IDE0LjMwMzQgMTguNDk1OCA5Ljc1MDM0SDE4LjUwMTlaTTE2LjU5MzEgMTcuMTU2N0MxNC44OTI5IDE4LjYxNzEgMTIuNjcxMSAxOS41MDA3IDEwLjI0NjcgMTkuNTAwN0M0Ljg2MzkyIDE5LjUwMDcgMC41IDE1LjEzNzkgMC41IDkuNzUwMzRDMC41IDQuMzYyOCA0Ljg2MzkyIDAgMTAuMjUyOCAwQzE1LjY0MTcgMCAyMC4wMDU3IDQuMzYyOCAyMC4wMDU3IDkuNzUwMzRDMjAuMDA1NyAxMi4xNzQxIDE5LjEyMTggMTQuMzg5MyAxNy42NjExIDE2LjA5NTFMMjQuMjgzNiAyMi43MjIxQzI0LjU3MjEgMjMuMDEwNSAyNC41NzIxIDIzLjQ4OTIgMjQuMjgzNiAyMy43ODM3QzIzLjk5NTIgMjQuMDcyMSAyMy41MTY0IDI0LjA3MjEgMjMuMjIxOCAyMy43ODM3TDE2LjU5MzEgMTcuMTYyOFYxNy4xNTY3WiIgLz4KICAgICAgPC9zdmc+');
  background-repeat: no-repeat;
  background-position: center;
}

.nav__search button:hover::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0iI2VkYzIxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0iTTE4LjUwMTkgOS43NTAzNEMxOC41MDE5IDUuMTkxMTggMTQuODA3IDEuNTAzMzYgMTAuMjUyOCAxLjUwMzM2QzUuNjk4NjUgMS41MDMzNiAxLjk5NzYgNS4xOTExOCAxLjk5NzYgOS43NTAzNEMxLjk5NzYgMTQuMzA5NSA1LjY5MjUxIDE3Ljk5NzMgMTAuMjQ2NyAxNy45OTczQzE0LjgwMDkgMTcuOTk3MyAxOC40OTU4IDE0LjMwMzQgMTguNDk1OCA5Ljc1MDM0SDE4LjUwMTlaTTE2LjU5MzEgMTcuMTU2N0MxNC44OTI5IDE4LjYxNzEgMTIuNjcxMSAxOS41MDA3IDEwLjI0NjcgMTkuNTAwN0M0Ljg2MzkyIDE5LjUwMDcgMC41IDE1LjEzNzkgMC41IDkuNzUwMzRDMC41IDQuMzYyOCA0Ljg2MzkyIDAgMTAuMjUyOCAwQzE1LjY0MTcgMCAyMC4wMDU3IDQuMzYyOCAyMC4wMDU3IDkuNzUwMzRDMjAuMDA1NyAxMi4xNzQxIDE5LjEyMTggMTQuMzg5MyAxNy42NjExIDE2LjA5NTFMMjQuMjgzNiAyMi43MjIxQzI0LjU3MjEgMjMuMDEwNSAyNC41NzIxIDIzLjQ4OTIgMjQuMjgzNiAyMy43ODM3QzIzLjk5NTIgMjQuMDcyMSAyMy41MTY0IDI0LjA3MjEgMjMuMjIxOCAyMy43ODM3TDE2LjU5MzEgMTcuMTYyOFYxNy4xNTY3WiIgLz4KICAgICAgPC9zdmc+');
}

.nav__search input {
  padding: unset;
  width: 100%;
  height: 2.75rem;
  line-height: 2.75rem;
  outline: 0;
  border: 0;
  font-size: 0.875rem;
  color: var(--clr-white);
  background-color: transparent;
}

.nav__search input::placeholder {
  color: var(--clr-white);
}

/* Show menu */
.show-menu {
  opacity: 1;
  /* top: calc(var(--header-height) + 1.25rem); */
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  /* transform: rotate(90deg); */
}

.show-icon .nav__close {
  opacity: 1;
  /* transform: rotate(90deg); */
}

/* Language menu */
.language {
  position: relative;
  display: inline-block;
}

.language__list {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  display: none;
  z-index: 10;
}

.menu--mobile .language__list {
  top: auto;
  bottom: 100%;
}

.language__list[aria-hidden='false'] {
  display: block;
}

.language__item {
  cursor: pointer;
}

#sourceMenu,
.menu--mobile {
  display: none;
}

.menu__footer .nav__social {
  justify-content: flex-start;
}

@media (max-width: 1199px) {
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open .menu {
    transform: translateX(0);
  }

  .menu--mobile {
    --grid-columns: 1;

    position: fixed;
    inset: 0;
    z-index: 1001;
    color: var(--clr-white);
    transform: translateX(-100%);
    /* transition: transform var(--menu-animation) cubic-bezier(0.2, 0.8, 0.2, 1); */
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns:
      minmax(var(--grid-padding), 1fr) repeat(
        var(--grid-columns),
        minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
      )
      minmax(var(--grid-padding), 1fr);
    background-color: var(--clr-secondary-mid-80);
    backdrop-filter: blur(18px);
    top: 76px;
  }
  .menu--mobile > * {
    grid-column: 2 / -2;
  }
  .menu__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1.25rem 0;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    font-size: 0.875rem;
    color: var(--clr-white);
  }
  .menu__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menu__breadcrumb a {
    color: var(--clr-white);
    text-decoration: none;
  }
  .menu__breadcrumb .sep {
    margin: 0 10px;
  }
  .menu__viewport {
    position: relative;
    overflow: hidden;
  }
  .menu__panels {
    height: 100%;
    display: flex;
    will-change: transform;
    /* transition: transform var(--menu-animation) cubic-bezier(0.2, 0.8, 0.2, 1); */
  }
  .menu__panel {
    width: 100%;
    min-width: 100%;
    overflow: auto;
  }
  .section {
    padding: 0.5rem 0;
    color: var(--clr-white);
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
    text-transform: uppercase;
  }
  .list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    cursor: pointer;
  }
  .row .label {
    color: var(--clr-white);
    font-size: 1rem;
    font-weight: var(--fw-bold);
  }
  [data-index='0'] .row .label {
    font-size: 1.125rem;
    text-transform: uppercase;
  }
  .row .chev {
    opacity: 1;
  }

  .menu--mobile .menu__footer {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 1rem 0;
    padding: 40px 0;
  }

  .menu--mobile .menu__footer .nav__meta {
    grid-row: 1 / span 3;
    grid-column: 1 / 2;
  }

  .menu--mobile .menu__footer .nav__search {
    grid-row: 1;
    grid-column: 2 / -1;
    max-width: 100%;
  }

  .menu--mobile .menu__footer .nav__action--switch {
    grid-column: 2 / -1;
    grid-row: 3;
    padding: 0;
  }

  /* .row.has-children .chev::after {
    content: '›';
    color: #ffffffa0;
  } */
}

/* For small devices */
@media (max-width: 767px) {
  .nav__link {
    padding-inline: 1rem;
  }

  .nav__arrow {
    display: block;
  }

  .menu--mobile .menu__footer {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }

  .menu--mobile .menu__footer .nav__meta {
    display: none;
  }

  .menu--mobile .menu__footer .nav__search,
  .menu--mobile .menu__footer .nav__action--switch {
    grid-column: 1 / -1;
    grid-row: unset;
  }
}

/* For large devices */
@media (min-width: 1200px) {
  .nav {
    display: flex;
    justify-content: space-between;
    height: calc(var(--header-height) + 1.25rem);
  }

  .nav__toggle {
    display: none;
  }

  .nav__list {
    height: 100%;
    display: flex;
    gap: 2.5rem;
  }

  .nav__item {
  }

  .nav__link {
    height: 100%;
    justify-content: initial;
    column-gap: 0.25rem;
  }

  .nav__link:hover,
  .nav__link:focus {
    color: var(--clr-primary);
    background-color: transparent;
  }

  .nav__link > span {
    position: relative;
    display: inline-block;
    padding-inline: 1.25rem;
    padding-block: 0.625rem;
    color: var(--clr-white);
    background-color: transparent;
    border-radius: 2px;
    text-decoration: none;
    text-align: center;
    font-weight: var(--fw-semibold);
  }

  .nav__link:hover > span,
  .nav__link:focus > span,
  .nav__link--active > span {
    color: var(--clr-white);
    background-color: transparent;
  }

  .nav__wrapper {
    --content-width: 351px;
    --arrow-width: 12px;
    display: grid;
    grid-template-columns: 1fr 490px;

    position: absolute;
    top: calc(var(--header-height) + 1.25rem);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1587px;
    margin-inline: auto;
    /* height: calc(100vh - calc(var(--header-height) + 1.25rem)); */
    background-color: var(--clr-secondary-mid-80);
    backdrop-filter: blur(18px);
    visibility: hidden;
    opacity: 0;
    /* transition: opacity 300ms ease; */
    transition:
      opacity 300ms ease,
      visibility 0s linear 150ms;
  }
}

@media (min-width: 992px) {
  .nav__item--last .nav__link > span {
    color: var(--clr-white);
    background-color: var(--clr-primary);
  }
}

@media (min-width: 1200px) {
  .nav__menu {
    display: block;
  }
  .nav__actions {
    display: flex;
  }
  .nav__menu--mobile {
    display: none;
  }
}

@media (min-width: 1587px) {
  .nav__list {
    gap: 5rem;
  }
}