.header-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(250, 248, 245, 0.88);
	z-index: 600;         
	box-sizing: border-box;
	border-bottom: 1px solid rgba(27,58,107,.08);
}

.header {
	height: 5rem;
}

.admin-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-links {
	display: flex;
	gap: 6rem;
	align-items: center;
	justify-content: center;
}

.header-link, .header-link:visited {
	color: var(--cbs-foreground);
}

.header-link:hover, .header-link:focus, .header-link:active {
	color: var(--cbs-orange);
}

.header img {
	height: 2rem;
	width: auto;
}

.menu-title {
	color: var(--cbs-foreground);
}

.menu-title:hover {
	cursor: pointer;
}

.menu-dropdown {
	text-align: left;
	display: none;
	position: absolute;
	min-width: 300px;
	z-index: 1;
	margin-top: 5px;
	border: 1px solid var(--cbs-muted);
	box-shadow: var(--shadow-color) 0 10px 15px -3px, var(--shadow-color) 0 4px 6px -4px;
	background: rgba(250, 248, 245, 0.88);
}

.menu-dropdown a {
	display: block;
	background: rgba(250, 248, 245, 0.88);
	padding: 0.5em;
	color: var(--cbs-foreground);
}

.menu-dropdown a:not(:last-child) {
	border-bottom: #888 1px solid;
}

.menu-dropdown.visible { display: flex; flex-direction: column; }

.mobile-header {
	position: relative;
	/*
	top: 0;
	left: 0;
	width: 100%;
	*/
	background: rgba(250, 248, 245);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 600;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	height: 5rem;
}

.mobile-header-image {
	height: 2rem;
	width: auto;
}

/* ── HAMBURGER BUTTON ── */
.menu-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	/* z-index: 1100; */
	padding: 0;
}

.hamburger {
	width: 26px;
	height: 18px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bar {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: #000;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1),
				opacity   0.3s ease,
				width     0.35s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Open state — morph into × */
.menu-btn.is-open .bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	width: 100%;
}
.menu-btn.is-open .bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.menu-btn.is-open .bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ── SLIDE-DOWN MENU OVERLAY ── */
.menu-overlay {
	position: fixed;
	top: 5rem; left: 0; right: 0;
	height: calc(100vh - 5rem);   /* fallback */
    height: calc(100dvh - 5rem);  /* overrides if supported */
    overflow-y: auto;
	background: rgba(250, 248, 245);
	z-index: 500;
	display: flex;
	flex-direction: column;
	padding-top: var(--nav-h);
	/* Hidden state */
	transform: translateY(-100%);
	transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
	will-change: transform;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.menu-overlay.is-open {
	transform: translateY(0);
}

/* ── MENU CONTENT ── */
.menu-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
}

.menu-links {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-between;
	gap: 0.5rem;
}

.menu-links div.indent {
	padding-left: 30px;
}

.menu-links a {
	font-size: 1rem;
  	line-height: 1.5rem;
	padding-top: .5rem;
  	padding-bottom: .5rem;
	color: var(--cbs-foreground);
	border-bottom: 1px solid rgba(240, 235, 228,1);
}

.menu-links a:hover,
.menu-links a:focus {
	color: var(--cbs-orange);
}

.menu-footer {
	display: flex;
	margin-top: 8rem;
	margin-bottom: 2rem;
	gap: 1rem;
}

.menu-footer a {
	color: rgb(107, 114, 128);
}

.menu-footer a:hover,
.menu-footer a:focus {
	color: var(--cbs-forground);
}