/**
 * Layout corrections for the Gravity Forms swap.
 *
 * gravity-forms-custom.css handles the look (inputs, selects, checkboxes,
 * buttons) and that part holds up. Its layout rules do not, for two reasons:
 *
 *   1. It overrides `.gform_fields` to a 2-column grid, but Gravity Forms
 *      places fields on its own 12-column grid. Every field asks to span 12,
 *      which clamps to the full row, so nothing ever sat side by side.
 *   2. The 2-up breakpoint was a viewport media query, but the "Message Us"
 *      form lives in a 432px footer column. At a 1440px viewport it would
 *      have tried to fit two columns into 432px.
 *
 * So: restore the 12-column grid, assign spans per field, and switch the
 * breakpoints to container queries on the form's own wrapper.
 */

.tpg-gform {
    container-type: inline-size;
}

/* ===== Restore Gravity Forms' 12-column grid ===== */
#gform_wrapper_2 .gform_fields,
#gform_wrapper_3 .gform_fields {
    grid-template-columns: repeat(12, 1fr) !important;
    grid-column-gap: 20px;
    grid-row-gap: 0 !important;
}

#gform_wrapper_2 .gform_fields > .gfield,
#gform_wrapper_3 .gform_fields > .gfield {
    grid-column: span 12 / span 12;
}

/* ===== Consultation form (2) ===== */
/* Two-up only once the form itself is wide enough, regardless of viewport. */
@container (min-width: 560px) {
    #gform_wrapper_2 .gform_fields > #field_2_1,   /* First Name */
    #gform_wrapper_2 .gform_fields > #field_2_2,   /* Last Name  */
    #gform_wrapper_2 .gform_fields > #field_2_3,   /* Email      */
    #gform_wrapper_2 .gform_fields > #field_2_4,   /* Phone      */
    #gform_wrapper_2 .gform_fields > #field_2_6 {  /* City       */
        grid-column: span 6 / span 6 !important;
    }

    #gform_wrapper_2 .gform_fields > #field_2_7,   /* State */
    #gform_wrapper_2 .gform_fields > #field_2_8 {  /* Zip   */
        grid-column: span 3 / span 3 !important;
    }

    /* The consultation page hides Address, City and State, which left Zip
       stranded as a quarter-width stub on its own row. */
    body.page-id-9 #gform_wrapper_2 .gform_fields > #field_2_8,
    .modal__content #gform_wrapper_2 .gform_fields > #field_2_8 {
        grid-column: span 6 / span 6 !important;
    }
}

/* Address, Procedure Interest, Comments, both checkboxes and the reCAPTCHA
   notice always take the full row. */
#gform_wrapper_2 .gform_fields > #field_2_5,
#gform_wrapper_2 .gform_fields > #field_2_9,
#gform_wrapper_2 .gform_fields > #field_2_10,
#gform_wrapper_2 .gform_fields > #field_2_11,
#gform_wrapper_2 .gform_fields > #field_2_12,
#gform_wrapper_2 .gform_fields > #field_2_13 {
    grid-column: span 12 / span 12 !important;
}

/* The textarea's fixed 15.75rem is too tall for the narrow footer column. */
@container (max-width: 559px) {
    #gform_wrapper_2 textarea {
        height: 9rem !important;
    }
}

/* The footer template already prints "Fields marked * are required". */
#form-quickcontact .gform_required_legend {
    display: none;
}

#gform_wrapper_2 .gform_footer {
    justify-content: flex-end;
}

@container (max-width: 559px) {
    #gform_wrapper_2 .gform_button,
    #gform_wrapper_2 input[type="submit"],
    #gform_wrapper_2 button[type="submit"] {
        width: 100%;
    }
}

/* ===== Newsletter form (3) ===== */
.tpg-gform--newsletter {
    max-width: 940px;
    margin: 0 auto;
}

/* The band is centre-aligned, which was centring the placeholder text too. */
#gform_wrapper_3 input[type="text"],
#gform_wrapper_3 input[type="email"] {
    text-align: left !important;
    margin-bottom: 0 !important;
}

@container (min-width: 620px) {
    /* Three fields across, with the button alongside them on the same row. */
    #gform_wrapper_3 form {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-column-gap: 20px;
        align-items: start;
    }

    #gform_wrapper_3 .gform_fields > .gfield {
        grid-column: span 4 / span 4 !important;
    }

    #gform_wrapper_3 .gform_footer {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* The band is #4d5d6d and so is the default button, so it disappeared.
   Invert it here: white button, band-coloured text. */
#gform_wrapper_3 .gform_button,
#gform_wrapper_3 input[type="submit"],
#gform_wrapper_3 button[type="submit"] {
    background: #fff !important;
    color: #4d5d6d !important;
    border-color: #fff !important;
    height: 3rem !important;
    padding: 0 2rem !important;
}

