/** * Mobile UI Fixes - Final Comprehensive Solution * Addresses: Hamburger menu, search box layout, interactive map info boxes * Version: 1.0.0 * Date: June 24, 2025 */ /* ================================================= 1. HAMBURGER MENU FIX - SIMPLIFIED APPROACH ================================================= */ @media (max-width: 768px) { /* Reset and style the mobile menu button */ .wp-block-navigation__responsive-container-open { background: #ffffff !important; border: 2px solid #2d5f3f !important; color: #2d5f3f !important; width: 48px !important; height: 48px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; transition: all 0.3s ease !important; } /* Remove all default content */ .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-open span, .wp-block-navigation__responsive-container-open::before { display: none !important; } /* Create clean hamburger icon with pseudo-elements */ .wp-block-navigation__responsive-container-open::after { content: '' !important; position: absolute !important; width: 22px !important; height: 2px !important; background: #2d5f3f !important; transition: all 0.3s ease !important; box-shadow: 0 -8px 0 #2d5f3f, 0 8px 0 #2d5f3f !important; } /* Hover state */ .wp-block-navigation__responsive-container-open:hover, .wp-block-navigation__responsive-container-open:focus { background: #2d5f3f !important; outline: none !important; } .wp-block-navigation__responsive-container-open:hover::after, .wp-block-navigation__responsive-container-open:focus::after { background: #ffffff !important; box-shadow: 0 -8px 0 #ffffff, 0 8px 0 #ffffff !important; } } /* ================================================= 2. TREK PAGE SEARCH BOX LAYOUT FIX ================================================= */ @media (max-width: 768px) { /* Fix search form layout on trek archive */ .trek-search-form, .trek-search-bar form { display: flex !important; width: 100% !important; gap: 8px !important; align-items: stretch !important; } /* Search input field */ .trek-search-field, .trek-search-form input[type="text"], .trek-search-form input[type="search"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; /* Prevents overflow */ padding: 12px 16px !important; font-size: 16px !important; /* Prevents zoom on iOS */ border: 2px solid #e0e0e0 !important; border-radius: 8px !important; -webkit-appearance: none !important; appearance: none !important; } /* Search button */ .trek-search-button, .trek-search-form button, .trek-search-form input[type="submit"] { flex: 0 0 auto !important; width: auto !important; padding: 12px 20px !important; background: #2d5f3f !important; color: white !important; border: none !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600 !important; white-space: nowrap !important; cursor: pointer !important; transition: background 0.3s ease !important; } .trek-search-button:hover, .trek-search-form button:hover { background: #1e4d2b !important; } /* If button has only icon, make it square */ .trek-search-button:has(svg):not(:has(span)), .trek-search-form button:has(svg):not(:has(span)) { width: 48px !important; padding: 12px !important; } /* Container adjustments */ .trek-search-bar, .trek-filters-container { padding: 16px !important; margin-bottom: 20px !important; } } /* ================================================= 3. INTERACTIVE MAP INFO BOX FIX ================================================= */ @media (max-width: 768px) { /* Google Maps InfoWindow mobile optimization */ .gm-style-iw, .gm-style-iw-c { max-width: 90vw !important; width: 280px !important; } /* Info window content */ .gm-style-iw-d { overflow: auto !important; max-height: 400px !important; } /* Trek info popup content */ .trek-info-window, .map-info-content, .marker-info { width: 100% !important; padding: 12px !important; box-sizing: border-box !important; } /* Trek info title */ .trek-info-window h3, .map-info-content h3, .marker-info h3 { font-size: 18px !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; word-wrap: break-word !important; } /* Trek info details */ .trek-info-window p, .map-info-content p, .marker-info p { font-size: 14px !important; margin: 4px 0 !important; line-height: 1.4 !important; } /* Info window buttons/links */ .trek-info-window a, .map-info-content a, .marker-info a { display: inline-block !important; padding: 8px 16px !important; margin-top: 8px !important; background: #2d5f3f !important; color: white !important; text-decoration: none !important; border-radius: 4px !important; font-size: 14px !important; text-align: center !important; } /* Ensure proper text wrapping */ .trek-info-window *, .map-info-content *, .marker-info * { word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } /* Fix any overflow issues */ .gm-style-iw-t::after { display: none !important; /* Remove close button if causing issues */ } /* Custom info box if using custom overlays */ .custom-info-box, .trek-popup, .map-popup { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 90% !important; max-width: 320px !important; background: white !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; padding: 20px !important; z-index: 9999 !important; } } /* ================================================= 4. ADDITIONAL MOBILE OPTIMIZATIONS ================================================= */ @media (max-width: 768px) { /* Ensure touch-friendly tap targets */ button, a, input, select, textarea, .clickable, [role="button"] { min-height: 44px !important; min-width: 44px !important; } /* Fix any horizontal overflow */ body, .site, .site-content { overflow-x: hidden !important; } /* Ensure proper spacing */ .site-header, .site-main, .site-footer { padding-left: 16px !important; padding-right: 16px !important; } /* Interactive map container */ #trek-map, .interactive-map-container, .map-wrapper { width: 100% !important; height: 60vh !important; min-height: 400px !important; } } /* ================================================= 5. SPECIFIC FIXES FOR IDENTIFIED ISSUES ================================================= */ @media (max-width: 480px) { /* Extra small devices adjustments */ .wp-block-navigation__responsive-container-open { width: 44px !important; height: 44px !important; } .trek-search-field { font-size: 16px !important; /* Prevents zoom */ padding: 10px 12px !important; } .trek-search-button { padding: 10px 16px !important; font-size: 14px !important; } /* Even smaller info windows on very small screens */ .gm-style-iw, .gm-style-iw-c { width: 240px !important; } } /* ================================================= 6. Z-INDEX HIERARCHY FIX ================================================= */ @media (max-width: 768px) { /* Ensure proper stacking order */ .wp-block-navigation__responsive-container { z-index: 999999 !important; } .gm-style-iw { z-index: 9999 !important; } .custom-info-box, .trek-popup { z-index: 99999 !important; } }