/*
 * Contact Form 7 — closing the gaps between CF7's markup and the prototype's.
 *
 * [submit] renders as <input type="submit">, and a replaced element renders neither child elements
 * nor ::before/::after. That costs `.button--primary` its hover gradient, which style.css:489 does
 * with a ::before overlay. Rebuilt below as a background, which inputs do support.
 *
 * The newsletter's Subscribe also carries a chevron *inside* the button —
 * `<i class="fa fa-angle-right">`, sat next to the label by the button's own flex `gap: 10px`
 * (style.css:446). No background can follow centred text like that, so instead of a [submit] tag
 * that form uses the prototype's literal <button> markup, which CF7 supports: its JS binds to the
 * form's submit event, not to the button (includes/js/index.js). `has-spinner` on the button is
 * what tells CF7 to inject its spinner after it. The quote, offer and contact forms are <input
 * type="submit"> in the prototype too, so those keep [submit].
 *
 * Scoped to CF7 so nothing else on the site is touched — the prototype stylesheets belong to the
 * UI team.
 */

input.wpcf7-submit.button--primary {
    transition: var(--transition-default);
}

input.wpcf7-submit.button--primary:hover {
    background: linear-gradient(105deg, var(--theme) 17.706%, var(--gold-light) 82.494%) !important;
}

/*
 * The injected spinner is a flex child of .footer-newsletter (column, gap 14px) and is only
 * visibility:hidden when idle, so left alone it reserves a 24px row under the button. Lifted out of
 * flow and centred over the button's right edge instead: the button is 18px padding + a ~19px line
 * (style.css:446), so (55 - 24) / 2 ≈ 16px up from the form's bottom edge.
 */
.footer-newsletter {
    position: relative;
}

.footer-newsletter .wpcf7-spinner {
    position: absolute;
    right: 20px;
    bottom: 16px;
    margin: 0;
}

/* The response line sits below the form rather than pushing the layout around. */
.wpcf7 .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 14px;
}

/*
 * Some forms are flex containers — .contact-card form is display:flex so its .form-group50 children
 * sit two-up (areas.css:260). CF7 appends the response output as a direct child of the <form>, so
 * once a submit reveals it, it would become a flex item and try to share a row. flex-basis pins it
 * to its own full-width line; it is inert in the forms that are not flex.
 */
.wpcf7 form .wpcf7-response-output {
    flex-basis: 100%;
}

/* CF7's wrapper span is display:inline by default, which collapses full-width fields. */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
}

/* Validation messages, styled to the theme rather than CF7's defaults. */
.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 4px;
    color: #d63638;
    font-size: 13px;
}