/*
 * Properseas — footer newsletter form UI corrections.
 * 2026-07-27 · newsletter 403 release, fix cycle 2 (visual-critic NEW-2, NEW-4 + the
 * one-error-colour note).
 *
 * WHY A SEPARATE FILE RATHER THAN AN EDIT TO style.css.
 * Hostinger's hcdn pins static assets with `cache-control: public, max-age=31557600`. The URL
 * the edge currently holds for houzez-child/style.css serves EXACTLY the bytes that will be
 * deployed to production, so staging is a faithful preview of it — editing it in place would
 * both be invisible at the edge and break that correspondence. This file is a new path the CDN
 * has never served. It is enqueued AFTER style.css, so where the two overlap this one wins.
 * The superseded rules are deliberately left in style.css rather than removed, so that the file
 * on production is byte-identical to the one already reviewed at staging's edge.
 *
 * Palette (Elementor kit 7): Primary #1E264C · Secondary #3B4B95 · Text #C7C7C7 ·
 * Accent #FFFFFF. Footer surface #202A30. Footer's own live accent (list hover) #FFCB3D.
 */

/*
 * NEW-4 — the mobile gap rule from fix cycle 1 never applied.
 * Elementor emits
 *   .elementor-20101 .elementor-element.elementor-element-15ce116 .elementor-field-group
 *   { margin-bottom: 0 }
 * at specificity (0,4,0); the cycle-1 rule was (0,3,0), so the measured gap stayed 0.0px and the
 * invalid halo sat flush against the button. Matching Elementor's own selector shape gives
 * (0,5,0). No !important is needed — this sheet also loads after elementor-post-20101-css.
 */
@media (max-width: 1024px) {
    .elementor-20101 .elementor-element.elementor-element-15ce116 .elementor-form-fields-wrapper > .elementor-field-group {
        margin-bottom: 8px;
    }

    .elementor-20101 .elementor-element.elementor-element-15ce116 .elementor-form-fields-wrapper > .elementor-field-group:last-child {
        margin-bottom: 0;
    }
}

/*
 * NEW-2 — on the dark footer, success and error were indistinguishable: identical
 * rgba(255,255,255,0.10) fill, identical #FFFFFF text, identical geometry, differing only by a
 * 1px hairline (30% white vs 55% gold). Following the light-surface treatment, which
 * differentiates FILL and TEXT as well as border.
 *
 * Success stays the neutral white wash. Error moves to the footer's own accent gold — the one
 * warning-capable colour the brand actually uses on this surface (there is no red in the kit).
 */
.elementor-20101 .elementor-element.elementor-element-15ce116 .ele-form-messages .alert-success {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    color: #FFFFFF;
}

.elementor-20101 .elementor-element.elementor-element-15ce116 .ele-form-messages .alert-danger,
.elementor-20101 .elementor-element.elementor-element-15ce116 .error-container .properseas-form-error {
    background-color: rgba(255, 203, 61, 0.14);
    border-color: rgba(255, 203, 61, 0.60);
    color: #FFCB3D;
    font-weight: 500;
}

/*
 * Non-blocking note from visual-critic: the field ring was Bootstrap red while the panel 10px
 * below it was brand gold — two different error colours for one error. Picking gold, so the
 * ring and the message agree. Also neutralises Bootstrap's GREEN valid ring, which is the same
 * off-palette green this release removed from the panel.
 * Scoped to the newsletter form; the /contact/ forms keep Bootstrap's defaults.
 */
.elementor-20101 .elementor-element.elementor-element-15ce116 .elementor-field.is-invalid,
.elementor-20101 .elementor-element.elementor-element-15ce116 .form-control.is-invalid {
    /* !important is required, not decorative: the parent theme ships
       `.is-invalid { border-color: #ea3d3d !important }` (houzez/style.css, one occurrence).
       An !important declaration beats any non-important one regardless of specificity, so
       without this the halo and glyph went gold while the border stayed Bootstrap red —
       visual-critic NEW-5. This is the narrowest possible answer: one property, one form. */
    border-color: #FFCB3D !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 203, 61, 0.30);
    background-image: none;
}

/* No !important needed here: the parent theme has no `.is-valid` border rule at all
   (grepped houzez/style.css - zero matches), so ordinary specificity wins. */
.elementor-20101 .elementor-element.elementor-element-15ce116 .elementor-field.is-valid,
.elementor-20101 .elementor-element.elementor-element-15ce116 .form-control.is-valid {
    border-color: rgba(30, 38, 76, 0.30);
    box-shadow: none;
    background-image: none;
}