/* Overlay menu: Olivx logo in the white brand panel (left half on desktop, top strip on phones) */
.menu__brand .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 8%;
}

.menu__logo {
	display: block;
	width: min(100%, 460px);
	height: auto;
}

@media (max-width: 768px) {
	.menu__brand .logo {
		width: 100%;
		height: 100%;
		padding: 16px 24px;
	}

	.menu__logo {
		width: auto;
		max-width: 80%;
		max-height: 100%;
	}
}
/* Close (X) sits on the olive panel whenever the menu is side-by-side (legacy stacks it below 769px) */
@media (min-width: 769px) {
	.burger--close .burger__patty {
		background: #fff;
	}
}
/* ---------- Menu list: one centred column; scrolls inside the panel when the window is short ---------- */
.menu__list {
	flex-wrap: nowrap !important;
	justify-content: flex-start;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 96px 0 48px;
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / .35) transparent;
}

/* auto margins centre the items when they fit, and collapse to 0 when the list needs to scroll */
.menu__list > .menu__item:first-child {
	margin-top: auto;
}

.menu__list > .menu__item:last-child {
	margin-bottom: auto;
}

.menu__list::-webkit-scrollbar {
	width: 6px;
}

.menu__list::-webkit-scrollbar-thumb {
	background: rgb(255 255 255 / .35);
	border-radius: 3px;
}

.menu__item {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.menu__list {
		padding: 32px 0 40px;
	}
}
/* ---------- Phones: close (X) sits in the green panel, always visible above the menu ---------- */
.menu {
	z-index: 9;   /* below the burger (z-index 10 on desktop, 30 when pinned on phones) */
}

@media (max-width: 768px) {
	.burger.burger--close {
		position: fixed;
		top: calc(25vh + 18px);   /* just inside the green panel (the white logo strip is 25vh tall) */
		right: 20px !important;   /* beats the legacy right offsets */
		z-index: 30;
		padding: 12px;            /* comfortable tap target */
		margin: -12px;
		transition: transform .4s cubic-bezier(.23, 1, .32, 1);
	}

	.burger.burger--close .burger__patty {
		background: #fff;
	}
}