/* ============================================================= SAFO static-site menu fix — v3 safo-menu-fix.css Works on the existing Elementor markup with no Elementor / SmartMenus / jQuery JavaScript required. v2: Elementor injects widget-nav-menu.min.css from inside , so it loads after anything in and its display:none on .sub-menu was winning on equal specificity. The decisive properties are now !important so this file works regardless of where it is loaded. v3: the open burger panel is an overlay anchored under the header instead of an in-flow block, so it no longer pushes the page down and leaves a gap. ============================================================= */ :root{ --safo-blue:#046bd2; --safo-blue-dark:#045cb4; --safo-ink:#1e293b; --safo-body:#334155; --safo-line:#e2e8f0; --safo-hover:#f1f5f9; } /* ---------- shared ---------- */ .elementor-nav-menu, .elementor-nav-menu ul{ list-style:none; } .elementor-nav-menu li{ position:relative; } /* Kill the leftover dropdown

in widgets that have no burger, otherwise the menu appears twice. */ .elementor-widget-nav-menu:not(.elementor-nav-menu--toggle) nav.elementor-nav-menu--dropdown{ display:none !important; } /* Astra ships an empty arrow inside each parent link. Turn it into a real +/- expand control. */ .elementor-nav-menu .menu-item-has-children > a > .dropdown-menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; width:1.5em; height:1.5em; margin-left:.45em; font-weight:700; line-height:1; border-radius:3px; cursor:pointer; } .elementor-nav-menu .menu-item-has-children > a > .dropdown-menu-toggle::before{ content:"+"; } .elementor-nav-menu .menu-item-has-children.safo-open > a > .dropdown-menu-toggle::before{ content:"\2013"; } .elementor-nav-menu .menu-item-has-children > a > .dropdown-menu-toggle:hover, .elementor-nav-menu .menu-item-has-children > a > .dropdown-menu-toggle:focus-visible{ background:rgba(4,107,210,.12); outline:none; } /* ---------- desktop: horizontal menu with hover dropdowns ---------- */ @media (min-width:1025px){ .elementor-nav-menu--layout-horizontal > .elementor-nav-menu{ display:flex; flex-wrap:wrap; margin:0; padding:0; } /* display:block beats Elementor's display:none; width:auto beats its fixed width:12em */ .elementor-nav-menu--layout-horizontal .sub-menu{ display:block !important; position:absolute !important; top:100%; left:0; width:auto !important; min-width:250px; margin:0; padding:.3em 0; background:#fff; border-top:3px solid var(--safo-blue); box-shadow:0 8px 24px rgba(16,24,40,.14); opacity:0 !important; visibility:hidden !important; transform:translateY(8px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:9999; pointer-events:none; } /* second level opens sideways */ .elementor-nav-menu--layout-horizontal .sub-menu .sub-menu{ top:-.3em; left:100%; border-top-width:0; border-left:3px solid var(--safo-blue); } .elementor-nav-menu--layout-horizontal li:hover > .sub-menu, .elementor-nav-menu--layout-horizontal li:focus-within > .sub-menu, .elementor-nav-menu--layout-horizontal li.safo-open > .sub-menu{ opacity:1 !important; visibility:visible !important; transform:translateY(0); pointer-events:auto; } .elementor-nav-menu--layout-horizontal .sub-menu a{ display:block; padding:.7em 1.25em; white-space:nowrap; text-decoration:none; color:var(--safo-body); } .elementor-nav-menu--layout-horizontal .sub-menu a:hover, .elementor-nav-menu--layout-horizontal .sub-menu a:focus-visible{ background:var(--safo-hover); color:var(--safo-blue-dark); } /* keep the right-hand dropdowns on screen */ .elementor-nav-menu--layout-horizontal > .elementor-nav-menu > li:nth-last-child(-n+2) .sub-menu{ left:auto; right:0; } .elementor-nav-menu--layout-horizontal > .elementor-nav-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu{ left:auto; right:100%; } /* hover already does the work up here */ .elementor-nav-menu--layout-horizontal .dropdown-menu-toggle{ display:none !important; } } /* ---------- burger / collapsible menu ---------- */ .elementor-menu-toggle{ cursor:pointer; } .elementor-menu-toggle .elementor-menu-toggle__icon--close{ display:none; } .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{ display:none; } .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close{ display:inline-block; } .elementor-menu-toggle:focus-visible{ outline:2px solid var(--safo-blue); outline-offset:2px; } /* anchor point for the overlay panel */ .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-widget-container{ position:relative; } /* Elementor closes this with transform:scaleY(0)/max-height:0. Override all three so display alone controls it. */ .elementor-menu-toggle + .elementor-nav-menu__container{ display:none !important; transform:none !important; max-height:none !important; overflow:visible !important; margin-top:0 !important; } /* open: float over the page rather than pushing it down */ .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{ display:block !important; position:absolute !important; top:100%; left:0; right:0; z-index:9998; max-height:75vh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; background:#fff; border-top:1px solid var(--safo-line); box-shadow:0 10px 24px rgba(16,24,40,.10); } .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu{ margin:0; padding:0; } .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu a{ display:flex; align-items:center; justify-content:space-between; padding:.85em 1em; color:var(--safo-ink); text-decoration:none; border-bottom:1px solid #eef2f6; } .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu a:hover{ background:var(--safo-hover); color:var(--safo-blue-dark); } /* submenus stack in flow inside the panel — no absolute positioning */ .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu{ display:none !important; position:static !important; width:auto !important; opacity:1 !important; visibility:visible !important; transform:none !important; box-shadow:none; border-top:0; margin:0; padding:0; background:#f8fafc; } .elementor-menu-toggle + .elementor-nav-menu__container li.safo-open > .sub-menu{ display:block !important; } .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu a{ padding-left:2em; } .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu .sub-menu a{ padding-left:3.25em; } /* ---------- tablet gap ---------- */ /* Both nav widgets are currently hidden between 768px and 1024px, which leaves tablets with no menu at all. Bring the burger back. */ @media (min-width:768px) and (max-width:1024px){ .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-hidden-tablet{ display:block !important; } } /* ---------- footer menu (vertical) ---------- */ /* No hover space down here, so show the child pages as a sitemap. */ .elementor-nav-menu--layout-vertical .sub-menu{ display:block !important; position:static !important; width:auto !important; opacity:1 !important; visibility:visible !important; margin:0; padding-left:1em; } .elementor-nav-menu--layout-vertical .dropdown-menu-toggle{ display:none !important; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .elementor-nav-menu--layout-horizontal .sub-menu{ transition:none; transform:none; } }