/* stays over .mbb-bar (50) while it fades out */
.mbb-header {
	position: relative;
	z-index: 55;
}

.mbb-header__bar {
	background: var(--mbb-light-pink);
}

.mbb-header__inner {
	position: relative;
	display: flex;
	justify-content: flex-end;
	max-width: 1280px;
	height: 135px;
	margin: 0 auto;
	padding: 16px 44px 0 40px;
}

.mbb-header__logo {
	position: absolute;
	top: 10px;
	left: 40px;
	z-index: 2;
	display: block;
	width: 243px;
}

.mbb-header__logo .mbb-logo {
	width: 100%;
	height: auto;
}

/* site.js removes .is-jiggling on animationend so the wobble always finishes */
.mbb-jelly.is-jiggling .mbb-logo {
	animation: mbb-jelly 1240ms both;
}

@keyframes mbb-jelly {
	0% {
		transform: scale(1, 1);
		animation-timing-function: ease-out;
	}
	18.7% {
		transform: scale(1.25, 0.75);
		animation-timing-function: ease-in-out;
	}
	30.4% {
		transform: scale(0.907, 1.093);
		animation-timing-function: ease-in-out;
	}
	42.5% {
		transform: scale(1.033, 0.967);
		animation-timing-function: ease-in-out;
	}
	54.6% {
		transform: scale(0.988, 1.012);
		animation-timing-function: ease-in-out;
	}
	66.8% {
		transform: scale(1.004, 0.996);
		animation-timing-function: ease-in-out;
	}
	78.9% {
		transform: scale(0.9985, 1.0015);
		animation-timing-function: ease-in-out;
	}
	100% {
		transform: scale(1, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbb-jelly.is-jiggling .mbb-logo {
		animation: none;
	}
}

.mbb-header__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	width: 410px;
}

.mbb-header__nav {
	display: flex;
	gap: 10px;
	padding-right: 4px;
}

.mbb-header__edge {
	position: relative;
	z-index: 1;
	height: 30px;
}

.mbb-header__edge::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/dividers/lightpink.png") no-repeat;
	background-size: 100% 100%;
	transform: rotate(180deg);
}

.mbb-header__actions {
	display: none;
}

.mbb-bar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	/* extra 40px clears the hanging logo */
	transform: translateY(calc(-100% - 40px));
	visibility: hidden;
	transition: transform 220ms ease, visibility 0s 220ms;
}

.mbb-bar.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 220ms ease;
}

.mbb-bar.is-docked {
	opacity: 0;
	transition: opacity 140ms ease;
}

.mbb-bar.is-snapping {
	transition: none;
}

.mbb-bar__body {
	background: var(--mbb-light-pink);
}

.mbb-bar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	max-width: 1280px;
	height: 66px;
	margin: 0 auto;
	padding: 6px 44px 0 40px;
}

.mbb-bar__logo {
	position: absolute;
	top: 6px;
	left: 40px;
	z-index: 2;
	display: block;
	width: 128px;
}

.mbb-bar__logo .mbb-logo {
	width: 100%;
	height: auto;
}

.mbb-bar__controls {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mbb-bar__search {
	width: 280px;
}

.mbb-bar .mbb-search {
	height: 41px;
}

.mbb-bar__nav {
	display: flex;
	gap: 10px;
}

.mbb-bar__actions {
	display: none;
}

.mbb-bar__edge {
	position: relative;
	height: 16px;
}

.mbb-bar__edge::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/dividers/lightpink.png") no-repeat;
	background-size: 100% 100%;
	transform: rotate(180deg);
}

html {
	scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbb-bar {
		transition: none;
	}
}

.mbb-search {
	display: flex;
	width: 100%;
	height: 44px;
}

.mbb-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 14px;
	border: var(--mbb-stroke) solid var(--mbb-black);
	border-right: 0;
	border-radius: var(--mbb-radius-sm) 0 0 var(--mbb-radius-sm);
	background: var(--mbb-white);
	font-size: 15px;
	color: var(--mbb-black);
}

/* ring the whole field, not just the input */
.mbb-search__input:focus-visible {
	outline: none;
}

.mbb-search:has(.mbb-search__input:focus-visible) {
	border-radius: var(--mbb-radius-sm);
	outline: 3px solid var(--mbb-cyan);
	outline-offset: 2px;
}

.mbb-search__input::placeholder {
	color: var(--mbb-text-grey);
	opacity: 1;
}

.mbb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.mbb-search__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 50px;
	height: 100%;
	padding: 0;
	border: var(--mbb-stroke) solid var(--mbb-black);
	border-radius: 0 var(--mbb-radius-sm) var(--mbb-radius-sm) 0;
	background: var(--mbb-cyan);
	cursor: pointer;
}

.mbb-search__btn:hover {
	background: var(--mbb-yellow);
}

.mbb-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow-y: auto;
	padding: 8px 20px 32px;
	background: var(--mbb-light-pink);
}

.mbb-overlay[hidden] {
	display: none;
}

.mbb-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 108px;
}

.mbb-overlay__top .mbb-overlay__logo {
	margin-left: -10px;
}

.mbb-overlay__nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mbb-overlay__search .mbb-search {
	height: 53px;
}

.mbb-overlay__search .mbb-search__input {
	font-size: 16px;
}

/* Mobile */

@media (max-width: 1023px) {
	.mbb-header__inner {
		height: 84px;
		padding: 20px 16px 0;
		max-width: none;
	}

	.mbb-header__logo {
		top: 6px;
		left: 10px;
		width: 152px;
	}

	.mbb-header__controls {
		display: none;
	}

	.mbb-header__actions {
		display: flex;
		gap: 10px;
	}

	.mbb-header__edge {
		height: 18px;
	}

	.mbb-bar__inner {
		height: 62px;
		padding: 4px 16px 0 12px;
		max-width: none;
	}

	.mbb-bar__logo {
		top: 4px;
		left: 10px;
		width: 118px;
	}

	.mbb-bar__controls {
		display: none;
	}

	.mbb-bar__actions {
		display: flex;
		gap: 10px;
	}

	.mbb-bar__edge {
		height: 12px;
	}
}

@media (min-width: 1024px) {
	.mbb-overlay {
		display: none !important;
	}
}