/* ============================================================
    Contact Form with Quick Info Rail
    All values are driven by Style tab fields via CSS variables
    set inline in module.html. Fallbacks below match the field
    defaults, so the module renders correctly even if a variable
    is ever missing.
============================================================ */
.contact-form-with-quick-info-rail {
    background-color: var(--contact-form-with-quick-info-rail-bg, #FFFFFF);
    font-family: var(--contact-form-with-quick-info-rail-body-font, "Inter"), sans-serif;
}

.contact-form-with-quick-info-rail__wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--contact-form-with-quick-info-rail-top-spacing, 64px) 32px var(--contact-form-with-quick-info-rail-bottom-spacing, 64px);
    display: grid;
    grid-template-columns: var(--contact-form-with-quick-info-rail-form-ratio, 1.3fr 1fr);
    gap: var(--contact-form-with-quick-info-rail-gap, 56px);
    align-items: start;
}

/* Form Column */
.contact-form-with-quick-info-rail__heading {
    margin: 0 0 6px;
    font-family: var(--contact-form-with-quick-info-rail-heading-font, "Barlow Condensed"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-heading-size, 30px);
    font-weight: var(--contact-form-with-quick-info-rail-heading-weight, 700);
    font-style: var(--contact-form-with-quick-info-rail-heading-style, normal);
    color: var(--contact-form-with-quick-info-rail-heading-color, #1B4F72);
    line-height: 1.1;
}

.contact-form-with-quick-info-rail__sub {
    margin: 0 0 28px;
    font-family: var(--contact-form-with-quick-info-rail-body-font, "Inter"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-body-size, 15px);
    font-weight: var(--contact-form-with-quick-info-rail-body-weight, 400);
    font-style: var(--contact-form-with-quick-info-rail-body-style, normal);
    color: var(--contact-form-with-quick-info-rail-body-color, #3D3D3D);
    line-height: 1.6;
}

.contact-form-with-quick-info-rail__form-wrapper {
    background-color: var(--contact-form-with-quick-info-rail-form-wrapper-bg, #FFFFFF);
    border: 1px solid var(--contact-form-with-quick-info-rail-form-wrapper-border, #D9E2EC);
    border-radius: var(--contact-form-with-quick-info-rail-form-wrapper-radius, 8px);
    padding: var(--contact-form-with-quick-info-rail-form-wrapper-padding, 36px);
}

/* HubSpot form embed (v4 renders inline, not iframe) */
.contact-form-with-quick-info-rail__form-wrapper iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    background: transparent;
}

/* ---- HubSpot v4 form overrides (scoped to this module) ---- */
.contact-form-with-quick-info-rail__form-wrapper .hsfc-Step__Content {
    padding: 0 !important;
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-Row {
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-FieldLabel {
    font-family: var(--contact-form-with-quick-info-rail-form-label-font, "Roboto Mono"), monospace;
    font-size: var(--contact-form-with-quick-info-rail-form-label-size, 13px);
    font-weight: var(--contact-form-with-quick-info-rail-form-label-weight, 600);
    color: var(--contact-form-with-quick-info-rail-form-label-color, #1B4F72);
    margin-bottom: 6px;
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-TextInput,
.contact-form-with-quick-info-rail__form-wrapper .hsfc-SelectInput {
    width: 100%;
    font-family: var(--contact-form-with-quick-info-rail-body-font, "Inter"), sans-serif;
    font-size: 15px;
    color: var(--contact-form-with-quick-info-rail-form-field-text, #3D3D3D);
    background: var(--contact-form-with-quick-info-rail-form-field-bg, #fff);
    border: 1px solid var(--contact-form-with-quick-info-rail-form-field-border, #D9E2EC);
    border-radius: var(--contact-form-with-quick-info-rail-form-field-radius, 4px);
    padding: 11px 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-TextInput:focus,
.contact-form-with-quick-info-rail__form-wrapper .hsfc-SelectInput:focus {
    border-color: var(--contact-form-with-quick-info-rail-form-field-focus-border, #E8610A);
    box-shadow: 0 0 0 3px var(--contact-form-with-quick-info-rail-form-field-focus-shadow, rgba(232,97,10,.22));
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-Button {
    font-family: var(--contact-form-with-quick-info-rail-button-font, "Inter"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-button-size, 16px);
    font-weight: var(--contact-form-with-quick-info-rail-button-weight, 600);
    color: var(--contact-form-with-quick-info-rail-button-text, #fff);
    background: var(--contact-form-with-quick-info-rail-button-bg, #E8610A);
    border: none;
    border-radius: var(--contact-form-with-quick-info-rail-button-radius, 4px);
    padding: var(--contact-form-with-quick-info-rail-button-padding-v, 15px) var(--contact-form-with-quick-info-rail-button-padding-h, 26px);
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-Button:hover {
    background: var(--contact-form-with-quick-info-rail-button-hover-bg, #D15509);
    box-shadow: 0 6px 16px rgba(232,97,10,.32);
}

.contact-form-with-quick-info-rail__form-wrapper .hsfc-RichText p {
    font-family: var(--contact-form-with-quick-info-rail-body-font, "Inter"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-body-size, 15px);
    color: var(--contact-form-with-quick-info-rail-body-color, #3D3D3D);
    line-height: 1.6;
    margin: 0 0 20px;
}

.contact-form-with-quick-info-rail__footer-note {
    margin: 14px 0 0;
    font-family: var(--contact-form-with-quick-info-rail-note-font, "Roboto Mono"), monospace;
    font-size: var(--contact-form-with-quick-info-rail-note-size, 12px);
    font-weight: var(--contact-form-with-quick-info-rail-note-weight, 400);
    font-style: var(--contact-form-with-quick-info-rail-note-style, normal);
    color: var(--contact-form-with-quick-info-rail-note-color, #6B7280);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Quick Info Rail */
.contact-form-with-quick-info-rail__rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form-with-quick-info-rail__rail-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: var(--contact-form-with-quick-info-rail-card-padding, 22px);
    border: 1px solid var(--contact-form-with-quick-info-rail-card-border, #D9E2EC);
    border-radius: var(--contact-form-with-quick-info-rail-card-radius, 8px);
    background: var(--contact-form-with-quick-info-rail-card-bg, #FFFFFF);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.contact-form-with-quick-info-rail__rail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px var(--contact-form-with-quick-info-rail-card-hover-shadow, rgba(27,79,114,.12));
}

.contact-form-with-quick-info-rail__icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--contact-form-with-quick-info-rail-card-icon-bg, #D9E2EC);
    color: var(--contact-form-with-quick-info-rail-card-icon-color, #1B4F72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-form-with-quick-info-rail__rail-label {
    font-family: var(--contact-form-with-quick-info-rail-rail-label-font, "Roboto Mono"), monospace;
    font-size: var(--contact-form-with-quick-info-rail-rail-label-size, 11px);
    font-weight: var(--contact-form-with-quick-info-rail-rail-label-weight, 400);
    font-style: var(--contact-form-with-quick-info-rail-rail-label-style, normal);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--contact-form-with-quick-info-rail-rail-label-color, #6B7280);
    margin-bottom: 5px;
}

.contact-form-with-quick-info-rail__rail-value {
    font-family: var(--contact-form-with-quick-info-rail-rail-body-font, "Inter"), sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--contact-form-with-quick-info-rail-rail-body-color, #1B4F72);
    line-height: 1.2;
}

.contact-form-with-quick-info-rail__rail-meta {
    font-family: var(--contact-form-with-quick-info-rail-rail-body-font, "Inter"), sans-serif;
    font-size: 13px;
    font-weight: var(--contact-form-with-quick-info-rail-rail-body-weight, 400);
    font-style: var(--contact-form-with-quick-info-rail-rail-body-style, normal);
    color: var(--contact-form-with-quick-info-rail-rail-body-color, #6B7280);
    margin-top: 4px;
}

/* Note Card */
.contact-form-with-quick-info-rail__note-card {
    padding: var(--contact-form-with-quick-info-rail-note-card-padding, 22px);
    border: 1px solid var(--contact-form-with-quick-info-rail-note-card-border, #D9E2EC);
    border-radius: var(--contact-form-with-quick-info-rail-note-card-radius, 8px);
    background: var(--contact-form-with-quick-info-rail-note-card-bg, #F5F5F0);
}

.contact-form-with-quick-info-rail__note-title {
    margin: 0 0 8px;
    font-family: var(--contact-form-with-quick-info-rail-rail-heading-font, "Barlow Condensed"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-rail-heading-size, 18px);
    font-weight: var(--contact-form-with-quick-info-rail-rail-heading-weight, 700);
    font-style: var(--contact-form-with-quick-info-rail-rail-heading-style, normal);
    color: var(--contact-form-with-quick-info-rail-rail-heading-color, #1B4F72);
}

.contact-form-with-quick-info-rail__note-text {
    margin: 0;
    font-family: var(--contact-form-with-quick-info-rail-rail-body-font, "Inter"), sans-serif;
    font-size: var(--contact-form-with-quick-info-rail-rail-body-size, 14px);
    font-weight: var(--contact-form-with-quick-info-rail-rail-body-weight, 400);
    font-style: var(--contact-form-with-quick-info-rail-rail-body-style, normal);
    color: var(--contact-form-with-quick-info-rail-note-card-text, #6B7280);
    line-height: 1.6;
}

/* Custom Button Styles (applied via HubSpot form Custom CSS or when form renders inline) */
.contact-form-with-quick-info-rail__custom-btn-style {
    /* This class is for documentation - actual button styling for HubSpot forms
       must be applied via the form editor's Custom CSS field.
       The CSS variables below are available for reference. */
}

@media (max-width: 767px) {
    .contact-form-with-quick-info-rail__wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 20px;
    }

    .contact-form-with-quick-info-rail__heading {
        font-size: clamp(28px, 7vw, var(--contact-form-with-quick-info-rail-heading-size, 30px));
    }

    .contact-form-with-quick-info-rail__form-wrapper {
        padding: 24px;
    }

    .contact-form-with-quick-info-rail__rail-card {
        padding: 18px;
    }

    .contact-form-with-quick-info-rail__note-card {
        padding: 18px;
    }
}

/* Print styles */
@media print {
    .contact-form-with-quick-info-rail {
        background: #fff !important;
    }

    .contact-form-with-quick-info-rail__form-wrapper {
        border: 1px solid #D9E2EC !important;
    }

    .contact-form-with-quick-info-rail__rail-card {
        border: 1px solid #D9E2EC !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .contact-form-with-quick-info-rail__note-card {
        border: 1px solid #D9E2EC !important;
    }
}