/**
 * Responsive header refinements for small-desktop / tablet widths (~600–1037px)
 *
 * Background: the theme styles the navigation as a mobile overlay at
 * `max-width: 782px`, but the core navigation block only swaps in the
 * hamburger toggle below its hardcoded 600px breakpoint. That left the
 * 600–782px band showing the mobile (column) nav styling WITHOUT a hamburger
 * — the items stacked vertically over the hero. Above 782px the horizontal
 * desktop nav showed but its top-level labels wrapped to two lines until
 * ~1024px, and the weather bar squeezed the "Full Report" button into a tall
 * sliver. These rules align the breakpoints and keep both areas tidy.
 */

/* ==========================================================================
   1. Show the hamburger (and hide the inline nav) up to 782px so the band
      between 600–782px uses the clean mobile menu the theme already styles.
   ========================================================================== */
@media (max-width: 782px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* ==========================================================================
   2. Desktop horizontal nav (>=783px): keep the four top-level items on a
      single line instead of wrapping ("Ski + / Ride") when space is tight.
   ========================================================================== */
@media (min-width: 783px) {
	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-ollie-mega-menu__toggle,
	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item .wp-block-navigation-item__label {
		white-space: nowrap !important;
	}
}

/* ==========================================================================
   3. Weather bar (<=1037px): never squeeze an item mid-word. Keep each item
      (and the "Full Report" button) on one line and let the bar wrap to a
      second centered row when it runs out of horizontal space, instead of
      collapsing "Full Report" into a tall multi-line sliver. Desktop
      (>=1038px) keeps its original single-row, space-between layout.
   ========================================================================== */
@media (max-width: 1037px) {
	.weather-bar {
		flex-wrap: wrap !important;
		row-gap: 12px !important;
		justify-content: center !important;
	}

	.weather-bar > * {
		flex-shrink: 0 !important;
	}

	.weather-bar .wp-block-button__link {
		white-space: nowrap !important;
	}
}