/*---*\
Contact Form
Two-step Gravity Forms section with a photo background, heading, and frosted card.

KEY FEATURES:
- Centered intro on mobile; left-aligned stacked intro on tablet; heading column plus 880px form card on desktop
- Custom step indicator in place of the Gravity Forms progress bar
- Mobile shows only the active step stacked; tablet/desktop show both steps
- Two-column Step 2 fields on desktop; stacked on tablet and mobile
- Focus uses a 5px left border; required-field errors use a red outline

IMPLEMENTATION NOTES:
- Form field and button styles override fx_forms inside this block
- Background image stays top-aligned and covers the growing section
- Step 2 heading comes from the Gravity Forms Application merge tag
- Selects use Choices.js; overflow is clipped on the media layer so the menu can open
\*---*/

.contact-form {
    position: relative;
}

.contact-form__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.contact-form__intro {
    width: 100%;
    text-align: center;
}

.contact-form__intro .wysiwyg__content > h2 {
    display: inline-block;
    max-width: 100%;
}

.contact-form__intro .wysiwyg__content > h2::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 0;
    background-color: var(--color-secondary);
    -webkit-clip-path: polygon(0 0, calc(100% - 1.5px) 0, 100% 100%, 1.5px 100%);
    clip-path: polygon(0 0, calc(100% - 1.5px) 0, 100% 100%, 1.5px 100%);
}

.contact-form__form {
    width: 100%;
    max-width: 880px;
    padding: 30px 20px;
    background-color: var(--color-off-white-92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.contact-form .gform_wrapper,
.contact-form .gform_wrapper.gform_wrapper {
    margin: 0;
}

.contact-form .gform_wrapper .gf_progressbar_wrapper,
.contact-form .gform_wrapper .gform_heading,
.contact-form .gform_wrapper .gfield_label.gform-visually-hidden,
.contact-form .gform_wrapper .gfield--type-html .gfield_label,
.contact-form .gform_wrapper .gform_required_legend {
    display: none;
}

.contact-form .gform_wrapper .gform_fields {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 0;
    margin: 0;
}

.contact-form .gform_wrapper .gfield {
    width: 100%;
    padding: 0;
    margin: 0;
}

.contact-form .gform_wrapper .gfield--type-html {
    width: 100%;
}

.contact-form .gform_wrapper .gfield--type-html .ginput_container {
    margin: 0;
}

.contact-form .contact-form__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: center;
    width: 100%;
    margin: 0;
}

.contact-form .contact-form__step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    text-align: left;
    cursor: default;
}

.contact-form .js-contact-form-prev {
    cursor: pointer;
}

.contact-form .contact-form__step--inactive,
.contact-form .contact-form__step-sep {
    display: none;
}

.contact-form .contact-form__step-num {
    font-size: var(--font-size-h3);
    color: var(--color-border);
}

.contact-form .contact-form__step--active .contact-form__step-num {
    color: var(--color-secondary-hover);
}

.contact-form .contact-form__step-label {
    font-size: var(--font-size-subheading);
    color: var(--color-paragraph);
}

.contact-form .contact-form__step-label br {
    display: none;
}

.contact-form .contact-form__step-sep {
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-secondary-hover);
}

.contact-form .contact-form__step-sep .icon-double-arrows {
    font-size: 18px;
}

.contact-form .contact-form__application-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-heading);
}

.contact-form .gform_wrapper .gfield > :is(.gfield_label, legend.gfield_label) {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-heading);
}

.contact-form .gform_wrapper .gfield_required,
.contact-form .gform_wrapper .gfield_required_asterisk {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.contact-form .gform_wrapper .gfield_required_text {
    display: none;
}

.contact-form .gform_wrapper .gfield :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea
) {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background-color: var(--color-white);
    color: var(--color-paragraph);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    outline: none;
}

.contact-form .gform_wrapper .gfield :is(input, select, textarea)::placeholder {
    color: var(--color-placeholder);
}

