/* ============================================================ ACS Mega Menu — Frontend Styles ============================================================ */ /* ── Variables ────────────────────────────────────────────── */ :root { --acs-mega-bg: #ffffff; --acs-mega-shadow: 0 8px 40px rgba(0, 0, 0, 0.12); --acs-mega-radius: 6px; --acs-mega-border-top: 3px solid #00293E; --acs-mega-z: 99999; /* above everything — panel is on */ --acs-mega-duration: 0.22s; --acs-mega-ease: cubic-bezier(0.4, 0, 0.2, 1); --acs-mega-arrow-size: 6px; /* Width per column count */ --acs-mega-col1-width: 260px; --acs-mega-col2-width: 480px; --acs-mega-col3-width: 680px; --acs-mega-col4-width: 860px; --acs-mega-col5-width: 1100px; } /* ── Top-level mega item ──────────────────────────────────── */ li.acs-mega-item { position: static !important; list-style: none; } /* * Trigger link: inherit ALL typography from the Nav Menu widget * so Elementor's own widget styling always wins. */ li.acs-mega-item > a, li.acs-mega-item > span.acs-mega-no-link { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: inherit; } /* Arrow indicator */ .acs-mega-arrow { display: inline-block; width: var(--acs-mega-arrow-size); height: var(--acs-mega-arrow-size); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--acs-mega-duration) var(--acs-mega-ease); flex-shrink: 0; } li.acs-mega-item.acs-mega-open > a .acs-mega-arrow, li.acs-mega-item.acs-mega-open > span .acs-mega-arrow { transform: rotate(-135deg) translateY(-2px); } /* ── Panel — teleported to , position: fixed ────────── */ /* * Panels are moved to by JS to escape Elementor stacking * contexts. position: fixed means they're always relative to the * viewport, above every z-index on the page. */ .acs-mega-panel { position: fixed !important; z-index: var(--acs-mega-z) !important; background: var(--acs-mega-bg); box-shadow: var(--acs-mega-shadow); border-radius: 0 0 var(--acs-mega-radius) var(--acs-mega-radius); border-top: var(--acs-mega-border-top); overflow: hidden; /* Hidden by default */ opacity: 0; pointer-events: none; transition: opacity var(--acs-mega-duration) var(--acs-mega-ease), transform var(--acs-mega-duration) var(--acs-mega-ease); transform: translateY(-6px); } /* JS adds this class when open (hidden attr also removed) */ .acs-mega-panel.acs-mega-panel-open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Contained widths */ .acs-mega-panel.acs-mega-panel-contained.acs-mega-panel-cols-1 { width: var(--acs-mega-col1-width); } .acs-mega-panel.acs-mega-panel-contained.acs-mega-panel-cols-2 { width: var(--acs-mega-col2-width); } .acs-mega-panel.acs-mega-panel-contained.acs-mega-panel-cols-3 { width: var(--acs-mega-col3-width); } .acs-mega-panel.acs-mega-panel-contained.acs-mega-panel-cols-4 { width: var(--acs-mega-col4-width); } .acs-mega-panel.acs-mega-panel-contained.acs-mega-panel-cols-5 { width: var(--acs-mega-col5-width); } /* Full width — width + left set by JS */ .acs-mega-panel.acs-mega-panel-full-width { left: 0 !important; } /* Inner wrapper */ .acs-mega-panel-inner { padding: 0; } /* ── Reset typography inside panel ───────────────────────── */ /* * Panel is now on , so nav widget styles no longer cascade * into it. revert ensures theme/Elementor template styles take over. */ .acs-mega-panel, .acs-mega-panel * { font-family: revert; font-size: revert; font-weight: revert; font-style: revert; line-height: revert; letter-spacing: revert; text-transform: revert; color: revert; } /* ── Elementor structural overrides inside the panel ─────── */ .acs-mega-panel .elementor-section, .acs-mega-panel .e-con { margin: 0 !important; } .acs-mega-panel .elementor-section-wrap { padding: 0; } .acs-mega-panel .elementor-column-wrap { padding: 0; } /* ── Non-clickable parent span ───────────────────────────── */ span.acs-mega-no-link { user-select: none; } span.acs-mega-no-link:focus { outline: 2px dashed currentColor; outline-offset: 2px; } /* ── Mobile — panels hidden, Elementor handles mobile nav ── */ @media ( max-width: 1024px ) { .acs-mega-panel { display: none !important; } li.acs-mega-item > a .acs-mega-arrow, li.acs-mega-item > span.acs-mega-no-link .acs-mega-arrow { display: none; } }