feat: comprehensive mobile improvements across site

- Improved mobile blog layout with responsive cards and pagination
- Added mobile-first breakpoints (768px, 480px) throughout
- Increased button touch targets
- Enhanced mobile footer and landing page responsiveness
- Improved mobile typography scaling and spacing
- Added better mobile menu interactions and accessibility features
- All components now fully responsive with touch-friendly interfaces

Author: Dale Kunce

app/assets/scripts/mobile-menu.js

@@ -1,6 +1,6 @@
 /**
  * Mobile Navigation Menu
- * Handles touch/click events for mobile devices where hover doesn't work properly
+ * Enhanced mobile navigation with improved touch interactions and accessibility
  */
 (function () {
   'use strict';
@@ -9,40 +9,100 @@
     // Find the mobile dropdown toggle
     const mobileDropdown = document.querySelector('.resp-nav-dropdown');
     const dropdownContent = document.querySelector('.resp-dropdown-content');
+    const menuButton = mobileDropdown?.querySelector('p');
 
     if (!mobileDropdown || !dropdownContent) {
       return;
     }
 
-    // Add click event listener to toggle mobile menu
-    mobileDropdown.addEventListener('click', (e) => {
+    // Add ARIA attributes for accessibility
+    mobileDropdown.setAttribute('role', 'button');
+    mobileDropdown.setAttribute('aria-expanded', 'false');
+    mobileDropdown.setAttribute('aria-haspopup', 'true');
+    mobileDropdown.setAttribute('tabindex', '0');
+    dropdownContent.setAttribute('role', 'menu');
+
+    // Update menu button text and ARIA state
+    function updateMenuState(isOpen) {
+      const isExpanded = isOpen ? 'true' : 'false';
+      mobileDropdown.setAttribute('aria-expanded', isExpanded);
+      
+      if (menuButton) {
+        menuButton.textContent = isOpen ? 'CLOSE' : 'MENU';
+      }
+    }
+
+    // Toggle mobile menu
+    function toggleMenu(e) {
       e.preventDefault();
       e.stopPropagation();
 
-      // Toggle the show class
-      dropdownContent.classList.toggle('show');
+      const isOpen = dropdownContent.classList.toggle('show');
+      updateMenuState(isOpen);
+
+      // Add/remove body scroll lock on mobile
+      if (isOpen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = '';
+      }
+    }
+
+    // Close menu
+    function closeMenu() {
+      dropdownContent.classList.remove('show');
+      updateMenuState(false);
+      document.body.style.overflow = '';
+    }
+
+    // Enhanced event listeners
+    mobileDropdown.addEventListener('click', toggleMenu);
+    mobileDropdown.addEventListener('touchstart', (e) => {
+      // Prevent double-tap zoom on iOS
+      e.preventDefault();
+    });
+
+    // Keyboard support
+    mobileDropdown.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        toggleMenu(e);
+      }
     });
 
     // Close menu when clicking outside
     document.addEventListener('click', (e) => {
-      if (!mobileDropdown.contains(e.target)) {
-        dropdownContent.classList.remove('show');
+      if (!mobileDropdown.contains(e.target) && !dropdownContent.contains(e.target)) {
+        closeMenu();
       }
     });
 
     // Close menu when pressing escape key
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
-        dropdownContent.classList.remove('show');
+        closeMenu();
       }
     });
 
     // Close menu when window is resized to desktop size
     window.addEventListener('resize', () => {
       if (window.innerWidth > 650) {
-        dropdownContent.classList.remove('show');
+        closeMenu();
       }
     });
+
+    // Enhanced touch handling for mobile menu items
+    const menuItems = dropdownContent.querySelectorAll('.nav-item, .lang');
+    menuItems.forEach(item => {
+      item.addEventListener('touchstart', function() {
+        this.style.backgroundColor = 'rgba(255,255,255,0.1)';
+      });
+      
+      item.addEventListener('touchend', function() {
+        setTimeout(() => {
+          this.style.backgroundColor = '';
+        }, 150);
+      });
+    });
   }
 
   // Initialize when DOM is ready