/** * Offcanvas Menu Styles * * @package Ebara Technologies 2025 Template * @since 1.00 */ /* First-level menu styling - inline horizontal layout (HEADER ONLY) */ /* Scope to header area only, exclude footer */ header .main-navigation-menu, #masthead .main-navigation-menu, header #ast-hf-menu-1, #masthead #ast-hf-menu-1, header #primary-menu, #masthead #primary-menu, header .ast-hf-menu-1, #masthead .ast-hf-menu-1, header .main-header-menu:not(#ast-hf-account-menu), #masthead .main-header-menu:not(#ast-hf-account-menu), header .ast-nav-menu:not(.footer-navigation .ast-nav-menu):not(#ast-hf-account-menu), #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu):not(#ast-hf-account-menu), header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]):not(#ast-hf-account-menu), #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]):not(#ast-hf-account-menu) { display: flex !important; flex-direction: row !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; flex-wrap: nowrap !important; height: 100%; } header .main-navigation-menu > .menu-item{ &.menu-item-depth-0{ .menu-link{ .menu-chevron{ display: none; } } } } header .main-navigation-menu > .menu-item, #masthead .main-navigation-menu > .menu-item, header #ast-hf-menu-1 > .menu-item, #masthead #ast-hf-menu-1 > .menu-item, header #primary-menu > .menu-item, #masthead #primary-menu > .menu-item, header .ast-hf-menu-1 > .menu-item, #masthead .ast-hf-menu-1 > .menu-item, header .main-header-menu > .menu-item, #masthead .main-header-menu > .menu-item, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item { display: flex !important; margin: 0 !important; padding: 0 !important; position: relative; white-space: nowrap; height: 100%; justify-content: center; flex-direction: column; border-bottom: 5px solid transparent; } header .main-navigation-menu > .menu-item > .menu-link, header .main-navigation-menu > .menu-item > .menu-label, #masthead .main-navigation-menu > .menu-item > .menu-link, #masthead .main-navigation-menu > .menu-item > .menu-label, header #ast-hf-menu-1 > .menu-item > .menu-link, header #ast-hf-menu-1 > .menu-item > .menu-label, #masthead #ast-hf-menu-1 > .menu-item > .menu-link, #masthead #ast-hf-menu-1 > .menu-item > .menu-label, header #primary-menu > .menu-item > .menu-link, header #primary-menu > .menu-item > .menu-label, #masthead #primary-menu > .menu-item > .menu-link, #masthead #primary-menu > .menu-item > .menu-label, header .ast-hf-menu-1 > .menu-item > .menu-link, header .ast-hf-menu-1 > .menu-item > .menu-label, #masthead .ast-hf-menu-1 > .menu-item > .menu-link, #masthead .ast-hf-menu-1 > .menu-item > .menu-label, header .main-header-menu > .menu-item > .menu-link, header .main-header-menu > .menu-item > .menu-label, #masthead .main-header-menu > .menu-item > .menu-link, #masthead .main-header-menu > .menu-item > .menu-label, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label { display: inline-flex !important; align-items: center; padding: 0.5rem 1rem !important; margin: 0 0.5rem !important; color: #000 !important; text-decoration: none !important; font-weight: 600 !important; cursor: pointer !important; transition: color 0.2s ease, text-decoration 0.2s ease; white-space: nowrap; } header .main-navigation-menu > .menu-item > .menu-label, #masthead .main-navigation-menu > .menu-item > .menu-label, header #ast-hf-menu-1 > .menu-item > .menu-label, #masthead #ast-hf-menu-1 > .menu-item > .menu-label, header #primary-menu > .menu-item > .menu-label, #masthead #primary-menu > .menu-item > .menu-label, header .ast-hf-menu-1 > .menu-item > .menu-label, #masthead .ast-hf-menu-1 > .menu-item > .menu-label, header .main-header-menu > .menu-item > .menu-label, #masthead .main-header-menu > .menu-item > .menu-label, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label { cursor: default !important; } header .main-navigation-menu > .menu-item > .menu-link:hover, #masthead .main-navigation-menu > .menu-item > .menu-link:hover, header #ast-hf-menu-1 > .menu-item > .menu-link:hover, #masthead #ast-hf-menu-1 > .menu-item > .menu-link:hover, header #primary-menu > .menu-item > .menu-link:hover, #masthead #primary-menu > .menu-item > .menu-link:hover, header .ast-hf-menu-1 > .menu-item > .menu-link:hover, #masthead .ast-hf-menu-1 > .menu-item > .menu-link:hover, header .main-header-menu > .menu-item > .menu-link:hover, #masthead .main-header-menu > .menu-item > .menu-link:hover, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link:hover, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link:hover, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link:hover, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link:hover { color: #0066cc !important; text-decoration: underline !important; } /* Activated state for first-level menu items when offcanvas is open */ header .main-navigation-menu > .menu-item.menu-item-activated, #masthead .main-navigation-menu > .menu-item.menu-item-activated, header #ast-hf-menu-1 > .menu-item.menu-item-activated, #masthead #ast-hf-menu-1 > .menu-item.menu-item-activated, header #primary-menu > .menu-item.menu-item-activated, #masthead #primary-menu > .menu-item.menu-item-activated, header .ast-hf-menu-1 > .menu-item.menu-item-activated, #masthead .ast-hf-menu-1 > .menu-item.menu-item-activated, header .main-header-menu > .menu-item.menu-item-activated, #masthead .main-header-menu > .menu-item.menu-item-activated, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.menu-item-activated, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.menu-item-activated, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.menu-item-activated, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.menu-item-activated{ border-bottom: 5px solid #004FFF !important; } .site-header-section .ast-builder-menu-1 { align-items: stretch !important; height: 100%; } @media (max-width: 1380px) and (min-width: 1025px) { header .main-navigation-menu > .menu-item > .menu-link, header .main-navigation-menu > .menu-item > .menu-label, #masthead .main-navigation-menu > .menu-item > .menu-link, #masthead .main-navigation-menu > .menu-item > .menu-label, header #ast-hf-menu-1 > .menu-item > .menu-link, header #ast-hf-menu-1 > .menu-item > .menu-label, #masthead #ast-hf-menu-1 > .menu-item > .menu-link, #masthead #ast-hf-menu-1 > .menu-item > .menu-label, header #primary-menu > .menu-item > .menu-link, header #primary-menu > .menu-item > .menu-label, #masthead #primary-menu > .menu-item > .menu-link, #masthead #primary-menu > .menu-item > .menu-label, header .ast-hf-menu-1 > .menu-item > .menu-link, header .ast-hf-menu-1 > .menu-item > .menu-label, #masthead .ast-hf-menu-1 > .menu-item > .menu-link, #masthead .ast-hf-menu-1 > .menu-item > .menu-label, header .main-header-menu > .menu-item > .menu-link, header .main-header-menu > .menu-item > .menu-label, #masthead .main-header-menu > .menu-item > .menu-link, #masthead .main-header-menu > .menu-item > .menu-label, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label { padding: 0.5rem 0.75rem !important; margin: 0 0.3rem !important; font-size: 0.95rem !important; } } @media (max-width: 1220px) and (min-width: 1025px) { header .main-navigation-menu > .menu-item > .menu-link, header .main-navigation-menu > .menu-item > .menu-label, #masthead .main-navigation-menu > .menu-item > .menu-link, #masthead .main-navigation-menu > .menu-item > .menu-label, header #ast-hf-menu-1 > .menu-item > .menu-link, header #ast-hf-menu-1 > .menu-item > .menu-label, #masthead #ast-hf-menu-1 > .menu-item > .menu-link, #masthead #ast-hf-menu-1 > .menu-item > .menu-label, header #primary-menu > .menu-item > .menu-link, header #primary-menu > .menu-item > .menu-label, #masthead #primary-menu > .menu-item > .menu-link, #masthead #primary-menu > .menu-item > .menu-label, header .ast-hf-menu-1 > .menu-item > .menu-link, header .ast-hf-menu-1 > .menu-item > .menu-label, #masthead .ast-hf-menu-1 > .menu-item > .menu-link, #masthead .ast-hf-menu-1 > .menu-item > .menu-label, header .main-header-menu > .menu-item > .menu-link, header .main-header-menu > .menu-item > .menu-label, #masthead .main-header-menu > .menu-item > .menu-link, #masthead .main-header-menu > .menu-item > .menu-label, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-label, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-label { padding: 0.45rem 0.45rem !important; margin: 0 0.15rem !important; font-size: 0.88rem !important; } } @media (max-width: 1120px) and (min-width: 1025px) { header .main-navigation-menu, #masthead .main-navigation-menu, header #ast-hf-menu-1, #masthead #ast-hf-menu-1, header #primary-menu, #masthead #primary-menu, header .ast-hf-menu-1, #masthead .ast-hf-menu-1, header .main-header-menu:not(#ast-hf-account-menu), #masthead .main-header-menu:not(#ast-hf-account-menu), header .ast-nav-menu:not(.footer-navigation .ast-nav-menu):not(#ast-hf-account-menu), #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu):not(#ast-hf-account-menu), header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]):not(#ast-hf-account-menu), #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]):not(#ast-hf-account-menu) { flex-wrap: wrap !important; justify-content: flex-end; row-gap: 0.25rem; } header .main-navigation-menu > .menu-item, #masthead .main-navigation-menu > .menu-item, header #ast-hf-menu-1 > .menu-item, #masthead #ast-hf-menu-1 > .menu-item, header #primary-menu > .menu-item, #masthead #primary-menu > .menu-item, header .ast-hf-menu-1 > .menu-item, #masthead .ast-hf-menu-1 > .menu-item, header .main-header-menu > .menu-item, #masthead .main-header-menu > .menu-item, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item { height: auto; } } /* First item no left margin, last item no right margin */ header .main-navigation-menu > .menu-item:first-child > .menu-link, #masthead .main-navigation-menu > .menu-item:first-child > .menu-link, header #ast-hf-menu-1 > .menu-item:first-child > .menu-link, #masthead #ast-hf-menu-1 > .menu-item:first-child > .menu-link, header #primary-menu > .menu-item:first-child > .menu-link, #masthead #primary-menu > .menu-item:first-child > .menu-link, header .ast-hf-menu-1 > .menu-item:first-child > .menu-link, #masthead .ast-hf-menu-1 > .menu-item:first-child > .menu-link, header .main-header-menu > .menu-item:first-child > .menu-link, #masthead .main-header-menu > .menu-item:first-child > .menu-link, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item:first-child > .menu-link, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item:first-child > .menu-link { margin-left: 0 !important; } header .main-navigation-menu > .menu-item:last-child > .menu-link, #masthead .main-navigation-menu > .menu-item:last-child > .menu-link, header #ast-hf-menu-1 > .menu-item:last-child > .menu-link, #masthead #ast-hf-menu-1 > .menu-item:last-child > .menu-link, header #primary-menu > .menu-item:last-child > .menu-link, #masthead #primary-menu > .menu-item:last-child > .menu-link, header .ast-hf-menu-1 > .menu-item:last-child > .menu-link, #masthead .ast-hf-menu-1 > .menu-item:last-child > .menu-link, header .main-header-menu > .menu-item:last-child > .menu-link, #masthead .main-header-menu > .menu-item:last-child > .menu-link, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item:last-child > .menu-link, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item:last-child > .menu-link { margin-right: 0 !important; } /* Hide Astra's default dropdown toggles for first-level items (HEADER ONLY) */ header .main-navigation-menu > .menu-item > .menu-link + .dropdown-menu-toggle, #masthead .main-navigation-menu > .menu-item > .menu-link + .dropdown-menu-toggle, header .main-navigation-menu > .menu-item > .menu-link + .ast-menu-toggle, #masthead .main-navigation-menu > .menu-item > .menu-link + .ast-menu-toggle, header .main-navigation-menu > .menu-item > .ast-menu-toggle, #masthead .main-navigation-menu > .menu-item > .ast-menu-toggle, header #ast-hf-menu-1 > .menu-item > .menu-link + .dropdown-menu-toggle, #masthead #ast-hf-menu-1 > .menu-item > .menu-link + .dropdown-menu-toggle, header #ast-hf-menu-1 > .menu-item > .menu-link + .ast-menu-toggle, #masthead #ast-hf-menu-1 > .menu-item > .menu-link + .ast-menu-toggle, header #ast-hf-menu-1 > .menu-item > .ast-menu-toggle, #masthead #ast-hf-menu-1 > .menu-item > .ast-menu-toggle, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link + .dropdown-menu-toggle, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link + .dropdown-menu-toggle, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link + .ast-menu-toggle, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .menu-link + .ast-menu-toggle, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .ast-menu-toggle, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .ast-menu-toggle, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link + .dropdown-menu-toggle, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link + .dropdown-menu-toggle, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link + .ast-menu-toggle, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .menu-link + .ast-menu-toggle, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .ast-menu-toggle, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .ast-menu-toggle { display: none !important; } /* Hide submenus in main navigation (they'll be in offcanvas) - HEADER ONLY */ header .main-navigation-menu > .menu-item > .sub-menu, #masthead .main-navigation-menu > .menu-item > .sub-menu, header #ast-hf-menu-1 > .menu-item > .sub-menu, #masthead #ast-hf-menu-1 > .menu-item > .sub-menu, header #primary-menu > .menu-item > .sub-menu, #masthead #primary-menu > .menu-item > .sub-menu, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .sub-menu, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item > .sub-menu, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .sub-menu, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item > .sub-menu { display: none !important; } @media (min-width: 1025px) { header .main-navigation-menu > .menu-item.use-dropdown-menu > .sub-menu, header .main-navigation-menu > .menu-item.uses-desktop-dropdown > .sub-menu, #masthead .main-navigation-menu > .menu-item.use-dropdown-menu > .sub-menu, #masthead .main-navigation-menu > .menu-item.uses-desktop-dropdown > .sub-menu, header #ast-hf-menu-1 > .menu-item.use-dropdown-menu > .sub-menu, header #ast-hf-menu-1 > .menu-item.uses-desktop-dropdown > .sub-menu, #masthead #ast-hf-menu-1 > .menu-item.use-dropdown-menu > .sub-menu, #masthead #ast-hf-menu-1 > .menu-item.uses-desktop-dropdown > .sub-menu, header #primary-menu > .menu-item.use-dropdown-menu > .sub-menu, header #primary-menu > .menu-item.uses-desktop-dropdown > .sub-menu, #masthead #primary-menu > .menu-item.use-dropdown-menu > .sub-menu, #masthead #primary-menu > .menu-item.uses-desktop-dropdown > .sub-menu, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.use-dropdown-menu > .sub-menu, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.uses-desktop-dropdown > .sub-menu, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.use-dropdown-menu > .sub-menu, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.uses-desktop-dropdown > .sub-menu, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.use-dropdown-menu > .sub-menu, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.uses-desktop-dropdown > .sub-menu, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.use-dropdown-menu > .sub-menu, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.uses-desktop-dropdown > .sub-menu { display: block !important; } header .main-navigation-menu > .menu-item.use-dropdown-menu, header .main-navigation-menu > .menu-item.uses-desktop-dropdown, #masthead .main-navigation-menu > .menu-item.use-dropdown-menu, #masthead .main-navigation-menu > .menu-item.uses-desktop-dropdown, header #ast-hf-menu-1 > .menu-item.use-dropdown-menu, header #ast-hf-menu-1 > .menu-item.uses-desktop-dropdown, #masthead #ast-hf-menu-1 > .menu-item.use-dropdown-menu, #masthead #ast-hf-menu-1 > .menu-item.uses-desktop-dropdown, header #primary-menu > .menu-item.use-dropdown-menu, header #primary-menu > .menu-item.uses-desktop-dropdown, #masthead #primary-menu > .menu-item.use-dropdown-menu, #masthead #primary-menu > .menu-item.uses-desktop-dropdown, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.use-dropdown-menu, header .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.uses-desktop-dropdown, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.use-dropdown-menu, #masthead .ast-nav-menu:not(.footer-navigation .ast-nav-menu) > .menu-item.uses-desktop-dropdown, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.use-dropdown-menu, header ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.uses-desktop-dropdown, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.use-dropdown-menu, #masthead ul[id*="menu"]:not(#astra-footer-menu):not([id*="footer"]) > .menu-item.uses-desktop-dropdown { position: relative; } header .menu-item.use-dropdown-menu > .sub-menu, header .menu-item.uses-desktop-dropdown > .sub-menu, #masthead .menu-item.use-dropdown-menu > .sub-menu, #masthead .menu-item.uses-desktop-dropdown > .sub-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 999; min-width: 260px; margin: 0; padding: 0.75rem 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } header .menu-item.use-dropdown-menu:hover > .sub-menu, header .menu-item.use-dropdown-menu:focus-within > .sub-menu, header .menu-item.uses-desktop-dropdown:hover > .sub-menu, header .menu-item.uses-desktop-dropdown:focus-within > .sub-menu, #masthead .menu-item.use-dropdown-menu:hover > .sub-menu, #masthead .menu-item.use-dropdown-menu:focus-within > .sub-menu, #masthead .menu-item.uses-desktop-dropdown:hover > .sub-menu, #masthead .menu-item.uses-desktop-dropdown:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } header .menu-item.use-dropdown-menu .sub-menu .menu-item, header .menu-item.uses-desktop-dropdown .sub-menu .menu-item, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-item, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-item { position: relative; display: block; width: 100%; height: auto; border-bottom: 0; } header .menu-item.use-dropdown-menu .sub-menu .menu-link, header .menu-item.use-dropdown-menu .sub-menu .menu-label, header .menu-item.uses-desktop-dropdown .sub-menu .menu-link, header .menu-item.uses-desktop-dropdown .sub-menu .menu-label, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-link, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-label, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-link, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-label { display: flex !important; align-items: center; justify-content: space-between; width: 100%; margin: 0 !important; padding: 0.8rem 1.25rem !important; color: #111 !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap; background: transparent; } header .menu-item.use-dropdown-menu .sub-menu .menu-label, header .menu-item.uses-desktop-dropdown .sub-menu .menu-label, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-label, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-label { cursor: default !important; } header .menu-item.use-dropdown-menu .sub-menu .menu-link:hover, header .menu-item.use-dropdown-menu .sub-menu .menu-link:focus, header .menu-item.uses-desktop-dropdown .sub-menu .menu-link:hover, header .menu-item.uses-desktop-dropdown .sub-menu .menu-link:focus, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-link:hover, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-link:focus, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-link:hover, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-link:focus { background: #f5f7fa; color: #004FFF !important; text-decoration: none !important; } header .menu-item.use-dropdown-menu .sub-menu .menu-chevron, header .menu-item.uses-desktop-dropdown .sub-menu .menu-chevron, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-chevron, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-chevron { display: inline-flex; margin-left: 1rem; font-size: 0.85rem; } header .menu-item.use-dropdown-menu .sub-menu .sub-menu, header .menu-item.uses-desktop-dropdown .sub-menu .sub-menu, #masthead .menu-item.use-dropdown-menu .sub-menu .sub-menu, #masthead .menu-item.uses-desktop-dropdown .sub-menu .sub-menu { position: absolute; top: -0.75rem; left: calc(100% - 1px); min-width: 260px; margin: 0; padding: 0.75rem 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } header .menu-item.use-dropdown-menu .sub-menu .menu-item:hover > .sub-menu, header .menu-item.use-dropdown-menu .sub-menu .menu-item:focus-within > .sub-menu, header .menu-item.uses-desktop-dropdown .sub-menu .menu-item:hover > .sub-menu, header .menu-item.uses-desktop-dropdown .sub-menu .menu-item:focus-within > .sub-menu, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-item:hover > .sub-menu, #masthead .menu-item.use-dropdown-menu .sub-menu .menu-item:focus-within > .sub-menu, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-item:hover > .sub-menu, #masthead .menu-item.uses-desktop-dropdown .sub-menu .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } } /* Offcanvas Menu Container - positioned below header */ #offcanvas-menu { width: 100%; max-width: 100%; background-color: #ffffff; top: var(--header-height, 80px) !important; height: calc(100vh - var(--header-height, 80px)) !important; border-top: 1px solid #e0e0e0; transition: transform 0.3s ease-in-out !important; } #offcanvas-menu .offcanvas-body { padding: 0; overflow: hidden; height: 100%; } /* Close button styling */ .offcanvas-close-btn { position: absolute; top: 1rem; right: 1rem; z-index: 100; background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; width: 36px; height: 36px; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; transition: background-color 0.2s ease, color 0.2s ease; padding: 0 0 5px !important; } .offcanvas-close-btn:hover { background-color: #f0f0f0; color: #000; } /* Remove backdrop so header is still clickable */ .offcanvas-backdrop { display: none !important; } /* Menu Container */ .menu-container { position: relative; width: 100%; height: 100%; } /* Menu Panels (Top Level - One per first-level menu item) */ .menu-panel { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 0; padding: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transform: translateX(100%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; } .menu-panel.active { position: relative; opacity: 1; visibility: visible; transform: translateX(0); } /* Menu Sidebar (Left - Second Level Items) */ .menu-sidebar { background-color: #ffffff; padding: 2rem; border-right: 1px solid #e0e0e0; overflow-y: auto; height: 100%; min-width: 0; } .menu-sidebar-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.5rem; /*border-bottom: 1px solid #e0e0e0;*/ text-decoration: underline; } .menu-sidebar-title-link { color: inherit; text-decoration: underline; transition: color 0.2s ease; } .menu-sidebar-title-link:hover { color: #0066cc; } .menu-sidebar-list { list-style: none; padding: 0; margin: 0; } .menu-sidebar-list .menu-item { margin: 0; padding: 0; } .menu-sidebar-list .menu-link { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; color: #333; text-decoration: none; /* border-bottom: 1px solid #e0e0e0;*/ transition: color 0.2s ease, background-color 0.2s ease; cursor: pointer; font-weight:500; } .menu-sidebar-list .menu-item.shop-icon > .menu-link .menu-text { display: inline-flex; align-items: center; gap: 0.5rem; } .menu-sidebar-list .menu-item.shop-icon > .menu-link .menu-text::before { content: ""; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23004b8e'/%3E%3Cpath d='M6 7h2l1.1 6.2a1 1 0 0 0 1 .8h6.2a1 1 0 0 0 1-.8L18.5 9H9.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='16.8' r='1' fill='%23fff'/%3E%3Ccircle cx='15.2' cy='16.8' r='1' fill='%23fff'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .menu-sidebar-list .menu-link:hover { color: #0066cc; background-color: #ffffff; } .menu-sidebar-list .menu-item.active .menu-link { color: #0066cc; background-color: #ffffff; font-weight: 600; } .menu-sidebar-list .menu-chevron { color: #0066cc; font-size: 1.2rem; font-weight: bold; margin-left: 1rem; } /* Menu Content Area (Right - Third Level Items) */ .menu-content { background-color: #f8f9fa; overflow-x: hidden; overflow-y: auto; height: 100%; position: relative; display: flex; flex-direction: row; padding: 0; } /* Content panel - hidden by default, shown when active */ /* Content Panel Back Button */ /* Back Button (nested panels - 4th level+) */ .menu-back-btn, .content-back-btn { display: flex; align-items: center; gap: 0.5rem; border: none; margin-bottom: 2rem; color: #000000; background-color:#E3E5E4; font-weight:500; cursor: pointer; transition: color 0.2s ease; } .menu-back-btn:hover, .content-back-btn:hover { color: #fff; } .menu-back-btn .back-arrow, .content-back-btn .back-arrow { font-size: 1rem; } /* Content Panel Title */ .content-panel-title { font-size: 1.25rem; font-weight: 600; color: #003366; margin: 0 0 1rem 0; padding-bottom: 0.5rem; text-decoration: underline; } .menu-content-list { list-style: none; padding: 0; margin: 0; } .menu-content-list .menu-item { margin: 0; padding: 0; } .menu-content-list .menu-link { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; color: #333; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; cursor: pointer; font-weight:500; } .menu-content-list .menu-link:hover { color: #0066cc; background-color: #f8f9fa; } .menu-content-list .menu-chevron { color: #0066cc; font-size: 1.2rem; font-weight: bold; margin-left: 1rem; } .menu-empty-state { padding: 2rem; text-align: center; } /* Content panels sit in the content area - slide in from right */ .menu-content-panel { flex: 1 1 0; min-width: 220px; max-width: min(500px, 25vw); padding: 2rem; background-color: #f8f9fa; border-right: 1px solid #e0e0e0; height: 100%; overflow-y: auto; transform: translateX(100%); opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .menu-content-panel.active { transform: translateX(0); opacity: 1; visibility: visible; position: relative; } .menu-panel.nested-panel { position: relative; flex: 1 1 0; min-width: 220px; max-width: min(500px, 25vw); height: 100%; background-color: #f8f9fa; padding: 2rem; overflow-y: auto; border-right: 1px solid #e0e0e0; transform: translateX(-100%); opacity: 0; visibility: hidden; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; display: none; } .menu-panel.nested-panel.active, .menu-panel.nested-panel.slide-in { transform: translateX(0); opacity: 1; visibility: visible; display: block; } .menu-panel.nested-panel.slide-out { transform: translateX(100%); opacity: 0; visibility: visible; display: block; } /* Nested Panel Title */ .menu-panel.nested-panel .menu-panel-title { font-size: 1.25rem; font-weight: 600; color: #003366; margin: 0 0 1rem 0; padding-bottom: 0.5rem; text-decoration: underline; } /* Nested Panel Menu List */ .menu-panel.nested-panel .menu-list { list-style: none; padding: 0; margin: 0; } .menu-panel.nested-panel .menu-list .menu-item { margin: 0; padding: 0; } .menu-panel.nested-panel .menu-list .menu-link { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; color: #333; text-decoration: none; transition: color 0.2s ease; cursor: pointer; font-weight: 500; } .menu-panel.nested-panel .menu-list .menu-link:hover { color: #0066cc; } .menu-panel.nested-panel .menu-list .menu-chevron { color: #0066cc; font-size: 1.2rem; font-weight: bold; margin-left: 1rem; } /* Menu Text */ .menu-text { flex: 1; } /* Responsive Design - tablet/small desktop: single-panel overlay to prevent overflow */ @media (max-width: 1200px) and (min-width: 1025px) { .menu-panel { grid-template-columns: 1fr; } .menu-panel .menu-sidebar { max-width: 100%; } .menu-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; } .menu-content-panel { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; } .menu-panel.nested-panel { position: absolute; top: 0; left: 0; width: 100%; min-width: 100%; max-width: 100%; } } @media (max-width: 1024px) { /* Hide Astra's default mobile menu popup */ .ast-mobile-popup-drawer, .ast-mobile-popup-content, #ast-mobile-popup, .ast-mobile-popup-inner { display: none !important; } .offcanvas-close-btn{ display: none; } /* Make our offcanvas full width on mobile, positioned below header */ #offcanvas-menu { width: 100% !important; max-width: 100% !important; /* Use the same header height positioning as desktop */ top: var(--header-height, 80px) !important; height: calc(100vh - var(--header-height, 80px)) !important; } #offcanvas-menu .offcanvas-body { overflow: hidden; height: 100%; } .menu-container { position: relative; overflow: hidden; height: 100%; width: 100%; } /* Mobile Overview Panel - full screen on mobile */ .mobile-overview-panel { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .mobile-overview-panel.active { display: block !important; } .mobile-overview-panel .menu-sidebar { width: 100%; max-width: 100%; height: 100%; border-right: none; overflow-y: auto; padding:1rem; } .mobile-full-width { width: 100% !important; max-width: 100% !important; } /* On mobile, menu panels are full screen overlays */ .menu-panel { display: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; grid-template-columns: 1fr; grid-template-rows: 1fr; z-index: 2; background: #fff; } .menu-panel.active { display: block !important; } /* On mobile, sidebar takes full screen initially */ .menu-panel:not(.mobile-overview-panel) .menu-sidebar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: none; border-bottom: none; overflow-y: auto; padding: 1rem; z-index: 1; background: #fff; } .menu-sidebar-title { font-size: 1.25rem; margin-bottom: 1rem; } /* Content area is absolutely positioned to slide over sidebar */ .menu-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column; z-index: 5; background: transparent; pointer-events: none; display: block; overflow-x: hidden; } /* Content panels slide in from right on mobile */ .menu-content-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; padding: 1rem; background: #fff; overflow-y: auto; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; z-index: 5; } .menu-content-panel.active { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; } /* Nested panels slide in from right on mobile */ .menu-panel.nested-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; min-width: 100%; padding: 1rem; background: #f8f9fa; overflow-y: auto; z-index: 10; pointer-events: none; } .menu-panel.nested-panel.active, .menu-panel.nested-panel.slide-in { pointer-events: auto; } /* Adjust close button for mobile */ .offcanvas-close-btn { top: 0.5rem; right: 0.5rem; z-index: 100; } /* Remove the CSS pseudo-element back button since we have a real one now */ .menu-panel:not(.mobile-overview-panel) .menu-sidebar::before { display: none; } } /* Hide mobile overview panel and mobile back button on desktop - match isMobile() breakpoint */ @media (min-width: 1025px) { .mobile-overview-panel { display: none !important; } .mobile-back-to-overview { display: none !important; } } /* Mobile back button styling */ .mobile-back-to-overview { display: none; align-items: center; gap: 0.5rem; background: #E3E5E4; border: none; margin-bottom: 1rem; color: #000; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; text-align: left; } .mobile-back-to-overview:hover { background-color: #d0d2d1; } @media (max-width: 1024px) { .mobile-back-to-overview { display: flex; } /* Remove the CSS pseudo-element back button since we have a real one now */ .menu-panel:not(.mobile-overview-panel) .menu-sidebar::before { display: none; } } /* Animation for sliding nested panels */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } /* Slide animations handled by transform transitions above */