.overflow-menu {
	--bs-offcanvas-width: clamp(32rem, 43vw, 52rem);
	border: 0;
	background: rgba(255, 255, 255, .94);
	color: var(--color-secondary);
	box-shadow: -2rem 0 5rem rgba(26, 39, 50, .08);
	backdrop-filter: blur(18px);
}

.overflow-menu__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: clamp(2rem, 4vw, 4.5rem);
	overflow-y: auto;
}

.overflow-menu__header {
	display: flex;
	justify-content: flex-end;
	min-height: 2.5rem;
}

.overflow-menu__close {
	display: grid;
	width: 2.6875rem;
	height: 1.875rem;
	padding: 0;
	border: 0;
	background: transparent;
	place-items: center;
}

.overflow-menu__close img {
	display: block;
	width: 100%;
	height: auto;
}

.overflow-menu__primary {
	margin-top: clamp(.75rem, 2vh, 2rem);
}

.overflow-menu__primary-list,
.overflow-menu__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.overflow-menu__primary-list > li {
	position: relative;
}

.overflow-menu__primary-list > li::after,
.overflow-menu__search::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--divider-height);
	background: var(--divider-gradient);
	content: "";
	opacity: var(--divider-opacity);
}

.overflow-menu__primary-list a {
	position: relative;
	display: block;
	padding: clamp(.9rem, 1.7vh, 1.4rem) 3.5rem clamp(.9rem, 1.7vh, 1.4rem) 0;
	color: var(--color-primary);
	font-size: clamp(1.6rem, 2vw, 2.25rem);
	line-height: 1.2;
	text-decoration: none;
}


.overflow-menu__search {
	position: relative;
	margin-top: clamp(2.5rem, 7vh, 5rem);
}

.overflow-menu__search input {
	width: 100%;
	padding: .65rem 3rem .65rem 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--color-primary);
	font: inherit;
	font-size: clamp(1.5rem, 2vw, 2rem);
}

.overflow-menu__search input::placeholder {
	color: rgba(77, 79, 83, .58);
	opacity: 1;
}

.overflow-menu__search button {
	position: absolute;
	right: 0;
	bottom: .65rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.overflow-menu__search button span {
	position: absolute;
	top: .35rem;
	left: .35rem;
	width: .8rem;
	height: .8rem;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
}

.overflow-menu__search button span::after {
	position: absolute;
	top: .65rem;
	left: .65rem;
	width: .55rem;
	height: 1px;
	background: var(--color-accent);
	content: "";
	transform: rotate(45deg);
	transform-origin: left center;
}

.overflow-menu__secondary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
	margin-top: clamp(3rem, 7vh, 5rem);
	padding-bottom: 2rem;
}

.overflow-menu__social {
	flex: 0 0 auto;
	margin-top: auto;
}

.overflow-menu__links {
	display: grid;
	gap: .65rem;
}

.overflow-menu__links a {
	color: var(--color-secondary);
	font-size: clamp(.95rem, 1.05vw, 1.15rem);
	text-decoration: none;
}

.overflow-menu__links a:hover,
.overflow-menu__links a:focus-visible {
	color: var(--color-accent);
}

@media (max-width: 767.98px) {
	.overflow-menu {
		--bs-offcanvas-width: 100vw;
	}

	.overflow-menu__inner {
		padding: 1.5rem var(--container-x) 2rem;
	}

	.overflow-menu__primary-list a {
		font-size: clamp(1.5rem, 8vw, 2rem);
	}

	.overflow-menu__secondary {
		gap: 2rem;
	}
}

@media (max-width: 479.98px) {
	.overflow-menu__secondary {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

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