/* =============================================================
 * NNG Notices by Date / Subject filter
 * Posted-date range + subject keyword + button toolbar on top of
 * `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides ----- */
.nng-form.notices-by-date-subject-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.notices-by-date-subject-filter .form-header {
    background: transparent;
    color: var(--nng-color-text);
}

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

/* Controls themselves stay Lato Normal. */
.nng-form.notices-by-date-subject-filter input[type="date"],
.nng-form.notices-by-date-subject-filter input[type="text"],
.nng-form.notices-by-date-subject-filter select {
    font-weight: 400;
}

/* ----- Controls layout ----- */
.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__controls {
    display: flex;
    flex-direction: column;
    gap: var(--nng-gap);
}

/* Every label sits directly above its control. The shared form base lays
 * rows out as `label | control` columns; stacking them keeps the notices
 * filter readable at any width. */
.nng-form.notices-by-date-subject-filter .form-row {
    flex-direction: column;
    gap: 0.25rem;
}

.nng-form.notices-by-date-subject-filter .form-row > label {
    flex: 0 0 auto;
    max-width: 100%;
    padding-top: 0;
}

/* Rows are columns now, so the shared `flex: 1 1 18rem` basis would apply
 * to the vertical axis and inflate each control's height. Size controls on
 * the horizontal axis instead: every control fills its column up to one
 * shared cap, so date inputs, the dropdown and text fields all line up.
 * (Native date inputs would otherwise shrink to fit their content.) */
.nng-form.notices-by-date-subject-filter .form-row > input,
.nng-form.notices-by-date-subject-filter .form-row > select {
    flex: 0 0 auto;
    width: 100%;
    max-width: 30rem;
}

/* Posted Begin / Through sit side by side. */
.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nng-gap);
}

.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__dates > .form-row {
    flex: 1 1 16rem;
    margin: 0;
}

/* Notice Status / Subject Contains share a row, mirroring the date pair. */
.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__status-subject {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nng-gap);
}

.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__status-subject > .form-row {
    flex: 1 1 16rem;
    margin: 0;
}

.nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__controls > .form-row {
    margin: 0;
}

/* ----- Button toolbar ----- */
.nng-form.notices-by-date-subject-filter .notices-by-date-subject-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.notices-by-date-subject-filter .nng-btn {
    font-weight: 400;
    min-width: 7rem;
    max-width: none;
}

.nng-form.notices-by-date-subject-filter .nng-btn:hover,
.nng-form.notices-by-date-subject-filter .nng-btn:focus-visible {
    text-decoration: none;
}


/* RETRIEVE: primary action in Accent 1 navy (#2054AE). */
.nng-form.notices-by-date-subject-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.notices-by-date-subject-filter .notices-by-date-subject-filter__dates,
    .nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__status-subject {
        flex-direction: column;
    }

    /* The containers are now columns, so the desktop `flex-basis: 16rem`
     * would apply to the vertical axis and inflate each row's height.
     * Reset to content height. */
    .nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__dates > .form-row,
    .nng-form.notices-by-date-subject-filter .notices-by-date-subject-filter__status-subject > .form-row {
        flex: 0 0 auto;
    }

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