/* Color override for the hamburger lines (project green) */
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
  background-color: #CBDE77 !important;
}

/* Horizontal unfold to the left: when #main-nav.show is present the menu
  appears to the right edge and items unfold leftwards in a row. */
#main-nav.show{
  display: flex !important; /* override Tailwind's display */
  flex-direction: row-reverse; /* so first item sits closest to the hamburger */
  gap: .5rem;
  /* position will be calculated by JS so we don't hard-code top/right here */
  transform-origin: right center;
  align-items: center;
  z-index: 50;
  padding: 0.25rem;
}

#main-nav .nav-item{
  --i: 0;
  transform-origin: right center;
  transform: translateX(12px) scaleX(0);
  opacity: 0;
  display: inline-block;
  white-space: nowrap;
}

#main-nav.show .nav-item{
  animation: horiz-unfold 360ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes horiz-unfold{
  0%{
    transform: translateX(12px) scaleX(0);
    opacity: 0;
  }
  60%{
    transform: translateX(-6px) scaleX(1.06);
    opacity: 1;
  }
  100%{
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
}

/* Reverse (closing) animation: quick collapse to right */
#main-nav.hide-anim .nav-item{
  animation: horiz-fold 220ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: calc(var(--i) * 30ms);
}

@keyframes horiz-fold{
  0%{
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  100%{
    transform: translateX(12px) scaleX(0);
    opacity: 0;
  }
}

/* On md+ keep layout normal and disable the animations */
@media (min-width: 768px){
  #main-nav{
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
  }
  #main-nav .nav-item{
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}