/**
 * Gravity Forms Styling
 * Works with existing shell.css .subscribe styles
 */

/* === RESET GRAVITY FORMS DEFAULTS TO WORK WITH SHELL.CSS === */

/* Ensure #signup container works correctly */
#signup {
    position: relative !important;
    display: inline-block !important;
    float: right !important;
}

/* Let .subscribe class from shell.css handle the form styling */
form.subscribe.gform_wrapper {
    /* Shell.css already has .subscribe styles - just reset GF defaults */
    margin: 0 !important;
    padding: 5px !important;
    margin-top: -7px !important;
    height: 25px !important;
    max-width: none !important;
    background: none !important;
    border: none !important;
    float: left !important;
    width: auto !important;
}

form.subscribe .gform_body {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
}

/* Let shell.css .subscribe li handle list items */
form.subscribe ul.gform_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    float: none !important;
}

form.subscribe.gform_wrapper.gravity-theme .gform_fields {
    grid-template-columns: none !important;
    display: block !important;
}

/* Shell.css has .subscribe li styles - just reset GF specifics */
form.subscribe li.gfield {
    /* Shell.css: display: inline-block; float: left; padding: 0; */
    padding: 0 !important;
    display: inline-block !important;
    float: left !important;
    text-align: left !important;
    list-style: none !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    vertical-align: top !important;
    clear: none !important;
}

/* Checkbox field should behave like .subscribe .add-name */
form.subscribe li.gfield_contains_required,
form.subscribe li.gfield.gfield_checkbox {
    /* Shell.css has .subscribe .add-name styles */
    padding: 0 !important;
    margin: 2px 8px !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    width: auto !important;
}

/* Hide field labels - placeholders used instead */
form.subscribe label.gfield_label {
    display: none !important;
}

/* Input container - don't interfere with shell.css */
form.subscribe .ginput_container {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Shell.css has .subscribe input styles - match exactly */
form.subscribe input[type="email"],
form.subscribe input[type="text"] {
    /* Match shell.css .subscribe input */
    border: none !important;
    width: 240px !important;
    margin: 0 !important;
    padding: .45em .5em !important;
    cursor: pointer !important;
    font-size: 120% !important;
    font-family: franklin-gothic-compressed, sans-serif !important;
    color: #444 !important;
    -webkit-box-shadow: inset 0 0 0 0 #999 !important;
    box-shadow: inset 0 0 0 0 #999 !important;
    background: #fff !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    transition: all .35s ease-in-out !important;
    height: auto !important;
    line-height: normal !important;
    max-width: none !important;
}

/* Interior pages - add border like shell.css */
body:not(.home) form.subscribe input[type="email"],
body:not(.home) form.subscribe input[type="text"] {
    -webkit-box-shadow: inset 0 0 0 1px #ccc !important;
    box-shadow: inset 0 0 0 1px #ccc !important;
}

/* Shell.css has .subscribe button styles - make sure they apply to GF button */
form.subscribe .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: inline-block !important;
    float: left !important;
    clear: none !important;
    background: none !important;
    border: none !important;
}

form.subscribe input[type="submit"],
form.subscribe .gform_button {
    /* Match shell.css .subscribe button */
    font-size: 125% !important;
    font-weight: 600 !important;
    color: white !important;
    font-family: franklin-gothic-compressed, sans-serif !important;
    text-transform: uppercase !important;
    padding: .4em 1em !important;
    background: #e87d20 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    overflow: hidden !important;
    display: inline-block !important;
    float: right !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color .35s ease-in-out !important;
    margin: 0 !important;
    line-height: normal !important;
}

form.subscribe input[type="submit"]:hover,
form.subscribe .gform_button:hover {
    background-color: #0e4e91 !important;
}

