/* ==================================================
	SEARCH BAR - Mobile First
================================================== */

.header-search-bar {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background: var(--white);
	transition: max-height 0.35s ease, opacity 0.25s ease;
}

.header-search-bar.active {
	max-height: 5.625rem;
	opacity: 1;
}

.header-search-inner {
	padding-block: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ==================================================
	SEARCH INPUT
================================================== */

.header-search-inner input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--black);
}

.header-search-inner input::placeholder {
	color: var(--muted);
}

/* ==================================================
	ICONS
================================================== */

.search-icon-small,
.search-close-btn svg {
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.search-icon-small {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--muted);
	flex-shrink: 0;
}

.search-close-btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Screen-reader-only label */
.header-search-inner .sr-only {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.search-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--muted);
	flex-shrink: 0;
	transition: color 0.2s;
}

.search-submit-btn:hover {
	color: var(--black);
}

.search-submit-btn:focus-visible,
.header-search-inner input:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
}

/* Hide the browser's native clear button */
.header-search-inner input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}

/* ==================================================
	CLOSE BUTTON
================================================== */

.search-close-btn {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mid);
	flex-shrink: 0;
}

.search-close-btn:hover {
	color: var(--black);
}

/* ==================================================
	TABLET (min-width: 641px)
================================================== */

@media (min-width: 641px) {

	.header-search-inner {
		padding-block: 1.125rem;
	}
}

/* ==================================================
	DESKTOP (min-width: 901px)
================================================== */

@media (min-width: 901px) {

	.header-search-inner {
		padding-block: 1.25rem;
	}
}