/* ==========================================================================
Max Mega Menu — Abilities Centre brand overrides
Targets: #mega-menu-wrap-top-menu (location slug: top-menu)
Brand: primary #002F86 / secondary #A50064
========================================================================== */
/* ------------------------------------------------------------------
Focus ring — accessible, matches site focus style
------------------------------------------------------------------ */
#mega-menu-wrap-top-menu.mega-keyboard-navigation .mega-menu-toggle:focus,
#mega-menu-wrap-top-menu.mega-keyboard-navigation #mega-menu-top-menu a:focus,
#mega-menu-wrap-top-menu.mega-keyboard-navigation #mega-menu-top-menu li.mega-menu-item a.mega-menu-link:focus {
outline: 3px solid var(--ac-color-secondary) !important;
outline-offset: 2px !important;
}
@media only screen and (min-width: 769px) {
/* --- Strip MMM's default dark bar --- */
#mega-menu-wrap-top-menu {
background: transparent !important;
background-color: transparent !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
/* ---- Top-level menu items ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link {
color: var(--ac-color-primary) !important; /* #002F86 */
background: transparent !important;
font-family: var(--ac-font-family) !important;
font-size: var(--ac-font-size-base) !important;
font-weight: var(--ac-font-weight-semibold) !important;
line-height: 1.3 !important;
padding: 0.5em 0.75rem !important;
border: 0 !important;
border-radius: var(--ac-radius-sm) !important;
box-sizing: border-box !important;
text-decoration: none !important;
height: auto !important;
min-height: 0 !important;
transition:
color var(--ac-duration-short) var(--ac-ease-standard),
background-color var(--ac-duration-short) var(--ac-ease-standard) !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
color: var(--ac-color-white) !important;
background: var(--ac-color-blue) !important; /* #0081C9 */
}
/* Dropdown indicator arrow */
#mega-menu-wrap-top-menu #mega-menu-top-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
color: inherit !important;
}
/* ---- Flyout (standard dropdown) panel ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu {
background: var(--ac-color-white) !important;
border: 1px solid var(--ac-color-border) !important;
border-radius: var(--ac-radius-md) !important;
box-shadow: var(--ac-shadow-md) !important;
padding: var(--ac-space-2) 0 !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
color: var(--ac-color-text) !important;
background: var(--ac-color-white) !important;
font-size: 1rem !important;
font-weight: 400 !important;
padding: 0.45rem 1.25rem !important;
border: 0 !important;
white-space: nowrap !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
color: var(--ac-color-white) !important;
background-color: var(--ac-color-blue) !important; /* #0081C9 */
}
/* ---- Full-width mega panel ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
background: var(--ac-color-white) !important;
border: 1px solid var(--ac-color-border) !important;
border-top: 3px solid var(--ac-color-primary) !important;
border-radius: 0 0 var(--ac-radius-md) var(--ac-radius-md) !important;
box-shadow: 0 8px 32px rgba(0, 47, 134, 0.12) !important;
padding: var(--ac-space-6) var(--ac-space-4) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
/* Column wrapper */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard {
padding: 0 var(--ac-space-4) !important;
border-right: 1px solid var(--ac-color-border) !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column:last-child,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard:last-child {
border-right: 0 !important;
}
/* ---- Column wrapper — hover bg on entire column ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard {
border-radius: 8px !important;
padding: 0.75rem 0.75rem 1rem !important;
transition: background-color 0.2s ease !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard:hover {
background-color: color-mix(in srgb, #002F86 6%, white) !important;
}
/* ---- Column heading ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link {
color: #002F86 !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.2 !important;
padding: 0 0 0.75rem !important;
border: 0 !important;
margin-bottom: 0.5rem !important;
display: block !important;
/* 25% navy underline via background-image gradient — no positioning needed */
background-image: linear-gradient(#002F86, #002F86) !important;
background-size: 25% 3px !important;
background-position: 0 100% !important;
background-repeat: no-repeat !important;
transition: color 0.2s ease, background-size 0.25s ease, background-image 0.2s ease !important;
}
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column > a.mega-menu-link:hover,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > a.mega-menu-link:hover {
color: var(--ac-color-white) !important;
background: var(--ac-color-blue) !important; /* #0081C9 */
background-image: none !important;
border-radius: var(--ac-radius-sm) !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* ---- Sub-items — scoped so they don't override the heading ---- */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
color: #333333 !important;
font-size: 1rem !important;
font-weight: 400 !important;
padding: 0.3rem 0 !important;
border: 0 !important;
background: transparent !important;
display: block !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}
/* Blue highlight on hovered sub-item — same as top nav */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
color: var(--ac-color-white) !important;
background: var(--ac-color-blue) !important; /* #0081C9 */
text-decoration: none !important;
border-radius: var(--ac-radius-sm) !important;
padding: 0.3rem 0.5rem !important;
}
/* Widget / image columns — no divider on themselves */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item-type-widget {
border-right: 0 !important;
}
/* ---- Next Event widget: fix squished layout when event has no type ----
WPEM renders .wpem-event-infomation INSIDE the 80px .event-widget
when no event type is set (no nested link → browser keeps everything
in the same ). Detect with :has() and switch to column layout.
Events WITH a type already render correctly as siblings — untouched. */
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) {
width: 100% !important;
flex: none !important;
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: var(--ac-color-text) !important;
}
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) .wpem-event-banner-img img {
width: 100% !important;
height: 110px !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) .wpem-event-infomation {
padding: var(--ac-space-2) var(--ac-space-3) !important;
}
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) .wpem-heading-text {
font-size: var(--ac-font-size-sm) !important;
font-weight: var(--ac-font-weight-semibold) !important;
color: var(--ac-color-primary) !important;
margin: 0 0 var(--ac-space-1) !important;
white-space: normal !important;
word-break: normal !important;
}
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) .wpem-event-date-time,
#mega-menu-top-menu .wpem-single-event-widget-list-view
> .event-widget:has(.wpem-event-infomation) .wpem-event-location {
font-size: var(--ac-font-size-xs) !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* Also remove the divider on the text column that sits directly before an image widget */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-column-standard:has(+ li.widget_media_image) {
border-right: 0 !important;
}
/* Image widget column: fade left edge by masking the img directly */
#mega-menu-wrap-top-menu #mega-menu-top-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.widget_media_image img {
display: block !important;
-webkit-mask-image: linear-gradient(to right, transparent 0px, black 32px) !important;
mask-image: linear-gradient(to right, transparent 0px, black 32px) !important;
}
/* ---- Mobile toggle button inside MMM ---- */
#mega-menu-wrap-top-menu .mega-menu-toggle {
display: none !important;
}
} /* end @media min-width 769px */
/* ---- Mobile: let MMM render its own mobile panel ---- */
@media only screen and (max-width: 768px) {
#mega-menu-wrap-top-menu {
display: none !important; /* We use our own mobile panel instead */
}
}