/** * WPA Nav Mega — Frontend CSS (v1.0.2) * * Full-width mega menu panels styled with WPA brand tokens. * Only active above the tablet breakpoint (981px). Mobile is untouched. * * v1.0.2: Fixed panel viewport-width rendering, heading font specificity, * double divider lines, and header-flush positioning. */ /* ========================================================================= Hide the ACF-rendered panel template container ========================================================================= */ #wpa-nav-mega-panels { display: none !important; } /* When there's only 1 column AND a featured block, cap the column width */ .wpa-mega-panel--with_featured[data-col-count="1"] .wpa-mega-panel__columns { max-width: 400px; } .wpa-mega-wrap--for-7889 .wpa-mega-col:not(:first-child) .wpa-mega-item__media--image { width: 80px; height: 80px; border-radius: 8px; } .wpa-mega-wrap--for-7889 .wpa-mega-col:not(:first-child) .wpa-mega-item__media--image img { object-fit: contain; padding: 4px; } /* ========================================================================= Desktop: mega menu behaviour only kicks in when body.wpa-mega-active is set ========================================================================= */ @media (min-width: 981px) { /* Hide the original sub-menu when we've built a mega panel. */ body.wpa-mega-active .wpa-mega-parent .sub-menu.wpa-mega-original-hidden { display: none !important; } /* The wrapping container for the full-width panel. Uses fixed positioning so it spans the true viewport width, not constrained by any parent column or row. The `top` value is set dynamically by JS to sit flush at the bottom of the header. */ .wpa-mega-wrap { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: none; transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; z-index: 1000; } .wpa-mega-parent { position: static; } ul#menu-main-menu { position: relative; } /* Open state — panel is appended to , so it gets its own class rather than relying on a parent .wpa-mega-open descendant selector. */ .wpa-mega-wrap.wpa-mega-wrap--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; } /* ===================================================================== DIVI OVERRIDE GUARD Divi applies ul#menu-main-menu ul { display: none } to hide sub-menus. Our panel contains

children that are NOT Divi sub-menus, so we need to explicitly restore their visibility, positioning, and layout. ===================================================================== */ ul#menu-main-menu .wpa-mega-wrap ul.wpa-mega-col__items, .wpa-mega-col__items { display: flex !important; flex-direction: column !important; gap: 4px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; visibility: visible !important; opacity: 1 !important; left: auto !important; top: auto !important; width: auto !important; background: transparent !important; box-shadow: none !important; } ul#menu-main-menu .wpa-mega-wrap li.wpa-mega-item, .wpa-mega-item { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* ===================================================================== Panel chrome ===================================================================== */ .wpa-mega-panel { background: var(--cyan-light); border-top: 3px solid var(--cyan, #00cbcc); box-shadow: 0 18px 40px rgba(0, 43, 92, 0.18); color: var(--navy, #002b5c); display: block; } .wpa-mega-panel__inner { max-width: 1400px; margin: 0 auto; padding: 40px 60px; display: flex !important; gap: 40px; align-items: flex-start; } .wpa-mega-panel__columns { display: grid !important; gap: 40px; flex: 1 1 auto; } .wpa-mega-panel[data-col-count="1"] .wpa-mega-panel__columns { grid-template-columns: 1fr; } .wpa-mega-panel[data-col-count="2"] .wpa-mega-panel__columns { grid-template-columns: repeat(2, 1fr); } .wpa-mega-panel[data-col-count="3"] .wpa-mega-panel__columns { grid-template-columns: repeat(3, 1fr); } .wpa-mega-panel[data-col-count="4"] .wpa-mega-panel__columns { grid-template-columns: repeat(4, 1fr); } .wpa-mega-panel--fallback .wpa-mega-panel__columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .wpa-mega-panel--with_featured .wpa-mega-panel__inner { align-items: stretch; } .wpa-mega-col { display: block !important; } /* ===================================================================== Column contents ===================================================================== */ /* High specificity to beat any Divi/theme h3 rules inside the menu area. */ .wpa-mega-wrap .wpa-mega-col .wpa-mega-col__heading, .wpa-mega-col__heading { font-family: "din-2014", sans-serif; font-size: 19px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--navy, #002b5c) !important; text-align: left !important; margin: 0 0 16px !important; padding: 0 0 10px 0 !important; border: 0 !important; border-bottom: 1px solid var(--grey-light, #f4f4f4) !important; background: transparent !important; line-height: 1.2 !important; } /* Strip any inherited border-bottom on other panel elements that might create the "double divider" effect. Then re-apply where wanted. */ .wpa-mega-wrap h1, .wpa-mega-wrap h2, .wpa-mega-wrap h3, .wpa-mega-wrap h4, .wpa-mega-wrap h5, .wpa-mega-wrap h6 { border-top: 0 !important; } .wpa-mega-wrap .wpa-mega-col, .wpa-mega-wrap .wpa-mega-col__items, .wpa-mega-wrap .wpa-mega-item { border: 0 !important; } .wpa-mega-item__link { display: flex !important; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 6px; text-decoration: none !important; color: var(--navy, #002b5c) !important; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; border: 2px solid transparent; } .wpa-mega-item__link:hover, .wpa-mega-item__link:focus { background: transparent; border: 2px solid #ffffff; color: var(--navy, #002b5c) !important; outline: none; } .wpa-mega-item__link:focus-visible { box-shadow: 0 0 0 2px var(--cyan, #00cbcc); } .wpa-mega-item__media { flex: 0 0 auto; display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; color: var(--teal-dark, #007b85); font-size: 16px; overflow: hidden; transition: background-color 0.15s ease, color 0.15s ease; } /* .wpa-mega-item__link:hover .wpa-mega-item__media, .wpa-mega-item__link:focus .wpa-mega-item__media { background: var(--navy, #002b5c); color: var(--navy, #002b5c); } */ .wpa-mega-item__media--image img { width: 100%; height: 100%; object-fit: cover; display: block; } .wpa-mega-item__text { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column; gap: 2px; } .wpa-mega-item__label { font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; color: inherit; } .wpa-mega-item__description { font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--navy, #002b5c); } /* ===================================================================== Featured block ===================================================================== */ .wpa-mega-featured { flex: 0 0 320px; display: flex; flex-direction: column; background: var(--navy, #002b5c); color: #fff; border-radius: 8px; overflow: hidden; } .wpa-mega-featured__image { aspect-ratio: 16 / 9; overflow: hidden; } .wpa-mega-featured__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .wpa-mega-featured__content { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .wpa-mega-featured__heading { font-family: "din-2014", sans-serif; font-size: 20px; font-weight: 700; margin: 0; color: #fff; } .wpa-mega-featured__description { font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif; font-size: 13px; line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.85); } .wpa-mega-featured__link.et_pb_button { align-self: flex-start; margin-top: auto; background: var(--yellow, #ffe512); color: var(--navy, #002b5c) !important; } .wpa-mega-featured__link.et_pb_button:hover { background-color: var(--yellow, #ffe512) !important; color: var(--navy, #002b5c) !important; } } /* ========================================================================= Below breakpoint: disengage mega menu entirely ========================================================================= */ @media (max-width: 980px) { .wpa-mega-wrap { display: none !important; } .wpa-mega-parent .sub-menu.wpa-mega-original-hidden { display: block !important; } }