/*------------------------------------*\

    WebFX Form Defaults - Shared baseline styling for Gravity Forms and CF7


\*------------------------------------*/


/**
 * Form tokens
 *
 * Color, padding, radius, gaps, focus, and error color live in custom-properties.css.
 * These leftovers are only used inside this file.
 */
:root {
    --form-control-text-color: var(--color-paragraph);
    --form-label-text-color: var(--color-heading);
    --form-label-font-weight: var(--font-weight-button);

    --form-btn-secondary-background: transparent;
    --form-btn-secondary-background-hover: var(--color-tertiary-dark);
    --form-btn-secondary-text-color: var(--color-heading);
    --form-btn-secondary-text-color-hover: var(--color-text-inverse);
}


/*------------------------------------*\
    SHARED CONTROL STYLING
\*------------------------------------*/

.gform_wrapper.gform_wrapper .gfield :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    select,
    textarea
),
.wpcf7-form :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    select,
    textarea
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: var(--form-control-padding);
    border: 1px solid var(--border-color);
    border-radius: var(--form-control-radius);
    background-color: var(--form-control-background);
    box-shadow: none;
    color: var(--form-control-text-color);

    /* Form controls don't inherit type styling from the page by default */
    font: inherit;
}

.gform_wrapper.gform_wrapper .gfield :is(input, textarea)::placeholder,
.wpcf7-form :is(input, textarea)::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

/**
 * Focus state
 *
 * A 5px left border is the keyboard cue. --color-secondary-dark on white clears the 3:1
 * UI-component minimum, so the extra outline from global.css stays off.
 */
.gform_wrapper.gform_wrapper .gfield :is(input, select, textarea):focus,
.wpcf7-form :is(input, select, textarea):focus {
    border: 1px solid var(--color-secondary-dark);
    border-left-width: 5px;
    padding-left: 20px;
    background-color: var(--form-control-background-focus);
    box-shadow: none;
    outline: none;
}

/* Textareas shouldn't be draggable off to the side of the layout */
.gform_wrapper.gform_wrapper .gfield textarea,
.wpcf7-form textarea {
    display: block;
    resize: vertical;
}


/*------------------------------------*\
    BUTTONS
\*------------------------------------*/

/**
 * Gravity Forms submit and next buttons get .btn from input_to_button(), so they keep the
 * site button. This only paints Contact Form 7 submits, which do not receive that class.
 */
.wpcf7-form .wpcf7-submit {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid transparent;
    border-radius: var(--radius-button);
    background-color: transparent;
    background-image: var(--gradient-primary);
    color: var(--color-primary-contrast);
    font-family: var(--font-button);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-button);
    letter-spacing: var(--letter-spacing-button);
    line-height: var(--line-height-button);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

/**
 * Match .btn in global.css. Gravity Forms resets button styles, so these rules repeat
 * the site button at a specificity that survives that reset, including the hover ring.
 */
.gform_wrapper.gform_wrapper .gform_button.btn,
.gform_wrapper.gform_wrapper .gform_next_button.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid transparent;
    border-radius: var(--radius-button);
    background-color: transparent;
    background-image: var(--gradient-primary);
    background-origin: border-box;
    box-shadow: none;
    color: var(--color-primary-contrast);
    font-family: var(--font-button);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-button);
    letter-spacing: var(--letter-spacing-button);
    line-height: var(--line-height-button);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.gform_wrapper.gform_wrapper .gform_button.btn:hover,
.gform_wrapper.gform_wrapper .gform_next_button.btn:hover,
.gform_wrapper.gform_wrapper .gform_button.btn:focus-visible,
.gform_wrapper.gform_wrapper .gform_next_button.btn:focus-visible {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--color-primary);
    text-decoration: none;
}

.gform_wrapper.gform_wrapper .gform_button.btn:hover::before,
.gform_wrapper.gform_wrapper .gform_next_button.btn:hover::before,
.gform_wrapper.gform_wrapper .gform_button.btn:focus-visible::before,
.gform_wrapper.gform_wrapper .gform_next_button.btn:focus-visible::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--button-border-width));
    padding: var(--button-border-width);
    border-radius: inherit;
    background-image: var(--gradient-primary);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

.gform_wrapper.gform_wrapper .gform_button.btn:not(:has(.icon)):not(:has(svg))::after,
.gform_wrapper.gform_wrapper .gform_next_button.btn:not(:has(.icon)):not(:has(svg))::after,
.wpcf7-form .wpcf7-submit:not(:has(.icon)):not(:has(svg))::after {
    content: "\e904";
    font-family: "icon-font";
    font-size: var(--button-arrow-size);
    line-height: 1;
}

