/* ============================================================================= Mega Menu — Click-to-open, full-width dropdown ============================================================================= */ /* Header sits above the body-level panel in the root stacking context. position: relative ensures z-index applies even on non-sticky/non-fixed pages. */ #main-header { position: relative; z-index: 100 !important; } .site-header-upper-inner-wrap { position: relative; z-index: 100; } /* Nav row transitions to panel colour on open, back to original on close */ .site-main-header-wrap { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #main-header.mega-menu-open .site-main-header-wrap { background-color: #F0F0F0 !important; } /* Full-width panel — JS lifts each .sub-menu to and adds .mega-panel. z-index: 99 sits below #main-header (100) in the root stacking context, so nav links are never covered. top and padding-top are set by JS. */ .mega-panel { position: fixed; left: 0; right: 0; width: 100%; z-index: 99; background-color: #F0F0F0; border-bottom: 1px solid rgba(116, 140, 164, 0.5); display: flex !important; flex-direction: column; padding: 32px 60px 0; margin: 0; list-style: none; clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; } /* Open state — JS adds .mega-open to both the

and the body-level panel */ .mega-panel.mega-open { clip-path: inset(0 0 0% 0); visibility: visible; opacity: 1 !important; transform: none !important; pointer-events: auto; transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* All top-level nav links change colour when any dropdown is open */ #main-header.mega-menu-open #primary-menu > li > a, #main-header.mega-menu-open #primary-menu > li > a .nav-drop-title-wrap { color: var(--global-palette3) !important; } /* ---- List layout (few items) ---- */ .mega-panel > li { border-bottom: 1px solid rgba(116, 140, 164, 0.5); } .mega-panel > li:last-child { border-bottom: none; } /* ---- Grid layout — .mega-grid added by JS when child count > 5 ---- */ .mega-panel.mega-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); padding-bottom: 32px; } .mega-panel.mega-grid > li { border-bottom: none; } /* Two continuous vertical dividers */ .mega-panel.mega-grid::before, .mega-panel.mega-grid::after { content: ''; position: absolute; top: var(--panel-content-top, 32px); bottom: 32px; width: 1px; background-color: rgba(116, 140, 164, 0.5); pointer-events: none; } /* Column width = (100% - 120px padding) / 3 Divider 1: 60px + 1 col = 33.333% + 20px Divider 2: 60px + 2 cols = 66.666% - 20px */ .mega-panel.mega-grid::before { left: calc(33.333% + 20px); } .mega-panel.mega-grid::after { left: calc(66.666% - 20px); } .mega-panel.mega-grid a { padding: 16px 0; } .mega-panel.mega-grid > li:nth-child(3n+2), .mega-panel.mega-grid > li:nth-child(3n+3) { padding-left: 40px; } /* Pull content away from the vertical dividers on the right of cols 1 and 2 */ .mega-panel.mega-grid > li:nth-child(3n+1), .mega-panel.mega-grid > li:nth-child(3n+2) { padding-right: 40px; } /* ---- Link typography ---- */ .mega-panel a { color: #0C244A !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; text-decoration: none; font-size: 2rem; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; transition: opacity 0.2s ease; } .mega-panel a:hover { opacity: 0.5; } @media (max-width: 1587px) { .mega-panel a { font-size: 1.9rem; } } @media (max-width: 1450px) { .mega-panel a { font-size: 1.6rem; } } @media (max-width: 1380px) { .mega-panel a { font-size: 1.4rem; } } @media (max-width: 1200px) { .mega-panel a { font-size: 1.3rem; } } .mega-panel-arrow { flex-shrink: 0; transition: transform 0.25s ease; } .mega-panel a:hover .mega-panel-arrow { transform: translateX(4px); }