/* =============================================================
 * NNG Gas Quality by ID filter
 * Gas-ID dropdown + Download button on top of `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides -----
 * Match the Gas Quality by Date filter: 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.gas-quality-by-id-filter {

	/* Site style guide: Lato. Bold is the default for all filter text;
	 * the dropdown and buttons 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.gas-quality-by-id-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

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

/* The dropdown text stays Lato Normal. */
.nng-form.gas-quality-by-id-filter select {
	font-weight: 400;
}

/* ----- Controls: dropdown + button toolbar ----- */
.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nng-gap);
}

/* Stack the dropdown beneath its label (column layout) instead of the
 * default label-beside-control row. Cap the column width so the long
 * gas-ID dropdown doesn't span the whole filter body. */
.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__controls > .form-row {
	flex: 0 1 30rem;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__controls > .form-row > label {
	flex: 0 0 auto;
	max-width: none;
	padding-top: 0;
}

/* Reset the select's inherited `flex: 1 1 18rem` from forms-base: in
 * this column layout that 18rem basis would be read as height and make
 * the dropdown enormous. Let it size to its natural height and fill the
 * capped control column width. */
.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__controls > .form-row > select {
	flex: 0 0 auto;
	max-width: 30rem;
}

.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Toolbar button sizes to its label rather than the wide default
 * `.nng-btn` column so DOWNLOAD sits tidily beside the dropdown.
 * Pill-shaped (matching wp-block-button__link) and Lato Normal button
 * text per the style guide. */
.nng-form.gas-quality-by-id-filter .nng-btn {
	font-weight: 400;
}

/* No underline on button hover/focus. */
.nng-form.gas-quality-by-id-filter .nng-btn:hover,
.nng-form.gas-quality-by-id-filter .nng-btn:focus-visible {
	text-decoration: none;
}

.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__toolbar .nng-btn {
	min-width: 7rem;
	max-width: none;
}

/* DOWNLOAD: primary action in Accent 1 navy (#2054AE). */
.nng-form.gas-quality-by-id-filter .nng-btn[name="download"] {
	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.gas-quality-by-id-filter .gas-quality-by-id-filter__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.nng-form.gas-quality-by-id-filter .gas-quality-by-id-filter__toolbar {
		justify-content: flex-start;
	}
}