docs: Add mobile CSS troubleshooting guide for find-trainer page

- Document modal overlay issue and CSS specificity conflict solution
- Document excessive mobile padding issue and zero-padding fix
- Include specific file references and code examples
- Add deployment instructions for child theme CSS

Resolves issues with non-functional Apply button overlay and wasted
screen space on mobile devices for the find-a-trainer page.

docs/TROUBLESHOOTING.md

@@ -80,7 +80,77 @@ add_action('wp_head', function() {
 2. Check `is_plugin_page()` detection
 3. Ensure template has `HVAC_IN_PAGE_TEMPLATE` constant
 
-### 4. Sidebar Still Showing
+### 4. Mobile CSS Issues
+
+#### Modal Overlay Appearing on Page Load
+**Symptoms:**
+- Non-functional "Apply" button overlay appears on find-trainer page
+- Modal visible by default on mobile devices
+- Overlay blocks interaction with page content
+
+**Root Cause:**
+- CSS specificity conflict: `display: flex !important` in CSS overrides inline `style="display: none"`
+- Modal visibility controlled by both CSS and JavaScript
+
+**Solution:**
+Add `!important` to inline styles in the HTML template:
+```html
+<!-- In templates/page-find-trainer.php line 535 -->
+<div id="hvac-filter-modal" class="hvac-filter-modal" 
+     style="display: none !important; visibility: hidden !important; opacity: 0 !important;">
+```
+
+Also ensure CSS has proper default state:
+```css
+/* In assets/css/find-trainer.css */
+.hvac-filter-modal,
+#hvac-filter-modal {
+    display: none !important;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+}
+```
+
+**Files Modified:**
+- `templates/page-find-trainer.php` (line 535)
+- `assets/css/find-trainer.css` 
+- `assets/js/find-trainer.js` (initialization checks)
+- `astra-child-hvac/css/hvac-find-trainer-mobile.css`
+
+#### Excessive Mobile Padding
+**Symptoms:**
+- Too much left/right padding on mobile views
+- Wasted screen space on small devices
+- Content not utilizing full viewport width
+
+**Solution:**
+Set all container padding to 0 on mobile breakpoints:
+```css
+/* In astra-child-hvac/css/hvac-find-trainer-mobile.css */
+@media screen and (max-width: 768px) {
+    body.hvac-find-trainer-page .ast-container,
+    body.page-id-1653 .ast-container {
+        padding: 0 !important;
+        margin: 0 !important;
+        width: 100% !important;
+    }
+    
+    /* Filters section with minimal margins */
+    .hvac-filters-section {
+        margin: 0 5px !important;
+        padding: 8px !important;
+    }
+}
+```
+
+**Deployment:**
+Use child theme CSS deployment script:
+```bash
+scripts/deploy-child-theme-css.sh
+```
+
+### 5. Sidebar Still Showing
 
 **Symptoms:**
 - 2-column layout persists