.wpcf7-form .wpcf7-submit:hover {
    border-color: transparent;
    background-image: none;
    background-color: transparent;
    color: var(--color-primary);
}

/**
 * Previous/save buttons
 *
 * Gravity Forms hardcodes a white fill on these, so they need the extra .button class to be
 * outweighed. Giving them the secondary style also keeps them distinct from "Next".
 */
.gform_wrapper.gform_wrapper .gform_previous_button.button,
.gform_wrapper.gform_wrapper .gform_save_link.button {
    border: var(--button-border-width) solid currentColor;
    background-color: var(--form-btn-secondary-background);
    background-image: none;
    color: var(--form-btn-secondary-text-color);
}

.gform_wrapper.gform_wrapper .gform_previous_button.button:hover,
.gform_wrapper.gform_wrapper .gform_save_link.button:hover {
    background-color: var(--form-btn-secondary-background-hover);
    color: var(--form-btn-secondary-text-color-hover);
}

/* Keyboard focus needs its own cue, since hover only changes the fill */
.gform_wrapper.gform_wrapper :is(
    .gform_button,
    .gform_next_button,
    .gform_previous_button,
    .gform_save_link
):focus-visible,
.wpcf7-form .wpcf7-submit:focus-visible {
    outline: var(--form-focus-ring-width) solid var(--form-focus-ring-color);
    outline-offset: 2px;
}

.gform_wrapper.gform_wrapper :is(.gform_button, .gform_next_button):disabled,
.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/*------------------------------------*\
    GRAVITY FORMS
\*------------------------------------*/

/**
 * Labels above the field
 *
 * The gravity theme already stacks labels but sets them to inline-block, so this makes the label a
 * true block and hands spacing over to --form-label-gap.
 */
.gform_wrapper.gform_wrapper .gfield > :is(.gfield_label, legend.gfield_label) {
    display: block;
    margin-bottom: var(--form-label-gap);
    padding: 0;
    color: var(--form-label-text-color);
    font-size: 17px;
    font-weight: var(--form-label-font-weight);
    line-height: 1.3;
}

.gform_wrapper.gform_wrapper .gfield_required {
    color: var(--color-error);
}

/**
 * The theme framework's default indicator is the words "(Required)".
 * Show an asterisk and keep the words for assistive tech.
 */
.gform_wrapper.gform_wrapper :is(.gfield_label, legend.gfield_label) > .gfield_required:has(> .gfield_required_text) {
    position: relative;
}

.gform_wrapper.gform_wrapper :is(.gfield_label, legend.gfield_label) > .gfield_required:has(> .gfield_required_text)::after {
    content: "*";
    color: var(--color-error);
}

.gform_wrapper.gform_wrapper .gfield_required_text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gform_wrapper.gform_wrapper .gfield_error :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea
),
.wpcf7-form .wpcf7-not-valid {
    border-color: var(--color-error);
    border-left-width: 5px;
    padding-left: 20px;
}

.gform_wrapper.gform_wrapper .gfield_error :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea
):focus,
.wpcf7-form .wpcf7-not-valid:focus {
    border-color: var(--color-error);
    outline: none;
}

.gform_wrapper.gform_wrapper .gfield_error :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"]
) {
    padding-right: 48px;
}

.gform_wrapper.gform_wrapper .gfield_error .ginput_container:not(:has(textarea)) {
    position: relative;
}

.gform_wrapper.gform_wrapper .gfield_error .ginput_container:not(:has(textarea))::after {
    content: "!";
    position: absolute;
    top: 50%;
    right: 9px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background-color: var(--color-error);
    color: var(--color-white);
    font-size: 18px;
    font-weight: var(--font-weight-button);
    line-height: 32px;
    text-align: center;
    pointer-events: none;
}

.gform_wrapper.gravity-theme .gfield_error .gfield_validation_message,
.gform_wrapper.gravity-theme .gfield_error .validation_message,
.gform_wrapper.gform_wrapper .gfield_validation_message,
.gform_wrapper.gform_wrapper .validation_message,
.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: var(--form-error-color);
    font-size: 12px !important;
    font-weight: var(--font-weight-button) !important;
    line-height: 1;
    text-transform: uppercase !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/**
 * Gravity Forms theme framework (the orbital theme and anything else built on it) is styled through
 * its own CSS API rather than by overriding selectors.
 *
 * @link https://docs.gravityforms.com/about-the-gravity-forms-theme-css-api/
 */
