/* ==========================================================================
   O2 Theme — Gravity Forms Styling
   
   Site:       Greenhouse Lab (greenhouselab.org)
   Added:      2026-04-20
   Developer:  Cameron Suorsa <cameron@o2dca.com>
   
   Migrated from WPCode. Enqueue logic lives in inc/enqueue.php
   (loads on pages with a Gravity Form rendered).
   
   ---------------------------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------------------------
   [#448] Gravity Forms Global Styling
          Uses Elementor theme variables for consistency.
          
          Contents:
          1. Theme Variable Overrides
          2. Form Container & Description
          3. Labels (and required field indicators)
          4. Input Fields (all types)
          5. Textarea
          6. Select Dropdowns
          7. Checkboxes, Radio Buttons & Image Choice Cards
          8. Submit Button
          9. Validation & Error States
         10. Field Descriptions
         11. Date Picker
         12. Time Fields
         13. Newsletter Inline Form (Form ID 3)
         14. Privacy Notice - Reusable
         15. Confirmation Message
         16. ADA-Compliant Color Overrides
         17. Co.starters Consent Terms
         18. Notice Box (top of page 2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OVERRIDE GRAVITY FORMS THEME VARIABLES
   -------------------------------------------------------------------------- */
.gform_wrapper.gform-theme {
    /* Primary colors - use brand green and navy */
    --gf-color-primary: var(--e-global-color-primary) !important;
    --gf-color-primary-rgb: 113, 152, 74 !important;
    --gf-color-primary-contrast: #fff !important;
    --gf-color-primary-darker: var(--e-global-color-28ce5df) !important;
    --gf-color-primary-lighter: var(--e-global-color-primary) !important;
    
    /* In-control primary (checkboxes, radios, focus states) */
    --gf-color-in-ctrl-primary: var(--e-global-color-primary) !important;
    --gf-color-in-ctrl-primary-rgb: 113, 152, 74 !important;
    --gf-color-in-ctrl-primary-contrast: #fff !important;
    --gf-color-in-ctrl-primary-darker: var(--e-global-color-28ce5df) !important;
    
    /* Label colors - use navy */
    --gf-ctrl-label-color-primary: var(--e-global-color-secondary) !important;
    --gf-ctrl-label-color-secondary: var(--e-global-color-secondary) !important;
    
    /* Border styling */
    --gf-ctrl-border-color: var(--e-global-color-0d046a4) !important;
    --gf-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   2. FORM CONTAINER & DESCRIPTION
   -------------------------------------------------------------------------- */
.gform_wrapper {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
}

.gform_wrapper .gform_heading .gform_description {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: var(--e-global-typography-text-font-size) !important;
    font-weight: var(--e-global-typography-text-font-weight) !important;
    color: var(--e-global-color-secondary) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   3. LABELS
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
    font-family: var(--e-global-typography-accent-font-family), sans-serif !important;
    font-weight: 500 !important;
    color: var(--e-global-color-secondary) !important;
    margin-bottom: 8px !important;
}

.gform_wrapper .gfield_label_before_complex {
    font-family: var(--e-global-typography-accent-font-family), sans-serif !important;
    font-weight: 500 !important;
    color: var(--e-global-color-secondary) !important;
}

/* Sub-labels (First, Last, etc.) */
.gform_wrapper .gform-field-label--type-sub {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--e-global-color-secondary) !important;
    opacity: 0.8;
}

/* Required indicator */
.gform_wrapper .gfield_required {
    color: #dc2626 !important;
    font-weight: 800 !important;
}

/* Hide required fields legend */
.gform_wrapper .gform_required_legend {
    display: none !important;
}

/* --------------------------------------------------------------------------
   4. INPUT FIELDS (all types)
   -------------------------------------------------------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 16px !important;
    color: var(--e-global-color-secondary) !important;
    background-color: #fff !important;
    border: 2px solid var(--e-global-color-0d046a4) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Focus states */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--e-global-color-28ce5df) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 109, 53, 0.15) !important;
}

/* Placeholder text */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--e-global-color-secondary) !important;
    opacity: 0.5 !important;
}

/* Hide "Other" field when disabled */
input.gchoice_other_control[disabled] {
    display: none !important;
}

input.gchoice_other_control:not([disabled]) {
    display: block !important;
}

/* --------------------------------------------------------------------------
   5. TEXTAREA
   -------------------------------------------------------------------------- */
.gform_wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* --------------------------------------------------------------------------
   6. SELECT DROPDOWNS
   -------------------------------------------------------------------------- */
.gform_wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    background-color: #fff !important;
    color: var(--e-global-color-secondary) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23003764'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    text-indent: 0 !important;
    line-height: normal !important;
    height: auto !important;
}

/* Select options */
.gform_wrapper select option {
    color: var(--e-global-color-secondary) !important;
    background-color: #fff !important;
    padding: 8px 12px !important;
}

