/*--------------------------------------------------------------
# Mobile Menu Overlay
# Fullscreen menu using a Group block (.mobile-menu-overlay)
# User can place any blocks inside it via the Site Editor
--------------------------------------------------------------*/

/* ---- Hamburger button ---- */
.menu-trigger-open {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 28px;
	height: 28px;
	position: absolute;
	z-index: 101;
}

.menu-trigger-open svg {
	width: 28px;
	height: 28px;
}

/* ---- Overlay container (hidden by default) ---- */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 30px;
	padding: 40px 20px;
	transform: translateX(-100%);
	transition: transform 0.4s ease-in-out;
	overflow-y: auto;
}

.wp-block-group.logo {
	align-self: center;
}

.mobile-menu-overlay.menu-open {
	transform: translateX(0);
}

/* ---- Close button ---- */
.menu-trigger-close {
	position: absolute;
	top: 42px;
	left: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 210;
}

.menu-trigger-close svg {
	width: 33px;
	height: 33px;
}

/* ---- Logo inside overlay ---- */
.mobile-menu-overlay .logo img,
.mobile-menu-overlay .mobile-menu-logo img {
	max-width: 180px;
}

/* ---- Body scroll lock ---- */
body.fixed-position {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* ---- Desktop: hide hamburger, hide overlay ---- */
@media screen and (min-width: 1025px) {
	.menu-trigger-open {
		display: none !important;
	}

	.mobile-menu-overlay {
		display: none !important;
	}
}

/* ---- Mobile: show hamburger, hide desktop nav ---- */
@media screen and (max-width: 1024px) {
	.menu-trigger-open {
		display: block;
	}

	/* Hide desktop navigation and social links */
	.header .desktop-nav,
	.header .desktop-social {
		display: none !important;
	}

	/* Header fixed on mobile */
	.header {
		/*position: fixed;*/
		width: 100%;
		z-index: 100;
		background-color: white;
	}
}