/* ── Resume Search Hero block ────────────────────────────────────────────── */
/* No width of its own: the page shell, or on a block theme the shared
 * constrained-layout rule in frontend-components.css, sets it. */
.wp-block-wcb-resume-search-hero {
	margin: 0 0 var(--wcb-space-lg);
}

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

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

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

.wcb-resume-search-hero .wcb-search-hero__field--select {
	flex: 0 0 auto;
	/* Sized by its longest option ("All Experience Levels", or whatever a
	 * translation makes of it), never narrower than 200px. A fixed width was a
	 * guess that clipped the label by a few pixels. */
	width: auto;
	min-width: min(200px, 100%);
}

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

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

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

.wcb-resume-search-hero .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;
	transition: background var(--wcb-transition-fast);
}

/* Darken the fill on hover, matching every other filled control (was
 * opacity: 0.9, which lightens a dark fill instead of darkening it and
 * gives no visible feedback at all against a light-accent theme).
 * Explicit color/border too so a theme's own button defaults can't win
 * any of these properties on hover — same fix as job-map's location
 * button and resume Print (Basecamp 10345889841). */
.wcb-resume-search-hero .wcb-search-hero__button:hover {
	background: var(--wcb-primary-dark);
	color: var(--wcb-on-primary, #ffffff);
	border: none;
}

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

.wcb-resume-search-hero .wcb-search-hero__button:active {
	background: var(--wcb-primary-dark);
	color: var(--wcb-on-primary, #ffffff);
	border: none;
	transform: scale(0.97);
}

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

.wcb-resume-search-hero .wcb-search-hero__checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	height: var(--wcb-control-h);
	font-size: var(--wcb-text-md);
	cursor: pointer;
	white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.wcb-resume-search-hero .wcb-search-hero__form {
		flex-direction: column;
	}

	.wcb-resume-search-hero .wcb-search-hero__field--select {
		width: 100%;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wcb-resume-search-hero .wcb-search-hero__input,
	.wcb-resume-search-hero .wcb-search-hero__select,
	.wcb-resume-search-hero .wcb-search-hero__button {
		transition: none;
	}
}