/* ============================================================= SAFO static-site menu fix — v6 safo-menu-fix.css Works on the existing Elementor markup with no Elementor / SmartMenus / jQuery JavaScript required. v2: !important on decisive properties (Elementor injects widget-nav-menu.min.css from inside ). v3: burger panel is an overlay, not in-flow. v4: arrows removed; burger submenus always expanded; nested dropdowns forced sideways; footer back to a plain list. v5: dropdown chevrons are flex items, properly aligned. v6: burger panel typography and icon size pinned, so the 768-1024px band no longer inherits Elementor's untuned tablet/desktop font values and render huge. v7: hover delay removed entirely and fade transition dropped. Submenus are DOM children sitting flush against their parent row, so :hover alone holds all the way through. Nothing lingers, so nothing can overlap. ============================================================= */ :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 !important; } /* 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; } /* The Astra arrow spans sat inside the anchor and read as a second, competing link. Gone for good. */ .elementor-nav-menu .dropdown-menu-toggle, .elementor-nav-menu .ast-header-navigation-arrow{ display:none !important; } /* ---------- 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; right:auto; width:auto !important; min-width:255px; 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; transition:none !important; z-index:9999; pointer-events:none; } /* second level always opens to the RIGHT of its parent row, level with it. !important so nothing drags it back underneath. */ .elementor-nav-menu--layout-horizontal .sub-menu .sub-menu{ top:-.3em !important; left:100% !important; right:auto !important; border-top:0 !important; 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; pointer-events:auto; } /* pin dropdown typography too — the desktop bar is styled, but the dropdowns never were, so they inherited whatever was around */ .elementor-nav-menu--layout-horizontal .sub-menu a{ display:block; padding:.7em 1.25em; white-space:nowrap; text-decoration:none; color:var(--safo-body); font-size:15px !important; line-height:1.4 !important; font-weight:500 !important; text-transform:none !important; letter-spacing:normal !important; } .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); } /* parent rows inside a dropdown use flex so the chevron pins to the right edge and centres vertically */ .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children > a{ display:flex !important; align-items:center; justify-content:space-between; gap:1.5em; } .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children > a::after{ content:"\203A"; flex:0 0 auto; font-size:1.3em; line-height:1; font-weight:700; opacity:.5; transform:translateY(-1px); } .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children.safo-open > a, .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children:hover > a{ background:var(--safo-hover); color:var(--safo-blue-dark); } .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children.safo-open > a::after, .elementor-nav-menu--layout-horizontal .sub-menu .menu-item-has-children:hover > a::after{ opacity:1; } /* "About Us" and "Patron and Advisors" have href="#" — they open a level, they are not destinations */ .elementor-nav-menu--layout-horizontal a[href="#"]{ cursor:default; } } /* ---------- 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; } /* v6: the icon itself also scaled with the breakpoint */ .elementor-menu-toggle i, .elementor-menu-toggle .eicon-menu-bar, .elementor-menu-toggle .eicon-close{ font-size:26px !important; line-height:1 !important; } .elementor-menu-toggle svg{ width:26px !important; height:26px !important; } /* 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:80vh !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; } /* v6: Elementor only tuned this widget's font at <=767px, so between 768px and 1024px it fell back to much larger values. Pinned here so the panel looks identical at every width. */ .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu, .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu li, .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu a{ font-size:16px !important; line-height:1.4 !important; font-weight:500 !important; text-transform:none !important; letter-spacing:normal !important; } .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu a{ display:block; padding:13px 16px !important; 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); } /* no chevrons in here — every level is already open */ .elementor-menu-toggle + .elementor-nav-menu__container .elementor-nav-menu a::after{ content:none !important; } /* no arrows, so every level is simply open. One tap per link. */ .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu{ display:block !important; position:static !important; width:auto !important; opacity:1 !important; visibility:visible !important; transform:none !important; box-shadow:none !important; border:0 !important; background:transparent !important; margin:0; padding:0; pointer-events:auto !important; } .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu a{ padding-left:32px !important; } .elementor-menu-toggle + .elementor-nav-menu__container .sub-menu .sub-menu a{ padding-left:52px !important; } /* href="#" parents become section headings, not dead links */ .elementor-menu-toggle + .elementor-nav-menu__container a[href="#"]{ cursor:default; color:var(--safo-body) !important; background:#f8fafc; font-size:12px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; padding-top:10px !important; padding-bottom:10px !important; } .elementor-menu-toggle + .elementor-nav-menu__container a[href="#"]:hover{ background:#f8fafc; } /* ---------- Register and Login inside the menu ---------- */ /* Added by the script, so they only exist where a menu does. They set every colour themselves: left to inherit, they would take the theme's menu styling and read as two more ordinary items. */ .safo-cta-item{ display:block; } .safo-cta-link{ border-radius:6px !important; border:2px solid #009BD5 !important; font-weight:700 !important; text-decoration:none !important; text-transform:none !important; letter-spacing:normal !important; white-space:nowrap; } .safo-cta-link--solid{ background:#FFED00 !important; border-color:#FFED00 !important; /* same as the fill, so no outline shows */ color:#00394f !important; /* dark on yellow, which reads clearly */ } .safo-cta-link--solid:hover, .safo-cta-link--solid:focus{ background:#009BD5 !important; border-color:#009BD5 !important; color:#ffffff !important; } .safo-cta-link--outline{ background:transparent !important; color:#009BD5 !important; } .safo-cta-link--outline:hover, .safo-cta-link--outline:focus{ background:#009BD5 !important; color:#ffffff !important; } .safo-cta-link:focus-visible{ outline:3px solid #FFED00; outline-offset:2px; } /* across the top on a wide screen */ @media (min-width:1025px){ .elementor-nav-menu--layout-horizontal > .elementor-nav-menu > .safo-cta-item{ margin-left:10px; display:flex; align-items:center; } .elementor-nav-menu--layout-horizontal > .elementor-nav-menu > .safo-cta-item > .safo-cta-link{ padding:10px 20px !important; font-size:15px !important; } } /* inside the burger, where the menu is a stack and they sit at the top */ .elementor-menu-toggle + .elementor-nav-menu__container .safo-cta-item{ padding:6px 16px; } .elementor-menu-toggle + .elementor-nav-menu__container .safo-cta-item--top:first-child{ padding-top:14px; } /* a rule under the last button, separating them from the menu proper */ .elementor-menu-toggle + .elementor-nav-menu__container .safo-cta-item--top + .safo-cta-item--top{ padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid #dfe6ec; } .elementor-menu-toggle + .elementor-nav-menu__container .safo-cta-item > .safo-cta-link{ display:block !important; padding:13px 16px !important; text-align:center; font-size:16px !important; /* Width and style only, so the colour comes from --solid or --outline above and each button matches its desktop twin. Menu rows in this panel carry a 1px bottom border of their own. Overriding just that edge was the mistake: it left the yellow button with a blue line underneath and nothing on the other three sides. Naming all four edges fixes it without changing the colour. */ border-width:2px !important; border-style:solid !important; } /* they are buttons, not menu rows: no chevron */ .elementor-menu-toggle + .elementor-nav-menu__container .safo-cta-item > a::after{ content:none !important; } /* ---------- tablet gap ---------- */ /* Both nav widgets are hidden between 768px and 1024px in the original markup, leaving 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; } /* don't let the panel run the full width of a wide tablet */ .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{ left:auto; right:0; width:360px; max-width:100%; } } /* ---------- footer menu (vertical) ---------- */ /* Plain top-level list. Showing the children pulled in Elementor's blue dropdown styling and looked messy. */ .elementor-nav-menu--layout-vertical .sub-menu{ display:none !important; } .elementor-nav-menu--layout-vertical > .elementor-nav-menu > li > a{ background:transparent !important; padding-left:0 !important; } .elementor-nav-menu--layout-vertical a::after{ content:none !important; }