/* =============================================================================
   Monochrome — Third-party plugin compatibility.
   Defensive styles so popular form, builder, and e-commerce plugins inherit
   the theme's CSS variables (colors, radius, border, focus ring) instead of
   rendering with their own hardcoded whites/blacks.

   Covers: Contact Form 7, WPForms, Fluent Forms, Gravity Forms, Ninja Forms,
   Elementor Forms, Jetpack Forms, WPForms-Lite, MailPoet, Newsletter Plugin,
   Yoast SEO front-end breadcrumb, Rank Math breadcrumb.
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. Universal form-control reskin
   Single selector list that captures inputs / selects / textareas in the
   most common form plugins. Uses our surface/border/radius/focus vars.
   ------------------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 textarea,
.wpcf7 select,
.wpcf7-form-control,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap select,

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container input[type="date"],
.wpforms-container input[type="password"],
.wpforms-container input[type="search"],
.wpforms-container textarea,
.wpforms-container select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform input[type="password"],
.fluentform input[type="search"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control,
.fluentform .ff-el-input--content input,

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper .gfield_select,
.gform_wrapper .ginput_container input,

.nf-form-content input[type="text"],
.nf-form-content input[type="email"],
.nf-form-content input[type="tel"],
.nf-form-content input[type="url"],
.nf-form-content input[type="number"],
.nf-form-content input[type="date"],
.nf-form-content input[type="password"],
.nf-form-content textarea,
.nf-form-content select,
.ninja-forms-req-symbol ~ input,

.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field,

.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form input[type="number"],
.wp-block-jetpack-contact-form input[type="date"],
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-contact-form select,
.jetpack-contact-form input,
.contact-form input,
.contact-form textarea,

.mailpoet_form input[type="text"],
.mailpoet_form input[type="email"],
.mailpoet_form textarea,
.mailpoet_form select,

.tnp-field input,
.tnp-field select,
.tnp-field textarea {
    width: 100%;
    padding: .8rem 1rem !important;
    min-height: 44px;
    background: var(--mono-surface) !important;
    color: var(--mono-text) !important;
    border: 1px solid var(--mono-border) !important;
    border-radius: var(--mono-radius-sm) !important;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.3;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s var(--mono-easing), box-shadow .2s var(--mono-easing), background .2s var(--mono-easing);
}

/* -------------------------------------------------------------------------
   2. Focus ring — Bootstrap-style glow, keyboard-only
   ------------------------------------------------------------------------- */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible,
.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible,
.wpforms-container select:focus-visible,
.fluentform input:focus-visible,
.fluentform textarea:focus-visible,
.fluentform select:focus-visible,
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible,
.nf-form-content input:focus-visible,
.nf-form-content textarea:focus-visible,
.nf-form-content select:focus-visible,
.elementor-field-group input:focus-visible,
.elementor-field-group textarea:focus-visible,
.elementor-field-group select:focus-visible,
.wp-block-jetpack-contact-form input:focus-visible,
.wp-block-jetpack-contact-form textarea:focus-visible,
.wp-block-jetpack-contact-form select:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.mailpoet_form input:focus-visible,
.tnp-field input:focus-visible,
.tnp-field textarea:focus-visible,
.tnp-field select:focus-visible {
    outline: 0 !important;
    border-color: var(--mono-accent, var(--mono-text)) !important;
    box-shadow: var(--mono-focus-ring) !important;
}

/* -------------------------------------------------------------------------
   3. Submit buttons — inherit theme .button look & ring
   ------------------------------------------------------------------------- */