/**
 * Confirmation replaces the form inside the card. Keep the message readable on the off-white fill.
 */
.gform_wrapper.gform_wrapper .gform_confirmation_wrapper {
    margin: 0;
    padding: 0;
}

.gform_wrapper.gform_wrapper .gform_confirmation_message,
.gform_wrapper.gform_wrapper .gform_confirmation_message :is(p, li) {
    color: var(--color-paragraph);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

.gform_wrapper.gform_wrapper .gform_confirmation_message :is(h2, h3, h4) {
    margin-bottom: var(--space-paragraph);
    color: var(--color-heading);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-heading);
}

.gform_wrapper.gform_wrapper .gform_confirmation_message a {
    color: var(--color-link);
}

/**
 * Gravity Forms also prints a summary above the fields. Drop its boxed chrome so the
 * per-field message and icon stay the visible error treatment.
 */
.gform_wrapper.gravity-theme.gform_wrapper .gform_validation_errors,
.gform_wrapper.gform_wrapper .gform_validation_errors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 var(--form-field-gap);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}


.gform_wrapper.gravity-theme .gform_validation_errors > h2,
.gform_wrapper.gform_wrapper .gform_validation_errors .gform_submission_error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--form-error-color);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-body);
}

.gform_wrapper.gform_wrapper .gform_validation_errors h2 .gform-icon {
    display: none !important;
}

.gform_wrapper.gform_wrapper .gform_validation_errors .gform-icon {
    flex-shrink: 0;
    background: none;
    border: 0;
    color: var(--form-error-color);
}

.gform_wrapper.gform_wrapper .gform_validation_errors ol {
    margin: 0;
    padding-left: 18px;
    color: var(--form-error-color);
    font-size: 14px;
    font-weight: var(--font-weight-button);
    line-height: 1.4;
    list-style: disc;
}

.gform_wrapper.gform_wrapper .gform_validation_errors ol a {
    color: var(--form-error-color);
    text-decoration: underline;
}

.gform_wrapper.gform_wrapper .gform_validation_errors ol a:focus-visible {
    outline: var(--form-focus-ring-width) solid var(--form-focus-ring-color);
    outline-offset: 2px;
}

.gform_wrapper.gform-theme--framework {
    --gf-ctrl-border-width: 1px;
    --gf-ctrl-radius: var(--form-control-radius);
    --gf-ctrl-border-color: var(--border-color);
    --gf-ctrl-bg-color: var(--form-control-background);
    --gf-ctrl-bg-color-focus: var(--form-control-background-focus);
    --gf-color-danger: var(--color-error);
    /* rgba(var(--gf-color-danger-rgb)) cannot read --color-error. 215, 12, 12 is #d70c0c. */
    --gf-color-danger-rgb: 215, 12, 12;
}


/*------------------------------------*\
    CONTACT FORM 7
\*------------------------------------*/

/**
 * CF7's default markup nests the field inside its label, so the label has to be block level for the
 * text to sit on its own line above the field.
 */
.wpcf7-form label:has(> .wpcf7-form-control-wrap) {
    display: block;
    color: var(--form-label-text-color);
    font-weight: var(--form-label-font-weight);
}

/**
 * Space between rows, and before the submit button
 *
 * This sits on the field row rather than a wrapper because CF7 only wraps fields in paragraphs when
 * its autop setting is on - plenty of forms render as bare labels with nothing to hang spacing off.
 */
.wpcf7-form label:has(> .wpcf7-form-control-wrap),
.wpcf7-form > .wpcf7-form-control-wrap {
    margin-bottom: var(--form-field-gap);
}

/**
 * Making the control wrapper block level is what actually pushes the field below the label text.
 * This is intentionally not scoped to the rule above so it also covers forms that use a separate
 * <label for="..."> instead of wrapping the field.
 */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: var(--form-label-gap);
}

/**
 * CF7's default form template puts a <br> between the label text and the field. Once the field is
 * block level that break only adds an empty line.
 */
.wpcf7-form label > br {
    display: none;
}

/**
 * When autop is on, fields come wrapped in paragraphs. The row margin above collapses into this one
 * rather than stacking, so the gap stays the same either way.
 */
.wpcf7-form p {
    margin-bottom: var(--form-field-gap);
}