/* ==========================================================
   Gravity Forms Override — Darcy Flynn Romance
   ALL of GF's CSS is disabled (three generations, incl. Orbital),
   so this file owns everything: layout, honeypot hiding, visuals.
   Scoped to the two form containers:
     .contact__form-column   (contact section)
     .newsletter-cta__form   (newsletter band)
   ========================================================== */

/* --- 0. GF CSS-variable remap — last line of defense.
   If a future GF stylesheet slips past the PHP disable, it paints
   with GF's custom properties; remap them to brand tokens. --- */
.contact__form-column .gform_wrapper,
.newsletter-cta__form .gform_wrapper {
    --gform-theme-color-primary: var(--btn-bg);
    --gform-theme-color-primary-contrast: var(--btn-text);
    --gform-theme-color-primary-darker: var(--btn-hover-bg);
    --gform-theme-control-border-color: var(--border-medium);
    --gform-theme-control-color: var(--text-primary);
    --gform-theme-control-background-color: transparent;
    --gform-theme-button-primary-background-color: var(--btn-bg);
    --gform-theme-button-primary-color: var(--btn-text);
    --gform-theme-button-primary-background-color-hover: var(--btn-hover-bg);
}

/* --- 1. Honeypot + utility hiding — REQUIRED with GF CSS gone --- */
.contact__form-column .gform_validation_container,
.contact__form-column .gfield_visibility_hidden,
.contact__form-column .gfield_admin_only,
.contact__form-column .gform_required_legend,
.contact__form-column .gfield--type-html,
.contact__form-column .gfield_html,
.contact__form-column .gfield--type-honeypot,
.contact__form-column [class*="honeypot"],
.contact__form-column .gfield.field_description_above .gfield_description,
.newsletter-cta__form .gform_validation_container,
.newsletter-cta__form .gfield_visibility_hidden,
.newsletter-cta__form .gfield_admin_only,
.newsletter-cta__form .gform_required_legend,
.newsletter-cta__form .gfield--type-html,
.newsletter-cta__form .gfield_html,
.newsletter-cta__form .gfield--type-honeypot,
.newsletter-cta__form [class*="honeypot"],
.newsletter-cta__form .gfield.field_description_above .gfield_description {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* --- 2. Wrapper reset --- */
.contact__form-column .gform_wrapper,
.newsletter-cta__form .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    max-width: none !important;
}

/* --- 3. Nuke visual chrome on descendants (layout left alone) --- */
.contact__form-column .gform_wrapper *,
.contact__form-column .gform_wrapper *::before,
.contact__form-column .gform_wrapper *::after,
.newsletter-cta__form .gform_wrapper *,
.newsletter-cta__form .gform_wrapper *::before,
.newsletter-cta__form .gform_wrapper *::after {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none;
}

/* --- 4. Field layout — the theme owns it. Fields default full width;
   GF's editor width classes narrow them. Do NOT flatten to 100%. --- */