.wpcf7-submit,
.wpcf7 input[type="submit"],
.wpforms-container button[type="submit"],
.wpforms-submit,
.fluentform button[type="submit"],
.fluentform .ff-btn-submit,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.nf-form-content input[type="submit"],
.nf-form-content button[type="submit"],
.elementor-button[type="submit"],
.wp-block-jetpack-contact-form button[type="submit"],
.contact-form input[type="submit"],
.mailpoet_form .mailpoet_submit,
.tnp-field .tnp-submit,
.tnp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.75rem !important;
    min-height: 44px;
    background: var(--mono-text) !important;
    color: var(--mono-bg) !important;
    border: 0 !important;
    border-radius: var(--mono-radius-pill) !important;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s var(--mono-easing), transform .15s var(--mono-easing), box-shadow .2s var(--mono-easing);
    -webkit-appearance: none;
    appearance: none;
}
.wpcf7-submit:hover,
.wpforms-submit:hover,
.fluentform .ff-btn-submit:hover,
.gform_wrapper button[type="submit"]:hover,
.nf-form-content button[type="submit"]:hover,
.elementor-button[type="submit"]:hover,
.wp-block-jetpack-contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.mailpoet_form .mailpoet_submit:hover,
.tnp-button:hover { opacity: .88; transform: translateY(-1px); }

.wpcf7-submit:focus-visible,
.wpforms-submit:focus-visible,
.fluentform .ff-btn-submit:focus-visible,
.gform_wrapper button[type="submit"]:focus-visible,
.nf-form-content button[type="submit"]:focus-visible,
.elementor-button[type="submit"]:focus-visible,
.wp-block-jetpack-contact-form button[type="submit"]:focus-visible,
.contact-form input[type="submit"]:focus-visible,
.mailpoet_form .mailpoet_submit:focus-visible,
.tnp-button:focus-visible { box-shadow: var(--mono-focus-ring) !important; }

/* -------------------------------------------------------------------------
   4. Labels & field groups
   ------------------------------------------------------------------------- */
.wpcf7-form label,
.wpforms-field-label,
.fluentform .ff-el-input--label label,
.gfield_label,
.nf-field-label label,
.elementor-field-label,
.wp-block-jetpack-contact-form label,
.mailpoet_paragraph label,
.tnp-field label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--mono-text);
    margin-bottom: .4rem;
    display: inline-block;
}

.wpforms-field,
.gform_wrapper .gfield,
.fluentform .ff-el-group,
.nf-field-container,
.elementor-field-group,
.wp-block-jetpack-contact-form .grunion-field-wrap { margin-bottom: 1.25rem; }

/* -------------------------------------------------------------------------
   5. Validation / response messages
   ------------------------------------------------------------------------- */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7-not-valid-tip,
.wpforms-error-container,
.wpforms-error,
.fluentform .error,
.gform_wrapper .validation_message,
.gform_wrapper .gfield_error > .ginput_container input,
.nf-error-msg,
.elementor-message-danger {
    color: #e11d48 !important;
    font-size: .85rem;
    margin-top: .4rem;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpforms-confirmation-container-full,
.gform_confirmation_wrapper,
.elementor-message-success {
    background: var(--mono-surface) !important;
    color: var(--mono-text) !important;
    border: 1px solid var(--mono-border) !important;
    border-radius: var(--mono-radius) !important;
    padding: 1rem 1.25rem !important;
}

/* -------------------------------------------------------------------------
   6. Radio / checkbox
   ------------------------------------------------------------------------- */
.wpcf7-list-item,
.wpforms-field-checkbox input[type="checkbox"] + label,
.fluentform .ff-el-form-check,
.gfield_checkbox li label,
.gfield_radio li label,
.nf-field input[type="checkbox"] + label,
.elementor-field-option label { display: inline-flex; align-items: center; gap: .4rem; }

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"],
.wpforms-field input[type="checkbox"],
.wpforms-field input[type="radio"],
.fluentform input[type="checkbox"],
.fluentform input[type="radio"],
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"],
.elementor-field input[type="checkbox"],
.elementor-field input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    accent-color: var(--mono-accent, var(--mono-text));
}

/* -------------------------------------------------------------------------
   7. Elementor-specific: force containers to play nice
   ------------------------------------------------------------------------- */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group textarea,
.elementor-field-group select { background-color: var(--mono-surface) !important; }

/* -------------------------------------------------------------------------
   8. MailPoet / Newsletter / Mailchimp typical containers
   ------------------------------------------------------------------------- */