.contact-form .gform_wrapper .gfield select {
    padding-right: 56px;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(var(--color-border), var(--color-border)),
        url("/wp-content/themes/viaflex/assets/img/dropdown-arrow.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right 45px center, right 14px center;
    background-size: 1px 100%, 16px 10px;
}

.contact-form .gform_wrapper .gfield textarea {
    min-height: 95px;
    resize: vertical;
}

.contact-form .gform_wrapper .gfield :is(input, select, textarea):focus,
.contact-form .gform_wrapper .gfield :is(input, select, textarea):focus-visible {
    border-color: var(--color-secondary-hover);
    border-left-width: 5px;
    padding-left: 20px;
    background-color: var(--color-white);
    outline: none;
}

.contact-form .gform_wrapper .gfield_error :is(input, select, textarea),
.contact-form .gform_wrapper .gfield--error :is(input, select, textarea),
.contact-form .gform_wrapper .gfield_error :is(input, select, textarea):focus,
.contact-form .gform_wrapper .gfield--error :is(input, select, textarea):focus,
.contact-form .gform_wrapper .gfield_error :is(input, select, textarea):focus-visible,
.contact-form .gform_wrapper .gfield--error :is(input, select, textarea):focus-visible {
    border-color: var(--color-error)!important;
    border-left-width: 1px!important;
    padding-left: 16px!important;
    outline: 1px solid var(--color-error)!important;
    outline-offset: 0!important;
}

.contact-form .gform_wrapper .gfield_error select,
.contact-form .gform_wrapper .gfield--error select {
    background-image:
        linear-gradient(var(--color-error), var(--color-error)),
        url("/wp-content/themes/viaflex/assets/img/dropdown-arrow.svg");
}

.contact-form .choices {
    width: 100%;
    margin-bottom: 0;
    overflow: visible;
    font-size: 16px;
}

.contact-form .choices.is-open {
    z-index: 5;
}

.contact-form .choices__inner {
    min-height: 0;
    padding: 16px 56px 16px 16px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background-color: var(--color-white);
    background-image: linear-gradient(var(--color-border), var(--color-border));
    background-repeat: no-repeat;
    background-position: right 45px center;
    background-size: 1px 100%;
    color: var(--color-paragraph);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

.contact-form .choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 16px;
}

.contact-form .choices[data-type*="select-one"]::after {
    content: "\f127";
    top: 50%;
    right: 14px;
    width: auto;
    height: auto;
    margin-top: 0;
    border: none;
    font-family: "viaflex-icons";
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: var(--color-primary);
    speak: never;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.contact-form .choices[data-type*="select-one"].is-open::after {
    margin-top: 0;
    border: none;
    transform: translateY(-50%) rotate(180deg);
}

.contact-form .choices.is-focused .choices__inner,
.contact-form .choices.is-open .choices__inner {
    border-color: var(--color-secondary-hover);
    border-left-width: 5px;
    padding-left: 20px;
    background-color: var(--color-white);
    background-image: linear-gradient(var(--color-secondary-hover), var(--color-secondary-hover));
    outline: none;
}

.contact-form .choices__list--single {
    padding: 0;
}

.contact-form .choices__list--single .choices__item {
    font-size: 16px;
    line-height: 1.3;
}

.contact-form .choices__placeholder {
    opacity: 1;
    color: var(--color-placeholder);
}

.contact-form .gform_wrapper .gfield_error .choices__inner,
.contact-form .gform_wrapper .gfield--error .choices__inner,
.contact-form .gform_wrapper .gfield_error .choices.is-focused .choices__inner,
.contact-form .gform_wrapper .gfield--error .choices.is-focused .choices__inner,
.contact-form .gform_wrapper .gfield_error .choices.is-open .choices__inner,
.contact-form .gform_wrapper .gfield--error .choices.is-open .choices__inner {
    border-color: var(--color-error);
    border-left-width: 1px;
    padding-left: 16px;
    outline: 2px solid var(--color-error);
    outline-offset: 0;
    background-image: linear-gradient(var(--color-error), var(--color-error));
}

.contact-form .choices__list--dropdown {
    z-index: 5;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background-color: var(--color-white);
    word-break: normal;
}

.contact-form .choices.is-open .choices__list--dropdown {
    border-color: var(--color-border);
}

.contact-form .choices__list--dropdown .choices__item {
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: var(--color-paragraph);
}

.contact-form .choices__list--dropdown .choices__item--selectable {
    padding-right: 16px;
}

.contact-form .choices__list--dropdown .choices__item--selectable::after {
    display: none;
}

.contact-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-off-white);
    color: var(--color-heading);
}

.contact-form .gform_wrapper .validation_message,
.contact-form .gform_wrapper .gfield_validation_message {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-error);
    text-transform: uppercase;
}

.contact-form .gform_wrapper .gform_validation_errors {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-error);
}

.contact-form .gform_wrapper .gform_page_footer {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 26px 0 0;
    padding: 0;
}

.contact-form .gform_wrapper .gform_page_footer .btn + .btn {
    margin-top: 0;
    margin-left: 0;
}

