/* ========================================================= TOPS Countertops — Primary Navigation + Mega Menu Self-contained stylesheet: safe to enqueue on its own in WordPress / Elementor Pro alongside (or instead of) theme styles. Re-declares the Summit brand tokens so this file has no hard dependency on styles.css being loaded first. Markup conventions used (see header.php): - Native WP wp_nav_menu() output: ul.menu, li.menu-item, li.menu-item-has-children, ul.sub-menu - Custom "tn-*" (Tops Nav) classes cover the mega-menu behavior (the 25/75 hover-preview panel, the 3-col Contact panel), driven by assets/js/nav-menu.js. NOTE: this nav deliberately carries NO Elementor classes. It used to also apply .elementor-nav-menu/.elementor-item so it could drop into a Nav Menu widget, but the nav is static PHP now and those classes pulled in the whole of Elementor's nav-menu stylesheet — including a position:relative on every li that broke the full-width mega panel in the editor. The paired ".elementor-item" selectors below are kept only as harmless fallbacks. ========================================================= */ :root{ --evergreen:#174A3A;--evergreen-deep:#0F3327; --moss:#53735B; --charcoal:#202522; --warm-stone:#F7F4EC;--warm-stone-2:#FBF9F4;--line:#E4DCC8; --gold:#D5A528;--gold-deep:#B98B1F; --white:#fff;--text:#202522;--muted:#5B6259; --veins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.026' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1.1' exponent='5' offset='-0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"); --tn-maxw:1320px; --tn-header-h:78px; } /* --------------------------------------------------------- Bar --------------------------------------------------------- */ /* Stacking order (must beat the Slab Cloud inventory plugin's menu, which sits at z-index 980): .tn 1000 sticky header bar — the value that actually matters .tn-mega 40 mega panels, INSIDE .tn .tn-mobile 1010 full-screen mobile overlay, outside .tn, covers it .tn's z-index + positioning creates a stacking context, so everything in the header (including the mega panels) is ranked against the rest of the page by .tn's 1000, not by its own z-index. Raising .tn-mega's number alone would change nothing. Position and z-index are !important because if any plugin/theme CSS set .tn back to position:static, z-index would stop applying and the panels would drop to z-index 40, underneath the plugin. */ .tn{position:sticky!important;top:0;z-index:1000!important;background:var(--evergreen);font-family:'Lato',system-ui,sans-serif;box-shadow:0 1px 0 rgba(0,0,0,.15)} .tn *{box-sizing:border-box} .tn__inner{max-width:var(--tn-maxw);margin:0 auto;padding:0 32px;height:var(--tn-header-h);display:flex;align-items:center;gap:8px} .tn__brand{display:flex;align-items:center;flex:none;margin-right:20px;text-decoration:none} .tn__brand-logo{height:56px;width:auto;display:block} .tn__div{width:1px;align-self:stretch;margin:18px 22px 18px 0;background:rgba(255,255,255,.14);flex:none} /* primary menu (native WP: .menu > .menu-item > a / .sub-menu) */ .tn__menu-wrap{flex:1;display:flex} /* The full-width mega panel is position:absolute with left:0;right:0, so it sizes to its nearest POSITIONED ancestor — which must stay .tn (the sticky header bar), not the individual menu item. Any stylesheet that makes .menu-item positioned traps the panel at the trigger's width. Elementor Pro's widget-nav-menu.css does exactly that (".elementor-nav-menu a,.elementor-nav-menu li{position:relative}") and the Elementor editor loads every widget's CSS whether or not the widget is on the page, which broke the panel in the editor while the live site looked fine. The offending elementor-nav-menu/elementor-item classes have been removed from header.php, and this guard keeps any other plugin/theme CSS from reintroducing the same problem. */ .tn__menu > .menu-item{position:static} .menu.tn__menu,.elementor-nav-menu.tn__menu{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0} .tn__menu>.menu-item>a,.tn__menu>.menu-item>.elementor-item{display:flex;align-items:center;gap:.4rem;color:#fff;font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:.98rem;letter-spacing:0;text-decoration:none;padding:0 14px;height:var(--tn-header-h);position:relative} .tn__menu>.menu-item>a::after,.tn__menu>.menu-item>.elementor-item::after{content:"";position:absolute;left:14px;right:14px;bottom:22px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s} .tn__menu>.menu-item:hover>a::after,.tn__menu>.menu-item.tn-open>a::after, .tn__menu>.menu-item:hover>.elementor-item::after,.tn__menu>.menu-item.tn-open>.elementor-item::after{transform:scaleX(1)} .tn__caret{width:9px;height:9px;flex:none;transition:transform .22s ease} .tn__menu>.menu-item.tn-open .tn__caret{transform:rotate(180deg)} .tn__menu>.menu-item>a:focus-visible,.tn__menu>.menu-item>.elementor-item:focus-visible, .tn__contact-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .tn__right{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none} /* !important throughout this button's declarations: Elementor Pro's Theme Style > Buttons setting (if ever configured in Site Settings) applies to every