/* Maison Chery mobile menu: frosted white background, left-aligned layout, logo, accordion,
   tighter submenus, pinned language switch */

/* Desktop shows the same menu container inline, so the mobile-only extras stay hidden there. */
.mcm-logo,
.mcm-footer {
	display: none;
}

@media (max-width: 1024px) {
	body.mcm-on {
		--mcm-gutter: 36px;
		--mcm-glass: rgba(255, 255, 255, .55);
		--mcm-blur: blur(28px) saturate(1.3);
	}

	/* Frosted glass: the page stays visible behind the menu, blurred and washed in white */
	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--mcm-glass) !important;
		-webkit-backdrop-filter: var(--mcm-blur);
		backdrop-filter: var(--mcm-blur);
		padding: 0 !important;
	}

	/* The header's fade-in animation hint would otherwise stop the blur from reaching the page behind */
	body.mcm-on .site-header .h-animate--from-top {
		will-change: auto !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		min-height: 100%;
		box-sizing: border-box;
		padding: 0 var(--mcm-gutter) 96px !important; /* bottom room for the pinned language band */
		gap: 0 !important;
		text-align: left;
	}

	/* Logo, top left */
	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		min-height: 84px;
		padding-right: 56px; /* leaves room for the close button */
		box-sizing: border-box;
	}

	/* Both logos at the top of the open menu: La Maison Chery (home) | Maison Chery Lab */
	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo .mc-brand__home img {
		width: 160px;
		height: auto;
	}

	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo .mc-brand__divider {
		display: block !important;
		height: 18px;
	}

	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo .mc-brand__divider img {
		width: 18px;
	}

	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo .mc-brand__lab {
		display: block !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container .mcm-logo .mc-brand__lab img {
		height: 17px;
		width: auto;
	}

	/* Main list */
	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		width: 100%;
		gap: .2em !important;
		padding: .5rem 0 1.5rem !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100%;
		text-align: left;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		flex: 1 1 auto;
		justify-content: flex-start !important;
		text-align: left !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		text-align: left !important;
	}

	/* Arrow on the right edge of each parent row */
	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: flex-end;
		flex: 0 0 auto;
		width: 2.4rem;
		height: 2.4rem;
		margin: 0 !important;
		padding: 0 !important;
		background: none;
		border: 0;
		color: inherit;
		cursor: pointer;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		display: block !important;
		width: 14px;
		height: 14px;
		stroke: currentColor;
		transform: none !important;
		transition: transform .25s ease;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .has-child.mcm-open > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(180deg) !important;
	}

	/* Submenus, left aligned under their parent */
	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start !important;
		flex-basis: 100%;
		width: 100% !important;
		padding: .1em 0 .6em !important;
		margin: 0 !important;
		gap: 0 !important;
		background: transparent !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .has-child:not(.mcm-open) > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		width: 100%;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	body.mcm-on .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		justify-content: flex-start !important;
		text-align: left !important;
		padding: .22em 0 !important;
		line-height: 1.2 !important;
	}

	/* Language switch pinned to the bottom, left aligned, on the same frosted glass */
	body.mcm-on .wp-block-navigation__responsive-container .mcm-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		display: flex;
		justify-content: flex-start;
		padding: 18px var(--mcm-gutter) calc(18px + env(safe-area-inset-bottom));
		background: var(--mcm-glass);
		-webkit-backdrop-filter: var(--mcm-blur);
		backdrop-filter: var(--mcm-blur);
		border-top: 1px solid rgba(0, 0, 0, .08);
	}

	body.mcm-on .wp-block-navigation__responsive-container .mcm-footer .mcl-ts,
	body.mcm-on .wp-block-navigation__responsive-container .mcm-footer .mc-lang {
		margin: 0 !important;
	}
}