.contact-form .gform_wrapper :is(
    .gform_button,
    .gform_next_button,
    .gform_previous_button
) {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 16px 25px;
    border: 0;
    background-color: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
    font-family: var(--font-button);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--button-line-height);
    text-transform: uppercase;
    white-space: nowrap;

    @media( max-width : 400px ) {
        font-size: 14px;
        padding: 16px 20px;
    }
}

.gform_previous_button::after {
    display: none;
}

.contact-form .gform_wrapper .gform_button {
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

.contact-form .gform_wrapper .gform_previous_button.button {
    border: 0;
    background-color: var(--color-button-secondary-bg)!important;
    color: var(--color-button-secondary-text)!important;
}

.contact-form .gform_wrapper .gform_next_button::after,
.contact-form .gform_wrapper .gform_button::after,
.contact-form .gform_wrapper .gform_previous_button::before {
    font-family: "viaflex-icons";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f129";
    speak: never;
}

.contact-form .gform_wrapper .gform_previous_button::before {
    transform: scaleX(-1);
}

.contact-form .gform_wrapper :is(
    .gform_button,
    .gform_next_button,
    .gform_previous_button
):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.contact-form .gform_wrapper .gform_ajax_spinner {
    margin-left: 12px;
}

.contact-form__media {
        position: absolute;
        inset: 0;
    }

    .contact-form__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-position: top center;
        object-fit: cover;
    }

@media( max-width: 1199px ) and ( min-width: 768px ) {
    .contact-form__media {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .contact-form__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-position: 100% 162%;
        object-fit: contain!important;
    }
}

@media (min-width: 768px) {
    .contact-form__inner {
        gap: 40px;
    }

    .contact-form__intro {
        text-align: left;
    }

    .contact-form__intro .wysiwyg__content > h2::after {
        height: 5px;
        -webkit-clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 100%, 0 100%);
    }

    .contact-form__form {
        padding: 40px 32px;
    }

    .contact-form .contact-form__steps {
        gap: 20px 32px;
    }

    .contact-form .contact-form__step {
        flex-direction: row;
        gap: 20px;
        align-items: center;
        width: auto;
    }

    .contact-form .contact-form__step--inactive {
        display: flex;
    }

    .contact-form .contact-form__step-sep {
        display: flex;
    }

    .contact-form .contact-form__step-label br {
        display: inline;
    }

    .contact-form .gform_wrapper .gform_page_footer {
        flex-wrap: wrap;
        gap: 16px 32px;
        justify-content: flex-start;
    }

    .contact-form .gform_wrapper :is(
        .gform_button,
        .gform_next_button,
        .gform_previous_button
    ) {
        gap: var(--button-gap);
        padding: var(--button-padding-y) var(--button-padding-x);
        font-size: var(--button-font-size);
    }

    .contact-form .gform_wrapper .gform_next_button::after,
    .contact-form .gform_wrapper .gform_button::after,
    .contact-form .gform_wrapper .gform_previous_button::before {
        font-size: var(--button-icon-size);
    }
}

@media (min-width: 1200px) {
    .contact-form__intro {
        flex: 1 1 0;
        max-width: 558px;
        max-height: 285px;
        overflow: hidden;
    }

    .contact-form__intro .wysiwyg__content > h2::after {
        height: 8px;
        -webkit-clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 100%, 0 100%);
    }

    .contact-form__media {
        position: absolute;
        overflow: hidden;
        inset: 0;
    }

    .contact-form__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-position: 100% 234px;
    }

    .contact-form__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 50px;
        justify-content: center;
    }

    .contact-form__form {
        flex: 0 1 880px;
        padding: 40px;
    }

    .contact-form .contact-form-field-application {
        max-width: 600px;
    }

    .contact-form .contact-form-field-half {
        width: calc(50% - 25px);
    }

    .contact-form .gform_wrapper :is(.gform_button, .gform_next_button):hover {
        background-color: var(--color-button-primary-hover);
        color: var(--color-button-primary-hover-text);
    }

    .contact-form .gform_wrapper .gform_previous_button.button:hover {
        background-color: var(--color-button-primary-bg)!important;
        color: var(--color-button-primary-text)!important;
    }

    .contact-form .contact-form__step-sep {
        color: var(--color-secondary);
    }
}

@media( min-width : 1600px )  {
    .contact-form__img {
        object-position: 100% -34%;
    }
}

@media( min-width : 1921px ) {
    .contact-form__img {
        object-position: 100% -31%;
    }
}

@media( min-width : 2500px ) {
    .contact-form__img {
        object-position: top center;
    }
}