/**
 * EMCO Gravity Forms Style
 * -------------------------------------------------------------
 * Aligns Gravity Forms (2.5+ "Orbital" theme framework and the
 * legacy "gravity-theme") with the Divi site theme.
 *
 * HOW TO TWEAK:
 *   1. Brand values live in the :root block below — change them
 *      once and they cascade everywhere.
 *   2. GF exposes a CSS-variable API on its theme wrappers; we map
 *      our brand values onto those variables so GF styles itself.
 *   3. Anything GF's variables don't cover gets a direct override
 *      in the sections further down.
 */

/* =============================================================
 * 1. BRAND TOKENS  (pulled from Divi: et_divi options)
 * ============================================================= */
:root {
    --egfs-accent:            #142c4a; /* Divi accent_color / button bg */
    --egfs-accent-darker:     #0d1d31; /* hover (accent darkened) */
    --egfs-accent-secondary:  #345399; /* Divi secondary_accent_color */
    --egfs-link:              #2ea3f2; /* Divi link_color */
    --egfs-text:              #666666; /* Divi font_color */
    --egfs-btn-text:          #fafafa; /* Divi all_buttons_text_color */
    --egfs-border:            #cfd6df;
    --egfs-border-focus:      var(--egfs-accent-secondary);
    --egfs-radius:            3px;     /* Divi all_buttons_border_radius */
    --egfs-font:              "DM Sans", Helvetica, Arial, sans-serif;

    /* --- Submit button ----------------------------------------- */
    --egfs-btn-pad-y:         18px;
    --egfs-btn-pad-x:         20px;
    --egfs-btn-font-size:     20px;
    --egfs-btn-line-height:   1.7;
    --egfs-btn-font:          "Inter Tight", Helvetica, Arial, Lucida, sans-serif;
    --egfs-btn-radius:        0;

    /* AJAX loader (sits after the submit button) — theme blue */
    --egfs-spinner-fg:        var(--egfs-accent);
    --egfs-spinner-bg:        rgba(20, 44, 74, 0.15); /* accent @ 15% */

    /* --- Input field design ------------------------------------ */
    --egfs-input-bg:          rgba(140, 134, 138, 0.37);
    --egfs-input-bg-focus:    #efefef;
    --egfs-input-color:       #032B38;
    --egfs-input-font:        "Manrope", Helvetica, Arial, Lucida, sans-serif;
    --egfs-input-font-size:   16px;
    --egfs-input-line-height: normal;
    --egfs-input-pad-y:       20px;
    --egfs-input-pad-x:       16px;
    --egfs-input-radius:      0;
    --egfs-input-border-w:    0;
    --egfs-placeholder-color: #fff;
    --egfs-textarea-height:   150px;
    --egfs-field-row-gap:     20px;   /* vertical gap between form fields */

    /* --- Checkboxes / radios ----------------------------------- */
    --egfs-check-size:        18px;
    --egfs-check-color:       #142C4A; /* check mark when checked */

    /* --- Field label (text/email/etc.) ------------------------- */
    --egfs-label-font:        "Inter", Helvetica, Arial, sans-serif;
    --egfs-label-size:        16px;
    --egfs-label-color:       #000000;
    --egfs-label-weight:      500;
    --egfs-label-line-height: 1.7em;
    --egfs-label-margin:      5px;

    /* --- Choice label (checkbox / radio text) ------------------ */
    --egfs-choice-label-font:  "Manrope", Helvetica, Arial, Lucida, sans-serif;
    --egfs-choice-label-size:  16px;
    --egfs-choice-label-color: #032B38;
}

/* =============================================================
 * 2. MAP BRAND TOKENS ONTO GRAVITY FORMS' CSS API
 *    (GF 2.5+ Orbital / Theme Framework custom properties)
 * ============================================================= */
