/*
 * Contact form submit button — remotesensors.it child theme.
 *
 * Scope: only the [contact-form] shortcode output (`.contact-form`).
 *
 * Root cause: the contact plugin paints `.contact-button:hover`/`:focus`
 * with `var(--primary-color-hover)`. Amerce aliases `--primary-color` in
 * layouts/base.blade.php but never defines `--primary-color-hover`, so the
 * declaration is invalid at computed-value time and the background falls
 * back to `unset` (transparent) — the white page shows through on hover
 * and keyboard focus.
 *
 * Fix: define the missing variable scoped to the contact form. The plugin's
 * own rule then produces the required hover colors. No pseudo-element
 * overlay, no layout-affecting properties, no !important.
 */

.contact-form {
    --primary-color-hover: #383bd0;
}

/*
 * Touch-primary devices: a tap leaves a "stuck" :hover/:focus on the tapped
 * element until the next tap elsewhere. Point the same variable at the
 * button's normal background there, so the plugin's hover rule paints the
 * normal state instead of a stuck blue one.
 */
@media (hover: none) {
    .contact-form {
        --primary-color-hover: var(--text);
    }
}

/*
 * Preserve the theme's existing opacity/transform animation and add the
 * sanctioned color transition so the hover state eases instead of snapping.
 */
.section-contact .contact-form .contact-button {
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}