/*
 * Menu en tiroir : sous la borne où la barre ne tient plus sur une ligne, le menu vient du côté et recouvre la page.
 * GeneratePress reste seul maître de l'état du menu (.toggled, html.mobile-menu-open) ; cette feuille l'habille,
 * menu-tiroir-bhk.js ajoute ce qu'elle ne peut pas faire. Le tiroir ne dépend d'aucune hauteur d'en-tête.
 * La borne est écrite ici et dans functions.php.
 */
@media (max-width: 1100px) {
	/*
	 * La couche la plus haute du site. Un seul contexte d'empilement, celui de l'en-tête, qui porte le voile (1),
	 * le tiroir (2) et la croix (3) : le voile couvre aussi la barre, à gauche du tiroir.
	 */
	html.mobile-menu-open #masthead {
		position: relative;
		z-index: 2147483647;
	}
	html.mobile-menu-open #masthead::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgba(42, 6, 4, 0.55);
		cursor: pointer;
	}
	html.mobile-menu-open,
	html.mobile-menu-open body {
		overflow: hidden;
	}

	/* Le tiroir : présent dans la page, hors écran tant qu'il est fermé. */
	#site-navigation.main-navigation {
		display: flex !important;
		flex-direction: column;
		position: fixed !important;
		top: 0 !important;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 2147483000;
		width: min(100%, 420px);
		height: 100%;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scroll-padding-bottom: 80px;
		background: var(--bhk-cream) !important;
		box-shadow: -8px 0 24px rgba(42, 6, 4, 0.25);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.2s var(--ease-accelerate, cubic-bezier(0.4, 0, 1, 1)), visibility 0s linear 0.2s;
	}
	html.mobile-menu-open #site-navigation.main-navigation {
		z-index: 2;
	}
	#site-navigation.main-navigation.toggled {
		transform: none;
		visibility: visible;
		transition: transform 0.26s var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1));
	}
	#site-navigation > .inside-navigation {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		width: 100%;
		padding: 0;
	}
	#site-navigation > .inside-navigation > .menu-toggle {
		display: none !important;
	}
	/* Le logo, en tête du tiroir ; son adresse vient de WordPress (--bhk-logo-tiroir, functions.php). */
	#site-navigation > .inside-navigation::before {
		content: "";
		display: block;
		flex: none;
		align-self: stretch;
		height: 76px;
		margin: 6px 16px 0;
		background: var(--bhk-logo-tiroir, none) left center / auto 60px no-repeat;
	}
	#site-navigation .main-nav {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		width: 100%;
	}
	#site-navigation .main-nav > ul {
		display: flex !important;
		flex-direction: column;
		flex: 1 0 auto;
		width: 100%;
		margin: 0;
		background: transparent !important;
	}

	/* Le bouton fermé, sur toute la plage : la feuille du thème ne le règle que jusqu'à 768 px. */
	#mobile-menu-control-wrapper .menu-toggle {
		color: var(--bhk-white);
		min-width: 48px;
		min-height: 48px;
	}
	/*
	 * La croix : au-dessus du tiroir, là où était le bouton, qui reste dans le flux : la barre garde sa hauteur.
	 * Page défilée, menu-tiroir-bhk.js la décale de la lecture pour la garder à l'écran.
	 */
	html.mobile-menu-open #mobile-menu-control-wrapper {
		position: relative;
		z-index: 3;
	}
	html.mobile-menu-open #mobile-menu-control-wrapper .menu-toggle {
		color: var(--bhk-selection-text) !important;
		background: transparent !important;
	}

	/* Les entrées */
	#site-navigation .main-nav ul li a {
		position: relative;
		color: var(--bhk-selection-text) !important;
		background: transparent !important;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3 !important;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		padding: 14px 20px !important;
		border-bottom: 1px solid var(--bhk-border);
	}
	#site-navigation .main-nav ul li a:hover,
	#site-navigation .main-nav ul li a:focus-visible {
		background: var(--bhk-cream-dark) !important;
		color: var(--bhk-selection-text) !important;
	}
	#site-navigation .main-nav ul li a:focus-visible {
		outline: 2px solid var(--bhk);
		outline-offset: -2px;
	}
	#site-navigation .main-nav ul li[class*="current-menu-"] > a {
		background: transparent !important;
		color: var(--bhk-selection-text) !important;
	}

	/* La flèche occupe toute la hauteur de sa ligne : un toucher à côté ne doit pas changer de page. */
	#site-navigation .main-nav ul li.menu-item-has-children > a {
		padding-right: 64px !important;
	}
	#site-navigation .main-nav .dropdown-menu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		float: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: auto;
		padding: 0 !important;
		line-height: 1;
		color: var(--bhk-selection-text);
	}
	/* Un contour au clavier, aux couleurs du site ; le clic n'en laisse aucun. */
	#site-navigation .main-nav .dropdown-menu-toggle:focus {
		outline: none;
	}
	#site-navigation .main-nav .dropdown-menu-toggle:focus-visible {
		outline: 2px solid var(--bhk);
		outline-offset: -2px;
	}

	/* Les sous-entrées : accordéon sur place. */
	#site-navigation ul ul {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0;
		min-width: 0;
		width: 100%;
	}
	#site-navigation .main-nav ul ul li a {
		min-height: 44px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: none;
		padding: 13px 20px 13px 36px !important;
	}
	#site-navigation .main-nav ul ul ul li a {
		padding-left: 52px !important;
	}

	/* « Nos centres » toujours déplié : le lieu se voit dès l'ouverture du tiroir. */
	#site-navigation li.bhk-menu-ouvert > ul.sub-menu {
		display: block !important;
		position: static !important;
		float: none;
		height: auto !important;
		left: auto !important;
		opacity: 1 !important;
		/* Elle suit le tiroir : fermé, ses liens ne doivent pas répondre au clavier. */
		visibility: inherit !important;
		pointer-events: auto !important;
		overflow: visible;
	}
	#site-navigation .main-nav ul li.bhk-menu-ouvert > a {
		padding-right: 20px !important;
	}
	#site-navigation li.bhk-menu-ouvert > a .dropdown-menu-toggle {
		display: none;
	}

	/* Le rendez-vous reste à l'écran, en bas du tiroir. */
	#site-navigation .main-nav > ul > li:last-child {
		position: sticky;
		bottom: 0;
		margin-top: auto;
		padding: 10px 16px 14px;
		background: var(--bhk-cream);
		border-top: 1px solid var(--bhk-border);
	}
	#site-navigation .main-nav > ul > li:last-child > a {
		display: block;
		margin: 0 !important;
		min-height: 48px;
		padding: 15px 16px !important;
		text-align: center;
		border: 0;
		border-radius: 6px;
		background: var(--bhk-selection) !important;
		color: var(--bhk-selection-text) !important;
		font-weight: 700;
	}
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
	#site-navigation.main-navigation,
	#site-navigation.main-navigation.toggled {
		transition: none;
	}
}