/* Shared site navigation (main + blog) */

.hamburger__line {
  transform-origin: left;
  transition: all 0.4s;
}

.hamburger.is-active .hl1 {
  transform: rotate(45deg) !important;
}

.hamburger.is-active .hl2 {
  transform: scale(0) !important;
}

.hamburger.is-active .hl3 {
  transform: rotate(-45deg) translate(-10px, 10px) !important;
}

.nav__bg {
  transition: transform 0.4s;
  transform: translateY(-100%);
}

.nav.is-small .nav__bg {
  transform: translateY(0%);
}

.nav__list {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s linear 0.4s;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.nav.is-active .nav__list {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

.nav__close.is-active {
  display: block;
}

@media screen and (min-width: 478px) {
  .nav__list {
    transform: translateX(-40px) translateY(-20px);
  }

  .nav.is-active .nav__list {
    transform: translateX(-40px) translateY(30px) !important;
  }

  .nav .logo {
    transition: transform 0.4s;
    transform-origin: top left;
  }

  .nav.is-small .logo {
    transform: scale(0.6);
    transition-delay: 0.1s;
    cursor: pointer;
  }

  .nav .hamburger {
    transition: all 0.4s;
  }

  .nav.is-small .hamburger {
    top: 12px;
    right: 16px;
    width: 50px;
  }

  .nav.is-small .hamburger.is-active .hl3 {
    transform: rotate(-45deg) translate(-8%, 50%);
  }

  .nav .lang {
    transition: transform 0.4s;
  }

  .nav.is-small .lang {
    transform: translate(-100px, 34px);
  }

  .nav.is-small .nav__list {
    transform: translateX(0px) translateY(-20px);
  }

  .nav.is-active.is-small .nav__list {
    transform: translateX(0px) translateY(0px) !important;
  }
}

@media screen and (max-width: 479px) {
  .hamburger.is-active .hl3 {
    transform: rotate(-45deg) translate(-5px, 5px);
  }
}

/* One architecture item: desc on desktop, mob on small screens (blog + legacy markup) */
.nav__list .nav__link.mob {
  display: none;
}

@media screen and (max-width: 479px) {
  .nav__list .nav__link.desc {
    display: none;
  }

  .nav__list .nav__link.mob {
    display: block;
  }
}

.nav__link {
  color: var(--_all---purple-2) !important;
  transition: color 0.35s ease;
  white-space: nowrap;
}

.nav__link.nav__link_light {
  color: var(--_all---purple-2) !important;
}

.nav__link:hover:not(.is-section-active):not(.nav__link--active) {
  color: #ffffff !important;
}

.nav__link.is-section-active,
.nav__link.nav__link--active {
  color: #ffffff !important;
}

.nav__link.is-section-active:hover,
.nav__link.nav__link--active:hover {
  color: #ffffff !important;
}