/* =========================================
   Fixed header baseline
   ========================================= */

:root {
	--menu-height: 56px; /* single source of truth */
}

/* Fixed header */
#menu-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
}

/* The visible bar (background + height) */
#menu-bar {
	height: var(--menu-height);
	background-color: var(--main-menu-bg);
	display: flex;
	align-items: center;
}

/* Spacer ensures content never sits under the fixed header */
#menu-spacer {
	height: var(--menu-height);
}

/* =========================================
   Desktop layout (unchanged behaviour visually)
   ========================================= */

#mobile-menu-wrapper {
	/* Desktop: normal flow inside bar */
	position: static;
	height: auto;
	width: 100%;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding: 0;
	transition: none;
}

/* Main list */
ul.headers {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: var(--menu-height);
	overflow: hidden;
}

/* Items */
li.heads {
	float: left;
}

li.headst {
	margin-left: auto;
}

/* Links */
a.headlink {
	display: flex;
	align-items: center;     /* vertically center text */
	justify-content: center;
	height: var(--menu-height);
	padding: 0 16px;
	color: var(--main-text-color);
	text-decoration: none;
	white-space: nowrap;
}

a.headlink:hover:not(.actives) {
	background-color: var(--inactive-tab-bg-hover);
}

.actives {
	background-color: var(--active-tab-bg);
}

a.logout, a.login {
	background-color: var(--inactive-tab-bg);
	cursor: pointer;
}

/* Hamburger hidden on desktop */
#menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--main-text-color);
	height: var(--menu-height);
	width: var(--menu-height);
	padding: 0;
	margin-left: auto; /* helps if it ever appears */
	cursor: pointer;
	transition: transform 0.3s ease;
}

/* Icon */
#menu-toggle::before {
	content: "☰";
	font-size: 2rem;
	line-height: 1;
}

#menu-toggle.open::before {
	content: "✖";
	font-size: 2rem;
	line-height: 1;
}

/* =========================================
   Mobile layout: hamburger right + sidebar
   ========================================= */

@media (max-width: 768px) {

	/* Show hamburger on mobile, fixed inside the bar at right */
	#menu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1201; /* above sidebar */
	}

	#menu-toggle.open {
		transform: rotate(90deg);
	}

	/* Sidebar panel */
	#mobile-menu-wrapper {
		position: fixed;

		/* Sidebar starts below the fixed header to avoid overlap */
		top: var(--menu-height);
		left: -280px;

		width: 280px;
		height: calc(100vh - var(--menu-height));

		background-color: rgba(39, 89, 113, 0.92);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition: left 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		z-index: 1200;
	}

	#mobile-menu-wrapper.open {
		left: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}

	/* Stack vertically */
	ul.headers {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;

		width: 100%;
		height: auto;
		background-color: transparent; /* sidebar provides bg */
		overflow: auto;
	}

	li.heads, li.headst {
		width: 100%;
		margin: 0;
	}

	/* Make each row full-width and left-aligned */
	a.headlink {
		justify-content: flex-start;
		height: auto;
		padding: 14px 16px;
	}

	/* Do not push login/logout with auto margin on mobile */
	li.headst {
		margin-left: 0;
	}

	/* Optional: lock scrolling when menu open */
	html.menu-open, body.menu-open {
		overflow: hidden;
	}
}