.mailpoet_form,
.tnp-field,
.mc4wp-form-fields {
    display: grid;
    gap: .75rem;
}
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
    width: 100%;
    padding: .8rem 1rem !important;
    background: var(--mono-surface) !important;
    color: var(--mono-text) !important;
    border: 1px solid var(--mono-border) !important;
    border-radius: var(--mono-radius-sm) !important;
}
.mc4wp-form input[type="submit"] {
    padding: .85rem 1.75rem !important;
    background: var(--mono-text) !important;
    color: var(--mono-bg) !important;
    border-radius: var(--mono-radius-pill) !important;
    border: 0 !important;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   9. Yoast / Rank Math breadcrumbs — visual consistency
   ------------------------------------------------------------------------- */
.yoast-breadcrumbs,
.rank-math-breadcrumb {
    font-size: .85rem;
    color: var(--mono-muted);
    margin-bottom: 1rem;
}
.yoast-breadcrumbs a,
.rank-math-breadcrumb a { color: var(--mono-text); text-decoration: none; }
.yoast-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   10. Dark-mode defense for plugin form controls
   ------------------------------------------------------------------------- */
body[data-theme="dark"] .wpcf7 input[type="text"],
body[data-theme="dark"] .wpcf7 input[type="email"],
body[data-theme="dark"] .wpcf7 textarea,
body[data-theme="dark"] .wpcf7 select,
body[data-theme="dark"] .wpforms-container input,
body[data-theme="dark"] .wpforms-container textarea,
body[data-theme="dark"] .wpforms-container select,
body[data-theme="dark"] .fluentform input,
body[data-theme="dark"] .fluentform textarea,
body[data-theme="dark"] .fluentform select,
body[data-theme="dark"] .gform_wrapper input,
body[data-theme="dark"] .gform_wrapper textarea,
body[data-theme="dark"] .gform_wrapper select,
body[data-theme="dark"] .nf-form-content input,
body[data-theme="dark"] .nf-form-content textarea,
body[data-theme="dark"] .nf-form-content select,
body[data-theme="dark"] .elementor-field,
body[data-theme="dark"] .wp-block-jetpack-contact-form input,
body[data-theme="dark"] .wp-block-jetpack-contact-form textarea,
body[data-theme="dark"] .wp-block-jetpack-contact-form select,
body[data-theme="dark"] .mailpoet_form input,
body[data-theme="dark"] .tnp-field input,
body.color-mode-dark .wpcf7 input[type="text"],
body.color-mode-dark .wpcf7 input[type="email"],
body.color-mode-dark .wpcf7 textarea,
body.color-mode-dark .wpcf7 select,
body.color-mode-dark .wpforms-container input,
body.color-mode-dark .wpforms-container textarea,
body.color-mode-dark .wpforms-container select,
body.color-mode-dark .fluentform input,
body.color-mode-dark .fluentform textarea,
body.color-mode-dark .fluentform select,
body.color-mode-dark .gform_wrapper input,
body.color-mode-dark .gform_wrapper textarea,
body.color-mode-dark .gform_wrapper select,
body.color-mode-dark .nf-form-content input,
body.color-mode-dark .nf-form-content textarea,
body.color-mode-dark .nf-form-content select,
body.color-mode-dark .elementor-field,
body.color-mode-dark .wp-block-jetpack-contact-form input,
body.color-mode-dark .wp-block-jetpack-contact-form textarea,
body.color-mode-dark .wp-block-jetpack-contact-form select,
body.color-mode-dark .mailpoet_form input,
body.color-mode-dark .tnp-field input {
    background: var(--mono-surface) !important;
    color: var(--mono-text) !important;
    border-color: var(--mono-border) !important;
}

/* -------------------------------------------------------------------------
   11. CF7 / WPForms loader spinners — tint to theme text color
   ------------------------------------------------------------------------- */
.wpcf7-spinner { background-color: var(--mono-text) !important; }
.wpforms-submit-spinner svg { stroke: var(--mono-text) !important; }