/*
 * The input keeps a light surface and dark text so it reads on any background,
 * including the dark footer. The label inherits colour from its context.
 */
.rc-search-form__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	color: inherit;
}

.rc-search-form__group {
	display: flex;
	gap: var(--space-2);
}

.rc-search-form__input {
	flex: 1 1 auto;
	/* Prevents the flex item from overflowing its container on narrow screens. */
	min-width: 0;
	/* 44px minimum touch target; 16px text avoids the iOS Safari zoom-on-focus. */
	min-height: var(--target-min);
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background-color: var(--color-surface);
	border: var(--border-default);
	border-radius: var(--radius-md);
}

.rc-search-form__input::placeholder {
	color: var(--color-text-muted);
}

.rc-search-form__input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
	border-color: var(--color-focus-ring);
}

.rc-search-form__submit {
	flex: 0 0 auto;
}

/* On the results page the form sits above the results as a refine bar. */
.rc-search-form--banner {
	margin-bottom: var(--space-6);
}