/* =============================================================================
   Custom contact form — structural rules only.

   The look (colours, radii, padding, typography, button, error borders) comes
   from the existing #gform_1 rules in style.css, which the form's markup
   matches on purpose. This file only re-creates the handful of layout rules
   that used to come from the Gravity Forms stylesheet, so the design no longer
   depends on that plugin:

     .gform_fields         12-column grid, 16px column gap, 40px row gap
     .gfield--width-half   spans 6 columns
     inputs                full width, border-box

   Values copied from gravity-forms-theme-foundation.css
   (--gf-form-gap-x: 16px, --gf-form-gap-y: 40px).
   ========================================================================== */

#gform_wrapper_1 .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(auto-fill, auto);
    column-gap: 16px;
    row-gap: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#gform_wrapper_1 .gfield {
    grid-column: 1 / -1;
    min-width: 0;
}

#gform_wrapper_1 .gfield--width-half {
    grid-column: span 6;
}

#gform_wrapper_1 .ginput_container {
    position: relative;
}

#gform_wrapper_1 .ginput_container input[type="text"],
#gform_wrapper_1 .ginput_container input[type="email"],
#gform_wrapper_1 .ginput_container input[type="tel"],
#gform_wrapper_1 .ginput_container textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

#gform_wrapper_1 .ginput_container textarea {
    display: block;
}

/* Footer is a flex row so the button's `margin: auto` (style.css) centres it. */
#gform_wrapper_1 .gform_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#gform_wrapper_1 .gform_footer input[type="submit"] {
    cursor: pointer;
}

/* Field-level validation messages. */
#gform_wrapper_1 .t27-cf-error {
    display: none;
    margin-top: 6px;
    color: #c62828;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

#gform_wrapper_1 .t27-cf-error:not(:empty) {
    display: block;
}

/* Form-level message (expired nonce, save failure, spam trap). */
#gform_wrapper_1 .t27-cf-form-error {
    display: none;
    width: 100%;
    margin-bottom: 16px;
    color: #c62828;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

#gform_wrapper_1 .t27-cf-form-error:not(:empty) {
    display: block;
}

/* Red border on invalid fields — same treatment style.css gives .gfield_error,
   repeated here for the fields style.css does not cover (textarea in a
   non-required wrapper, captcha). */
#gform_wrapper_1 .gfield_error .ginput_container input,
#gform_wrapper_1 .gfield_error .ginput_container textarea {
    border-color: #c62828;
    background-color: #fff9f9;
}

/* reCAPTCHA widget. */
#gform_wrapper_1 .t27-cf-captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Submitting state. */
#gform_wrapper_1.t27-cf-submitting .gform_footer input[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
}

#gform_wrapper_1 .gform_confirmation_message {
    text-align: center;
    font-size: 20px;
}

/* Success state (.t27-cf-sent): the confirmation replaces the form — fields
   and submit button are hidden until "Submit Another Inquiry" is used. */
#gform_wrapper_1.t27-cf-sent #gform_1,
#gform_wrapper_1.t27-cf-sent .gform_heading {
    display: none !important;
}

/* The Contact page's "Get In Touch" heading + hours line (page-contact.php)
   sit outside the form wrapper: hide them too, so only the thank-you message
   and "Submit Another Inquiry" remain. The class is set by contact-form.js;
   :has() covers the server-rendered (no-JS) success page. */
.contact-form-wrapper.t27-cf-sent .form-header-contact,
.contact-form-wrapper:has(#gform_wrapper_1.t27-cf-sent) .form-header-contact {
    display: none !important;
}

#gform_wrapper_1 .t27-cf-confirmation {
    padding: 24px 0 8px;
}

#gform_wrapper_1 .t27-cf-again-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Same look as the form's own submit button ("Leave us a Message"). */
#gform_wrapper_1 .t27-cf-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 30px;
    background: #333;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(32, 76, 229, 0.10);
    color: #fff;
    font-family: 'Nexa Regular', 'NexaCustom', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-decoration: none;
    cursor: pointer;
}

#gform_wrapper_1 .t27-cf-again:hover,
#gform_wrapper_1 .t27-cf-again:focus {
    background: #333;
    color: #fff;
    box-shadow: 0 4px 24px rgba(32, 76, 229, 0.15);
    text-decoration: none;
}

#gform_wrapper_1 .t27-cf-again:focus-visible {
    outline: 2px solid #333 !important;
    outline-offset: 3px;
}

@media (max-width: 576px) {
    #gform_wrapper_1 .t27-cf-again {
        padding: 18px 26px;
        font-size: 16px;
    }
}

/* Matches the existing mobile rule in style.css (half fields go full width). */
@media (max-width: 576px) {
    #gform_wrapper_1 .gfield--width-half {
        grid-column: span 12;
    }
}