/** * HVAC Navigation - Simple & Robust * Simplified navigation that ensures dropdowns work reliably * * @version 1.0.0 * @since 2025-08-21 */ /* Ensure the menu is visible when active */ .hvac-trainer-menu.active { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Hamburger menu button styling */ .hvac-hamburger-menu { display: flex !important; flex-direction: column; justify-content: center; align-items: center; width: 55px; height: 54px; background: none; border: none; cursor: pointer; padding: 10px; position: relative; z-index: 1002; } .hvac-hamburger-menu.active { background: rgba(2, 116, 190, 0.1); border-radius: 8px; } /* Hamburger lines */ .hvac-hamburger-line { width: 25px; height: 3px; background: #374151; margin: 2px 0; transition: all 0.3s ease; display: block; } /* Menu toggle buttons (dropdown arrows) */ .hvac-trainer-menu .menu-toggle { display: flex !important; align-items: center; padding: 12px 16px !important; cursor: pointer !important; color: #374151; font-size: 14px; font-weight: 500; user-select: none; transition: all 0.2s ease; background: none; border: none; width: 100%; text-align: left; justify-content: space-between; } .hvac-trainer-menu .menu-toggle:hover { background: rgba(2, 116, 190, 0.05); color: #0274be; } /* Ensure dropdown arrows are visible and clickable */ .hvac-trainer-menu .dropdown-arrow { font-size: 12px; margin-left: auto; color: #9ca3af; transition: transform 0.3s ease; } .hvac-trainer-menu .menu-item.open .dropdown-arrow, .hvac-trainer-menu .menu-item.has-children:hover .dropdown-arrow { transform: rotate(180deg); color: #0274be; } /* Submenu styling - simple and reliable */ .hvac-trainer-menu .sub-menu { background: #f9fafb; border-left: 3px solid #e5e7eb; margin: 0; padding: 0; list-style: none; /* Hidden by default */ display: none; max-height: 0; overflow: hidden; transition: all 0.3s ease; } /* Show submenu when parent is open */ .hvac-trainer-menu .menu-item.open > .sub-menu { display: block !important; max-height: 500px !important; padding: 8px 0 !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 99999 !important; background: white !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; min-width: 200px !important; } /* Submenu items */ .hvac-trainer-menu .sub-menu .menu-item { margin: 0; padding: 0; } .hvac-trainer-menu .sub-menu .menu-item > a { display: block; padding: 10px 20px 10px 30px; color: #4b5563; text-decoration: none; font-size: 14px; transition: all 0.2s ease; } .hvac-trainer-menu .sub-menu .menu-item > a:hover { color: #0274be; background: rgba(2, 116, 190, 0.05); padding-left: 35px; } /* Hide hamburger menu at desktop widths */ @media (min-width: 993px) { .hvac-hamburger-menu { display: none !important; } .hvac-trainer-menu { display: block !important; visibility: visible !important; opacity: 1 !important; } } /* Force visibility on mobile when menu is active */ @media (max-width: 992px) { .hvac-trainer-menu { position: static !important; box-shadow: none !important; background: white; padding: 0; margin: 0; width: 100%; } .hvac-trainer-menu.active { display: block !important; } .hvac-trainer-menu .menu-item { border-bottom: 1px solid #e5e7eb; } .hvac-trainer-menu .sub-menu { position: static !important; box-shadow: none !important; border: none !important; background: #f8fafc !important; margin-left: 0 !important; } } /* Make sure everything is clickable */ .hvac-trainer-menu .menu-toggle, .hvac-trainer-menu .menu-item > a { pointer-events: auto !important; cursor: pointer !important; } /* Override any theme conflicts */ .hvac-plugin-page .hvac-trainer-menu, .hvac-page-wrapper .hvac-trainer-menu { font-family: inherit !important; list-style: none !important; } /* Ensure proper z-index stacking */ .hvac-trainer-nav { position: relative; z-index: 10000; } .hvac-trainer-menu { position: relative; z-index: 10001; } /* Menu items need relative positioning for absolute submenus */ .hvac-trainer-menu .menu-item.has-children { position: relative; } /* Ensure submenus appear above everything */ .hvac-trainer-menu .sub-menu { z-index: 99999 !important; position: absolute !important; }