upskill-event-manager/assets/css/hvac-mobile-navigation-fix.css

/**
 * 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;
    }
}