/* ═══════════════════════════════════════════
   RMAI brand overrides for FluentForm
   Loaded conditionally when FluentForm is active.
   Targets the standard .frm-fluent-form class tree.
   ═══════════════════════════════════════════ */

/* ── Reset FluentForm's default container so it inherits page typography ── */
.ff-default,
.frm-fluent-form,
.frm-fluent-form * {
    font-family: 'Epilogue', sans-serif !important;
}

/* ── Form layout — clean, modern, inherit from page ── */
.frm-fluent-form {
    max-width: 100%;
}

/* Use a horizontal flex layout for compact 2-field forms (email + first_name + button) */
.frm-fluent-form .ff-el-group {
    margin-bottom: 12px !important;
}

/* ── Inputs ── */
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"] {
    font-family: 'Epilogue', sans-serif !important;
    font-size: 0.95rem !important;
    padding: 12px 14px !important;
    border: 1px solid #D8D8DC !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #1A1B25 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form input[type="text"]:focus,
.frm-fluent-form input[type="email"]:focus {
    outline: 2px solid #F26541 !important;
    outline-offset: 1px !important;
    border-color: #F26541 !important;
}

/* Hide labels when label_placement=hide_label is set (FluentForm renders SR-only by default but ensure visual hidden) */
.frm-fluent-form .ff-el-input--label.ff-label-hide {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ── Submit button — RMAI plum ── */
.frm-fluent-form .ff-btn,
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"] {
    font-family: 'Epilogue', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #F26541 !important;
    color: #FFF !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.frm-fluent-form .ff-btn:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover {
    background: #D4543A !important;
    color: #FFF !important;
    border-color: #8E5DBE !important;
}

