.wcb-search-hero__form {
	display: flex;
	gap: var(--wcb-space-md);
	align-items: stretch;
}

.wcb-search-hero--vertical .wcb-search-hero__form {
	flex-direction: column;
}

.wcb-search-hero__field--keyword {
	flex: 1;
	min-width: 0;
}

.wcb-search-hero__field--select {
	flex-shrink: 0;
	width: min(160px, 100%);
}

.wcb-search-hero--vertical .wcb-search-hero__field--keyword,
.wcb-search-hero--vertical .wcb-search-hero__field--select,
.wcb-search-hero--vertical .wcb-search-hero__field--submit {
	width: 100%;
}

.wcb-search-hero__input,
.wcb-search-hero__select {
	width: 100%;
	height: var(--wcb-control-h);
	padding: 0 var(--wcb-space-lg);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-md);
	font-size: var(--wcb-text-md);
	font-family: inherit;
	background: var(--wcb-base);
	color: var(--wcb-contrast);
	appearance: auto;
	min-width: 0;
	min-height: var(--wcb-control-h);
}

.wcb-search-hero__input:focus,
.wcb-search-hero__select:focus {
	outline: 2px solid var(--wcb-primary);
	outline-offset: 1px;
}

.wcb-search-hero__button {
	height: var(--wcb-control-h);
	padding: 0 var(--wcb-space-2xl);
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary, #ffffff);
	border: none;
	border-radius: var(--wcb-radius-md);
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	min-height: var(--wcb-control-h);
	transition: background var(--wcb-transition-snappy) ease;
}

/* Colour and border restated with the fill: a theme's button:hover can
 * otherwise win just one of them (Basecamp 10345889841). */
.wcb-search-hero__button:hover,
.wcb-search-hero__button:active {
	background: var(--wcb-primary-dark);
	color: var(--wcb-on-primary, #ffffff);
	border: none;
}

.wcb-search-hero__button:focus-visible {
	outline: 2px solid transparent !important;
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-search-hero__button:active {
	transform: scale(0.97);
}

.wcb-search-hero--vertical .wcb-search-hero__button {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.wcb-search-hero__button {
		transition: none !important;
	}
}

/* Tablet: the search gets its own full-width row and the filters share the
   row below, as on Find Jobs. On one row the selects squeezed the search to
   under 100px at 768 (Basecamp 10439833472). */
@media (max-width: 1024px) {
	.wcb-search-hero--horizontal .wcb-search-hero__form {
		flex-wrap: wrap;
	}

	.wcb-search-hero--horizontal .wcb-search-hero__field--keyword {
		flex-basis: 100%;
	}

	.wcb-search-hero--horizontal .wcb-search-hero__field--select {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.wcb-search-hero__form {
		flex-direction: column;
	}

	/* A full-width primary button on a phone, like Find Jobs and Find Candidates. */
	.wcb-search-hero__field--select,
	.wcb-search-hero__button {
		width: 100%;
	}
}