/*
 * Collapse the header navigation to its hamburger earlier.
 *
 * The header row is logo + navigation + "Support our Mission", laid out with
 * flex-wrap: nowrap. Its intrinsic width is about 1224px, but the navigation
 * block only switches to its overlay below 600px. Between roughly 600px and
 * 1300px the header therefore overflows the viewport and the whole page scrolls
 * sideways — most visibly on laptops around 1100–1280px.
 *
 * Adding a fifth item ("Home") cost about 65px and pushed that threshold up
 * into common laptop widths, which is when it became obvious.
 *
 * Rather than shave gaps and font sizes to buy a few pixels — which would fail
 * again the next time a menu item is added — this moves the overlay breakpoint
 * up to 1100px. Above that the full menu fits comfortably; below it, the
 * hamburger is used, which is what the design already does on phones.
 *
 * !important is needed throughout: the core block styles these same selectors
 * inside their own @media (min-width: 600px) block, which would otherwise win
 * on source order.
 */

@media (max-width: 1100px) {
	/* Show the hamburger. */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* Hide the horizontal menu until the hamburger opens it. */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* The close button belongs to the open overlay, so it must be available. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		display: block !important;
	}

	/* Keep the overlay itself behaving as the block intends when open. */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}