/*
 * Gravity Forms Orbital Theme Overrides
 * Child theme: Divi-child
 * Depends on: variables.css, theme.css (for --brand-*, --text-*, etc.)
 * Scoped to #page-container per FSM/Foundation standards.
 */

/* ============================================
   GRAVITY FORMS ORBITAL THEME STYLES
   ============================================ */

/* Global Orbital Theme Variables - Maps theme variables to Gravity Forms CSS API */
.gform-theme--orbital {
    /* Primary Colors */
    --gf-color-primary: var(--brand-primary-500);
    --gf-color-primary-contrast: var(--text-on-action);
    --gf-color-primary-darker: var(--brand-primary-600);
    --gf-color-primary-lighter: var(--brand-primary-400);

    /* Secondary Colors */
    --gf-color-secondary: var(--brand-secondary-500);
    --gf-color-secondary-contrast: var(--text-on-action);
    --gf-color-secondary-darker: var(--brand-secondary-600);
    --gf-color-secondary-lighter: var(--brand-secondary-400);

    /* Control Colors */
    --gf-control-bg-color: var(--background-primary);
    --gf-control-bg-color-focus: var(--background-primary);
    --gf-control-border-color: var(--border-default);
    --gf-control-border-color-focus: var(--gf-color-primary);
    --gf-control-color: var(--text-default);
    --gf-control-color-focus: var(--text-default);
    --gf-control-color-placeholder: var(--text-muted);

    /* Framework Control Variables (gf-ctrl-* shorthand) */
    --gf-ctrl-bg-color: var(--gf-control-bg-color);
    --gf-ctrl-bg-color-focus: var(--gf-control-bg-color-focus);
    --gf-ctrl-border-color: var(--gf-control-border-color);
    --gf-ctrl-border-color-focus: var(--gf-color-primary);
    --gf-ctrl-color: var(--gf-control-color);
    --gf-ctrl-color-focus: var(--gf-control-color-focus);

    /* Focus Outline Variables - Subtle shadow for depth, border provides main feedback */
    --gf-ctrl-outline-color-focus: var(--brand-primary-500);
    --gf-ctrl-outline-width-focus: 2px;

    /* Label Colors */
    --gf-label-color: var(--text-heading);
    --gf-label-font-size: var(--font-size-200);
    --gf-label-font-weight: var(--font-weight-medium);
    --gf-label-line-height: var(--line-height-sm);

    /* Description Colors */
    --gf-description-color: var(--text-muted);
    --gf-description-font-size: var(--font-size-100);
    --gf-description-line-height: var(--line-height-sm);

    /* Button Colors */
    --gf-button-primary-bg-color: var(--action-primary-default);
    --gf-button-primary-bg-color-hover: var(--action-primary-hover);
    --gf-button-primary-color: var(--action-primary-text);
    --gf-button-primary-color-hover: var(--action-primary-text);

    /* Border & Radius */
    --gf-control-border-radius: 4px;
    --gf-control-border-width: 1px;
    --gf-control-padding-x: 16px;
    --gf-control-padding-y: 12px;

    /* Spacing */
    --gf-field-margin-bottom: 24px;
    --gf-label-margin-bottom: 8px;
    --gf-description-margin-top: 4px;

    /* Typography */
    --gf-control-font-size: var(--font-size-200);
    --gf-control-line-height: var(--line-height-sm);
    --gf-control-font-family: var(--font-family-sans);

    /* Error States */
    --gf-error-color: var(--feedback-red-500);
    --gf-error-bg-color: var(--feedback-red-50);
    --gf-error-border-color: var(--feedback-red-500);

    /* Success States */
    --gf-success-color: var(--feedback-green-500);
    --gf-success-bg-color: var(--feedback-green-50);
}

/* Foundation Layer Variable Overrides - Override Foundation defaults */
#page-container .gform-theme--foundation,
#page-container .gform-theme--api {
    --gf-form-gap-x: 16px;
    --gf-form-gap-y: 20px;
    --gf-form-footer-margin-y-start: 24px;
    --gf-form-footer-gap: 8px;
    --gf-field-gap-x: 12px;
    --gf-field-gap-y: 12px;
    --gf-field-date-width: 168px;
    --gf-field-time-width: 110px;
    --gf-field-list-btns-gap: 8px;
    --gf-field-list-btns-width: calc(32px + var(--gf-field-list-btns-gap) + var(--gf-field-gap-x));
    --gf-field-pg-steps-gap-y: 8px;
    --gf-field-pg-steps-gap-x: 24px;
    --gf-label-width: 30%;
    --gf-label-req-gap: 6px;
}

/* Form Wrapper Base Styles */
#page-container .gform-theme--orbital {
    font-family: var(--font-family-sans);
    color: var(--text-default);
}

/* Form Field Container */
#page-container .gform-theme--orbital .gfield {
    margin-bottom: var(--gf-field-margin-bottom);
}

/* Labels */
#page-container .gform-theme--orbital .gfield_label,
#page-container .gform-theme--orbital label.gfield_label {
    color: var(--gf-label-color);
    font-size: var(--gf-label-font-size);
    font-weight: var(--gf-label-font-weight);
    line-height: var(--gf-label-line-height);
    margin-bottom: var(--gf-label-margin-bottom);
    font-family: var(--font-family-sans);
}

