/* Block wrapper reset (0,1,0). Most themes wrap blocks in a low-specificity
 * ".wp-block { padding: ... }" rule the (0,1,0) selector wins on
 * source-order, so plain rules suffice. */
.wp-block-wp-career-board-job-search {
	border: none;
	box-shadow: none;
	margin: 0 0 var(--wcb-space-lg);
	padding: 0;
	background: none;
}

.wp-block-wp-career-board-job-filters {
    margin: 0 0 var(--wcb-space-lg);
}

/* ── Search form ─────────────────────────────────────────────────────────── */
.wcb-search-form {
	display: flex;
	/* stretch so the input and button always share one height. Themes
	 * (Reign) give the button taller font metrics than the input's
	 * min-height; stretch lets the shorter child fill the form box so the
	 * two edges line up (Basecamp 9891481085). */
	align-items: stretch;
	gap: 0;
	border-radius: var(--wcb-radius-lg);
	border: 1.5px solid var(--wcb-border, #e2e8f0);
	overflow: hidden;
	background: var(--wcb-base, #fff);
	transition: border-color var(--wcb-transition-snappy), box-shadow var(--wcb-transition-snappy);
}

.wcb-search-form:focus-within {
	border-color: var(--wcb-primary, #2563eb);
	box-shadow: var(--wcb-shadow-focus);
}

/* `[type=search]` attribute selector bumps to (0,2,1) which beats the
 * Reign/Astra `.entry-content input` (0,2,1) on source-order without
 * `!important`. The composite `:focus-within` ring on the parent form
 * is the visible focus indicator. */
[class*="wp-block-wp-career-board"] .wcb-search-input,
[class*="wp-block-wp-career-board"] .wcb-search-input[type=search] {
	flex: 1;
	border: none;
	box-shadow: none;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	font-size: var(--wcb-text-md);
	font-family: inherit;
	color: var(--wcb-contrast, #1e293b);
	background: transparent;
	min-width: 0;
	/* height:auto cancels any theme-set fixed input height so the flex
	 * `align-items: stretch` on the form can size it to the button. */
	height: auto;
	min-height: 50px;
}

[class*="wp-block-wp-career-board"] .wcb-search-input:focus {
	outline: 2px solid var(--wcb-primary, #2563eb);
	outline-offset: 2px;
	border: none;
	box-shadow: none;
}

.wcb-search-input::placeholder {
	color: var(--wcb-text-tertiary);
}

.wcb-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wcb-space-xs);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	background: var(--wcb-primary, #2563eb);
	color: var(--wp--preset--color--wcb-base);
	border: none;
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-medium);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	min-height: 50px;
	transition: background var(--wcb-transition-snappy);
}

/* Icon sized to sit level with the label (helper renders a 24px svg). */
.wcb-search-button svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.wcb-search-button:hover,
.wcb-search-button:focus {
	background: var(--wcb-primary-dark, #1d4ed8);
	color: var(--wp--preset--color--wcb-base);
	border: none;
}

.wcb-search-button:focus-visible {
	outline: 2px solid var(--wcb-primary, #2563eb);
	outline-offset: 2px;
}

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

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Stacked: drop the joined-pill chrome (single border + overflow clip)
	 * so the field and the Search button read as two distinct controls with
	 * a gap between them, rather than one fused two-tone slab. */
	.wcb-search-form {
		flex-direction: column;
		gap: var(--wcb-space-sm);
		border: none;
		background: none;
		overflow: visible;
		border-radius: 0;
	}

	/* Match the base selector's specificity ([attr] .class = 0,2,0) so this
	 * actually overrides the joined-pill rule that sets border:none / radius:0
	 * on the input. A bare .wcb-search-input (0,1,0) silently loses. */
	[class*="wp-block-wp-career-board"] .wcb-search-input,
	[class*="wp-block-wp-career-board"] .wcb-search-input[type=search] {
		border: 1.5px solid var(--wcb-border, #e2e8f0);
		border-radius: var(--wcb-radius-md);
	}

	.wcb-search-button {
		border-radius: var(--wcb-radius-md);
		text-align: center;
	}
}