/* =============================================================
 * NNG Capacity Constraint by Cycle filter
 * Gas Day + Cycle + Critical dropdowns + button toolbar on top of
 * `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides ----- */
.nng-form.capacity-constraint-by-cycle-filter {

	/* Site style guide: Lato. Bold default for all filter text;
	 * controls 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.capacity-constraint-by-cycle-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

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

/* Controls themselves stay Lato Normal; cap the dropdown widths. */
.nng-form.capacity-constraint-by-cycle-filter select {
	font-weight: 400;
	max-width: 22rem;
}

/* ----- Controls layout ----- */
.nng-form.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--nng-gap);
}

.nng-form.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__controls > .form-row {
	flex: 1 1 14rem;
	margin: 0;
}

/* ----- Button toolbar ----- */
.nng-form.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Buttons size to their label; pill-shaped (matching wp-block-button__link)
 * + Lato Normal text. */
.nng-form.capacity-constraint-by-cycle-filter .nng-btn {
	font-weight: 400;
	min-width: 7rem;
	max-width: none;
}

.nng-form.capacity-constraint-by-cycle-filter .nng-btn:hover,
.nng-form.capacity-constraint-by-cycle-filter .nng-btn:focus-visible {
	text-decoration: none;
}

/* RETRIEVE: primary action in Accent 1 navy (#2054AE). */
.nng-form.capacity-constraint-by-cycle-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.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__controls {
		flex-direction: column;
		align-items: stretch;
	}

	/* The controls container is now a column, so the desktop `flex-basis:
	 * 14rem` would apply to the vertical axis and inflate each row's
	 * height. Reset to content height and tighten the label/input gap so
	 * the label sits directly above its control. */
	.nng-form.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__controls > .form-row {
		flex: 0 0 auto;
		gap: 0.25rem;
	}

	.nng-form.capacity-constraint-by-cycle-filter .form-row > label {
		padding-top: 0;
	}

	/* Native date inputs stretch to fill the row, which strands the
	 * calendar icon at the far right and leaves a big empty gap inside
	 * the box. Size them to their content instead. */
	.nng-form.capacity-constraint-by-cycle-filter input[type="date"] {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}

	.nng-form.capacity-constraint-by-cycle-filter .capacity-constraint-by-cycle-filter__toolbar {
		justify-content: flex-start;
	}
}