/*
 * Site header: the opened mobile/tablet menu must FLOAT, not push the header apart.
 *
 * WHY (owner bug, 2026-09-28): on a 1:1 tablet viewport (e.g. 768x768) the homepage
 * hamburger opened a menu that was still part of the page flow, so the header row grew
 * from 87px to 327px. The logo column is vertically centred in that row, so the logo and
 * the word "SparkLift" slid 120px DOWN the page while the menu was open, then jumped back
 * on close. Measured on dev before the fix: header 87 -> 327, logo y 23 -> 143.
 *
 * WHY IT HAPPENS: Elementor's nav-menu widget ships no positioning for
 * `.elementor-nav-menu--dropdown` (verified in widget-nav-menu.min.css 3.35.1: the only
 * rules that match are margin/overflow/transition). Its wrapper is already
 * `position: relative`, i.e. the markup expects an out-of-flow dropdown, but nothing makes
 * it one. In flow, the 240px-tall menu stretches the flex row that also holds the logo.
 *
 * THE FIX: take the opened menu out of flow and anchor it under the toggle. The header row
 * then keeps its natural height and the logo never moves. `min-width` stops the menu
 * shrink-wrapping to ~95px (which wrapped "Secure my spot" onto three lines), and
 * `max-width` keeps it inside narrow phones.
 *
 * SCOPE: every front-end page that uses the Elementor header template, because the header
 * is shared. Breakpoint 1024px matches Elementor's own toggle breakpoint exactly (its CSS
 * hides the toggle from min-width:1025px), so this can never apply while the full desktop
 * menu is showing.
 *
 * BREAKAGE SYMPTOM: the logo drops down again when the menu is opened (this rule stopped
 * matching), or the opened menu is clipped by the header (something above it gained
 * `overflow: hidden`).
 *
 * ROLLBACK: delete this file's enqueue in modules/assets.php; the logo-drop bug returns.
 *
 * TESTS: tests/test_header_menu.py
 */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 99;
		min-width: 220px;
		max-width: min(320px, calc(100vw - 32px));
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}
}