/* Navigation principale (desktop ≥ 1024 px) et menu mobile plein écran (< 1024 px).
   Bloc natif core/navigation sans script WordPress ; amélioration : assets/js/navigation.js. */

.zm-menu {
	gap: var(--space-lg);
}

.zm-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--tap-min);
	padding: 0 var(--space-sm);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--text-nav);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-nav);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}

.zm-nav .wp-block-navigation-item__content:hover {
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.zm-nav [aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Indicateur de sous-menu (chevron dessiné en CSS). */
.zm-nav .has-child > .wp-block-navigation-item__content::after,
.zm-nav .zm-subtoggle::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: var(--space-xs);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.zm-nav .has-child > a.wp-block-navigation-item__content[href]::after {
	display: none; /* le chevron est porté par le bouton zm-subtoggle (JS) */
}

html:not(.zm-js) .zm-nav .has-child > a.wp-block-navigation-item__content[href]::after {
	display: inline-block;
}

.zm-nav [aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

.zm-nav .zm-subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	margin-left: calc(-1 * var(--space-sm));
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--color-primary);
	cursor: pointer;
}

.zm-nav .zm-subtoggle::after {
	margin-left: 0;
}

/* Sous-menu desktop : panneau blanc, bordure, rayon 16, texte encre
   (le cœur impose sinon noir sur blanc aux sous-menus sans couleur de texte). */
.zm-nav .wp-block-navigation__submenu-container {
	color: var(--color-primary) !important;
	padding: var(--space-sm) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface) !important;
	box-shadow: var(--shadow-md);
}

.zm-nav .has-child .wp-block-navigation__submenu-container {
	min-width: 280px !important;
}

.zm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	padding: var(--space-sm) var(--space-md);
}

.zm-nav .zm-nav__tool {
	margin-top: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-alt);
}

.zm-nav .zm-nav__tool .wp-block-navigation-item__content {
	font-weight: var(--font-weight-semibold);
}

/* Bouton du menu mobile (créé par navigation.js) et lien de repli sans JS. */
.zm-menu-button {
	display: none;
}

.zm-menu-toggle .wp-block-button__link {
	min-height: var(--tap-min);
	padding: 0 var(--space-md);
}

@media (max-width: 1023px) {
	.zm-menu-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--tap-min);
		height: var(--tap-min);
		margin-right: calc(-1 * var(--space-sm));
		padding: 0;
		border: 0;
		border-radius: var(--radius-sm);
		background: none;
		color: var(--color-primary);
		cursor: pointer;
	}

	.zm-menu-button__icon,
	.zm-menu-button__icon::before,
	.zm-menu-button__icon::after {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: var(--radius-pill);
		background-color: currentColor;
		transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
	}

	.zm-menu-button__icon {
		position: relative;
	}

	.zm-menu-button__icon::before,
	.zm-menu-button__icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.zm-menu-button__icon::before {
		top: -7px;
	}

	.zm-menu-button__icon::after {
		top: 7px;
	}

	.zm-menu-button[aria-expanded="true"] .zm-menu-button__icon {
		background-color: transparent;
	}

	.zm-menu-button[aria-expanded="true"] .zm-menu-button__icon::before {
		transform: translateY(7px) rotate(45deg);
	}

	.zm-menu-button[aria-expanded="true"] .zm-menu-button__icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Panneau plein écran sous le header. */
	.zm-menu {
		display: none !important;
		position: fixed;
		top: calc(var(--zm-header-h) + var(--wp-admin--admin-bar--height, 0px));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 49;
		flex-direction: column;
		align-items: stretch !important;
		gap: var(--space-lg);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--space-md) var(--zm-gutter) var(--space-2xl);
		background-color: var(--color-surface);
		border-top: 1px solid var(--color-border);
	}

	.zm-menu.is-open,
	html:not(.zm-js) .zm-menu:target {
		display: flex !important;
	}

	html.zm-menu-open {
		overflow: hidden;
	}

	.zm-menu .wp-block-navigation,
	.zm-menu .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.zm-menu .wp-block-navigation-item {
		flex-wrap: wrap;
		border-bottom: 1px solid var(--color-border);
	}

	.zm-menu .wp-block-navigation-item__content {
		flex: 1;
		min-height: var(--control-height);
		padding: 0;
		font-size: var(--text-nav-mobile);
		font-weight: var(--font-weight-semibold);
		line-height: var(--leading-nav-mobile);
	}

	.zm-menu .zm-subtoggle {
		margin-left: 0;
	}

	/* Sous-menus en accordéon (fermés par défaut avec JS, ouverts sans JS). */
	.zm-menu .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		display: none;
		position: static;
		visibility: visible;
		opacity: 1;
		width: 100%;
		min-width: 0 !important;
		height: auto;
		overflow: visible;
		padding: 0 0 var(--space-md) var(--space-md) !important;
		border: 0 !important;
		box-shadow: none;
		background: none !important;
	}

	.zm-menu .wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	html:not(.zm-js) .zm-menu .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		display: flex;
	}

	.zm-menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.zm-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0;
		font-size: var(--text-body);
		font-weight: var(--font-weight-medium);
		min-height: var(--tap-min);
	}

	.zm-menu .zm-nav__tool {
		padding: 0 var(--space-md);
	}

	/* Dans le panneau, la barre orange est masquée : le CTA du menu devient l'action principale. */
	.zm-menu__cta,
	.zm-menu__cta .wp-block-button,
	.zm-menu__cta .wp-block-button__link {
		width: 100%;
	}

	.zm-menu__cta .wp-block-button.is-style-zm-ink > .wp-block-button__link {
		min-height: var(--control-height-lg);
		background-color: var(--color-action);
		border-color: var(--color-action);
		color: var(--color-on-action);
	}

	.zm-menu__cta .wp-block-button.is-style-zm-ink > .wp-block-button__link:hover {
		background-color: var(--color-action-hover);
		border-color: var(--color-action-hover);
	}
}

@media (min-width: 1024px) {
	.zm-menu-toggle {
		display: none !important;
	}
}

/* Avec JS, le lien de repli est remplacé par le bouton ; sans JS il reste visible (< 1024 px). */
.zm-js .zm-menu-toggle {
	display: none !important;
}