/*
 * Desktop dropdown submenus: primary background, contrast text/links.
 * Scoped to >1024px only - below that, submenus live inside the mobile
 * overlay instead and must stay on the overlay's own dark/white colors.
 */
@media (min-width: 1025px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--primary) !important;
		border: none !important;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.wp-block-navigation .wp-block-navigation__submenu-container a {
		color: var(--wp--preset--color--contrast) !important;
	}
}

.header-cta {
	margin-left: 20px !important;
}

/* Mobile + tablet: force the hamburger nav, hide the header CTA. */
@media (max-width: 1024px) {
	.header-cta {
		display: none !important;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

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

	/*
	 * The desktop layout's justifyContent:"right" is reused by WordPress for the
	 * mobile overlay's cross-axis alignment too, right-pinning every stacked item.
	 * Force left alignment for the overlay specifically.
	 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		text-align: left !important;
	}

	/* Breathing room so items don't touch the screen edge. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-left: 20px !important;
		padding-right: 20px !important;
		row-gap: 8px !important;
	}

	/* Each top-level item: label and arrow share a row; the submenu wraps to its own row below. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		column-gap: 12px;
		width: 100%;
	}

	/* Show the arrow (core hides it by default in the overlay) and give it a real tap target. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}

	/*
	 * Collapsed by default; expand only when the arrow's aria-expanded says so.
	 * This reuses core's existing click/state wiring (data-wp-on--click,
	 * data-wp-bind--aria-expanded) - no custom JS needed, just respecting the
	 * state core already toggles instead of core's own "always show" override.
	 */
	.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column !important;
		flex-basis: 100%;
	}

	/* Submenu children: indent slightly, same white as the rest of the mobile menu, a touch smaller. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 8px !important;
		font-size: var(--wp--preset--font-size--small);
		opacity: 0.85;
	}
}