/* =============================================================
 * NNG DDVC Rates filter
 * Gas Day range + Location dropdown + button toolbar on top of
 * `forms-base.css`.
 * ============================================================= */

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

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

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

/* ----- Controls layout ----- */
.nng-form.ddvc-rates-filter .ddvc-rates-filter__controls {
    display: flex;
    flex-direction: column;
    gap: var(--nng-gap);
}

/* Gas Day / To Gas Day sit side by side. */
.nng-form.ddvc-rates-filter .ddvc-rates-filter__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nng-gap);
}

.nng-form.ddvc-rates-filter .ddvc-rates-filter__dates > .form-row {
    flex: 1 1 16rem;
    margin: 0;
}

.nng-form.ddvc-rates-filter .ddvc-rates-filter__controls > .form-row {
    margin: 0;
}

/* Cap the location dropdown width. */
.nng-form.ddvc-rates-filter select[name="location"] {
    max-width: 30rem;
}

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

.nng-form.ddvc-rates-filter .nng-btn:hover,
.nng-form.ddvc-rates-filter .nng-btn:focus-visible {
    text-decoration: none;
}


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

    /* The dates container is now a column, so the desktop `flex-basis:
     * 16rem` 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 input. */
    .nng-form.ddvc-rates-filter .ddvc-rates-filter__dates > .form-row {
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    .nng-form.ddvc-rates-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.ddvc-rates-filter input[type="date"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .nng-form.ddvc-rates-filter .ddvc-rates-filter__toolbar {
        justify-content: flex-start;
    }
}