/**
 * Navigation du thème ClicAccess.
 *
 * Architecture immédiate :
 * - menu-primary : disclosure + inline-collapse ;
 * - menu-section : list + stacked ;
 * - menu-footer  : list + inline-wrap.
 *
 * Le fichier prépare aussi les évolutions futures sans les implémenter :
 * - overflow ;
 * - drawer ;
 * - menubar.
 */

/* =========================================================
   1. Règles communes
   ========================================================= */

.primary-navigation ul,
.menu,
.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Typographie et reset des éléments interactifs */

.primary-navigation :is(a, button),
.widget-area .menu a,
.site-footer .menu a {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

/* Focus clavier accessible */

.primary-navigation :is(a, button):focus,
.widget-area .menu a:focus,
.site-footer .menu a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.primary-navigation :is(a, button):focus:not(:focus-visible),
.widget-area .menu a:focus:not(:focus-visible),
.site-footer .menu a:focus:not(:focus-visible) {
	outline: none;
}

.primary-navigation :is(a, button):focus-visible,
.widget-area .menu a:focus-visible,
.site-footer .menu a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =========================================================
   2. Navigation principale : structure générale
   Pattern : disclosure
   Variante : inline-collapse
   ========================================================= */

.primary-navigation {
	width: 100%;
}

/* Bouton d'ouverture du menu */

.navigation-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.navigation-toggle__icon {
	display: inline-block;
	position: relative;
	inline-size: 1.25rem;
	block-size: 1rem;
	flex: 0 0 auto;
}

.navigation-toggle__icon::before,
.navigation-toggle__icon::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	background: currentColor;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		inset-block-start 0.2s ease;
}

.navigation-toggle__icon::before {
	inset-block-start: 0.125rem;
	box-shadow: 0 0.375rem 0 currentColor;
}

.navigation-toggle__icon::after {
	inset-block-start: 0.875rem;
}

.navigation-toggle[aria-expanded="true"] .navigation-toggle__icon::before {
	inset-block-start: 0.5rem;
	box-shadow: none;
	transform: rotate(45deg);
}

.navigation-toggle[aria-expanded="true"] .navigation-toggle__icon::after {
	inset-block-start: 0.5rem;
	transform: rotate(-45deg);
}

/* Panneau contenant le menu */

.navigation-panel {
	display: block;
}

.navigation-panel[hidden] {
	display: block;
}

/* =========================================================
   3. Menu principal
   ========================================================= */

.menu--primary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.menu--primary > :is(.menu-item, .page_item) {
	position: relative;
}

/* Liens et toggles */

.menu--primary > :is(.menu-item, .page_item)
	> :is(.menu-link, a, .menu-toggle) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.menu--primary > :is(.menu-item, .page_item) > .menu-toggle {
	gap: 0.5rem;
}

.menu-toggle__label {
	pointer-events: none;
}

/* Icône de sous-menu */

.menu-toggle__icon {
	display: inline-block;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	flex: 0 0 auto;
}

.menu-toggle__icon::before {
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
	transform: rotate(-135deg) translateY(-0.05em);
}

/* États actifs */

.menu--primary
	> :is(
		.current-menu-item,
		.current-menu-ancestor,
		.current-menu-parent,
		.current_page_item,
		.current_page_ancestor,
		.current_page_parent
	)
	> :is(a, .menu-toggle) {
	font-weight: 700;
}

/* =========================================================
   4. Sous-menus (pattern disclosure)
   ========================================================= */

.menu--primary .sub-menu {
	display: block;
	min-inline-size: 14rem;
	padding-block: 0.5rem;
	border: 1px solid currentColor;
	background: #fff;
	color: #000;
}

.menu--primary .sub-menu[hidden] {
	display: none;
}

.menu--primary .sub-menu.is-open {
	display: block;
}

.menu--primary > :is(.menu-item, .page_item) > .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 100;
}

.menu--primary .sub-menu :is(.menu-item, .page_item) {
	display: block;
}

.menu--primary .sub-menu a {
	display: block;
	padding: 0.75rem 1rem;
}

.menu--primary .sub-menu a:hover,
.menu--primary .sub-menu a:focus-visible {
	text-decoration: underline;
}

/* =========================================================
   5. Amélioration progressive JavaScript
   ========================================================= */

.primary-navigation.is-enhanced
	.menu--primary.is-disclosure-enhanced
	.sub-menu[hidden] {
	display: none;
}

/* =========================================================
   6. Responsive (inline-collapse)
   ========================================================= */

@media (max-width: 64rem) {
	.primary-navigation {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.navigation-toggle {
		display: inline-flex;
		align-self: flex-start;
	}

	.navigation-panel[hidden] {
		display: none;
	}

	.primary-navigation.is-menu-open .navigation-panel {
		display: block;
	}

	.menu--primary {
		flex-direction: column;
		align-items: stretch;
	}

	.menu--primary > :is(.menu-item, .page_item) {
		inline-size: 100%;
	}

	.menu--primary
		> :is(.menu-item, .page_item)
		> :is(.menu-link, a, .menu-toggle) {
		inline-size: 100%;
		justify-content: space-between;
	}

	.menu--primary > :is(.menu-item, .page_item) > .sub-menu {
		position: static;
		min-inline-size: 100%;
		border-top: 0;
	}
}

/* =========================================================
   7. Menu de section
   Pattern : list
   Variante : stacked
   ========================================================= */

.menu--section {
	display: block;
}

.menu--section > :is(.menu-item, .page_item) {
	display: block;
}

.menu--section a {
	display: block;
	padding: 0.625rem 0.75rem;
}

.menu--section
	:is(
		.current-menu-item,
		.current-menu-ancestor,
		.current_page_item,
		.current_page_ancestor
	)
	> a {
	font-weight: 700;
}

.menu--section .sub-menu {
	margin-inline-start: 1rem;
}

/* =========================================================
   8. Menu de footer
   Pattern : list
   Variante : inline-wrap
   ========================================================= */

.menu--footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.menu--footer > :is(.menu-item, .page_item) {
	display: block;
}

.menu--footer a {
	display: inline-block;
	padding-block: 0.25rem;
}

.menu--footer .sub-menu {
	margin-block-start: 0.5rem;
}

/* =========================================================
   9. Préparation des variantes futures
   ========================================================= */

.menu--variant-overflow {
	/* Réservé à une implémentation future. */
}

.menu--variant-drawer {
	/* Réservé à une implémentation future. */
}

.menu--variant-columns {
	/* Réservé à une implémentation future. */
}

.menu--pattern-menubar {
	/* Réservé à une implémentation future. */
}