/**
 * LUMCON library catalog search form
 *
 * Styles the SirsiDynix (Enterprise) catalog search form embedded on the
 * library page. The form posts to lumcon.ent.sirsi.net; its markup is authored
 * by hand (e.g. in a Custom HTML block), so these classes are stable:
 *
 *   .lumcon-library-search-form
 *     └ .lumcon-search-field        (label stacked over the controls)
 *         └ .lumcon-search-controls (input + submit button, flex row)
 *
 * The input and button inherit the theme's global input/button styling; the
 * rules here only handle layout: the input grows to fill the row with the
 * button beside it, and the button wraps below on narrow screens.
 *
 * Relies on the theme's global CSS custom properties (--spacing-*, --font-*),
 * so it stays in sync with the design tokens. Enqueued via
 * lumcon/config/enqueue-library-search-form-styles.php.
 */

.lumcon-search-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}

.lumcon-search-field label {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-strong);
}

/* Input + button share one row, stretched to equal height. flex-wrap lets the
   button drop to its own line once the row gets too narrow. */
.lumcon-search-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--spacing-20);
}

/* The search input takes all the leftover space. min-width keeps it from
   shrinking so far that the button stays glued to its side on mobile — once the
   input can't keep its min-width next to the button, the button wraps below and
   the input expands to the full width. */
.lumcon-search-controls input[type="search"] {
	flex: 1 1 15rem;
	min-width: 12rem;
}

/* Button keeps its natural width and sits beside the input (or wraps below). */
.lumcon-search-controls .button {
	flex: 0 0 auto;
}