/**
 * Header responsive overrides.
 *
 * The core Navigation block's built-in "mobile" behavior measures available
 * space at runtime rather than switching at a fixed pixel value, and it has
 * no attribute for aligning the mobile overlay to the left. Both of those
 * are handled here instead, layered on top of the block's own markup.
 *
 * These selectors target the current core Navigation block markup. If a
 * future WordPress update changes those class names, inspect the rendered
 * header in your browser's dev tools and adjust the selectors below to
 * match.
 */

/* ---------- Desktop (900px and up): show a plain inline menu ---------- */
@media (min-width: 900px) {
	.site-header-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.site-header-nav .wp-block-navigation__responsive-container {
		display: flex !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		z-index: auto !important;
	}

	.site-header-nav .wp-block-navigation__responsive-dialog {
		position: static !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
	}

	.site-header-nav .wp-block-navigation__responsive-container-content {
		display: flex !important;
	}

	.site-header-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}

/* ---------- Mobile (under 900px): hamburger + left-aligned drawer ---------- */
@media (max-width: 899.98px) {
	
	/* Always show the hamburger toggle below 900px */
	.site-header-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* Always hide the nav list below 900px unless it's been toggled open */
	.site-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Hide the CTA button entirely on mobile, per request */
	.site-header-cta {
		display: none !important;
	}

	/* Push the hamburger button to sit at the far right of the header row */
	.site-header-inner {
		justify-content: space-between;
	}

	/* Turn the overlay into a left-edge drawer instead of a full-screen panel */
	.site-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		width: min(85vw, 320px) !important;
		height: 100vh !important;
	}

	.site-header-nav .wp-block-navigation__responsive-dialog {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
		padding: 1.5rem !important;
	}

	.site-header-nav .wp-block-navigation__responsive-container-content,
	.site-header-nav .wp-block-navigation__container {
		align-items: flex-start !important;
		text-align: left !important;
		width: 100%;
	}

	.site-header-nav .wp-block-navigation-submenu__toggle,
	.site-header-nav .wp-block-navigation-item__content {
		justify-content: flex-start !important;
		text-align: left !important;
	}
}