/* Global Flight Training Solutions - header
 * ---------------------------------------------------------------------------
 * Mobile menu panel.
 *
 * The dropdown is an ordinary in-flow block inside the nav widget, and in the
 * header row that widget is only about 112px wide (logo | menu | search). The
 * panel therefore opened as a narrow column under the burger, with the search
 * icon sitting beside it, and every multi-word item wrapped: "About Us",
 * "Welcome Pack", "Time Building" and "Flight Training" onto two lines, and
 * "Light Aircraft Maintenance" onto three.
 *
 * The panel is taken out of flow and anchored to the full-width header row so
 * it can span the screen. Both the widget and the column that holds it are
 * position:relative, so both have to be neutralised first - clearing only the
 * widget just hands the anchor to the column, which is no wider. With both
 * static the nearest positioned ancestor is the header row, so top:100% lands
 * exactly on the header's bottom edge whatever height the header has.
 *
 * The nav already carries a solid white background, so it reads correctly
 * over the page content beneath it.
 *
 * Selectors avoid the Elementor element ids so that rebuilding the header
 * template does not quietly undo this. There is only one nav menu widget in
 * the header, so scoping to the header location is specific enough.
 */

@media (max-width: 1024px) {

	/* Hand positioning to the header row rather than the narrow menu column. */
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) {
		position: static;
	}

	.elementor-location-header nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		z-index: 999;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
	}
}

/* Submenu items in the mobile panel.
 *
 * Their size is set on the widget itself (Dropdown > Typography), matching
 * the main menu at Lato 15px/600 - without it Elementor Pro falls back to
 * .elementor-sub-item { font-size: .85em } and they rendered at 11px.
 *
 * At matching size the only thing left telling a child item from a parent is
 * position, so they carry an indent. Elementor's own dropdown padding control
 * is no use here: on mobile it treats the top-level items as dropdown items
 * too, so it would indent the whole menu.
 */
@media (max-width: 1024px) {
	.elementor-location-header nav.elementor-nav-menu--dropdown .elementor-sub-item {
		padding-left: 38px;
	}
}