#gform_wrapper_3 .gform_button:hover,
#gform_wrapper_3 input[type="submit"]:hover,
#gform_wrapper_3 button[type="submit"]:hover {
    background: #4474a3 !important;
    border-color: #4474a3 !important;
    color: #fff !important;
}

/* Anything GF prints on the dark band needs to stay legible. */
#gform_wrapper_3 .gform_confirmation_message,
#gform_wrapper_3 .gfield_description,
#gform_wrapper_3 .gform_submission_error {
    color: #fff !important;
}

#gform_wrapper_3 .gform_required_legend {
    display: none;
}

/* ===== Terms of Use ===== */
.tpg-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gform_wrapper .tpg-terms-link {
    color: #4474a3;
    text-decoration: underline;
    margin-left: .25em;
}

/* The toggle is a <button> now, so it needs the browser chrome stripped
   before the existing .tpg-terms-toggle link styling reads correctly. */
.gform_wrapper button.tpg-terms-toggle {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    margin: 6px 0 0;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.4;
    color: #4474a3;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* On the dark consultation page the theme's anchor colour outranks ours,
   so the link needs !important to reach a readable contrast on #1d1c17. */
body.page-id-9 .gform_wrapper .tpg-terms-link,
body.page-id-9 .gform_wrapper button.tpg-terms-toggle,
.modal__content .gform_wrapper .tpg-terms-link,
.modal__content .gform_wrapper button.tpg-terms-toggle {
    color: #9fc2e8 !important;
}

/* ===== Submission confirmation =====
 *
 * On success GF runs jQuery('#gform_wrapper_N').replaceWith(confirmation),
 * so every #gform_wrapper_N rule stops matching. The confirmation has to be
 * styled through .tpg-gform, which survives the replace.
 *
 * All three places these forms appear sit on a dark background: the footer
 * "Message Us" column and the consultation page are #1d1c17, the newsletter
 * band is #4d5d6d. The inherited #655e58 message colour is close to
 * invisible on all of them.
 */
.tpg-gform .gform_confirmation_wrapper {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, .22);
    text-align: center;
}

.tpg-gform .gform_confirmation_wrapper::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
    border: 1px solid #d3ac96;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d3ac96' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
    background-size: 26px 26px;
}

/* Form 2's message is markup (h3 + p); form 3's is a bare string that GF
   leaves unwrapped, so it lands directly on this div and inherits the
   theme's 34px line-height. Type has to be set here, not only on p. */
.tpg-gform .gform_confirmation_message {
    max-width: 44ch;
    margin: 0 auto;
    font-family: museo-sans, sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.65;
    color: #fff;
    padding: 0;
    text-align: center;
}

.tpg-gform .gform_confirmation_message h1,
.tpg-gform .gform_confirmation_message h2,
.tpg-gform .gform_confirmation_message h3 {
    margin: 0 0 .85rem;
    color: #fff;
    font-family: museo-sans, sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tpg-gform .gform_confirmation_message p {
    margin: 0 0 .85rem;
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.65;
}

/* The sign-off line reads as a footnote, not body copy. */
.tpg-gform .gform_confirmation_message p:last-child {
    margin-bottom: 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
}

.tpg-gform .gform_confirmation_wrapper:focus {
    outline: none;
}

/* The "Fields marked * are required" line lives in the theme template,
   outside the form, so it survives the replace and sits above a
   confirmation with no form under it. */
#form-quickcontact:has(.gform_confirmation_wrapper) .disclaimer {
    display: none;
}

/* The newsletter sits in a shallow band, so it needs a tighter card. */
.tpg-gform--newsletter .gform_confirmation_wrapper {
    max-width: 520px;
    padding: 1.75rem 1.5rem;
}

.tpg-gform--newsletter .gform_confirmation_wrapper::before {
    width: 44px;
    height: 44px;
    margin-bottom: 1.125rem;
    background-size: 22px 22px;
}

.tpg-gform--newsletter .gform_confirmation_message p:last-child {
    font-size: 1rem;
    color: rgba(255, 255, 255, .9);
}

@media (max-width: 767px) {
    .tpg-gform .gform_confirmation_wrapper {
        padding: 2rem 1.25rem;
    }
    .tpg-gform .gform_confirmation_message h1,
    .tpg-gform .gform_confirmation_message h2,
    .tpg-gform .gform_confirmation_message h3 {
        font-size: 1.25rem;
    }
}

/* ===== Validation ===== */
.gform_wrapper .validation_message {
    background: none !important;
    border: 0 !important;
    padding: 0 0 12px !important;
    margin: -16px 0 0 !important;
    color: #c81d25 !important;
    font-size: .8125rem !important;
    font-weight: 500;
}

#gform_wrapper_3 .validation_message {
    color: #ffd7d9 !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: #c81d25 !important;
}

/* GF's summary box at the top duplicates the inline messages. */
.gform_wrapper .gform-validation-errors {
    display: none;
}

.gform_wrapper .gform_confirmation_message {
    font-family: museo-sans, sans-serif;
    font-size: 1rem;
    padding: 20px 0;
}