.content-components .newsletter-signup-form .call-to-action {
    --gf-local-bg-color: var(--local-background-color) !important;
}

.component-form{
    container: form / inline-size;
}

/*
 * This needs increased specificity to override GF's, do NOT switch to :where()
*/
/* stylelint-disable selector-class-pattern */
.content-components .newsletter-signup-form .gform_fields {
    grid-template-columns: 1fr min-content;
}

.content-components .newsletter-signup-form .gform_fields > * {
    grid-column: unset;
}

/*
 * Concept styling for a stacked contact form: bold labels above light-grey filled
 * inputs, generous spacing, and a red pill submit button. Selectors are scoped to
 * .content-components .component-form and use !important on the properties Gravity
 * Forms' orbital theme sets aggressively — matching the "override GF" note above.
 */
/* The heading and copy keep the component's content width; the form itself is
   narrower and centered beneath them. */
.content-components .component-form .gform_wrapper {
    max-width: 92rem;
    margin-inline: auto;
    /* On top of the component's vertical padding, so the submit button never sits right
       against whatever follows, even with the padding set small. */
    margin-block-end: var(--size-medium);
}

.content-components .component-form .gform_fields {
    row-gap: var(--size-medium);
}

.content-components .component-form .gfield_label {
    margin-bottom: var(--size-x-small);
    color: var(--color-primary-black);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
}

.content-components .component-form .ginput_container input,
.content-components .component-form .ginput_container textarea {
    width: 100%;
    padding: var(--size-small);
    border: none !important;
    border-radius: var(--border-radius-common) !important;
    background-color: var(--color-brand-light-grey) !important;
    color: var(--color-primary-black);
    font-size: var(--font-size-body);
}

.content-components .component-form .ginput_container textarea {
    min-height: 34rem;
    resize: vertical;
}

.content-components .component-form .ginput_container input:focus-visible,
.content-components .component-form .ginput_container textarea:focus-visible {
    outline: 2px solid var(--color-brand-blue);
    outline-offset: 2px;
}

.content-components .component-form .gform_footer {
    justify-content: center;
}

/*
 * The submit button is a call to action like every other button on the site: form.php
 * gives it the call-to-action classes and the data-vendi-button-style attribute, so its
 * colors come from the chosen button style. All of it has to be re-declared here because
 * Gravity Forms styles its submit with unlayered rules, and the theme's button rules live
 * in @layer buttons — a layered rule loses to an unlayered one whatever its specificity.
 * Every value below reads the same custom property the layer sets, so this stays in step
 * with the site's buttons rather than becoming a second definition of them.
 *
 * Gravity Forms renders the submit as an <input> or a <button> depending on the form's
 * settings. Its rule for a <button> carries as much weight as this selector had without
 * .gform_wrapper, and it loads later, so that class is what keeps these rules ahead.
 */
.content-components .component-form .gform_wrapper .gform_footer :is(input, button)[type="submit"].call-to-action-button {
    min-width: 20rem;
    min-height: 4.8rem;
    padding-block: var(--local-padding-block);
    padding-inline: var(--local-padding-inline);
    border: 2px solid var(--button-style-border-color, var(--color-primary-white));
    border-radius: var(--local-border-radius);
    background-color: var(--button-style-background-color, var(--color-primary-black));
    color: var(--button-style-color, var(--color-primary-white));
    font-size: var(--font-size-body);
    font-weight: var(--local-font-weight);
    cursor: pointer;
}

.content-components .component-form .gform_wrapper .gform_footer :is(input, button)[type="submit"].call-to-action-button:hover {
    border-color: var(--button-style-hover-border-color, var(--color-primary-black));
    background-color: var(--button-style-hover-background-color, var(--color-primary-white));
    color: var(--button-style-hover-color, var(--color-primary-black));
}

/* stylelint-enable */

@container form (inline-size < 150rem) {
    .component-form {
        .content-wrap {
            padding-inline: 4rem;
        }
    }
}