/* Checkbox styling */
form.subscribe input[type="checkbox"] {
    width: 14px !important;
    height: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

form.subscribe .ginput_container_checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

form.subscribe .gchoice {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Shell.css has .add-name label styles */
form.subscribe .gchoice label {
    /* Match shell.css .add-name label */
    float: none !important;
    display: inline !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    color: #666 !important;
    font-size: 80% !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    font-weight: normal !important;
    line-height: normal !important;
}

/* === VALIDATION STYLING === */

/* Hide validation summary */
.gform_wrapper .gform_validation_errors {
    display: none !important;
}

/* Error field container */
form.subscribe li.gfield.gfield_error {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0.5em 0 !important;
    clear: both !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
}

/* Error input - blue border */
form.subscribe.gfield_error input[type="email"],
form.subscribe li.gfield_error input[type="text"] {
    border: 2px solid #4285f4 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 400px !important;
}

/* Validation message - red label */
.gform_wrapper .validation_message {
    background: #dc3545 !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    margin: 0 0 6px 0 !important;
    display: inline-block !important;
    position: relative !important;
    border-radius: 3px !important;
    font-family: franklin-gothic-compressed, sans-serif !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
}

/* Arrow pointer below red label */
.gform_wrapper .validation_message::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #dc3545;
}

/* When error, button repositions */
form.subscribe.gform_validation_error .gform_footer {
    clear: both !important;
    float: none !important;
    display: block !important;
    margin-top: 0.5em !important;
}

form.subscribe.gform_validation_error input[type="submit"],
form.subscribe.gform_validation_error .gform_button {
    float: left !important;
}

/* Hide GF-specific elements in header form */
form.subscribe .gfield_description,
form.subscribe .gfield_required,
form.subscribe .gfield_required_asterisk,
form.subscribe .gf_progressbar_wrapper {
    display: none !important;
}

/* === SUCCESS MESSAGE === */
.gform_confirmation_message {
    background: #d4edda !important;
    border: 1px solid #c3e6cb !important;
    color: #155724 !important;
    padding: 1em !important;
    border-radius: 4px !important;
    margin: 1em 0 !important;
}

/* ===================================================================
   OTHER FORMS STYLING
   =================================================================== */

/* General form field styling for Contact, Get Involved, Stories forms */
.gform_wrapper:not(.subscribe) input[type="text"],
.gform_wrapper:not(.subscribe) input[type="email"],
.gform_wrapper:not(.subscribe) input[type="tel"],
.gform_wrapper:not(.subscribe) input[type="url"],
.gform_wrapper:not(.subscribe) input[type="number"],
.gform_wrapper:not(.subscribe) input[type="password"],
.gform_wrapper:not(.subscribe) select,
.gform_wrapper:not(.subscribe) textarea {
    font-family: franklin-gothic-compressed, sans-serif !important;
    font-size: 120% !important;
    padding: .4em .5em !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #444 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all .35s ease-in-out !important;
}

.gform_wrapper:not(.subscribe) input:focus,
.gform_wrapper:not(.subscribe) textarea:focus {
    border-color: #0e4e91 !important;
    outline: none !important;
}

.gform_wrapper:not(.subscribe) textarea {
    min-height: 150px !important;
    resize: vertical !important;
}

/* Buttons for other forms */
.gform_wrapper:not(.subscribe) input[type="submit"],
.gform_wrapper:not(.subscribe) .gform_button {
    font-family: franklin-gothic-compressed, sans-serif !important;
    font-size: 125% !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: white !important;
    background: #e87d20 !important;
    border: none !important;
    padding: .4em 1em !important;
    cursor: pointer !important;
    transition: background-color .35s ease-in-out !important;
    width: auto !important;
    display: inline-block !important;
}

.gform_wrapper:not(.subscribe) input[type="submit"]:hover,
.gform_wrapper:not(.subscribe) .gform_button:hover {
    background-color: #0e4e91 !important;
}

/* Checkboxes & Radios for other forms */
.gform_wrapper:not(.subscribe) input[type="checkbox"],
.gform_wrapper:not(.subscribe) input[type="radio"] {
    width: auto !important;
    margin-right: 8px !important;
}

/* Labels for other forms */
.gform_wrapper:not(.subscribe) label {
    font-family: franklin-gothic-compressed, sans-serif !important;
    font-weight: normal !important;
}

/* Validation for other forms */
.gform_wrapper:not(.subscribe) .gfield_error {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.gform_wrapper:not(.subscribe) .gfield_error input,
.gform_wrapper:not(.subscribe) .gfield_error textarea,
.gform_wrapper:not(.subscribe) .gfield_error select {
    border-color: #790000 !important;
}

/* Get Involved Form (Form #3) */
.signup-wrapper .gform_wrapper input,
.signup-wrapper .gform_wrapper select {
    background: white !important;
}

.actnow h1 {
    color: white !important;
    margin-bottom: .5em !important;
}

.actnow p {
    color: white !important;
    margin-bottom: 1em !important;
}

form.subscribe 
{
    display: flex !important;
    flex-direction: row;
    align-items: top;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 1em;
    box-sizing: border-box;
    background: none;
    border: none;
}

form.subscribe .gform_body .gform_fields {
    display: block !important;
}

form.subscribe .gform_footer .gform_button {
    border-radius: 0 !important;
}

form.subscribe .gform_body .gform_fields .gfield--type-checkbox {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media(max-width: 720px) {
    form.subscribe {
        display: none !important;
    }
}

/* === STORIES FORM (Form ID 4) - Share your Story === */
#stories-form {
    width: 100%;
    background: #0e4e91;
    color: #fff;
    text-align: left;
}

#stories-form  form {
    padding: 0 !important
}

#stories-form .gfield--input-type-fileupload .gfield_description.validation_message {
    display: none !important;
}

