@import url(./animations.css);

.nav-bar {
  --nb-bg: #393939;

  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  max-width: var(--menu-width);
  height: 100vh;
  max-height: 905px;
  padding: 79px 49px 79px 49px;
  background: var(--nb-bg, #393939);
  z-index: 99;
}

.nav-bar .hamburger-icon {
  background: transparent;
  border: none;
  transition: scale ease-in-out 0.3s;
}

.nav-bar .hamburger-icon:hover {
  scale: 1.1;
}

/* Only apply rotation when explicitly opening/closing */
.nav-overlay.open .hamburger-icon {
  animation: hamburgerRotateOpen 0.3s ease-in-out forwards;
}

/* Only apply closing animation when the 'closing' class is present */
.nav-overlay .hamburger-icon.closing {
  animation: hamburgerRotateClose 0.3s ease-in-out forwards;
}

.nav-bar .menus {
  margin-top: 99px;
  /* margin: 0px; */
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ** Remove background of navbar when navbar mode is iconOnly */
.nav-bar.icon-only {
  --nb-bg: transparent;
}

/* ** Show background of navbar when navbar is open */
.nav-overlay.open .nav-bar {
  --nb-bg: #393939;
  min-height: 100svh;
}

/* ** Hide light icon when navbar mode is iconOnly */
.nav-bar.icon-only .hamburger-icon .light {
  display: none;
}
.nav-bar.icon-only .hamburger-icon .dark {
  display: block;
}
.nav-bar .hamburger-icon .dark {
  display: none;
}

/* ** Show light icon when navbar is open */
.nav-overlay.open .nav-bar.icon-only .hamburger-icon .light {
  display: block;
}
.nav-overlay.open .nav-bar.icon-only .hamburger-icon .dark {
  display: none;
}

/* ** Hide menus social item */
.nav-bar.icon-only .menus {
  display: none;
}

/* ** Show menus social item when open menu */
.nav-overlay.open .nav-bar .menus {
  display: flex;
}

.nav-bar .menus li {
  height: 50px;
}

.nav-bar .menus li .menu-item img {
  width: 49.99px;
  height: 49.7px;
}

.open-menu {
  display: none;
  position: absolute;
  width: 409px;
  height: 100%;
  max-height: 100vh;
  right: calc(0px + var(--menu-width));
  top: 0px;
  bottom: 0px;
  padding: 84px 103px 84px 85px;
  background: #ffffff;
  transform: translateX(100%);
  z-index: 1;
  overflow-y: auto;
}

.nav-overlay {
  z-index: 999;
}

/* When nav is open */
.nav-overlay.open .open-menu {
  display: block !important;
  animation: slideIn 0.3s ease-in-out forwards;
}

/* When nav is closing */
.nav-overlay .open-menu.closing {
  animation: slideOut 0.3s ease-in-out forwards;
}

.open-menu .menu-close {
  background: transparent;
  border: none;
  float: right;
  padding: 0px;
  /* position: absolute;
    right: 0px;
    top: 0px; */
}

.open-menu .menus {
  margin-top: calc(69px + 40px);
  /* margin: 0px; */
  width: 100%;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 83px;
}

@media screen and (max-height: 850px) {
  .open-menu .menus {
    gap: 40px;
  }
}

.menus li img {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.menus li img.fade {
  opacity: 0;
}

.open-menu .menus .menu-item {
  height: 50px;
  white-space: nowrap;
}
.open-menu .menus .menu-item a {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 45px;
  text-decoration: none;
  color: var(--color-black);
  transition: color ease-in-out 0.3s;
}
.open-menu .menus .menu-item a:hover {
  color: var(--primary-color);
}

.nav-overlay {
  height: 0%;
}
.nav-overlay.open {
  position: absolute;
  /* position: fixed; */
  width: 100%;
  height: 100%;
  min-height: 100svh;
  top: 0px;
  left: 0px;
  bottom: 0px;

  background: rgba(0, 0, 0, 0.69);
  background-blend-mode: multiply;
}

.open-menu .social-links {
  display: none;
  flex-direction: row;
  list-style-type: none;
  padding: 0px;
  gap: 20px !important;
  justify-content: center;
  margin: 0px;

  .menu-item {
    img {
      width: 42px;
      height: 42px;
    }
  }
}

@media screen and (max-width: 991px) {
  .nav-overlay.open .nav-bar .hamburger-icon .light {
    display: block;
  }
  .nav-overlay.open .nav-bar .hamburger-icon .dark {
    display: none;
  }
  .nav-bar {
    --nb-bg: transparent;
  }
  .nav-bar .hamburger-icon .dark {
    display: block;
  }
  .nav-bar .hamburger-icon .light {
    display: none;
  }
  .nav-bar .menus {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .nav-bar {
    padding-block: 50px;
    padding-inline: 40px;
  }
  .nav-overlay.open .nav-bar {
    display: none;
  }

  .open-menu .social-links {
    display: flex;
  }
  .nav-overlay.open .open-menu {
    width: 100%;
    min-height: 100svh;
    right: 0px;
    position: sticky;
    overflow-y: auto;
    padding-inline: min(10%, 85px);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 50px;

    .menu-close {
      position: absolute;
      top: 50px;
      right: 40px;
    }

    .menus {
      margin-top: 0px;
      gap: 40px;
    }
  }
}