/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Hamburger menu — mobile nav for nav.navBar at ≤720px - - - */


.hamburgerBar {
	display: none;
}

@media (max-width: 720px) {

	nav.navBar {
		position: sticky;
		top: 0;
		padding: 0;
		z-index: 9;
	}

	nav.navBar > .hamburgerBar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		gap: 1rem;
		background: var(--Appartenances-Bleu-10);
	}

	.hamburgerTitle {
		font-family: "PlexMono", monospace;
		font-size: var(--sizeXS);
		color: inherit;
	}

	.hamburgerToggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: none;
		color: inherit;
		cursor: pointer;
		z-index: 11;
		-webkit-tap-highlight-color: transparent;
	}

	.hamburgerToggle .bar {
		display: block;
		width: 24px;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
		transform-origin: center;
	}

	nav.navBar.is-open .hamburgerToggle .bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	nav.navBar.is-open .hamburgerToggle .bar:nth-child(2) {
		opacity: 0;
	}
	nav.navBar.is-open .hamburgerToggle .bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* override layout.css 960px rule: keep ul hidden by default, show as panel when open */
	nav.navBar ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0.5rem 0;
		background: var(--Appartenances-Bleu-05);
		border-bottom: var(--lineWeight) solid var(--lineColor);
		z-index: 10;
	}

	nav.navBar.is-open ul {
		display: flex;
	}

	nav.navBar li {
		display: block;
	}

	nav.navBar a {
		display: block;
		width: 100%;
		height: auto;
		padding: 0.75rem 1.25rem;
	}
}