.gform_wrapper select option:checked {
    color: var(--e-global-color-secondary) !important;
    background-color: rgba(113, 152, 74, 0.1) !important;
}

/* Ensure select is visible */
.gform_wrapper .ginput_container_select select {
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Multi-select options */
.gform_wrapper select[multiple] option {
    padding: 6px 10px !important;
}

/* --------------------------------------------------------------------------
   7. CHECKBOXES, RADIO BUTTONS & IMAGE CHOICE CARDS
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield-choice-input {
    accent-color: var(--e-global-color-primary) !important;
}

/* Tighter spacing for checkbox/radio lists */
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
    margin-bottom: 6px !important;
}

.gform_wrapper .gfield_checkbox .gchoice:last-child,
.gform_wrapper .gfield_radio .gchoice:last-child {
    margin-bottom: 0 !important;
}

.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 15px !important;
    color: var(--e-global-color-secondary) !important;
    line-height: 1.4 !important;
}

/* Bold text within choice labels */
.gform_wrapper .gchoice label b,
.gform_wrapper .gchoice label strong {
    font-weight: 600 !important;
    color: var(--e-global-color-secondary) !important;
}

/* --- IMAGE CHOICE CARDS --- */

/* Card container - equal heights */
.gform_wrapper .gfield--type-checkbox.gfield--image-choice-appearance-card .gfield_checkbox,
.gform_wrapper .gfield--type-radio.gfield--image-choice-appearance-card .gfield_radio {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
}

/* Individual cards - equal height with flexbox */
.gform_wrapper .gfield--image-choice-appearance-card .gchoice {
    display: flex !important;
    flex-direction: column !important;
    border: 2px solid var(--e-global-color-0d046a4) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    flex: 1 1 200px !important;
    min-height: 280px !important;
    margin-bottom: 0 !important;
}

/* Card label area fills remaining space */
.gform_wrapper .gfield--image-choice-appearance-card .gchoice label {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hover state */
.gform_wrapper .gfield--image-choice-appearance-card .gchoice:hover {
    border-color: var(--e-global-color-primary) !important;
}

/* Selected/checked state - green border and shadow */
.gform_wrapper .gfield--image-choice-appearance-card .gchoice:has(input:checked) {
    border-color: var(--e-global-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(113, 152, 74, 0.15) !important;
}

/* Override the blue check indicator circle - make it green */
.gform_wrapper .gfield--image-choice-appearance-card .gform-field-label--type-image-choice-check-indicator {
    background-color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}

/* Unchecked indicator */
.gform_wrapper .gfield--image-choice-appearance-card .gchoice:not(:has(input:checked)) .gform-field-label--type-image-choice-check-indicator {
    background-color: transparent !important;
    border: 2px solid var(--e-global-color-0d046a4) !important;
}

/* The checkbox input itself - green accent */
.gform_wrapper .gfield--image-choice-appearance-card .gfield-choice-input {
    accent-color: var(--e-global-color-primary) !important;
}

/* Override any inline GF checkbox styling */
.gform_wrapper .gfield--image-choice-appearance-card input[type="checkbox"]:checked {
    background-color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}

/* --------------------------------------------------------------------------
   8. SUBMIT BUTTON
   -------------------------------------------------------------------------- */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
    font-family: var(--e-global-typography-accent-font-family), sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
    color: #fff !important;
    background-color: var(--e-global-color-secondary) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 14px 32px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
    background-color: var(--e-global-color-primary) !important;
    transform: translateY(-1px) !important;
}

.gform_wrapper .gform_button:active,
.gform_wrapper input[type="submit"]:active {
    transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   9. VALIDATION & ERROR STATES
   -------------------------------------------------------------------------- */
.gform_wrapper .gform_validation_errors {
    background-color: #fef1f4 !important;
    border: 1px solid #dc2626 !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

.gform_wrapper .gform_validation_errors h2 {
    font-family: var(--e-global-typography-accent-font-family), sans-serif !important;
    color: #dc2626 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: #dc2626 !important;
}

.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 13px !important;
    color: #dc2626 !important;
    margin-top: 6px !important;
}

/* --------------------------------------------------------------------------
   10. FIELD DESCRIPTIONS
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield_description {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 13px !important;
    color: var(--e-global-color-secondary) !important;
    opacity: 0.7 !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* Field description links */
.gform_wrapper .gfield_description a {
    color: #003764 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.gform_wrapper .gfield_description a:hover {
    color: #4F6D35 !important;
}

/* --------------------------------------------------------------------------
   11. DATE PICKER
   -------------------------------------------------------------------------- */
.gform_wrapper .datepicker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23003764' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 44px !important;
}

/* Hide duplicate datepicker icon */
.gform_wrapper img.ui-datepicker-trigger {
    display: none !important;
}

/* --------------------------------------------------------------------------
   12. TIME FIELDS
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield_time_hour input,
.gform_wrapper .gfield_time_minute input {
    text-align: center !important;
}

.gform_wrapper .hour_minute_colon {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-secondary) !important;
}

/* AM/PM dropdown - nuclear fix for GF framework reset */
.gform_wrapper .gfield--type-time select[name*="ampm"],
.gform_wrapper .ginput_container_time select,
.gform_wrapper .gfield_time_ampm select {
    all: revert !important;
    display: block !important;
    width: 100% !important;
    height: var(--gf-ctrl-size, 38px) !important;
    padding: 0 40px 0 12px !important;
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 16px !important;
    color: var(--e-global-color-secondary) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23003764' d='M0.293 0.293a1 1 0 011.414 0L5 3.586 8.293 0.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px !important;
    border: 2px solid var(--e-global-color-0d046a4) !important;
    border-radius: 6px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.gform_wrapper .gfield--type-time select:focus,
.gform_wrapper .gfield_time_ampm select:focus {
    border-color: var(--e-global-color-28ce5df) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 109, 53, 0.15) !important;
}

/* --------------------------------------------------------------------------
   13. NEWSLETTER INLINE FORM (Form ID 3)
   -------------------------------------------------------------------------- */
#gform_wrapper_3 {
    max-width: 500px !important;
}

