/* --- Hamburger button --- */
.nav-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 2rem;
   cursor: pointer;
   color: #000;
}

/* --- Responsive behavior --- */
@media (max-width: 768px) {
   /* Show hamburger, hide menu */
   .nav-toggle {
      display: block;
   }

   #SWnav {
      display: none;
      flex-direction: column;
      background: #00AAFF;
      border-top: 1px solid #ccc;
      width: 100%;
   }

   #SWnav.active {
      display: flex;
   }

   #SWnav li {
      width: 100%;
      background-color: #00AAFF;
   }

   #SWnav li ul {
      position: static; /* stack submenus below */
      border: none;
   }
}

/* Reset */
#SWnav,
#SWnav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   background-color: #00AAFF;
}

/* Main nav container */
#SWnav {
   display: flex;
   gap: 20px;
   background: #00AAFF;
   padding: 0.5rem 1rem;
}
#SWnav a:hover{
   background: #66CCFF;
}

/* Top-level items */
#SWnav > li {
   position: relative; /* so submenu positions correctly */
}

   #SWnav > li > a { /* Main Items of nav bar */
      display: block;
      padding: 10px 5px;
      text-decoration: none;
      color: #000;
	  font-size: 1rem;
      font-weight: bold;
   }

/* Submenus (hidden by default) */
   #SWnav li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #00AAFF;
      border: 1px solid #ccc;
      min-width: 180px;
      z-index: 1000;
   }

/* Submenu items */
#SWnav li ul li a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: #333;
}

#SWnav li ul li a:hover {
   background: #66CCFF;
}

/* --- PURE CSS hover support (desktop) --- */
#SWnav li:hover > ul {
   display: block;
   background: #00AAFF;
}