/*
 * Fixes the open mobile nav dropdown rendering narrower than the viewport,
 * clipping menu labels and overlapping the toggle button.
 *
 * Root cause: this nav-menu widget uses Elementor Pro's "stretch" width
 * setting. On a live WordPress+Elementor site that setting is applied by
 * JS (part of the same lazy-loaded nav-menu handler bundle this static
 * mirror never captured -- see hamburger-menu-fix.js) which measures the
 * viewport and sizes the panel to match. Without that JS, the vendor CSS
 * (widget-nav-menu.min.css: ".elementor-nav-menu--stretch ... .elementor-
 * nav-menu--dropdown { position: absolute }") leaves left/right/width
 * unset, so the panel shrink-wraps to its content inside its narrow
 * toggle-only containing block and spills off the right edge of the
 * screen.
 *
 * Fix: anchor the open dropdown to the viewport instead of its containing
 * block. This is the CSS-only equivalent of what "stretch" already does
 * on a live site; it does not change the toggle/close behavior at all.
 */
.elementor-nav-menu--toggle .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: fixed;
	left: 0;
	right: 0;
	width: auto;
}

/*
 * D&L-specific: on this site the toggle sits close enough to the header
 * edge that the panel's static top offset (unchanged by the rule above)
 * overlaps the toggle button itself once the panel is full-width. Since
 * the toggle stays position:static, it paints underneath the panel's
 * stacking context and both loses the tap target and gets visually
 * covered by the panel's white background. Lifting the toggle into its
 * own stacking context above the dropdown (z-index 9997) keeps every
 * pixel of the icon visible and tappable while the menu is open, with no
 * change to its position or size.
 */
.elementor-nav-menu--toggle .elementor-menu-toggle {
	position: relative;
	z-index: 9998;
}