/**
 * Contact Form - Gravity Forms Block Styles
 *
 * Full-width layout with text left and form right
 * Shares base styles with Contact Form - HubSpot block
 *
 * @package TMW_Blocks
 */

/* Container */
.contact-form-gravity-block {
    /* Block-specific dimension tokens */
    --form-wrapper-min-height: 150px;
    --form-wrapper-offset: 5%;
}

/* Contact Form Section - Grid system (.row class) provides layout */
.contact-form-gravity-block .contact-form-section {
    border-radius: var(--radius-card);
}

/* Contact Form Content (Left Side) */
.contact-form-gravity-block .contact-form-content {
    /* flex-col utility class provides: display: flex; flex-direction: column */
}

.contact-form-content .contact-form-subtitle {
    margin-bottom: var(--space-lg);
}

/* Subtitle Image - displays below subtitle text */
.contact-form-gravity-block .contact-form-subtitle-image {
    margin-top: var(--space-lg);
}

.contact-form-gravity-block .contact-form-subtitle-image img {
    max-width: 80%;
    height: auto;
}

/* Contact Form Wrapper (Right Side) */
.contact-form-gravity-block .contact-form-wrapper {
    /*
     * Use margin-top instead of position: relative + top to offset the form.
     * position + top moves the content visually but keeps the element's bounding box
     * in the original position, which can intercept clicks on elements above.
     * margin-top actually moves the element's box, preventing click interception.
     */
    margin-top: var(--form-wrapper-offset);
    padding-bottom: var(--form-wrapper-offset);
}

/* Form wrapper when no title/subtitle - constrain width for better readability */
.contact-form-gravity-block .contact-form-section:has(> .col-12.contact-form-wrapper:only-child) {
    display: block;
}

.contact-form-gravity-block .col-12.contact-form-wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   STACKED LAYOUT
   "Heading Above Form" — heading/subtitle live inside the
   form wrapper, directly above a full-width, width-constrained,
   centered form (single shared container).
   ======================================== */
.contact-form-gravity-block.layout-stacked .contact-form-section {
    display: block;
}

.contact-form-gravity-block.layout-stacked .col-12.contact-form-wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* No 5% offset when the form sits directly beneath the heading */
.contact-form-gravity-block.layout-stacked .contact-form-wrapper {
    margin-top: 0;
}

/* Space between the heading/subtitle block and the form within the shared container */
.contact-form-gravity-block.layout-stacked .contact-form-wrapper .contact-form-content {
    margin-bottom: var(--space-xl);
}

/* Placeholder and No Content States */
.contact-form-gravity-block .contact-form-placeholder {
    color: var(--color-input);
    font-style: italic;
    padding: var(--space-xl);
}

.contact-form-gravity-block .contact-form-error {
    color: var(--color-error);
    padding: var(--space-xl);
}

/* Editor Preview Styles */
.contact-form-gravity-block .gravity-form-preview {
    background: var(--color-background-subtle);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
}

.contact-form-gravity-block .gravity-form-preview code {
    background: var(--color-background);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
}

/* ========================================
   DARK BACKGROUND SUPPORT
   Uses --dark-bg-* variables from theme utilities.css
   ======================================== */

/*
 * Form labels, descriptions, and validation messages
 * NOTE: Higher specificity needed to override Gravity Forms theme CSS
 * (.gform_wrapper.gform-theme--orbital .gfield_label uses var(--color-text-primary))
 * Uses global dark-bg-detection.js system with [data-dark-bg="true"]
 */
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_label,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_description,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_consent_label,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .ginput_container label,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_checkbox label,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_radio label,
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield .gfield_label,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_label,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_description,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_consent_label,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .ginput_container label,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_checkbox label,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_radio label {
    color: var(--dark-bg-text);
}

/* Required field indicator */
.contact-form-gravity-block[data-dark-bg="true"] .gform_wrapper .gfield_required,
[data-dark-bg="true"] .contact-form-gravity-block .gform_wrapper .gfield_required {
    color: var(--dark-bg-text);
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Mobile - Stack Vertically (grid system handles via .col-md-12) */
@media (width <= 768px) {
    .contact-form-gravity-block .row {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Reset form wrapper offset on mobile to prevent submit button clipping */
    .contact-form-gravity-block .contact-form-wrapper {
        margin-top: 0;
        padding-bottom: 0;
    }
}

/*
 * Mobile Landscape Fix
 * Landscape phones often exceed 768px width but have limited height,
 * causing the form wrapper offset to clip the submit button.
 */
@media (orientation: landscape) and (height <= 500px) {
    .contact-form-gravity-block .row {
        padding-top: 0;
        padding-bottom: 0;
    }

    .contact-form-gravity-block .contact-form-wrapper {
        margin-top: 0;
        padding-bottom: 0;
    }
}

/* ========================================
   BLOCK EDITOR SPECIFIC STYLES
   ======================================== */

.editor-styles-wrapper .contact-form-gravity-block {
    margin-top: 0;
    margin-bottom: 0;
}