/*
 * Gravity Forms — theme styling
 *
 * Gravity Forms 2.7+ renders through its Theme Framework ("Orbital"), whose
 * wrapper carries .gform-theme--framework and which exposes a CSS API of
 * custom properties. Styling through that API rather than element selectors
 * means every control GF renders picks the values up — text, email, tel,
 * number, textarea, select, and the composite name/address/date sub-fields —
 * along with the hover, focus and error states GF derives from them.
 *
 * Every declaration is !important because Gravity Forms prints a per-form
 * inline <style> whose selector is ID-based —
 * `#gform_wrapper_1[data-form-index="0"].gform-theme` (specificity 1,2,0) —
 * and sets --gf-ctrl-border-color, --gf-ctrl-btn-border-color-secondary,
 * --gf-ctrl-btn-font-size, --gf-ctrl-btn-padding-x and --gf-ctrl-btn-size
 * among others. No class-based selector can outrank an ID, and the form ID
 * is not knowable in a stylesheet, so !important is the only lever here.
 *
 * Colours reference the theme.json presets so they follow the palette.
 */

.gform_wrapper.gform-theme--framework {
    /* ── Fields ────────────────────────────────────────────────────────────
     * Resting and hover borders are #e7e7e7; focus switches to the brand
     * yellow. --gf-ctrl-accent-color drives checkbox/radio ticks and the
     * focus ring GF derives from the accent.
     */
    --gf-ctrl-border-color: #e7e7e7 !important;
    --gf-ctrl-border-color-hover: #e7e7e7 !important;
    --gf-ctrl-border-color-focus: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-accent-color: var(--wp--preset--color--incc-yellow) !important;

    /*
     * Field height, up from GF's 38px default (--gf-ctrl-size-md). Textareas
     * are unaffected: they size from --gf-ctrl-textarea-height (130px).
     */
    --gf-ctrl-size: 48px !important;

    /* ── Buttons ───────────────────────────────────────────────────────────
     * Mirrors theme.json styles.elements.button: a transparent pill with a
     * 2px yellow border that fills yellow with white text on hover.
     *
     * GF maps Next and Submit (.button) to the *primary* variables and
     * Previous (.gform-theme-button--secondary) to the *secondary* ones, so
     * both sets are given identical values to render the three alike.
     */
    --gf-ctrl-btn-bg-color-primary: transparent !important;
    --gf-ctrl-btn-bg-color-secondary: transparent !important;
    --gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-bg-color-hover-secondary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-bg-color-focus-primary: transparent !important;
    --gf-ctrl-btn-bg-color-focus-secondary: transparent !important;

    --gf-ctrl-btn-border-color-primary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-border-color-secondary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-border-color-hover-secondary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-border-color-focus-primary: var(--wp--preset--color--incc-yellow) !important;
    --gf-ctrl-btn-border-color-focus-secondary: var(--wp--preset--color--incc-yellow) !important;

    --gf-ctrl-btn-border-width-primary: 2px !important;
    --gf-ctrl-btn-border-width-secondary: 2px !important;
    --gf-ctrl-btn-border-style-primary: solid !important;
    --gf-ctrl-btn-border-style-secondary: solid !important;

    --gf-ctrl-btn-color-primary: var(--wp--preset--color--incc-neutral-darkest) !important;
    --gf-ctrl-btn-color-secondary: var(--wp--preset--color--incc-neutral-darkest) !important;
    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--incc-white) !important;
    --gf-ctrl-btn-color-hover-secondary: var(--wp--preset--color--incc-white) !important;
    --gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--incc-neutral-darkest) !important;
    --gf-ctrl-btn-color-focus-secondary: var(--wp--preset--color--incc-neutral-darkest) !important;

    --gf-ctrl-btn-radius: 100px !important;
    --gf-ctrl-btn-padding-x: 24px !important;
    --gf-ctrl-btn-padding-y: 12px !important;
    --gf-ctrl-btn-font-family: var(--wp--preset--font-family--avenir-next) !important;
    --gf-ctrl-btn-font-size: var(--wp--preset--font-size--incc-large) !important;
    --gf-ctrl-btn-font-weight: 500 !important;
    --gf-ctrl-btn-line-height: 1.5 !important;
}

h3.gsection_title {
    font-size: 18px !important;
    margin-bottom: 5px !important;
}

.gform-theme--foundation .gform_fields {
    row-gap: 24px !important;
}

p.gform_required_legend {
    display: none !important;
}

/* Matches the theme's button transition (theme.json elements.button css). */
.gform_wrapper.gform-theme--framework .gform_page_footer .button,
.gform_wrapper.gform-theme--framework .gform_footer .button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Fallback for forms rendered without the Theme Framework — the CSS API is
 * absent there, so these need real declarations.
 * ────────────────────────────────────────────────────────────────────────── */

.gform_wrapper:not(.gform-theme--framework)
    .gform_body
    input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
.gform_wrapper:not(.gform-theme--framework) .gform_body textarea,
.gform_wrapper:not(.gform-theme--framework) .gform_body select {
    border: 1px solid #e7e7e7;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Height for single-line controls only — textareas keep their own sizing. */
.gform_wrapper:not(.gform-theme--framework)
    .gform_body
    input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
.gform_wrapper:not(.gform-theme--framework) .gform_body select {
    height: 48px;
}

.gform_wrapper:not(.gform-theme--framework)
    .gform_body
    input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):focus,
.gform_wrapper:not(.gform-theme--framework) .gform_body textarea:focus,
.gform_wrapper:not(.gform-theme--framework) .gform_body select:focus {
    border-color: var(--wp--preset--color--incc-yellow);
    outline-color: var(--wp--preset--color--incc-yellow);
}

.gform_wrapper:not(.gform-theme--framework) .gform_next_button,
.gform_wrapper:not(.gform-theme--framework) .gform_previous_button,
.gform_wrapper:not(.gform-theme--framework) .gform_button {
    background: transparent;
    border: 2px solid var(--wp--preset--color--incc-yellow);
    border-radius: 100px;
    color: var(--wp--preset--color--incc-neutral-darkest);
    font-family: var(--wp--preset--font-family--avenir-next);
    font-size: var(--wp--preset--font-size--incc-large);
    font-weight: 500;
    line-height: 1.5;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gform_wrapper:not(.gform-theme--framework) .gform_next_button:hover,
.gform_wrapper:not(.gform-theme--framework) .gform_previous_button:hover,
.gform_wrapper:not(.gform-theme--framework) .gform_button:hover {
    background: var(--wp--preset--color--incc-yellow);
    border-color: var(--wp--preset--color--incc-yellow);
    color: var(--wp--preset--color--incc-white);
}