/* =============================================================
 * NNG Capacity Unsubscribed filter
 * Three-row criteria layout (2 controls, then 3 controls) plus a
 * CLEAR / RETRIEVE toolbar on top of `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides -----
 * Match the sibling capacity/gas-quality filters: 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.capacity-unsubscribed-filter {

	/* Site style guide: Lato. Bold is the 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-unsubscribed-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

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

/* Control text (dropdowns, text input) stays Lato Normal. */
.nng-form.capacity-unsubscribed-filter input,
.nng-form.capacity-unsubscribed-filter select {
	font-weight: 400;
}

/* Dropdown text and the field footnotes use a dark gray: lighter than
 * the near-black header text, darker than the CLEAR button surface. */
.nng-form.capacity-unsubscribed-filter select,
.nng-form.capacity-unsubscribed-filter .form-note {
	color: #6b7385;
}

/* Footnotes are normal weight (the filter sets Lato Bold as the default
 * for all text, which would otherwise bold the notes too). */
.nng-form.capacity-unsubscribed-filter .form-note {
	font-weight: 400;
}

/* ----- Three-row criteria layout -----
 * Rows are stacked vertically; each row is its own grid so the first
 * row can hold two equal controls and the second row three. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__grid {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap);
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row {
	display: grid;
	gap: var(--nng-gap) var(--nng-gap-lg);
	align-items: start;
}

/* Row 1 uses the same three-column track as row 2 so its two controls
 * match the width of the row-2 controls and left-align, leaving the
 * rightmost column empty. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--2,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Each grid cell stacks its label above the control (column layout)
 * instead of the default label-beside-control row. This applies to the
 * Field_Renderer `.form-row`s rendered directly into a row as well as
 * the custom cell wrappers that pair a control with its footnote. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row > .form-row,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell > .form-row {
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

/* Reset the inherited fixed-width label column from forms-base: in this
 * stacked layout the 18rem basis would be read as height. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row > .form-row > label,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell > .form-row > label {
	flex: 0 0 auto;
	max-width: none;
	padding-top: 0;
}

/* Controls fill their grid cell rather than the capped 22rem column
 * basis from forms-base (which in a column layout is read as height). */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row > .form-row > input,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row > .form-row > select,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell > .form-row > input,
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell > .form-row > select {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
}

/* Each cell holds its control plus the footnote below it; keep them
 * stacked and tight. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell .form-note {
	padding: 0;
}

/* When a cell is toggled off via `data-wp-bind--hidden` (Type of Location /
 * Location Zone for group-level reports), the boolean `hidden` attribute must
 * win over the cell's own `display: flex`. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__cell[hidden] {
	display: none;
}

/* ----- Toolbar (row 3): CLEAR / RETRIEVE aligned to the right ----- */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin-top: var(--nng-gap);
}

/* Toolbar buttons size to their label rather than the wide default
 * `.nng-btn` column. Pill-shaped (matching wp-block-button__link) and
 * Lato Normal text per the style guide. */
.nng-form.capacity-unsubscribed-filter .nng-btn {
	font-weight: 400;
	min-width: 7rem;
	max-width: none;
}

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


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

/* DOWNLOAD: revealed on RETRIEVE, hidden on CLEAR. The explicit rule is
 * needed because `.nng-btn` sets `display: inline-block`, which would
 * otherwise override the `hidden` attribute. */
.nng-form.capacity-unsubscribed-filter .nng-btn[name="download"][hidden] {
	display: none;
}

/* ----- Posting header: white sub-panel revealed on RETRIEVE -----
 * Reads as its own portion of the filter: full-bleed white footer (the
 * negative margins cancel the gray `.form-body` padding) below the gray
 * criteria grid and toolbar. Stacks the posting-header details above the
 * report title. Two left-justified columns, no rules. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary {
	background: #fff;
	margin-inline: -1.5rem;
	margin-bottom: -1.5rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary[hidden] {
	display: none;
}

/* Label and value read as one continuous line ("Label: value") rather than
 * two aligned columns: the values are no longer indented to the width of
 * the longest label. Each pair still occupies its own line — the block
 * `dd::after` forces the break, and its height provides the row spacing
 * the previous grid gap used to give. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid {
	display: block;
	margin: 0;
}

/* Hidden independently of the panel for a capacity type with no posting
 * header, where only the report title is shown. The explicit rule is needed
 * because `display: block` would otherwise override the `hidden` attribute. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid[hidden] {
	display: none;
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dt {
	display: inline;
	font-weight: 700;
	text-align: left;
}

/* Guarantee the single space after the colon even if the markup is ever
 * reformatted without whitespace between `</dt>` and `<dd>`. When the
 * source whitespace is present the two collapse into one space. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dt::after {
	content: " ";
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd {
	display: inline;
	margin: 0;
	font-weight: 400;
	text-align: left;
	color: var(--nng-color-text);
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd::after {
	content: "";
	display: block;
}

.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd:not(:last-of-type)::after {
	height: 0.4rem;
}

/* Report title: the selected Type of Capacity label, shown above the Data
 * Table so users can see which report they are viewing. Styled to match the
 * theme's Heading H3 (the `large` font-size preset), bold per BSA request. */
.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__table-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.38rem);
	font-weight: 700;
	line-height: 1.125;
	text-align: left;
	color: var(--nng-color-text);
}

/* ----- Responsive: collapse the grids on narrow viewports ----- */
@media (max-width: 980px) {

	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--2,
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {

	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--2,
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__row--3 {
		grid-template-columns: 1fr;
	}

	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__toolbar {
		justify-content: flex-start;
	}

	/* Stack each label above its value: on narrow screens the longer labels
	 * ("Measurement Basis Description:") leave almost no room for the value
	 * on the same line, so each value drops below its label and is indented
	 * ~2 spaces (0.5rem). */
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dt,
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd {
		display: block;
	}

	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dt::after,
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd::after {
		content: none;
	}

	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dd {
		margin-inline-start: 0.5rem;
	}

	/* Separate each label/value pair from the one above it. */
	.nng-form.capacity-unsubscribed-filter .capacity-unsubscribed-filter__summary-grid dt:not(:first-of-type) {
		margin-top: 0.75rem;
	}
}