.gform-theme--framework,
.gform_wrapper.gravity-theme {
    --gf-color-primary:           var(--egfs-accent);
    --gf-color-primary-rgb:       20, 44, 74;
    --gf-color-primary-contrast:  var(--egfs-btn-text);
    --gf-color-primary-darker:    var(--egfs-accent-darker);
    --gf-color-primary-lighter:   var(--egfs-accent-secondary);

    --gf-ctrl-border-color:           var(--egfs-border);
    --gf-ctrl-border-color-focus:     var(--egfs-border-focus);

    /* Input fields (text, email, textarea, select, etc.) */
    --gf-ctrl-bg-color:               var(--egfs-input-bg);
    --gf-ctrl-color:                  var(--egfs-input-color);
    --gf-ctrl-font-family:            var(--egfs-input-font);
    --gf-ctrl-font-size:              var(--egfs-input-font-size);
    --gf-ctrl-line-height:            var(--egfs-input-line-height);
    --gf-ctrl-padding-y:              var(--egfs-input-pad-y);
    --gf-ctrl-padding-x:              var(--egfs-input-pad-x);
    --gf-ctrl-radius:                 var(--egfs-input-radius);
    --gf-ctrl-border-width:           var(--egfs-input-border-w);
    --gf-ctrl-placeholder-color:      var(--egfs-placeholder-color);
    --gf-ctrl-placeholder-opacity:    1;
    --gf-ctrl-textarea-height:        var(--egfs-textarea-height);

    /* Height auto (override GF's fixed --gf-ctrl-size), no shadow,
       no focus outline, change bg on focus */
    --gf-ctrl-size:                   auto;
    --gf-ctrl-shadow:                 none;
    --gf-ctrl-outline-width:          0;
    --gf-ctrl-outline-style:          none;
    --gf-ctrl-bg-color-focus:         var(--egfs-input-bg-focus);

    /* Checkboxes / radios: 18x18, same bg + border as inputs
       (bg inherits --gf-ctrl-bg-color, border-width inherits
       --gf-ctrl-border-width above), square corners, navy check. */
    --gf-ctrl-choice-size:            var(--egfs-check-size);
    --gf-ctrl-checkbox-check-radius:  var(--egfs-input-radius);
    --gf-ctrl-choice-check-color:     var(--egfs-check-color);
    --gf-ctrl-accent-color:           var(--egfs-check-color);

    --gf-ctrl-btn-bg-color-primary:         var(--egfs-accent);
    --gf-ctrl-btn-bg-color-hover-primary:   var(--egfs-accent-darker);
    --gf-ctrl-btn-color-primary:            var(--egfs-btn-text);
    --gf-ctrl-btn-border-color-primary:     var(--egfs-accent);
    --gf-ctrl-btn-font-size:                var(--egfs-btn-font-size);
    --gf-ctrl-btn-line-height:              var(--egfs-btn-line-height);
    --gf-ctrl-btn-padding-y:                var(--egfs-btn-pad-y);
    --gf-ctrl-btn-padding-x:                var(--egfs-btn-pad-x);
    --gf-ctrl-btn-font-family:              var(--egfs-btn-font);
    --gf-ctrl-btn-radius:                   var(--egfs-btn-radius);
}

/* =============================================================
 * 3. DIRECT OVERRIDES  (both GF theme variants)
 *    Scoped to .gform_wrapper so nothing else on the site changes.
 * ============================================================= */
.gform_wrapper {
    font-family: var(--egfs-font);
    color: var(--egfs-text);
}

/* Field label (text, email, textarea, select, etc.).
 * Choice labels are excluded — they carry .gform-field-label--type-inline,
 * not .gfield_label, and are styled separately below. */
.gform_wrapper .gfield_label {
    font-family: var(--egfs-label-font);
    font-size: var(--egfs-label-size);
    color: var(--egfs-label-color);
    font-weight: var(--egfs-label-weight);
    line-height: var(--egfs-label-line-height);
    margin-bottom: var(--egfs-label-margin); /* GF hard-sets margin to 0 (no variable) */
}

/* Choice labels (checkbox / radio text). */
.gform_wrapper .gchoice label,
.gform_wrapper .gform-field-label--type-inline {
    font-family: var(--egfs-choice-label-font);
    font-size: var(--egfs-choice-label-size);
    color: var(--egfs-choice-label-color);
}

/* Vertical gap between form fields. GF sets --gf-form-gap-y responsively
 * (10/14/40px) on .gform_fields, which the grid uses as row-gap. Overriding
 * the variable on .gform_fields with doubled-wrapper specificity (0,3,0) beats
 * GF's per-breakpoint values, so it stays consistent at all sizes. */
.gform_wrapper.gform_wrapper .gform_fields {
    --gf-form-gap-y: var(--egfs-field-row-gap);
}

/* Message textarea height. GF's basic.css hard-codes a height via the field's
 * size class, e.g. .gform_wrapper.gravity-theme .gfield textarea.large{height:288px}
 * at (0,4,1) specificity. !important is the cleanest way to force our height
 * over GF's size-class heights (.small/.medium/.large). Vertical resize works. */
