/**
 * Gravity Forms — FSTCC styling
 *
 * Maps the Gravity Forms Theme Framework (Orbital) onto the site's design
 * tokens via GF's CSS custom-property API (section 1), with a scoped fallback
 * layer (section 2) so forms match Shane's static design even where a GF
 * variable name differs — no !important specificity wars required.
 *
 * Relies on the CSS variables (--dark-blue, --light-blue, --radius-sm, …)
 * defined in style.css, which is enqueued as a dependency.
 */

/* ── 1. Theme Framework CSS API — set GF's own custom properties ─────────────── */
.gform-theme--framework,
.gform_wrapper.gravity-theme,
.gform_wrapper.gform-theme--foundation {
    --gf-color-primary: var(--light-blue);
    --gf-color-primary-rgb: 68, 153, 199;
    --gf-color-primary-contrast: var(--white);
    --gf-color-primary-contrast-rgb: 255, 255, 255;

    --gf-ctrl-bg-color: var(--white);
    --gf-ctrl-border-color: rgba(32, 54, 74, 0.10);
    --gf-ctrl-border-color-hover: rgba(32, 54, 74, 0.20);
    --gf-ctrl-border-color-focus: var(--light-blue);
    --gf-ctrl-radius: var(--radius-sm);
    --gf-ctrl-label-color-primary: var(--dark-blue);
    --gf-ctrl-label-color-secondary: var(--grey-light);

    --gf-ctrl-btn-bg-color-primary: var(--dark-blue);
    --gf-ctrl-btn-bg-color-hover-primary: var(--light-blue);
    --gf-ctrl-btn-color-primary: var(--white);
    --gf-ctrl-btn-radius: var(--radius-sm);
    /* Button sizing — GF drives height via min-height token, padding via padding-x. */
    --gf-ctrl-btn-size-md: 52px;
    --gf-ctrl-btn-padding-x-md: 28px;
    --gf-ctrl-btn-font-weight: 700;
    --gf-ctrl-btn-shadow-hover: 0 8px 28px rgba(32, 54, 74, 0.2);

    /* Typography — force Raleway across labels, inputs and buttons
       (GF's button font otherwise falls back to --gf-font-family-base: initial). */
    --gf-font-family-base: 'Raleway', sans-serif;

    /* Field spacing — 12px gap on both axes between rows/columns. */
    --gf-form-gap-x: 12px;
    --gf-form-gap-y: 12px;
}

/* ── 2. Fallback layer — guarantees the look, scoped to the form wrapper ─────── */
.gform_wrapper .gfield label.gfield_label,
.gform_wrapper .gfield legend.gfield_label {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 6px;
}

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
    width: 100%;
    height: 52px;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 15px 20px;
    border: 2px solid rgba(32, 54, 74, 0.10);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--dark-blue);
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s;
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
    border-color: var(--light-blue);
    box-shadow: none;
    outline: none;
}

.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
    color: #b0b0b0;
}

.gform_wrapper .gfield select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 44px 5px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2320364a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.gform_wrapper .gfield textarea {
    height: 120px;
    min-height: 120px;
    resize: vertical;
    max-width: 100%;
}

/* Submit / next / previous buttons.
   GF renders the submit control as `input[type=submit].gform-button.button`,
   which on this site sits inside an inline `.gfield--type-submit` field — NOT
   the `.gform_footer`. Selectors therefore target the button element directly,
   prefixed with the framework + foundation wrapper classes to out-specify GF's
   own button rule (…--framework.gform_wrapper .button). Height/padding/weight/
   radius come from GF's tokens in section 1; transform/hover-lift has no GF
   token, so it lives here with an explicit transition that covers it. */
.gform-theme--framework.gform-theme--foundation.gform_wrapper input[type="submit"],
.gform-theme--framework.gform-theme--foundation.gform_wrapper button.gform_button,
.gform-theme--framework.gform-theme--foundation.gform_wrapper .gform-button,
.gform_wrapper.gravity-theme input[type="submit"],
.gform_wrapper.gravity-theme .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 15px;
    height: 52px;
    padding: 0 28px;
    background: var(--dark-blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.gform-theme--framework.gform-theme--foundation.gform_wrapper input[type="submit"]:hover,
.gform-theme--framework.gform-theme--foundation.gform_wrapper button.gform_button:hover,
.gform-theme--framework.gform-theme--foundation.gform_wrapper .gform-button:hover,
.gform_wrapper.gravity-theme input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_button:hover {
    background: var(--light-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(32, 54, 74, 0.2);
}

/* Validation — tuned to the palette */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield.gfield_error input[type="text"],
.gform_wrapper .gfield.gfield_error input[type="email"] {
    border-color: var(--red) !important;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
}

/* Confirmation message */
.gform_confirmation_wrapper .gform_confirmation_message,
.gform_confirmation_message {
    background: #fff;
    padding: 36px 28px;
    border-radius: 20px;
    border: 1px solid rgba(32, 54, 74, 0.04);
}

.gform_confirmation_wrapper h3,
.gform_confirmation_message h3 {
    margin-bottom: 0;
}

/* Checkboxes and radios — always left-aligned regardless of parent text-align */
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-radio {
    text-align: left;
}
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gform_wrapper .gfield_checkbox li,
.gform_wrapper .gfield_radio li,
.gform_wrapper .gchoice {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Contact section — hide required legend */
.contact-section .gform_required_legend { display: none; }

/* Contact section — confirmation message: strip card styling */
.contact-section .gform_confirmation_wrapper .gform_confirmation_message,
.contact-section .gform_confirmation_message {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Contact section — pill submit button */
/* Email section — keep input + submit top-aligned when validation error appears */
.email-section .gform_fields { align-items: flex-start; }
.email-section .gfield { align-self: flex-start; }
.email-section .gform_footer,
.email-section .gform_page_footer { align-self: flex-start; margin-top: 0; }
.email-section .gform_submission_error { margin-bottom: 0; }

/* Contact section — pill submit button */
.contact-section .gform_wrapper,
.contact-section .gform-theme--framework,
.contact-section .gform-theme--foundation {
    --gf-ctrl-btn-radius: 50px;
}
.contact-section .gform-theme--framework.gform-theme--foundation.gform_wrapper input[type="submit"],
.contact-section .gform-theme--framework.gform-theme--foundation.gform_wrapper button.gform_button,
.contact-section .gform-theme--framework.gform-theme--foundation.gform_wrapper .gform-button,
.contact-section .gform_wrapper.gravity-theme input[type="submit"],
.contact-section .gform_wrapper.gravity-theme .gform_button {
    border-radius: 50px !important;
}