/* public/mobile-nav.css */

#mobile-menu {
  background-color: rgba(16, 16, 23, 0.98); /* Dark background with slight transparency */
  transform-origin: top;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
}

.menu-open {
  animation: open-menu-animation 0.3s ease-out forwards;
}

.menu-close {
  animation: close-menu-animation 0.3s ease-in forwards;
}

@keyframes open-menu-animation {
  from {
    opacity: 0;
    transform: scaleY(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

@keyframes close-menu-animation {
  from {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scaleY(0.95) translateY(-10px);
  }
}

/* Icon switching */
#mobile-menu-button .hamburger-icon {
  display: block;
}

#mobile-menu-button .close-icon {
  display: none;
}

#mobile-menu-button[aria-expanded="true"] .hamburger-icon {
  display: none;
}

#mobile-menu-button[aria-expanded="true"] .close-icon {
  display: block;
}

/* Prevent scrolling when menu is open */
body.menu-open {
    overflow: hidden;
}