/* PORT TO astra-child TOGETHER WITH THE "SMALL GROUP JOURNEYS" MENU ITEM.
 *
 * The live header is laid out for nine top-level items. With a tenth, the live
 * CSS on its own collapses the logo while Destinations is hovered (1440px and
 * up), wraps three labels onto two lines (1200 to 1255px) and crowds the menu
 * against the logo (up to 1455px). These rules, approved by Aung on
 * 19 October 2026, are the only changes to the live header. Load them after the
 * theme's header CSS, and only with the tenth item: on the nine-item menu, rule 3
 * would move the dropdowns 4px and rule 4 the items at 1440 to 1455px.
 * Checked with scripts/compare-live.mjs; see docs/session-log.md. */

/* 1. The logo keeps its width. In the live flex row it can shrink when the
 *    menu needs more room than the row has. */
@media (min-width: 1200px) {
	.site-header__logo {
		flex-shrink: 0;
	}
}

@media (min-width: 1440px) {
	/* 2. The invisible hover bridge on Destinations (a 150 x 80px triangle that
	 *    keeps the mega menu open while the pointer moves diagonally towards it)
	 *    is taken out of the layout, like the theme's other hover bridges. It
	 *    sits exactly where it did: to the left of the Destinations link. In
	 *    flow, it widened the item by 150px while hovered, which pushed the
	 *    logo out once the menu had a tenth item. */
	.site-header__menu .menu > .menu-item.menu-item-has-children.menu-item-object-destination:hover::before {
		position: absolute;
		margin-left: -150px;
	}

	/* The bridge now overlaps the logo when the menu is long; the logo stays
	 * above it, so it can still be clicked while the mega menu is open. */
	.site-header__logo {
		position: relative;
		z-index: 1;
	}
}

/* 3. 1200 to 1439px: one line. The live menu spreads its items with
 *    space-between and lets labels wrap; with ten items three labels wrapped.
 *    Labels no longer wrap, and the link padding drops from 8px to 4px a side
 *    so ten items fit from 1200px. Space-between still spreads what is left. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.site-header__menu .menu > .menu-item {
		white-space: nowrap;
	}

	.site-header__menu .menu > .menu-item:not(.is-button) > .menu-item__link {
		padding-right: 0.25rem;
		padding-left: 0.25rem;
	}
}

/* 4. 1440 to 1455px: the gap between items drops from 24px to 20px, so the
 *    menu keeps clear of the logo. From 1456px the live 24px gap fits. */
@media (min-width: 1440px) and (max-width: 1455px) {
	.site-header__menu .menu {
		gap: 1.25rem;
	}
}