Improve mobile menu functionality in Header component: add toggle behavior, close menu on link click, and adjust CSS for better visibility.

src/components/Header.astro

@@ -104,7 +104,7 @@ import '../styles/main.css';
   </div>
 
   <!-- Mobile Navigation -->
-  <div id="mobile-menu" class="mobile-menu">
+  <div id="mobile-menu" class="mobile-menu mobile-menu-hidden">
     <div class="mobile-menu-content">
       <a href="/home" class="mobile-nav-link">
         🏠 Home
@@ -133,6 +133,7 @@ import '../styles/main.css';
     const menu = document.getElementById('mobile-menu');
     if (menu) {
       menu.classList.toggle('mobile-menu-hidden');
+      console.log('Mobile menu toggled:', !menu.classList.contains('mobile-menu-hidden'));
     }
   }
 
@@ -148,6 +149,19 @@ import '../styles/main.css';
     }
   });
 
+  // Close mobile menu when clicking on a mobile nav link
+  document.addEventListener('DOMContentLoaded', function() {
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
+    mobileNavLinks.forEach(link => {
+      link.addEventListener('click', function() {
+        const menu = document.getElementById('mobile-menu');
+        if (menu) {
+          menu.classList.add('mobile-menu-hidden');
+        }
+      });
+    });
+  });
+
   // Add active state to current page
   document.addEventListener('DOMContentLoaded', function() {
     const currentPath = window.location.pathname;
@@ -537,12 +551,16 @@ import '../styles/main.css';
 
   /* Mobile Menu */
   .mobile-menu {
-    display: block;
+    display: none;
     background: white;
     border-top: 1px solid rgba(229, 229, 229, 0.5);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
 
+  .mobile-menu:not(.mobile-menu-hidden) {
+    display: block;
+  }
+
   .mobile-menu-hidden {
     display: none !important;
   }