/* Multi Level Mobile Menu. Colours, fonts and sizes come from Appearance → Mobile Menu
   as CSS variables; the values after the commas below are only fallbacks. */

/* ---------- Triggers ---------- */
.open-mobile-menu { cursor: pointer; }

/* The doubled class keeps theme / Elementor button styles from winning. */
button.mlmm-icon.open-mobile-menu,
button.mlmm-icon.open-mobile-menu:hover,
button.mlmm-icon.open-mobile-menu:focus,
button.mlmm-icon.open-mobile-menu:active {
	display: inline-flex;
	width: auto;
	min-width: 0;
	min-height: 0;
	opacity: 1;
	visibility: visible;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mlmm-icon-color, currentColor);
	line-height: 0;
}
.mlmm-icon svg {
	width: var(--mlmm-icon-size, 30px);
	height: var(--mlmm-icon-size, 30px);
	fill: none;
	stroke: var(--mlmm-icon-color, currentColor);
	stroke-width: var(--mlmm-icon-thickness, 2px);
}
.mlmm-icon line { vector-effect: non-scaling-stroke; } /* keeps the thickness in real pixels */

html.mlmm-is-open { overflow: hidden; }

/* ---------- Off-canvas shell ---------- */
.mlmm {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--mlmm-z, 999999);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s var(--mlmm-speed, 0.3s);
}
.mlmm.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.mlmm, .mlmm * { box-sizing: border-box; }

.mlmm__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--mlmm-speed, 0.3s) ease;
}
.mlmm.is-open .mlmm__overlay { opacity: 1; }

.mlmm__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: var(--mlmm-width, 100%);
	max-width: 100%;
	background: var(--mlmm-panel-bg, #fff);
	transition: transform var(--mlmm-speed, 0.3s) ease;
}
.mlmm--left .mlmm__panel { left: 0; transform: translateX(-100%); }
.mlmm--right .mlmm__panel { right: 0; transform: translateX(100%); }
.mlmm.is-open .mlmm__panel { transform: none; }

/* ---------- Top bar: back + close ---------- */
.mlmm__bar {
	display: flex;
	flex: none;
	align-items: center;
	min-height: 56px;
	padding: 0 8px;
	background: var(--mlmm-bar-bg, #fff);
	color: var(--mlmm-bar-color, #111);
	font-size: var(--mlmm-bar-font-size, 1.1rem);
}
#mlmm .mlmm__back,
#mlmm .mlmm__close,
#mlmm .mlmm__back:hover,
#mlmm .mlmm__close:hover,
#mlmm .mlmm__back:focus,
#mlmm .mlmm__close:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
#mlmm .mlmm__back[hidden] { display: none; }
#mlmm .mlmm__close,
#mlmm .mlmm__close:hover,
#mlmm .mlmm__close:focus { margin-left: auto; justify-content: center; } /* always pinned right */
.mlmm__bar svg {
	flex: none;
	width: 1.3em;
	height: 1.3em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mlmm__back-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60vw;
}

/* ---------- Sliding views (one per menu / submenu) ---------- */
.mlmm__views {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}
.mlmm__view {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--mlmm-panel-bg, #fff);
	visibility: hidden;
	transform: translateX(100%);          /* waiting off to the right */
	transition: transform var(--mlmm-speed, 0.3s) ease, visibility 0s var(--mlmm-speed, 0.3s);
}
.mlmm__view.is-parent { transform: translateX(-100%); } /* already passed, off to the left */
.mlmm__view.is-current {
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* ---------- Items ---------- */
#mlmm .mlmm__list,
#mlmm .mlmm__item {
	margin: 0;
	padding: 0;
	list-style: none;
}
#mlmm .mlmm__link {
	position: relative;
	display: block;
	overflow: hidden;
	padding: var(--mlmm-item-padding, 20px 30px);
	border-bottom: var(--mlmm-item-border, 0);
	background-color: var(--mlmm-item-bg, transparent);
	color: var(--mlmm-item-color, inherit);
	font-family: var(--mlmm-item-font, inherit);
	font-size: var(--mlmm-item-font-size, 1rem);
	font-weight: var(--mlmm-item-font-weight, inherit);
	line-height: 1.3;
	text-align: var(--mlmm-item-align, left);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
#mlmm a.mlmm__link:active,
#mlmm a.mlmm__link:not(.mlmm__promo):focus-visible {
	background-color: var(--mlmm-item-bg-hover, var(--mlmm-item-bg, transparent));
	color: var(--mlmm-item-color-hover, var(--mlmm-item-color, inherit));
}
@media (hover: hover) {
	#mlmm a.mlmm__link:not(.mlmm__promo):hover {
		background-color: var(--mlmm-item-bg-hover, var(--mlmm-item-bg, transparent));
		color: var(--mlmm-item-color-hover, var(--mlmm-item-color, inherit));
	}
	#mlmm a.mlmm__promo:hover { filter: brightness(1.12); }
}
#mlmm a.mlmm__promo:active { filter: brightness(1.12); }

/* Promo items: optional image beside / above the text, optional background image */
#mlmm .mlmm__promo {
	display: flex;
	align-items: center;
	gap: 16px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#mlmm .mlmm__promo .mlmm__label { flex: 1 1 auto; min-width: 0; }
#mlmm .mlmm__promo-img { flex: none; max-width: 50%; height: auto; }
#mlmm .mlmm__promo--img-right { flex-direction: row-reverse; }
#mlmm .mlmm__promo--img-top { flex-direction: column; align-items: stretch; }
#mlmm .mlmm__promo--img-top .mlmm__promo-img { align-self: flex-start; }
#mlmm .mlmm__promo--img-top.mlmm__promo--text-center .mlmm__promo-img { align-self: center; }
#mlmm .mlmm__promo--img-top.mlmm__promo--text-right .mlmm__promo-img { align-self: flex-end; }

#mlmm .mlmm__img {
	position: absolute;
	top: 50%;
	left: var(--mlmm-img-left, auto);
	right: var(--mlmm-img-right, auto);
	width: var(--mlmm-img-size, 50px);
	height: var(--mlmm-img-size, 50px);
	max-width: none;
	border-radius: var(--mlmm-img-radius, 0);
	object-fit: cover;
	transform: translateY(-50%);
}

.mlmm :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

.mlmm__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.mlmm, .mlmm__overlay, .mlmm__panel, .mlmm__view { transition: none; }
}