/* The native WordPress dialog retains its focus trap, Escape key and scroll lock. */
@media (max-width: 899px) {
	.pc-site-header > .wp-block-group {
		flex-wrap: nowrap;
		gap: 1rem;
	}

	.pc-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.pc-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.pc-site-header .wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 48px;
		padding: .65rem .85rem;
		border: 1px solid #e6efeb;
		border-radius: 12px;
		background: #f6f8f2;
		color: #102a2a;
		font: inherit;
		font-size: .875rem;
		font-weight: 700;
	}

	.pc-site-header .wp-block-navigation__responsive-container-open::after {
		content: 'Menu';
	}

	.pc-site-header .wp-block-navigation__responsive-container.is-menu-open {
		box-sizing: border-box;
		padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
		background: #f6f8f2 !important;
		color: #102a2a !important;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-dialog {
		max-width: 480px;
		margin-inline: auto;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-close {
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 1px solid #d5e2db;
		border-radius: 50%;
		background: #fff;
		color: #102a2a;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		gap: 24px;
		padding-top: 72px;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content::before {
		content: 'Chaque piste compte.';
		color: #087a57;
		font-size: 1.5rem;
		font-weight: 750;
		line-height: 1.25;
		text-align: left;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 10px;
		width: 100%;
	}

	.pc-site-header .is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 58px;
		padding: 16px 18px;
		border: 1px solid #d5e2db;
		border-radius: 14px;
		background: #fff;
		color: #102a2a;
		font-size: 1.05rem;
		font-weight: 650;
		line-height: 1.35;
		text-align: left;
		text-decoration: none;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
		content: '→';
		flex-shrink: 0;
		color: #087a57;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[href*='/cartes-et-plans-detailles-des-pistes-cyclables/'] {
		border-color: #087a57;
		background: #087a57;
		color: #fff;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[href*='/cartes-et-plans-detailles-des-pistes-cyclables/']::after {
		color: #d6f36a;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
		border-color: #087a57;
		box-shadow: 0 4px 12px rgb(16 42 42 / 8%);
	}
}

/* Short landscape screens benefit from two columns of touch-sized links. */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
	.pc-site-header .is-menu-open .wp-block-navigation__responsive-dialog {
		max-width: 720px;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		gap: 16px;
		padding-top: 56px;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content::before {
		font-size: 1.2rem;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.pc-site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		min-height: 54px;
		padding: 12px 16px;
	}
}