.gform_wrapper .gfield textarea {
    height: var(--egfs-textarea-height) !important;
    block-size: var(--egfs-textarea-height) !important;
    /* GF also sets min-block-size:18rem on textarea.large, which is a floor
       that would override our height — clear it too. */
    min-height: 0 !important;
    min-block-size: 0 !important;
}

/* Checkbox / radio choices as wrapping columns.
 * GF lays multi-column choice lists (.gf_list_Ncol) out as a CSS grid at
 * (0,4,0) specificity:
 *   .gform-theme--foundation .gfield.gf_list_4col:where(...) .gfield_checkbox{display:grid}
 * so we need higher specificity to switch it to a wrapping flex row. Doubling
 * .gform_wrapper gives (0,5,0), which wins regardless of load order. */
.gform_wrapper.gform_wrapper .gfield--type-choice .gfield_checkbox,
.gform_wrapper.gform_wrapper .gfield--type-choice .gfield_radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; /* pack items to the left, no stretch */
    gap: 8px 24px;               /* row-gap / column-gap between choices */
}

.gform_wrapper.gform_wrapper .gfield--type-choice .gchoice {
    flex: 0 0 auto;          /* content width — don't grow, so wrapped rows
                                don't stretch to fill the line */
    align-items: flex-start; /* keep the box top-aligned when label wraps */
}

/* Text inputs, textareas, selects.
 * The Orbital theme reads the variables above; this block is the
 * fallback for the legacy "gravity-theme" which uses fixed CSS. */
.gform_wrapper .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
    background-color: var(--egfs-input-bg);
    color: var(--egfs-input-color);
    font-family: var(--egfs-input-font);
    font-size: var(--egfs-input-font-size);
    line-height: var(--egfs-input-line-height);
    padding: var(--egfs-input-pad-y) var(--egfs-input-pad-x);
    border-width: var(--egfs-input-border-w);
    border-style: solid;
    border-color: var(--egfs-border);
    border-radius: var(--egfs-input-radius);
    block-size: auto;       /* override GF's fixed block-size: var(--gf-local-height) */
    height: auto;           /* legacy-theme equivalent */
    box-shadow: none;
}

/* Placeholder color (vendor-prefixed for legacy theme support) */
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
    color: var(--egfs-placeholder-color);
    opacity: 1;
}

/* Checkboxes / radios — fallback for the legacy "gravity-theme",
 * which renders native controls. */
.gform_wrapper .gfield input[type="checkbox"],
.gform_wrapper .gfield input[type="radio"] {
    width: var(--egfs-check-size);
    height: var(--egfs-check-size);
    accent-color: var(--egfs-check-color);
}

/* Focus state. The input selector repeats the :not() exclusions so it
 * matches the specificity of the base input rule above (those :not([type=...])
 * attribute selectors add specificity) and the focus background actually wins. */
.gform_wrapper .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
    background-color: var(--egfs-input-bg-focus);
    box-shadow: none;
    outline: none;
}

/* Submit / next / previous buttons — match Divi buttons */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper button.gform-button {
    background-color: var(--egfs-accent);
    border: 2px solid var(--egfs-accent);
    color: var(--egfs-btn-text);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* !important: Divi scopes its button resets under the #et-boc ID, which
       outranks any class selector. These force our styles over it. */
    border-radius: var(--egfs-btn-radius) !important;
    font-family: var(--egfs-btn-font) !important;
    font-size: var(--egfs-btn-font-size) !important;
    line-height: var(--egfs-btn-line-height) !important;
    padding: var(--egfs-btn-pad-y) var(--egfs-btn-pad-x) !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper button.gform-button:hover {
    background-color: var(--egfs-accent-darker);
    border-color: var(--egfs-accent-darker);
}

/* AJAX loader. GF 2.7+ inserts <span class="gform-loader"> after the submit
 * button (a CSS spinner). We just recolor it to the theme blue via its
 * --gf-form-spinner-fg/bg-color variables and leave it in its default spot. */
.gform_wrapper .gform-loader {
    --gf-form-spinner-fg-color: var(--egfs-spinner-fg);
    --gf-form-spinner-bg-color: var(--egfs-spinner-bg);
}

/* Validation / errors */
.gform_wrapper .gfield_error .gfield_label {
    color: #c02b2b;
}

/* Required asterisk */
.gform_wrapper .gfield_required {
    color: var(--egfs-accent-secondary);
}