/** * HVAC Mobile Navigation Fix * Resolves navigation conflicts and overlapping elements on mobile devices * * @package HVAC_Community_Events * @version 2.0.0 * @created 2025-08-13 */ /* === Mobile Navigation Consolidation === */ @media (max-width: 768px) { /* Hide duplicate navigation elements on mobile */ .site-navigation:not(.hvac-trainer-nav), .ast-mobile-header-wrap:not(.hvac-mobile-nav), .ast-main-header-nav-open { display: none !important; } /* Ensure HVAC navigation is primary on mobile */ .hvac-trainer-nav { display: block !important; position: relative; z-index: 9999; width: 100%; } /* Fix hamburger menu positioning */ .hvac-menu-toggle { position: fixed; top: 15px; right: 15px; z-index: 10000; background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Mobile menu container */ .hvac-nav-menu.mobile-active { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9998; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } /* Prevent body scroll when menu is open */ body.hvac-menu-open { overflow: hidden; position: fixed; width: 100%; } /* Mobile menu items */ .hvac-nav-menu.mobile-active .menu-item { display: block; width: 100%; border-bottom: 1px solid #eee; } .hvac-nav-menu.mobile-active .menu-item a { display: block; padding: 15px 20px; text-decoration: none; color: #333; font-size: 16px; } /* Dropdown handling on mobile */ .hvac-nav-menu.mobile-active .has-dropdown > a::after { content: '▼'; float: right; transition: transform 0.3s; } .hvac-nav-menu.mobile-active .has-dropdown.open > a::after { transform: rotate(180deg); } .hvac-nav-menu.mobile-active .dropdown-menu { position: static; display: none; background: #f8f8f8; box-shadow: none; padding-left: 20px; } .hvac-nav-menu.mobile-active .has-dropdown.open .dropdown-menu { display: block; } /* Fix breadcrumb navigation conflicts */ .hvac-breadcrumb-wrapper { display: none; } /* Touch-friendly button sizes */ .hvac-nav-menu.mobile-active button, .hvac-nav-menu.mobile-active a { min-height: 44px; min-width: 44px; } /* Fix overlapping with page content */ .hvac-page-content { padding-top: 70px; } /* Welcome popup mobile fix */ .hvac-welcome-popup { position: fixed; top: 60px; left: 10px; right: 10px; bottom: 10px; max-height: calc(100vh - 80px); } .hvac-welcome-popup .carousel-container { height: auto; max-height: 350px; } /* Event forms on mobile */ .hvac-event-form-wrapper { padding: 15px; } .hvac-event-form-wrapper iframe { height: auto; min-height: 800px; } } /* === Tablet Specific Fixes === */ @media (min-width: 769px) and (max-width: 1024px) { .hvac-trainer-nav .hvac-nav-menu { display: flex; flex-wrap: wrap; } .hvac-trainer-nav .menu-item { flex: 0 0 auto; } /* Dropdown positioning on tablets */ .hvac-trainer-nav .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; } } /* === Accessibility Improvements === */ @media (prefers-reduced-motion: reduce) { .hvac-nav-menu, .hvac-nav-menu * { animation: none !important; transition: none !important; } } /* === High Contrast Mode Support === */ @media (prefers-contrast: high) { .hvac-trainer-nav { border: 2px solid currentColor; } .hvac-nav-menu a:focus { outline: 3px solid currentColor; outline-offset: 2px; } } /* === Print Styles === */ @media print { .hvac-trainer-nav, .hvac-menu-toggle, .hvac-breadcrumb-wrapper { display: none !important; } }