/* =============================================================
 * NNG Contract Cross Reference filter
 * Type-of-search dropdown + search input + button toolbar on top of
 * `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides -----
 * Tighter corners and a single unified surface colour for the whole
 * filter (header + body) instead of the default white card with a
 * blue header bar. */
.nng-form.contract-cross-reference-filter {

	/* Site style guide: Lato. Bold is the default for all filter text;
	 * buttons and the controls are reset to normal weight below. */
	--nng-font: var(--wp--preset--font-family--lato, "Lato", "Helvetica Neue", arial, sans-serif);
	background: #f7f7f7;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: 700;
}

.nng-form.contract-cross-reference-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

/* All non-control filter text is Lato Bold (header + field label). */
.nng-form.contract-cross-reference-filter .form-header,
.nng-form.contract-cross-reference-filter .form-row > label {
	font-weight: 700;
}

/* The control text (select + text input) stays Lato Normal. */
.nng-form.contract-cross-reference-filter select,
.nng-form.contract-cross-reference-filter input[type="text"] {
	font-weight: 400;
}

/* ----- Controls: stacked dropdown + search input + button toolbar ----- */
.nng-form.contract-cross-reference-filter .contract-cross-reference-filter__controls {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap);
}

.nng-form.contract-cross-reference-filter .contract-cross-reference-filter__controls > .form-row {
	margin: 0;
}

.nng-form.contract-cross-reference-filter .contract-cross-reference-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 0.5rem;
}

/* Toolbar buttons size to their label rather than the wide default
 * `.nng-btn` column so CLEAR / DOWNLOAD / RETRIEVE sit in a tidy row.
 * Pill-shaped (matching wp-block-button__link) and Lato Normal button
 * text per the style guide. */
.nng-form.contract-cross-reference-filter .nng-btn {
	font-weight: 400;
}

/* No underline on button hover/focus. */
.nng-form.contract-cross-reference-filter .nng-btn:hover,
.nng-form.contract-cross-reference-filter .nng-btn:focus-visible {
	text-decoration: none;
}


.nng-form.contract-cross-reference-filter .contract-cross-reference-filter__toolbar .nng-btn {
	min-width: 7rem;
	max-width: none;
}

/* RETRIEVE: primary action in Accent 1 navy (#2054AE). */
.nng-form.contract-cross-reference-filter .nng-btn[name="retrieve"] {
	background: var(--wp--preset--color--accent-1, #2054ae);
	border-color: var(--wp--preset--color--accent-1, #2054ae);
	color: #fff;
}

@media (max-width: 720px) {

	.nng-form.contract-cross-reference-filter .contract-cross-reference-filter__toolbar {
		justify-content: flex-end;
	}
}