fix: mobile toggle broken by competing CSS media query and missing pointer-events

Root cause 1: @media (max-width: 768px) block at ~line 1094 set
.glass-header nav { flex-direction: column } and .nav-links { display: flex }
unconditionally, overriding the correct mobile nav overlay block and causing
the nav menu to remain always-visible (ignoring toggle state).

Root cause 2: Hidden .nav-links had no pointer-events: none, so the invisible
off-screen nav could intercept taps, blocking click events on the toggle button.

Fix: Remove conflicting nav rules from early media query block. Add
pointer-events: none to closed state and pointer-events: auto to .active state.

Only style.css modified. JS unchanged. HTML unchanged.

Author: TechStack Global

style.css

@@ -1091,19 +1091,9 @@ img {
 }
 
 /* Responsive adjustments */
+/* NOTE: Mobile nav layout (menu-toggle, nav-links) is handled exclusively
+   in the "Mobile Navigation Overlay" block below to avoid conflicts. */
 @media (max-width: 768px) {
-    .glass-header nav {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .nav-links {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 1rem;
-    }
-
     .hero {
         flex-direction: column;
         text-align: center;
@@ -1274,6 +1264,8 @@ img {
         /* Tight vertical spacing as requested (12-16px) */
         transform: translateY(-100%);
         opacity: 0;
+        pointer-events: none;
+        /* BUGFIX: prevent invisible menu from blocking taps on toggle */
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
         z-index: 999;
         border-left: none;
@@ -1284,6 +1276,8 @@ img {
     .nav-links.active {
         transform: translateY(0);
         opacity: 1;
+        pointer-events: auto;
+        /* BUGFIX: restore interactivity when menu is open */
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     }