/* Mobile hamburger + overlay styles */

/* Hide mobile overlay elements on desktop */
#mobile-toggle { display: none; }
#mobile-overlay { display: none; }

@media screen and (max-width: 736px) {
	/* Show hamburger */
	#mobile-toggle {
		display: block;
		position: fixed;
		top: 0.45rem;
		right: 0.6rem;
		width: 36px;
		height: 28px;
		z-index: 10002;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
	}

	#mobile-toggle .bar {
		display: block;
		height: 3px;
		background: #222;
		border-radius: 2px;
		transition: transform .25s ease, opacity .25s ease;
	}

	/* Overlay */
	#mobile-overlay {
		position: fixed;
		inset: 0; /* top:0; right:0; bottom:0; left:0 */
		background: rgba(0,0,0,0.9);
		color: #fff;
		z-index: 10001;
		display: none;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#mobile-overlay.open { display: flex; }

	.mobile-overlay-inner {
		width: 100%;
		max-width: 720px;
		padding: 3.5rem 2rem;
	}

	.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
	.mobile-nav ul li { margin: 0.8rem 0; }
	.mobile-nav ul li a { color: #fff; font-size: 1.25rem; text-decoration: none; }

	/* Language links on their own line, right aligned */
	.mobile-lang {
		margin-top: 2rem;
		text-align: right;
		font-weight: 700;
	}
	.mobile-lang .mobile-lang-link { color: #fff; text-decoration: none; margin-left: 0.6rem; }
	.mobile-lang .sep { color: rgba(255,255,255,0.5); margin: 0 0.4rem; }

	/* Hide desktop nav on mobile to avoid duplicate */
	#nav { display: none !important; }

	/* Optional: animate hamburger into X when open */
	#mobile-toggle.open .top { transform: translateY(7px) rotate(45deg); }
	#mobile-toggle.open .middle { opacity: 0; }
	#mobile-toggle.open .bottom { transform: translateY(-7px) rotate(-45deg); }
}