/* ============================================================================= Asya — Contact Form 7 bridge Contact Form 7 wraps every control in and injects its own response/validation elements. This file dissolves those wrappers so the site's existing form rules (.row, .field, input, select, textarea, .consent, .sent in home.css / contact.css) style the CF7 markup exactly as they styled the original hand-written forms — no visual change. It also styles CF7's validation messages, response output and spinner in the brand palette, reading the same custom properties as the rest of the site. ========================================================================== */ /* --- dissolve CF7's wrappers so grid layout is unaffected ---------------- */ .wpcf7 .wpcf7-form-control-wrap { display: contents; } /* Older browsers without display:contents still get a sane block wrapper. */ @supports not (display: contents) { .wpcf7 .wpcf7-form-control-wrap { display: block; } } .wpcf7 form { display: grid; gap: 18px; } .wpcf7 form > p { margin: 0; } /* CF7 adds
and stray paragraphs when the mail template is edited in the visual tab; the theme's forms are laid out with .row/.field instead. */ .wpcf7 form .row > br, .wpcf7 form .field > br { display: none; } /* --- stop CF7's size/cols/rows attributes from blowing out the grid ----- */ /* CF7 always renders text/email/tel inputs with size="40" and textareas with cols="40" rows="10" — attributes the original hand-written elements never had. .row's columns are plain "1fr 1fr" with no floor, so without this, that size/cols/rows-driven intrinsic width becomes each field's automatic minimum contribution to the grid track: at narrower desktop widths the row (and the whole card around it) is forced wider than its column and the right-hand fields spill past the edge of the page, instead of shrinking to fit the way the original always did. */ .wpcf7 .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wpcf7 .field, .wpcf7 input, .wpcf7 select, .wpcf7 textarea { min-width: 0; } /* min-width:0 alone stops the *track* from blowing out, but a grid item's default stretch alignment does not override an 's own size="40" / textarea's cols="40" — Chrome still renders the control at its attribute-driven ~380px intrinsic width even inside a narrower track (it just overflows the field instead). The original inputs had no size attribute, so they always filled whatever width .field gave them; this restores that explicitly rather than relying on stretch to do it. */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea { width: 100%; } /* --- submit button ------------------------------------------------------ */ /* [submit class:btn class:btn-solid "…"] already puts the page's own .btn and .btn-solid classes on the rendered , so the page's own stylesheet (home.css's pill-shaped, flat-teal button; contact .css's larger, rounded, dark-gradient button; etc.) styles it exactly like the original markup's /