/* =============== SIDEBAR MENU - Clean Right Flyout =============== */
#leftSidebar, aside {
  padding: 20px;
  font-size: 1rem;
  position: relative;
  overflow: visible !important;
}

/* Main Menu Items */
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  background-color: rgba(255,255,255,0.15) !important;
  padding: 6px 10px;
  border-radius: 3px;
  color: white !important;
  text-decoration: none !important;
  font-weight: bold;
  display: block;
  transition: all 0.25s;
  position: relative;
  z-index: 10;
}

.menu-item:hover {
  background-color: rgba(255,255,255,0.3) !important;
  transform: translateX(6px);
}

/* Rainbow colors */
.menu-item:nth-child(1)  { background-color: red !important; }
.menu-item:nth-child(2)  { background-color: darkorange!important; }
.menu-item:nth-child(3)  { background-color: #00f12e !important; }
.menu-item:nth-child(4)  { background-color: #00c9ff !important; }
.menu-item:nth-child(5)  { background-color: blue !important; }
.menu-item:nth-child(6)  { background-color: #9800ff !important; }
.menu-item:nth-child(7)  { background-color: #ff6ae5 !important; }

/* ==================== FLYOUT SUBMENU ==================== */
.has-submenu {
  cursor: pointer;
  position: relative !important;   /* This is critical */
}

.submenu {
  display: none;
  position: absolute !important;
  left: 90% !important;
  top: 50% !important;
  transform: translateY(-15%) !important;
  background-color: #257dff !important;
  min-width: 200px;
  padding: 3px 3px;
  border-radius: 8px;
  border: 3px solid #59dcff !important;
  box-shadow: 
    6px 6px 0 rgba(0, 0, 0, 0.4) !important;
    z-index: 1000 !important;
  margin-left: 15px;
  white-space: nowrap;
}

.has-submenu:hover .submenu {
  display: block !important;
}

/* Submenu links */
.submenu a {
  display: block;
  padding: 5px 5px;
  color: #f0f0ff !important;
  text-decoration: none;
  border-radius: 5px;
  margin-bottom: 1px;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.submenu a:last-child {
  margin-bottom: 0;
}

.submenu a:hover {
  background-color: rgba(255,255,255,0.25) !important;
  padding-left: 22px;
}

.neocities-box a {
  color: #0036ff !important;
  font-weight: bold;
}

/* Container for the JS sidebar menu */
.sidebar-menu-container {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px solid rgba(255,255,255,0.2);
}

/* If you want custom content to have spacing */
.custom-sidebar-content {
  margin-bottom: 15px;
}