feat: implement comprehensive mobile responsive design system and fix horizontal clipping across all viewport sizes

index.html

@@ -188,6 +188,7 @@
         <a href="#faq" data-i18n="faq.title">FAQ</a>
         <a href="#location" data-i18n="nav.location">Location</a>
         <a href="#contact" data-i18n="nav.contact">Contact</a>
+        <a href="#rebuilding-fund" class="btn btn-relief mobile-drawer-cta open-donate-modal" data-i18n="nav.relief_cta">Earthquake Relief</a>
       </nav>
 
 
@@ -1323,8 +1324,8 @@
         </div>
       </div>
 
-      <div style="margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
+      <div class="modal-btn-row">
-        <a href="prayer-card.html" target="_blank" class="btn btn-relief" style="flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;">
+        <a href="prayer-card.html" target="_blank" class="btn btn-relief btn-modal-full" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
             <polyline points="14 2 14 8 20 8"></polyline>
@@ -1334,7 +1335,7 @@
           </svg>
           <span data-i18n="prayer.btn_sheet">Open Printable 8.5x11 Sheet</span>
         </a>
-        <button onclick="window.print();" class="btn btn-primary" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;">
+        <button onclick="window.print();" class="btn btn-primary btn-modal-half" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px;">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <polyline points="6 9 6 2 18 2 18 9"></polyline>
             <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
@@ -1342,7 +1343,7 @@
           </svg>
           <span data-i18n="prayer.btn_print">Print / Save as PDF</span>
         </button>
-        <button id="prayer-modal-close-btn" class="btn btn-outline-white" style="flex: 1; color: var(--slate-700); border-color: var(--slate-300);" data-i18n="modal.close">
+        <button id="prayer-modal-close-btn" class="btn btn-outline-white btn-modal-half" style="color: var(--slate-700); border-color: var(--slate-300);" data-i18n="modal.close">
           Close Window
         </button>
       </div>

js/main.js

@@ -148,20 +148,34 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Mobile Menu Toggle
+  // Mobile Menu Toggle & Body Lock
   if (mobileToggle && navLinks) {
-    mobileToggle.addEventListener('click', () => {
+    const toggleNav = (forceClose = false) => {
-      navLinks.classList.toggle('open');
+      const shouldOpen = forceClose ? false : !navLinks.classList.contains('open');
-      mobileToggle.textContent = navLinks.classList.contains('open') ? '✕' : '☰';
+      navLinks.classList.toggle('open', shouldOpen);
+      document.body.classList.toggle('nav-open', shouldOpen);
+      mobileToggle.textContent = shouldOpen ? '✕' : '☰';
+      mobileToggle.setAttribute('aria-expanded', String(shouldOpen));
+    };
+
+    mobileToggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleNav();
     });
 
-    // Close mobile nav when link clicked
+    // Close mobile nav when any link inside is clicked
     navLinks.querySelectorAll('a').forEach(link => {
       link.addEventListener('click', () => {
-        navLinks.classList.remove('open');
+        toggleNav(true);
-        mobileToggle.textContent = '☰';
       });
     });
+
+    // Close mobile nav when clicking outside on backdrop
+    document.addEventListener('click', (e) => {
+      if (navLinks.classList.contains('open') && !navLinks.contains(e.target) && e.target !== mobileToggle) {
+        toggleNav(true);
+      }
+    });
   }
 
   // Contact Form Submission (Simulated Client-Side)

prayer-card.html

@@ -246,6 +246,40 @@
       color: #64748b;
     }
 
+    /* Screen Responsive Styles */
+    @media screen and (max-width: 860px) {
+      .sheet {
+        width: 95%;
+        max-width: 100%;
+        min-height: auto;
+        margin: 16px auto;
+        padding: 24px 18px;
+      }
+      .sheet-header {
+        flex-direction: column;
+        text-align: center;
+        gap: 14px;
+      }
+      .mission-board-badge {
+        text-align: center;
+        width: 100%;
+      }
+      .sheet-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+      .no-print-bar {
+        padding: 10px 14px;
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+      }
+      .no-print-bar a, .no-print-bar .btn-print {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
     /* Print styles */
     @media print {
       body {