#gform_3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

#gform_3 .gform-body,
#gform_3 .gform_body {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#gform_3 #gform_fields_3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#gform_3 .gform-footer,
#gform_3 .gform_footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#gform_3 #field_3_1 {
    margin: 0 !important;
    padding: 0 !important;
}

#gform_3 #field_3_1 .gfield_label {
    display: none !important;
}

#gform_3 #field_3_1 .ginput_container {
    margin: 0 !important;
}

#gform_3 #field_3_1 input[type="email"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    height: 50px !important;
    margin: 0 !important;
}

#gform_3 .gform_button,
#gform_3 input[type="submit"] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 50px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    transform: none !important;
}

#gform_3 .gform_button:hover,
#gform_3 input[type="submit"]:hover {
    transform: none !important;
}

#gform_3 #field_3_2,
#gform_3 #field_3_2.gf-privacy-notice {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--e-global-color-secondary) !important;
    opacity: 0.6 !important;
    line-height: 1.4 !important;
}

/* Newsletter form - responsive stacking */
@media (max-width: 480px) {
    #gform_3 {
        flex-direction: column !important;
    }
    
    #gform_3 .gform-body,
    #gform_3 .gform_body {
        width: 100% !important;
    }
    
    #gform_3 .gform-footer,
    #gform_3 .gform_footer {
        width: 100% !important;
        margin-top: 12px !important;
    }
    
    #gform_3 #field_3_1 input[type="email"] {
        border-radius: 6px !important;
        border-right: 2px solid var(--e-global-color-0d046a4) !important;
    }
    
    #gform_3 .gform_button,
    #gform_3 input[type="submit"] {
        border-radius: 6px !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   14. PRIVACY NOTICE - REUSABLE
   Add CSS class 'gf-privacy-notice' to any HTML field
   -------------------------------------------------------------------------- */
.gform_wrapper .gf-privacy-notice {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

.gform_wrapper .gf-privacy-notice p {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 12px !important;
    color: var(--e-global-color-secondary) !important;
    opacity: 0.7 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.gform_wrapper .gf-privacy-notice a {
    color: var(--e-global-color-28ce5df) !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.gform_wrapper .gf-privacy-notice a:hover {
    color: var(--e-global-color-secondary) !important;
}

/* --------------------------------------------------------------------------
   15. CONFIRMATION MESSAGE
   -------------------------------------------------------------------------- */
.gform_confirmation_message {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    background-color: rgba(113, 152, 74, 0.1) !important;
    border: 1px solid var(--e-global-color-primary) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    color: var(--e-global-color-secondary) !important;
}

.gform_confirmation_message a {
    color: #003764 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.gform_confirmation_message a:hover {
    color: #4F6D35 !important;
}

/* --------------------------------------------------------------------------
   16. CO.STARTERS CONSENT TERMS  
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield--type-consent .gfield_consent_description,
.gform_wrapper .ginput_container_consent .gfield_consent_description {
    max-height: 150px !important;
    overflow-y: auto !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 12px !important;
}

/* --------------------------------------------------------------------------
   17. NOTICE BOX - Yellow info/alert box
   Add CSS class 'gf-notice-box' to any HTML field
   -------------------------------------------------------------------------- */
.gform_wrapper .gf-notice-box {
    background-color: #FEF9E7 !important;
    border: 2px solid #F1C40F !important;
    border-left: 4px solid #F1C40F !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.gform_wrapper .gf-notice-box p {
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
    font-size: 15px !important;
    color: var(--e-global-color-secondary) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}