/*
 * Copied verbatim from William's pasted <style> block for the "Contact
 * Page" template, shared by 3 pages — confirmed via WP REST API:
 *   - 58        Contact Us          (/contact/)
 *   - 9033517   Tiktok Ambassador Form (/tiktok-ambassador-form/)
 *   - 9035541   Ambassador Form     (/ambassador-form/)
 *
 * Verified against the live /contact/ page (page 58): `#contact-page`,
 * `#v_contact_us_form` (with its nonce field + g-recaptcha), `.wrapper`,
 * and `.contact-text.change-telephone-number-link` all match real markup
 * there. No `.woocommerce ul.products` conflict and no `alignfull`/
 * `.no-sidebar`/`.entry-content` full-bleed attempt in the source, so
 * neither of the usual fixes (see temp-legacy/shop-by-scent/README.md)
 * applies here — nothing needed to be removed or added structurally.
 *
 * `button.valentte-community-form__submit` doesn't match anything on
 * /contact/ itself — it targets the real, permanent `[valentte_community_form]`
 * shortcode (inc/community-form.php, already loaded in functions.php),
 * which the two Ambassador pages embed instead of the raw contact form.
 * Not verified live on those two pages directly, but the class name lines
 * up with that shortcode's markup.
 *
 * OPEN ITEM (not fixed by this file): `#v_contact_us_form` posts via a
 * plain HTML form with a `v_contact_us_form_nonce` field. On production
 * that's submitted by the old theme's own
 * generatepress-child/custom-functions/custom-newsletter-form/js/contact-us-form-ajax.js
 * (jQuery-based) — confirmed nothing in this theme's `inc/` currently
 * handles `v_contact_us_form`. This CSS restores the form's *styling*
 * only; its submission behaviour needs a real handler (REST endpoint +
 * vanilla JS, per this project's convention) before this page can go live
 * on the new theme. Flag to Chris/William separately — out of scope for a
 * CSS restore.
 *
 * BRAND FLAG (not fixed by this file): `button.valentte-community-form__submit`
 * below sets an orange (#FFA222) button *background*, which BRAND.md
 * explicitly forbids ("Never use orange as a button background", "used
 * sparingly... not as a general accent"). Kept verbatim since it's
 * recovered legacy styling, not a redesign — but this should probably be
 * swapped to the standard primary button style (`var(--black)` background,
 * per BRAND.md's Buttons table) before these pages go live.
 */

#contact-page {
    text-align: center;
    padding: 0;
    color: var(--text);
}

#contact-page .wp-block-group__inner-container {
    padding: 0;
}

.vt-community-form label, 
.vt-community-form legend {
    color: var(--text) !important;
}

button.vt-community-form__submit{
    width: 100%;
    background-color: #FFA222 !important;
    text-transform: capitalize;
}

#contact-page h1 {
    color: var(--text);
    text-transform: capitalize;
}

#contact-page h4 {
    text-transform: capitalize;
}

#contact-page .wp-block-group__inner-container > p {
    color: var(--text);
    max-width: 878px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

#contact-page .wp-block-group__inner-container > h2 {
    font-size: 35px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform: none;
    color: var(--text);
}

#contact-page h4 {
    text-transform: capitalize;
    font-size: 24px;
    color: var(--text);
    line-height: 1.5;
}

#contact-page .wp-block-group__inner-container > h4 {
    margin-bottom: 30px;
}

.wrapper {
    margin-bottom: 0;
}

.wrapper .wp-block-column {
    border: 2px solid #868686;
    padding: 45px 20px;
}

.wrapper .wp-block-column.form {
    padding: 23px 15px;
}

.wrapper p {
    margin-bottom: 10px;
}

.wrapper .note {
    margin-top: 85px;
}

.wrapper .last {
    margin-bottom: 0;
}

.bold-title {
    margin-bottom: 10px;
}

#v_contact_us_form label {
    font-weight: 400;
    color: var(--text);
    margin-bottom: 5px;
    font-size: inherit;
    line-height: 1.3;
    text-align: left;
}

#v_contact_us_form input,
#v_contact_us_form textarea {
    background-color: #fff;
    border: 1px solid;
    border-radius: 0;
    padding: 10px 15px;
    max-width: 100%;
    border-color: #cccccc;
}

#v_contact_us_form .g-recaptcha>div {
    margin: 0 auto;
}

#v_contact_us_form input[type="submit"] {
    background-color: #1E1E1E;
    margin: 0 auto;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 7px;
}

.contact-text.change-telephone-number-link {
    margin-bottom: 10px;
}

button.valentte-community-form__submit {
    width: 100%;
    background-color: #FFA222 !important;
    text-transform: capitalize;
}

@media screen and (max-width: 781px) {
    #contact-page {
        padding-top: 10px;
    }
}