/* * Four Level Tab Mega Menu — front-end styles. * All rules are scoped to `.fltmm-enabled` trees. No bare element * selectors (ul/li/a/.sub-menu) are styled, so normal Elementor menus * elsewhere on the page are unaffected. * * Layout mode is switched per-instance via `.fltmm-mode-desktop` / * `.fltmm-mode-mobile` classes applied directly to each `.fltmm-enabled` * root item (see mega-menu.js). This is instance-scoped rather than a * single class because Elementor Pro's Nav Menu widget renders * the SAME WordPress menu twice — once inside `.elementor-nav-menu--main` * (desktop, hover) and once inside `.elementor-nav-menu--dropdown` * (Elementor's own mobile toggle) — and each tree must be able to render * in the correct mode independently of the other. */ .fltmm-enabled { --fltmm-background: #ffffff; --fltmm-color: #222222; --fltmm-tab-width: 240px; --fltmm-active-background: #f4f4f4; --fltmm-active-color: #111111; --fltmm-menu-padding: 20px; --fltmm-column-gap: 28px; --fltmm-row-gap: 22px; --fltmm-border-color: #e6e6e6; --fltmm-shadow: 0 16px 40px rgba(15, 15, 15, 0.14); --fltmm-transition-duration: 180ms; --fltmm-menu-width: 860px; position: relative; } .fltmm-enabled, .fltmm-enabled *, .fltmm-enabled *::before, .fltmm-enabled *::after { box-sizing: border-box; } /* ============================================================ */ /* Elementor Pro Nav Menu widget compatibility resets */ /* */ /* Elementor's own widget-nav-menu(.min|-rtl.min).css applies */ /* rules that conflict with the mega menu's layout: */ /* - `.elementor-nav-menu a, .elementor-nav-menu li{position: */ /* relative}` breaks the absolute-positioned Level-3/4 content */ /* panel's containing block — fixed below. */ /* - `.elementor-nav-menu a{display:flex}` + forced padding */ /* fights our block/grid layout for tab, group and link items. */ /* - `.elementor-nav-menu ul{display:none}` plus Elementor's own */ /* hover/toggle script may also set inline styles on the very */ /*