Convert menu to hover-triggered behavior

- Hamburger menu now opens on hover instead of click
- Menu stays open while hovering over button OR menu
- Added 100ms delay to prevent accidental closes
- Submenu opens on pure CSS :hover (no JavaScript)
- Smooth transitions for both main menu and submenu
- Proper ARIA attributes for accessibility
- Legacy click functions kept for backward compatibility
- Menu closes when mouse leaves both button and menu area

static/css/main.css

@@ -2036,10 +2036,20 @@ a:focus {
     transition: transform 0.3s ease-in-out;
     overflow-y: auto;
     z-index: 99;
+    pointer-events: none; /* Disable pointer events when hidden */
 }
 
+/* Show menu when hovering menu itself OR when it has the hover class */
+.navigation-menu:hover,
+.navigation-menu.menu-hover {
+    transform: translateX(0);
+    pointer-events: auto; /* Enable pointer events when visible */
+}
+
+/* Legacy class for JS compatibility - keep for backward compatibility */
 .navigation-menu.menu-open {
     transform: translateX(0);
+    pointer-events: auto;
 }
 
 .menu-content {
@@ -2084,7 +2094,7 @@ a:focus {
 
 /* Remove extra padding - all menu items should align consistently */
 
-/* Submenu styles */
+/* Submenu styles - hover triggered */
 .menu-item-submenu {
     position: relative;
 }
@@ -2098,17 +2108,36 @@ a:focus {
     transition: transform 0.2s ease;
 }
 
-.menu-item-submenu.submenu-open .submenu-arrow {
+/* Show submenu on hover */
+.menu-item-submenu:hover .submenu-arrow {
     transform: rotate(180deg);
 }
 
 .submenu-content {
     display: none;
     background-color: rgba(0, 0, 0, 0.02);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+}
+
+/* Show submenu when hovering the submenu container */
+.menu-item-submenu:hover .submenu-content {
+    display: block;
+    max-height: 600px;
+    opacity: 1;
+}
+
+/* Legacy class for JS compatibility */
+.menu-item-submenu.submenu-open .submenu-arrow {
+    transform: rotate(180deg);
 }
 
 .menu-item-submenu.submenu-open .submenu-content {
     display: block;
+    max-height: 600px;
+    opacity: 1;
 }
 
 .submenu-content .menu-item {