/* ==========================================================================
   forms.css — search form, buttons, inputs
   ========================================================================== */

@layer components {
	.search-form {
		display: flex;
		gap: var(--space-xs);
		max-width: 500px;
	}

	.search-form .search-field {
		flex: 1;
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		font: inherit;
	}

	.search-form .search-submit {
		padding: 0.5rem 1rem;
		background: var(--color-primary);
		color: #fff;
		border: 0;
		border-radius: var(--radius);
	}

	.search-form .search-submit:hover {
		background: var(--color-primary-hover);
	}
}