/* Required Label Indicator */
#page-container .gform-theme--orbital .gfield_required {
    color: var(--gf-error-color);
    margin-left: 4px;
}

/* Field Descriptions */
#page-container .gform-theme--orbital .gfield_description,
#page-container .gform-theme--orbital .gfield_description.validation_message {
    color: var(--gf-description-color);
    font-size: var(--gf-description-font-size);
    line-height: var(--gf-description-line-height);
    margin-top: var(--gf-description-margin-top);
}

/* Text Inputs, Textareas, Selects */
#page-container .gform-theme--orbital input[type="text"],
#page-container .gform-theme--orbital input[type="email"],
#page-container .gform-theme--orbital input[type="tel"],
#page-container .gform-theme--orbital input[type="url"],
#page-container .gform-theme--orbital input[type="number"],
#page-container .gform-theme--orbital input[type="password"],
#page-container .gform-theme--orbital input[type="date"],
#page-container .gform-theme--orbital input[type="time"],
#page-container .gform-theme--orbital textarea,
#page-container .gform-theme--orbital select {
    background-color: var(--gf-control-bg-color);
    border: var(--gf-control-border-width) solid var(--gf-control-border-color);
    border-radius: var(--gf-control-border-radius);
    color: var(--gf-control-color);
    font-size: var(--gf-control-font-size);
    line-height: var(--gf-control-line-height);
    font-family: var(--gf-control-font-family);
    padding: var(--gf-control-padding-y) var(--gf-control-padding-x);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

/* Input Focus States - Framework handles focus states via CSS variables */
/* Removed manual focus styles to allow framework variables to work properly */

/* Placeholder Text */
#page-container .gform-theme--orbital input::placeholder,
#page-container .gform-theme--orbital textarea::placeholder {
    color: var(--gf-control-color-placeholder);
    opacity: 1;
}

/* Submit Button */
#page-container .gform-theme--orbital .gform_button,
#page-container .gform-theme--orbital input[type="submit"],
#page-container .gform-theme--orbital button[type="submit"] {
    background-color: var(--gf-button-primary-bg-color);
    color: var(--gf-button-primary-color);
    border: none;
    border-radius: var(--gf-control-border-radius);
    padding: var(--gf-control-padding-y) var(--gf-control-padding-x);
    font-size: var(--gf-control-font-size);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-sans);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 0.32px;
}

#page-container .gform-theme--orbital .gform_button:hover,
#page-container .gform-theme--orbital input[type="submit"]:hover,
#page-container .gform-theme--orbital button[type="submit"]:hover {
    background-color: var(--gf-button-primary-bg-color-hover);
}

#page-container .gform-theme--orbital .gform_button:active,
#page-container .gform-theme--orbital input[type="submit"]:active,
#page-container .gform-theme--orbital button[type="submit"]:active {
    transform: translateY(1px);
}

/* Error States */
#page-container .gform-theme--orbital .gfield_error input,
#page-container .gform-theme--orbital .gfield_error textarea,
#page-container .gform-theme--orbital .gfield_error select {
    border-color: var(--gf-error-border-color);
    background-color: var(--gf-error-bg-color);
}

#page-container .gform-theme--orbital .gfield_error .validation_message {
    color: var(--gf-error-color);
    font-size: var(--gf-description-font-size);
    margin-top: var(--gf-description-margin-top);
}

/* Success Message */
#page-container .gform-theme--orbital .gform_confirmation_message {
    background-color: var(--gf-success-bg-color);
    color: var(--gf-success-color);
    padding: 16px;
    border-radius: var(--gf-control-border-radius);
    border-left: 4px solid var(--gf-success-color);
    margin-bottom: var(--gf-field-margin-bottom);
}

/* Checkbox and Radio Styles */
#page-container .gform-theme--orbital .gchoice label {
    font-weight: var(--font-weight-regular);
    color: var(--text-default);
    cursor: pointer;
}

#page-container .gform-theme--orbital input[type="checkbox"],
#page-container .gform-theme--orbital input[type="radio"] {
    width: auto;
    margin-right: 8px;
    cursor: pointer;
}

/* File Upload Field */
#page-container .gform-theme--orbital .ginput_container_fileupload input[type="file"] {
    padding: var(--gf-control-padding-y);
}

/* Hidden Fields */
#page-container .gform-theme--orbital .gform_hidden {
    display: none;
}

/* Page Break Navigation */
#page-container .gform-theme--orbital .gform_page_footer {
    margin-top: 32px;
}

#page-container .gform-theme--orbital .gform_page_footer .gform_previous_button {
    background-color: var(--gray-200);
    color: var(--text-default);
}

#page-container .gform-theme--orbital .gform_page_footer .gform_previous_button:hover {
    background-color: var(--gray-300);
}

/* Progress Bar (if using progress indicators) */
#page-container .gform-theme--orbital .gf_progressbar {
    background-color: var(--gray-200);
    border-radius: var(--gf-control-border-radius);
    height: 8px;
    margin-bottom: var(--gf-field-margin-bottom);
}

#page-container .gform-theme--orbital .gf_progressbar_percentage {
    background-color: var(--gf-color-primary);
    border-radius: var(--gf-control-border-radius);
    height: 100%;
    transition: width 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #page-container .gform-theme--orbital {
        --gf-control-padding-x: 14px;
        --gf-control-padding-y: 10px;
        --gf-field-margin-bottom: 20px;
    }
}