.contact__form-column .gform_fields,
.newsletter-cta__form .gform_fields {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.contact__form-column .gfield,
.newsletter-cta__form .gfield {
    width: 100%;
    min-width: 0;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

.contact__form-column .gfield.gfield--width-half,
.contact__form-column .gfield.gf_left_half,
.contact__form-column .gfield.gf_right_half {
    width: calc(50% - 12px);
}
.contact__form-column .gfield.gfield--width-third,
.contact__form-column .gfield.gf_left_third,
.contact__form-column .gfield.gf_middle_third,
.contact__form-column .gfield.gf_right_third {
    width: calc(33.333% - 16px);
}
.contact__form-column .gfield.gfield--width-quarter {
    width: calc(25% - 18px);
}
.contact__form-column .gfield.gfield--width-two-thirds {
    width: calc(66.666% - 8px);
}
.contact__form-column .gfield.gfield--width-three-quarter {
    width: calc(75% - 6px);
}

/* --- 5. Labels: visible, small, warm (this design shows labels) --- */
.contact__form-column .gfield_label,
.newsletter-cta__form .gfield_label {
    display: block;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.contact__form-column .gfield_required,
.newsletter-cta__form .gfield_required {
    color: var(--brand);
    padding-left: 3px;
}

/* Complex Name sub-labels stay accessible but hidden */
.contact__form-column .hidden_sub_label,
.contact__form-column .gfield_label_before_complex,
.contact__form-column label.gfield_label--type-sub,
.newsletter-cta__form .hidden_sub_label,
.newsletter-cta__form .gfield_label_before_complex,
.newsletter-cta__form label.gfield_label--type-sub {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* --- 6. Inputs — soft rounded fields on white --- */
.contact__form-column input[type="text"],
.contact__form-column input[type="email"],
.contact__form-column input[type="tel"],
.contact__form-column input[type="url"],
.contact__form-column input[type="number"],
.contact__form-column select,
.contact__form-column textarea,
.newsletter-cta__form input[type="text"],
.newsletter-cta__form input[type="email"],
.newsletter-cta__form input[type="tel"] {
    width: 100%;
    padding: 14px 18px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 12px !important;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.contact__form-column textarea {
    min-height: 150px;
    resize: vertical;
}

.contact__form-column input:focus,
.contact__form-column select:focus,
.contact__form-column textarea:focus,
.newsletter-cta__form input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(222, 0, 86, 0.12) !important;
}

/* --- 7. Placeholders --- */
.contact__form-column ::placeholder,
.newsletter-cta__form ::placeholder {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-muted);
    opacity: 1;
}

/* --- 8. Name field complex: First/Last share a row --- */
.contact__form-column .ginput_complex,
.newsletter-cta__form .ginput_complex {
    display: flex;
    gap: 24px;
}
.contact__form-column .ginput_complex > span,
.newsletter-cta__form .ginput_complex > span {
    flex: 1 1 0;
    min-width: 0;
}

/* --- 9. Submit button — pill, every variant GF can render --- */
.contact__form-column .gform_footer,
.newsletter-cta__form .gform_footer {
    margin-top: 4px !important;
    padding: 0 !important;
}

.contact__form-column .gform_button,
.contact__form-column input[type="submit"],
.contact__form-column button[type="submit"],
.contact__form-column .gform_wrapper .gform_button,
.contact__form-column .gform_wrapper input[type="submit"],
.contact__form-column .gform_wrapper button[type="submit"],
.newsletter-cta__form .gform_button,
.newsletter-cta__form input[type="submit"],
.newsletter-cta__form button[type="submit"],
.newsletter-cta__form .gform_wrapper .gform_button,
.newsletter-cta__form .gform_wrapper input[type="submit"],
.newsletter-cta__form .gform_wrapper button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 38px 14px !important;
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: var(--font-label) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.contact__form-column .gform_button:hover,
.contact__form-column input[type="submit"]:hover,
.contact__form-column button[type="submit"]:hover,
.newsletter-cta__form .gform_button:hover,
.newsletter-cta__form input[type="submit"]:hover,
.newsletter-cta__form button[type="submit"]:hover {
    background: var(--btn-hover-bg) !important;
    transform: translateY(-1px);
}

/* --- 10. Validation states --- */
.contact__form-column .gfield_error input,
.contact__form-column .gfield_error textarea,
.newsletter-cta__form .gfield_error input {
    border-color: #D8322B !important;
}

.contact__form-column .validation_message,
.newsletter-cta__form .validation_message {
    margin-top: 6px;
    font-family: var(--font-label);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #C22820 !important;
}

.contact__form-column .gform_validation_errors,
.newsletter-cta__form .gform_validation_errors {
    margin: 0 0 20px !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(216, 50, 43, 0.4) !important;
    border-radius: 12px !important;
    background: rgba(216, 50, 43, 0.06) !important;
}

.contact__form-column .gform_validation_errors h2,
.newsletter-cta__form .gform_validation_errors h2 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: #C22820;
    margin: 0;
}

/* --- 11. Confirmation message (AJAX success) --- */
.contact__form-column .gform_confirmation_message,
.newsletter-cta__form .gform_confirmation_message {
    padding: 26px 10px;
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* --- 12. Newsletter inline layout: email + button share a row --- */
.newsletter-cta__form .gform_body {
    flex: 1 1 auto;
}
.newsletter-cta__form form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.newsletter-cta__form .gfield {
    margin-bottom: 0 !important;
}
.newsletter-cta__form .gform_footer {
    flex: 0 0 auto;
}

/* --- 13. Mobile stacking --- */
@media (max-width: 600px) {
    .contact__form-column .gfield.gfield--width-half,
    .contact__form-column .gfield.gfield--width-third,
    .contact__form-column .gfield.gfield--width-quarter,
    .contact__form-column .gfield.gfield--width-two-thirds,
    .contact__form-column .gfield.gfield--width-three-quarter,
    .contact__form-column .gfield.gf_left_half,
    .contact__form-column .gfield.gf_right_half,
    .contact__form-column .gfield.gf_left_third,
    .contact__form-column .gfield.gf_middle_third,
    .contact__form-column .gfield.gf_right_third {
        width: 100% !important;
    }
    .contact__form-column .ginput_complex {
        flex-direction: column;
        gap: 18px;
    }
    .newsletter-cta__form form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- 14. ADA: focus visibility + reduced motion --- */
.contact__form-column input:focus-visible,
.contact__form-column textarea:focus-visible,
.contact__form-column button:focus-visible,
.newsletter-cta__form input:focus-visible,
.newsletter-cta__form button:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .contact__form-column *,
    .newsletter-cta__form * {
        transition: none !important;
    }
}