#stories-form .gform_wrapper {
    margin: 0 !important;
    padding: 15px !important;
}

#stories-form .gform_wrapper .gform_fields {
    row-gap: 0.5rem !important;
}

#stories-form .gform_title,
#stories-form .gform_heading h3 {
    font-size: 24px !important;
    color: #e87d20 !important;
    margin-bottom: 5px !important;
    font-weight: 700 !important;
}

#stories-form .gform_description {
    display: none !important;
}

#stories-form .gfield {
    margin: 0 0 3px !important;
    display: block !important;
}

#stories-form .gfield_label {
    color: #fff !important;
    font-size: 100% !important;
    font-weight: normal !important;
    margin-bottom: 3px !important;
}

#stories-form .gfield_required {
    color: #fff !important;
    display: none !important;
}

#stories-form input[type="text"],
#stories-form input[type="email"],
#stories-form input[type="tel"],
#stories-form input[type="url"],
#stories-form input[type="number"],
#stories-form select,
#stories-form textarea {
    background: #6b96c2 !important;
    width: 100% !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 5px 4px 4px 4px !important;
    cursor: pointer !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #fff !important;
    transition: all .35s ease-in-out !important;
}

#stories-form input[type="text"]:hover,
#stories-form input[type="email"]:hover,
#stories-form input[type="tel"]:hover,
#stories-form input[type="url"]:hover,
#stories-form input[type="number"]:hover,
#stories-form select:hover,
#stories-form textarea:hover {
    background: #3598ff !important;
    color: #fff !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
}

#stories-form input[type="text"]:focus,
#stories-form input[type="email"]:focus,
#stories-form input[type="tel"]:focus,
#stories-form input[type="url"]:focus,
#stories-form input[type="number"]:focus,
#stories-form select:focus,
#stories-form textarea:focus {
    background: #cce5ff !important;
    color: #444 !important;
    cursor: text !important;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35) !important;
}

#stories-form textarea {
    height: 160px !important;
    min-height: 160px !important;
}

#stories-form ::placeholder {
    color: #fff !important;
    opacity: 1 !important;
}

#stories-form .ginput_container_fileupload {
    margin-top: 5px !important;
}

#stories-form .gfield_description {
    font-size: 10px !important;
    margin-top: 5px !important;
    color: #fff !important;
}

#stories-form .gfield_checkbox li {
    padding: 15px 0 !important;
    line-height: 1.3 !important;
}

#stories-form .gfield_checkbox input[type="checkbox"] {
    width: auto !important;
    margin-right: 8px !important;
    vertical-align: top !important;
}

#stories-form .gfield_checkbox label {
    display: inline !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

#stories-form .gform_footer {
    padding-top: 15px !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
}

#stories-form .gform_button {
    cursor: pointer !important;
    width: 100% !important;
    height: 36px !important;
    border-radius: 30px !important;
    background: #ff7100 !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border: none !important;
    transition: background-color .35s ease-in-out !important;
    padding: 0 !important;
}

#stories-form .gform_button:hover,
#stories-form .gform_button:active {
    background: #0FB7E0 !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.15) !important;
}

/* Hide validation errors in stories form (keep consistent with original) */
#stories-form .gfield_error {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#stories-form .validation_message {
    color: red !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

/* Hide Gravity Forms validation icon/indicator */
#stories-form .gfield_validation_message::before,
#stories-form .gfield_validation_indicator {
    display: none !important;
}

/* Hide any red icons or marks */
#stories-form .gform_wrapper .gfield_error .gfield_label::before {
    display: none !important;
}

#stories-form .gform_wrapper .validation_error {
    display: none !important;
}

#stories-form .ginput_container::before,
#stories-form .ginput_container::after {
    display: none !important;
}

.page-id-19 .gform_wrapper .gform_fields {
    row-gap: 0.5rem !important;
}