/* * WFL Phase 1 — Off-canvas mobile nav drawer * * Converts Elementor Pro's default mobile "push-down dropdown" into a slide-in * off-canvas panel. Pure CSS for the panel + backdrop; a tiny JS only mirrors * Elementor's aria-expanded onto and locks scroll. * * Scope: body.wfl-offcanvas (added in PHP) at the breakpoint where Elementor * shows the burger. Elementor's default tablet breakpoint is 1024px. */ @media (max-width: 1024px) { /* The dropdown nav becomes a fixed drawer pinned to the right edge. */ body.wfl-offcanvas .elementor-nav-menu--dropdown { /* !important on layout props: Elementor's mobile JS sets position/top/width inline, and inline (without !important) loses to an external !important. */ position: fixed !important; inset-block: 0 !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; top: 0 !important; left: auto !important; right: 0 !important; width: min(86vw, 360px) !important; max-width: 360px !important; height: 100dvh !important; margin: 0 !important; padding: clamp(64px, 9vh, 88px) 0 24px; background: #c9253a !important; /* brand red, matches header */ box-shadow: -12px 0 40px rgba(0, 0, 0, .28); overflow-y: auto; overscroll-behavior: contain; z-index: 100000; /* Force it visible so Elementor's inline display:none can't kill the transition; we show/hide purely via transform + visibility. */ display: block !important; visibility: hidden; transform: translateX(100%) !important; transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s; } body.wfl-offcanvas.wfl-nav-open .elementor-nav-menu--dropdown { visibility: visible; transform: translateX(0) !important; transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s; } /* Dimmed backdrop behind the drawer. */ body.wfl-offcanvas .wfl-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s linear .32s; z-index: 99999; } body.wfl-offcanvas.wfl-nav-open .wfl-nav-backdrop { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s; } /* Vertical layout + comfortable tap targets inside the drawer. */ body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-nav-menu { display: flex; flex-direction: column; } body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item { padding: 16px 28px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .18); } /* White text on the brand-red drawer (mirrors the header). Force all states so the menu never disappears regardless of the kit's link colours. */ body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item, body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item:hover, body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item:focus, body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-sub-item { color: #fff !important; } /* Elementor paints the active/hover item with a charcoal block that clashes on the red drawer — replace it with a subtle darken so it reads as on-brand. */ body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item:hover, body.wfl-offcanvas .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background-color: rgba(0, 0, 0, .12) !important; } /* Keep the burger above the drawer so it can also close it. */ body.wfl-offcanvas .elementor-menu-toggle { position: relative; z-index: 100001; } /* Lock page scroll while the drawer is open. */ body.wfl-offcanvas.wfl-nav-open { overflow: hidden; touch-action: none; } } @media (prefers-reduced-motion: reduce) { body.wfl-offcanvas .elementor-nav-menu--dropdown, body.wfl-offcanvas .wfl-nav-backdrop { transition-duration: .01ms; } }