.breadcrumbs { margin-bottom:20px; } /* ========================================================= GMC DESKTOP MEGA MENU + JS HOVER INTENT V2 Requires JavaScript to add .mega-menu-open to the active top-level menu item. Key changes in V2: - Top-level :hover does NOT open a menu. - All submenu levels below the column heading are flattened into normal document flow; no deep fly-out menus remain. - The JS handler uses the active panel's bounding rectangle to prevent sibling top-level menus from taking over while the pointer is still visually inside the active panel. ========================================================= */ @media (min-width: 1330px) { #top-nav { position: relative; overflow: visible !important; } #desktop-menu-main-menu, #desktop-menu-main-menu > li { position: static !important; } #desktop-menu .nav-item.active::after{ background-color:#fff; } /* All top-level mega-menu panels */ /* ===================================================== FIRST SUBMENU LEVEL = FULL-WIDTH MEGA MENU PANEL ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children > ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: 20px; row-gap: 30px; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 32px max(40px, calc((100vw - 1280px) / 2)); background: #FFF !important; color: #003f87; border: 0 !important; border-top: 0 !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; z-index: 9999 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; transition: opacity 120ms ease, visibility 0s linear 120ms !important; } /* ===================================================== OPEN STATE JavaScript controls pointer opening. :focus-within remains for keyboard accessibility. ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children.mega-menu-open > ul, #desktop-menu-main-menu > li.menu-item-has-children:focus-within > ul { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: opacity 120ms ease, visibility 0s linear 0s !important; } /* Never allow ordinary theme :hover rules to open a competing top-level mega-menu panel. */ #desktop-menu-main-menu > li.menu-item-has-children:hover:not(.mega-menu-open):not(:focus-within) > ul { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ===================================================== SECOND LEVEL = MEGA-MENU COLUMNS ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children > ul > li { position: static !important; display: block !important; float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 0px 10px 0px !important; overflow: visible !important; color: #003f87; !important; } #desktop-menu-main-menu > li.menu-item-has-children > ul > li > a { display: block !important; margin: 0 0 0px 0 !important; padding: 0 0 0px 0 !important; font-size: 17px; font-weight: 700; line-height: 1.25; color: #003f87; white-space: normal !important; } /* ===================================================== ALL DEEPER SUBMENU LEVELS Flatten every UL below the column heading. This intentionally replaces the prior CSS which only normalized one nested level. It prevents fourth-level and deeper menu items from reverting to the theme's original hover/fly-out behavior. ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children > ul ul { display: block !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; /* * IMPORTANT: * Do not force deep submenu descendants to be visible/clickable. * They must inherit those states from their top-level mega-menu. * * When the top-level panel is closed: * visibility = hidden * pointer-events = none * * When the top-level panel is open: * visibility = visible * pointer-events = auto * * This prevents invisible links from another top-level menu * from overlapping and intercepting clicks in the active menu. */ visibility: inherit !important; pointer-events: inherit !important; transform: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transition: none !important; } /* Flatten every LI beneath the column level. */ #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li { display: block !important; position: static !important; float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border-left:1px solid #e9e9e4; } /* Links at every level below the column heading. */ #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li > a { display: block !important; padding: 6px 0 0 10px !important; font-size: 15px; font-weight: 400; line-height: 1.35; white-space: normal !important; } #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li > a:hover, #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li > a:focus { color: #003f87; text-decoration: underline; } /* Give deeper parent items a subtle heading treatment while keeping their children visible below them. */ #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li.menu-item-has-children > a { font-weight: 600; } /* indent third row */ #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li.menu-item-has-children > ul { padding-left: 10px !important; border:0px; } #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li.menu-item-has-children > ul > li { border-left:0px; } #desktop-menu-main-menu > li.menu-item-has-children > ul ul > li.menu-item-has-children > ul > li > a { border-left:0px; } /* ===================================================== DISABLE ALL NESTED DROPDOWN / FLY-OUT ARROWS ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children > ul li.menu-item-has-children > a::after { display: none !important; content: none !important; } /* Extra defense against theme hover rules that attempt to reposition or reveal deep fly-out submenus. */ #desktop-menu-main-menu > li.menu-item-has-children.mega-menu-open > ul li:hover > ul, #desktop-menu-main-menu > li.menu-item-has-children.mega-menu-open > ul li:focus-within > ul { display: block !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; opacity: 1 !important; /* * This rule is scoped to the active top-level menu only. * It is safe for descendants of that active menu to be * visible and clickable. */ visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* ===================================================== HARD SAFETY RULE FOR CLOSED TOP-LEVEL MENUS Even if the original theme has more-specific deep-menu hover rules, no descendant of a closed mega menu can receive pointer input. ===================================================== */ #desktop-menu-main-menu > li.menu-item-has-children:not(.mega-menu-open):not(:focus-within) > ul, #desktop-menu-main-menu > li.menu-item-has-children:not(.mega-menu-open):not(:focus-within) > ul * { pointer-events: none !important; visibility: hidden !important; } #desktop-menu .dropdown .dropdown-menu .nav-item .dropdown-item{ color: #003f87; } } /* ========================================================= NARROWER DESKTOPS ========================================================= */ @media (min-width: 1330px) and (max-width: 1500px) { #desktop-menu-main-menu > li.menu-item-has-children > ul { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } @media (max-width: 1329px) { /* Hide the submenu heading */ #mobile-main-menu li.mobile-expanded-group > a, #mobile-top-menu li.mobile-expanded-group > a { display: none !important; } /* Hide the JS-generated expand/contract button */ #mobile-main-menu li.mobile-expanded-group > .gmc-mobile-submenu-toggle, #mobile-top-menu li.mobile-expanded-group > .gmc-mobile-submenu-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Keep that submenu permanently expanded */ #mobile-main-menu li.mobile-expanded-group > .collapse, #mobile-top-menu li.mobile-expanded-group > .collapse { display: block !important; height: auto !important; max-height: none !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } }