/* === VARIABLES === */

nav {
    --burger-trigger-gap: 6px;
    --burger-trigger-width: calc(var(--font-size__medium) * 1.5);
    --burger-trigger-height: var(--font-size__medium);
    --burger-trigger-thickness: calc(var(--font-size__medium) / 10);
    --burger-trigger-color: var(--brand-color-main);
  }

.menu-item a {
    padding: 10px 0px 10px 0px !important;
}

.menu-item:hover, .menu-item:active {
    color: var(--brand-color-main) !important;
}

/* === NAV BAR === */

nav.nav-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 19;
    display: flex;
    flex-direction: row;
    gap: calc(var(--grid__x-small) / 1.5);
    align-items: center;
    padding: calc(var(--grid__x-small) / 3) calc(var(--grid__x-small) / 1);
    transform: translateX(-50%);
  }

nav .nav-bar__cntnr {
    display: flex;
    flex-direction: row;
    gap: calc(var(--grid__x-small) / 3);
}
    
  nav.nav-bar a {
    padding: calc(var(--grid__x-small) / 3) calc(var(--grid__x-small) / 1);
    border-radius: var(--radius__large);
    font-size: var(--font-size__small-reg);
    font-weight: var(--font-weight__bold);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
  }
  
  @media (max-width: 1023px) {
    nav.nav-bar a.link-menu {
      width: 100%;
    }
  }
  
  nav.nav-bar a.link-action-2 {
    border: 1px solid var(--brand-color-main);
    opacity: 1;
  }

  nav.nav-bar a.link-action-2:hover {
    color: var(--main-light);
    background: var(--brand-color-main);
    opacity: 1;
  }

  nav.nav-bar a.link-action-1 {
    color: var(--main-light);
    background-color: var(--brand-color-main);
    opacity: 1;
  }

  nav.nav-bar a.link-action-1:hover {
    transform: scale(1.1);
  }

  nav.nav-bar a.link-img {
    height: 100%;
    width: 32px;
    padding: 0px !important;
  }

  nav.nav-bar a.link-img > img {
    height: auto;
    width: auto;
  }

  nav.nav-bar a.link-menu {
    opacity: 0.8;
  }

  nav.nav-bar a.link-menu:hover {
    color: var(--main-dark);
    border: 1px solid var(--brand-color-main);
    opacity: 1;
  }

  nav.nav-bar a.is-active {
    color: var(--brand-color-main);
    border: 1px solid var(--brand-color-main);
    opacity: 1;
  }



/* == PILLS MENU == */

/* = POUP = */

.nav-bar__popup-menu {
    position: fixed;
    right: 50%;
    bottom: 0px;
    z-index: 99;
    width: 95vw;
    max-width: 450px;
    padding: calc(var(--grid__x-small) / 2);

    border: 1px solid rgba(220, 220, 220, 0.7);
    border-radius: var(--radius__medium);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 48px rgba(26, 26, 26, 0.08);
    backdrop-filter: blur(18px);

    opacity: 0;
    transition: all 350ms ease-in-out;
    filter: blur(6px);
    transform:translate3d(50%, 110%, 0px)
}

.nav-bar__popup-menu.is-active {
    opacity: 1;
    filter: blur(0px);
    transform:translate3d(50%, -50px, 0px);
}

@media (max-width: 768px) {
    .sleydr {
      --slide-width: calc(100% - 80px) !important;
      overflow: hidden;
    }
  }

.nav-bar__popup-menu > div {
    width: 100%;
    gap: calc(var(--grid__x-small) / 3);

}

/* == BURGER == */

.nav-bar__burger {
    display: inline-block;
    padding: 6px 12px;
    cursor:pointer
}

.nav-bar__burger-cntnr {
    display: inline-block;
    position: relative;
    width: var(--burger-trigger-width);
    height: var(--burger-trigger-height);
}

.nav-bar__burger .burger-bars {
    width: var(--burger-trigger-width);
    height: var(--burger-trigger-thickness);
    background-color: var(--burger-trigger-color);
    transition:all 300ms ease-in-out 20ms;
    border-radius: 150px;
}

.nav-bar__burger .burger-first {
    position: absolute;
    top: 0px;
}

.nav-bar__burger .burger-second {
    position: absolute;
    top: 50%;
}

.nav-bar__burger .burger-third {
    position: absolute;
    top: 100%;
}

.nav-bar__burger .burger-first.active {
    position: absolute;
    top: 50%;
    transform:rotateZ(45deg);
}

.nav-bar__burger .burger-second.active {
    position: relative;
    top: 50%;
    transform:scale(0, 1);
}

.nav-bar__burger .burger-third.active {
    position: absolute;
    top: 50%;
    transform:rotateZ(-45deg);
}