/** * Header: dropdown panels + category pills (secondary nav row). * Desktop only (min-width: 1025px). Does not affect primary nav or mobile. */ @media screen and (min-width: 1025px) { /* -------------------------------------------------------------- * Category row (secondary nav): pills/chips with hover and active * -------------------------------------------------------------- */ /* Remove grey strip: override our pill bar + Kadence Customizer bottom row background */ #secondary-navigation { background: transparent !important; border-bottom: none !important; padding: 16px 0; } /* Kadence: .site-bottom-header-wrap .site-header-row-container-inner (header_bottom_background) */ #main-header .site-bottom-header-wrap .site-header-row-container-inner { background: transparent !important; } /* UL: #secondary-navigation .header-menu-container > ul (id="secondary-menu") */ #secondary-navigation .header-menu-container, #secondary-navigation .header-menu-container > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; row-gap: 16px; } /* Remove default li margins; allow clean wrap */ #secondary-navigation .header-menu-container > ul > li { margin: 0; } #secondary-navigation .header-menu-container > ul > li > a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 8px 14px !important; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.8); color: #374151 !important; font-weight: 500; font-size: 0.9rem; text-decoration: none !important; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } #secondary-navigation .header-menu-container > ul > li > a:hover, #secondary-navigation .header-menu-container > ul > li > a:focus, #secondary-navigation .header-menu-container > ul > li:hover > a { background: rgba(255, 255, 255, 1) !important; border-color: rgba(15, 23, 42, 0.15) !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } #secondary-navigation .header-menu-container > ul > li.current-menu-item > a, #secondary-navigation .header-menu-container > ul > li.current-menu-ancestor > a { background: #0891b2 !important; border-color: #0891b2 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25); } #secondary-navigation .header-menu-container > ul > li.current-menu-item > a:hover, #secondary-navigation .header-menu-container > ul > li.current-menu-ancestor > a:hover { background: #0e7490 !important; border-color: #0e7490 !important; color: #ffffff !important; } /* -------------------------------------------------------------- * Dropdown panels: primary + secondary nav * -------------------------------------------------------------- */ #site-navigation .header-menu-container > ul > li.menu-item-has-children, #secondary-navigation .header-menu-container > ul > li.menu-item-has-children { position: relative; overflow: visible; } /* Hover bridge: invisible area so submenu stays open when moving mouse down */ #site-navigation .header-menu-container > ul > li.menu-item-has-children::after, #secondary-navigation .header-menu-container > ul > li.menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; z-index: 1000; } /* Panel: flush under parent (no hover gap), modern SaaS-style shape */ #site-navigation .header-menu-container ul ul.sub-menu, #site-navigation .header-menu-container ul ul.submenu, #secondary-navigation .header-menu-container ul ul.sub-menu, #secondary-navigation .header-menu-container ul ul.submenu { top: 100% !important; margin-top: 0 !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 10px 20px -5px rgba(15, 23, 42, 0.08), 0 24px 48px -12px rgba(15, 23, 42, 0.12) !important; border: 1px solid rgba(15, 23, 42, 0.05) !important; padding: 10px 8px !important; min-width: 240px; overflow: visible !important; z-index: 1001; transform-origin: top; animation: kd-nav-dropdown-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Remove dividers (except Account which keeps its own) */ #site-navigation .header-menu-container > ul > li.menu-item-has-children:not(.cta-account) .sub-menu li, #site-navigation .header-menu-container > ul > li.menu-item-has-children:not(.cta-account) ul.sub-menu li, #secondary-navigation .header-menu-container > ul > li.menu-item-has-children .sub-menu li, #secondary-navigation .header-menu-container > ul > li.menu-item-has-children ul.sub-menu li { margin: 0; border: 0; padding: 0; } #site-navigation .header-menu-container > ul > li.menu-item-has-children:not(.cta-account) .sub-menu li + li, #site-navigation .header-menu-container > ul > li.menu-item-has-children:not(.cta-account) ul.sub-menu li + li, #secondary-navigation .header-menu-container .sub-menu li + li, #secondary-navigation .header-menu-container ul.sub-menu li + li { border-top: none !important; } /* Menu item links */ #site-navigation .header-menu-container ul ul.sub-menu li > a, #site-navigation .header-menu-container ul ul.submenu li > a, #secondary-navigation .header-menu-container ul ul.sub-menu li > a, #secondary-navigation .header-menu-container ul ul.submenu li > a { display: block; padding: 12px 14px !important; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; text-decoration: none !important; color: #0f172a !important; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } #site-navigation .header-menu-container ul ul.sub-menu li > a:hover, #site-navigation .header-menu-container ul ul.sub-menu li > a:focus, #site-navigation .header-menu-container ul ul.submenu li > a:hover, #site-navigation .header-menu-container ul ul.submenu li > a:focus, #secondary-navigation .header-menu-container ul ul.sub-menu li > a:hover, #secondary-navigation .header-menu-container ul ul.sub-menu li > a:focus, #secondary-navigation .header-menu-container ul ul.submenu li > a:hover, #secondary-navigation .header-menu-container ul ul.submenu li > a:focus { background-color: rgba(124, 58, 237, 0.06) !important; color: #6d28d9 !important; box-shadow: inset 3px 0 0 #7c3aed !important; outline: none; text-decoration: none !important; } #site-navigation .header-menu-container ul ul.sub-menu li > a:focus-visible, #site-navigation .header-menu-container ul ul.submenu li > a:focus-visible, #secondary-navigation .header-menu-container ul ul.sub-menu li > a:focus-visible, #secondary-navigation .header-menu-container ul ul.submenu li > a:focus-visible { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.9); background-color: rgba(148, 163, 184, 0.16) !important; } } @keyframes kd-nav-dropdown-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }