/* =============================================================
 * NNG Gas Quality by Date filter
 * Date selector + button toolbar on top of `forms-base.css`.
 * ============================================================= */

/* ----- Combined date + inline time control -----
 * Declared before the `.nng-form.gas-quality-by-date-filter` rules
 * below so these lower-specificity selectors precede the higher ones
 * (satisfies stylelint `no-descending-specificity`). */
.gas-quality-datetime {
	position: relative;
	width: 380px;
}

.gas-quality-datetime__date {
	width: 80%;
}

.gas-quality-datetime__date input[type="date"] {
	width: 100%;
	padding-right: 20px; /* reserve room for time */
}

.gas-quality-datetime__time {
	position: absolute;
	top: 75%;
	right: 170px; /* leaves room for calendar icon */
	transform: translateY(-50%);
	z-index: 10;
}

.gas-quality-datetime__time label {
	display: none;
}

.gas-quality-datetime__time input[type="time"] {
	width: 90px;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	min-height: auto;
	font-size: inherit;
	font-style: inherit;
}

.gas-quality-datetime__time input[type="time"]::-webkit-calendar-picker-indicator {
	display: none;
}

/* No focus highlight on the inline time field; it sits on top of the
 * date control, so its own outline/border would look like a stray box. */
.gas-quality-datetime__time input[type="time"]:focus,
.gas-quality-datetime__time input[type="time"]:focus-visible {
	outline: none;
	border: none;
	box-shadow: none;
}

/* ----- 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.gas-quality-by-date-filter {

	/* Site style guide: Lato. Bold is the default for all filter text;
	 * buttons and the date picker 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-date-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-date-filter .form-header,
.nng-form.gas-quality-by-date-filter .form-row > label {
	font-weight: 700;
}

/* The date picker text stays Lato Normal. */
.nng-form.gas-quality-by-date-filter input[type="date"],
.nng-form.gas-quality-by-date-filter input[type="time"],
.nng-form.gas-quality-by-date-filter input[type="datetime-local"] {
	font-weight: 400;
}

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

.nng-form.gas-quality-by-date-filter .gas-quality-by-date-filter__controls > .form-row {
	flex: 1 1 16rem;
	margin: 0;
}

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

/* 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.gas-quality-by-date-filter .nng-btn {
	font-weight: 400;
}

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


.nng-form.gas-quality-by-date-filter .gas-quality-by-date-filter__toolbar .nng-btn {
	min-width: 7rem;
	max-width: none;
}
/* RETRIEVE: primary action in Accent 1 navy (#2054AE). */
.nng-form.gas-quality-by-date-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.gas-quality-by-date-filter .gas-quality-by-date-filter__controls {
		flex-direction: column;
		align-items: stretch;
	}

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