/* Base styles */
.menu-container {
  background-color: rgb(31 41 55);
  color: white;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000; /* Increased z-index to ensure menu is above other content */
  display: flex;
  align-items: center;
  font-size: small;
}

.hamburger {
  display: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
  background-color: rgb(31 41 55);
}

.menu-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menu-item {
  position: relative;
}

.menu-item a {
  display: block;
  padding: 0.5rem 1rem;
  color: rgb(229 231 235);
  font-weight: 500;
  border-radius: 0.5rem;
  transition-property: background-color, color;
  transition-duration: 200ms;
}

.menu-item a:hover {
  background-color: rgb(55 65 81);
  color: white;
}

.submenu {
  display: none;
  background-color: rgba(31, 41, 55, 0.692);
  width: 26rem;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001; /* Ensure submenu is above other content */
}

.arrow::after {
  display: inline-block;
  margin-left: 0.5rem;
  content: '»';
  transition-property: transform;
  transition-duration: 200ms;
}

#menu {
  display: none;
}

/* Medium screen and up styles (md: breakpoint) */
@media (min-width: 768px) {
  .menu-container {
    /* padding: 0.5rem 1rem; */
    position: sticky;
  }
  
  .submenu {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 1001; /* Ensure submenu is above other content */
  }
  
  #menu {
    display: flex;
  }
  
  .hamburger {
    display: none;
  }
}

/* Interactive states */
.menu-item.open > .submenu,
.menu-item:hover > .submenu {
  display: block;
}

.menu-item.open > a > .arrow::after,
.menu-item:hover > a > .arrow::after {
  transform: rotate(90deg);
}

/* Nested menu styles */
.submenu .menu-item a {
  padding-left: 1rem;
}

.submenu .submenu {
  top: 0;
  left: 100%;
  z-index: 1002; /* Ensure nested submenu is above other content */
}

.submenu .submenu .menu-item a {
  padding-left: 2rem;
}

/* Menu toggle state */
#menu.open {
  display: flex;
}