/* ── Success / error messages ── */
.frm-fluent-form .ff-message-success {
    background: #F0EBF4 !important;
    border: 1px solid #F26541 !important;
    color: #1A1B25 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.frm-fluent-form .error,
.frm-fluent-form .ff-el-is-error {
    color: #C53030 !important;
    font-size: 0.8rem !important;
    margin-top: 4px !important;
}

/* ── Per-form layouts ── */

/* Hide labels site-wide for our two forms — placeholder-only UI */
.fluentform_wrapper_3 .ff-el-input--label,
.fluentform_wrapper_4 .ff-el-input--label {
    display: none !important;
}

/* Kill FluentForm's per-form inline CSS that absolute-positions the button.
   The "top_merged" class triggers a position:absolute rule injected by the
   plugin which makes the button overlap the inputs. We control layout
   ourselves via flex/block below. */
.fluent_form_3 .top_merged.ff_submit_btn_wrapper,
.fluent_form_4 .top_merged.ff_submit_btn_wrapper {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/* Tighten vertical spacing between fields */
.fluentform_wrapper_3 .ff-el-group,
.fluentform_wrapper_4 .ff-el-group {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* Drop FluentForm's extra spacing on the name-field wrapper */
.fluentform_wrapper_3 .ff-name-field-wrapper,
.fluentform_wrapper_4 .ff-name-field-wrapper {
    margin-bottom: 0 !important;
}
.fluentform_wrapper_3 .ff-name-field-wrapper .ff-el-group,
.fluentform_wrapper_4 .ff-name-field-wrapper .ff-el-group {
    margin-bottom: 0 !important;
}

/* Form 3 (Newsletter — footer) — compact horizontal */
@media (min-width: 720px) {
    .fluentform_wrapper_3 form > fieldset {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .fluentform_wrapper_3 form > fieldset > div {
        flex: 1 1 200px !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }
    .fluentform_wrapper_3 form > fieldset > .ff_submit_btn_wrapper {
        flex: 0 0 auto !important;
    }
    .fluentform_wrapper_3 form > fieldset > .ff_submit_btn_wrapper button {
        height: 100% !important;
    }
}

/* ── Heading + intro that wrap Form B (added by embed_w34_training_form.py) ── */
.rmai-ft-nl-heading {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 24px 0 6px !important;
    letter-spacing: -0.01em !important;
}

.rmai-ft-nl-heading + p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #555 !important;
    margin: 0 0 12px !important;
    max-width: 560px !important;
}

/* Form 4 (Training — page block) — card with stacked fields, full-width button */
.fluentform_wrapper_4 {
    background: #FAFAFA !important;
    border: 1px solid #E8E8EB !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    margin: 12px 0 32px !important;
    max-width: 480px !important;
}

/* Force single-column layout — fields stacked, button below at full width */
.fluentform_wrapper_4 form fieldset {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fluentform_wrapper_4 form fieldset > .ff-field_container,
.fluentform_wrapper_4 form fieldset > .ff-el-group,
.fluentform_wrapper_4 form fieldset > .ff_submit_btn_wrapper {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.fluentform_wrapper_4 form fieldset > .ff_submit_btn_wrapper {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

.fluentform_wrapper_4 form fieldset > .ff_submit_btn_wrapper button {
    width: 100% !important;
    padding: 11px 20px !important;
    font-size: 0.9rem !important;
}

/* Reduce input sizing inside Form B card */
.fluentform_wrapper_4 .ff-el-form-control,
.fluentform_wrapper_4 input[type="text"],
.fluentform_wrapper_4 input[type="email"] {
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
}

/* Kill the table-cell layout FluentForm uses for name composite fields */
.fluentform_wrapper_4 .ff-t-container {
    display: block !important;
}
.fluentform_wrapper_4 .ff-t-cell {
    display: block !important;
    width: 100% !important;
}

@media (max-width: 720px) {
    .fluentform_wrapper_4 {
        padding: 20px !important;
    }
}

/* ── Footer-context overrides — compact, blends with dark footer ── */
.rmai-footer .frm-fluent-form .ff-el-input--label,
.rmai-footer .frm-fluent-form label {
    color: #FFF !important;
}

.rmai-footer .frm-fluent-form .ff-el-form-control::placeholder,
.rmai-footer .frm-fluent-form input::placeholder {
    color: #999 !important;
}

/* Footer form: small + tight to match the .rmai-ft micro-typography (0.8125rem) */
.rmai-footer .frm-fluent-form .ff-el-form-control,
.rmai-footer .frm-fluent-form input[type="text"],
.rmai-footer .frm-fluent-form input[type="email"] {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    border-color: #333 !important;
    line-height: 1.4 !important;
}

.rmai-footer .frm-fluent-form .ff-btn,
.rmai-footer .frm-fluent-form button[type="submit"] {
    font-size: 0.75rem !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.rmai-footer .frm-fluent-form .ff-el-group {
    margin-bottom: 0 !important;
}

.rmai-footer .fluentform_wrapper_3 form > fieldset {
    gap: 6px !important;
}

/* Footer-context success message — solid orange box, can't miss it */
.rmai-footer .fluentform_wrapper_3 .ff-message-success,
.rmai-footer #fluentform_3_success {
    background: #F26541 !important;
    border: 0 !important;
    color: #FFFFFF !important;
    padding: 14px 18px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rmai-footer .fluentform_wrapper_3 .ff-message-success strong,
.rmai-footer #fluentform_3_success strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.rmai-footer .fluentform_wrapper_3 .ff-message-success a,
.rmai-footer #fluentform_3_success a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* ── Mobile responsiveness — footer band stacks cleanly under 720px ── */
@media (max-width: 720px) {
    /* Footer form: stack name + email + button vertically, full width */
    .rmai-footer .fluentform_wrapper_3 form > fieldset {
        display: block !important;
    }
    .rmai-footer .fluentform_wrapper_3 form > fieldset > div,
    .rmai-footer .fluentform_wrapper_3 form > fieldset > .ff-field_container,
    .rmai-footer .fluentform_wrapper_3 form > fieldset > .ff-el-group,
    .rmai-footer .fluentform_wrapper_3 form > fieldset > .ff_submit_btn_wrapper {
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }
    .rmai-footer .fluentform_wrapper_3 form > fieldset > .ff_submit_btn_wrapper {
        margin-bottom: 0 !important;
        margin-top: 4px !important;
    }
    .rmai-footer .frm-fluent-form .ff-btn,
    .rmai-footer .frm-fluent-form button[type="submit"] {
        width: 100% !important;
    }
}

/* ── Form B card responsive ── */
@media (max-width: 720px) {
    .fluentform_wrapper_4 {
        padding: 14px 16px !important;
        margin: 12px 0 24px !important;
        max-width: 100% !important;
    }
    .rmai-ft-nl-heading {
        font-size: 1rem !important;
        margin-top: 16px !important;
    }
    .rmai-ft-nl-heading + p {
        font-size: 0.85rem !important;
    }
}