/* --------------------------------------------------------------------------- Sienna accessibility widget (website-widgets.pages.dev/dist/sienna.min.js). The widget renders exactly one trigger, into a body-level container: .asw-container > .asw-widget > a.asw-menu-btn (the trigger) .asw-container > div (menu panel, built lazily) The offsets that position the trigger are written inline onto the trigger itself, so the overrides below have to sit on `.asw-menu-btn` and carry `!important` to beat that inline style. Desktop (>=992px): leap-a11y-widget.js moves `.asw-widget` — the trigger's own wrapper, nothing cloned — into `.site-nav__contact`, making the trigger the right-most control of the primary nav. The menu panel stays in `.asw-container` on , clear of the sticky header's stacking context. Below 992px, and on pages with no nav bar, the trigger stays fixed bottom-left, pulled inside the safe-area insets. It can overlap the sticky call/booking CTA there; that is preferred to floating it above the CTA, so no dynamic offset is applied. The Leap badge is bottom-right, so the two never collide. --------------------------------------------------------------------------- */ /* Fixed bottom-left, inside the safe area. */ .asw-container .asw-widget .asw-menu-btn { --asw-off-x: calc(0.75rem + env(safe-area-inset-left, 0px)) !important; --asw-off-y: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important; } /* The widget ships no focus style, and its resting look is already a ring, so the focus ring has to sit outside it and read on light and dark backdrops. */ .asw-widget .asw-menu-btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 7px #0848ca !important; } @media screen and (min-width: 992px) { .site-nav__contact > .asw-widget { align-items: center; display: flex; } /* Sized and de-chromed to sit level with the phone control beside it. */ .site-nav__contact > .asw-widget .asw-menu-btn { --asw-icon-size: 22px !important; position: static !important; width: 2.75rem !important; height: 2.75rem !important; border: none !important; outline: none !important; box-shadow: none !important; } .site-nav__contact > .asw-widget .asw-menu-btn:hover { box-shadow: none !important; } .site-nav__contact > .asw-widget .asw-menu-btn:focus-visible { outline: 3px solid #0848ca !important; outline-offset: 2px; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { .asw-menu-btn, .asw-menu { transition: none !important; } .asw-menu-btn:hover { transform: none !important; } }