/* Desktop default: hide hamburger */
.hamburger, .mobile-menu { display: none; }

/* Mobile header (<=900px) */
@media (max-width: 900px) {
	.header-nav {
		padding: 12px 16px;
	}

	/* Hide desktop nav links & socials on mobile, show hamburger */
	.header-ul, .social-icons-nav, #translate-popup {
		display: none !important;
	}
		#current-flag { display: none !important; }

	.icons-container {
		gap: 8px;
	}

    .social-icons-mobile {
        padding: 8px 16px;
        margin-top: 10px;
    }

	.hamburger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		position: relative; /* needed for absolute bars when open */
		overflow: visible;  /* prevent clipping when rotated */
	}

		.hamburger .bar {
			display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		margin: 3px 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

		/* Animate to X when open - center bars and rotate */
		.hamburger.change .bar {
			position: absolute;
			top: 50%;
			left: 50%;
			transform-origin: center;
			margin: 0; /* avoid side-effects from margins when absolute */
		}
		.hamburger.change .bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
		.hamburger.change .bar:nth-child(2) { opacity: 0; }
		.hamburger.change .bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

	/* Mobile menu panel */
	.mobile-menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		background: #1A0929;
		border-top: 1px solid rgba(255,255,255,0.08);
		display: none;
		flex-direction: column;
		padding: 12px 16px;
		z-index: 999;
	}

	.mobile-menu.show-menu { display: flex; }

	.mobile-menu-list {
		list-style: none;
		padding: 0;
		margin: 0 0 8px 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

    .mobile-menu-list-li {
        padding: 3px 16px;
    }

	.mobile-link {
		color: #fff;
		text-decoration: none;
		font-family: 'Good Times', sans-serif;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.mobile-languages {
		border-top: 1px solid rgba(255,255,255,0.08);
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	/* Optional: position parent for absolute menu */
	.nav-container { position: relative; }
}