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

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


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


/**
 * Form tokens
 *
 * The rules below are driven entirely by these values, so branding the forms shouldn't require
 * touching any selectors. Promote these to custom-properties.css if they're needed outside of forms.
 *
 * TODO: Update these to match the prototypes.
 */
:root {
    --form-control-background: #f2f3f4;
    --form-control-background-focus: #ebecee;
    --form-control-text-color: inherit;
    --form-control-padding: 12px 16px;
    --form-control-radius: 0;

    /* Focus is drawn with an outline so that removing the border doesn't remove the focus cue */
    --form-focus-ring-color: #23282d;
    --form-focus-ring-width: 2px;

    --form-label-text-color: inherit;
    --form-label-font-weight: 600;

    /* Space between a label and its field */
    --form-label-gap: 8px;

    /* Space between one field and the next */
    --form-field-gap: 20px;

    /* Validation messaging */
    --form-error-color: #c02b0a;
    --form-error-background: #fdf6f5;
    --form-success-color: #237d3f;
    --form-success-background: #f4faf6;

    /* Submit/next buttons */
    --form-btn-padding: 14px 28px;
    --form-btn-radius: 0;
    --form-btn-border-width: 2px;
    --form-btn-font-weight: 600;
    --form-btn-background: #23282d;
    --form-btn-background-hover: #3c434a;
    --form-btn-text-color: #fbfbfc;

    /* Previous/save buttons */
    --form-btn-secondary-background: transparent;
    --form-btn-secondary-background-hover: #23282d;
    --form-btn-secondary-text-color: #23282d;
    --form-btn-secondary-text-color-hover: #fbfbfc;
}


/*------------------------------------*\
    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: 0;
    border-radius: var(--form-control-radius);
    background-color: var(--form-control-background);
    color: var(--form-control-text-color);

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

/**
 * Focus state
 *
 * global.css re-applies a 1px border to any focused input. These selectors are more specific, so
 * the field stays borderless and gets an outline ring instead.
 */
.gform_wrapper.gform_wrapper .gfield :is(input, select, textarea):focus,
.wpcf7-form :is(input, select, textarea):focus {
    border: 0;
    background-color: var(--form-control-background-focus);
    outline: var(--form-focus-ring-width) solid var(--form-focus-ring-color);
    outline-offset: 2px;
}

/* 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
\*------------------------------------*/

/**
 * Scoped to the form wrappers so this stays independent of the site-wide .btn object in global.css.
 * Gravity Forms buttons do also carry .btn via input_to_button(), so if .btn is styled later these
 * rules still win on specificity.
 */
.gform_wrapper.gform_wrapper :is(
    .gform_button,
    .gform_next_button,
    .gform_previous_button,
    .gform_save_link
),
.wpcf7-form .wpcf7-submit {
    box-sizing: border-box;
    display: inline-block;
    padding: var(--form-btn-padding);
    border: 0;
    border-radius: var(--form-btn-radius);
    background-color: var(--form-btn-background);
    color: var(--form-btn-text-color);
    font: inherit;
    font-weight: var(--form-btn-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gform_wrapper.gform_wrapper :is(.gform_button, .gform_next_button):hover,
.wpcf7-form .wpcf7-submit:hover {
    background-color: var(--form-btn-background-hover);
    color: var(--form-btn-text-color);
}

/**
 * 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(--form-btn-border-width) solid currentColor;
    background-color: var(--form-btn-secondary-background);
    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-weight: var(--form-label-font-weight);
}

/**
 * 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/
 */
.gform_wrapper.gform-theme--framework {
    --gf-ctrl-border-width: 0;
    --gf-ctrl-radius: var(--form-control-radius);
    --gf-ctrl-bg-color: var(--form-control-background);
    --gf-ctrl-bg-color-focus: var(--form-control-background-focus);
}


/*------------------------------------*\
    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);
}