/* Contact form: style the PLUGIN'S OWN default markup/classes (wpcf7-*) to match the design
   system's form look (.mm-field/.mm-label/.mm-input/.mm-check/.mm-error in base.css), rather than
   hand-adding mm-* classes to every form-tag -- so the form keeps this look even if the
   coordinator/Den edits the field list later on staging. Enqueued only on pages containing the
   form shortcode (functions.php). Scoped under .main-content, matching every other
   brand-vs-parent-theme cascade fight already documented in base.css. */

/* The form itself is the field stack (the design's .mm-form: a grid with one gap between fields).
   The plugin's auto-paragraphing is off (functions.php), so the template's own markup is what renders. */
.main-content .wpcf7-form { display: grid; gap: var(--mm-space-5); max-width: 40rem; }
.main-content .wpcf7-form fieldset.mm-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.main-content .wpcf7-form fieldset.mm-field legend { padding: 0; margin: 0 0 0.4rem; }
/* The parent theme pads every <p> (about 22px below); hints and the privacy line sit tight. */
.main-content .wpcf7-form .mm-hint, .main-content .wpcf7-form .mm-form__privacy { margin: 0; padding: 0; }
/* base.css makes .mm-checks a two-column grid for the mockup's own markup; here the plugin's single
   wrapper would land in its first column, so the wrapper's inner grid (below) does the columns. */
.main-content .wpcf7-form .mm-checks { display: block; }
/* Contact aside: a little air between each heading and what follows it. */
.main-content .mm-aside h2 + * { margin-top: var(--mm-space-3); }
.main-content .wpcf7-form .mm-form__submit { display: grid; gap: var(--mm-space-4); justify-items: start; }
/* (Kept for safety if auto-paragraphing is ever switched back on.) Zero the <p> it inserts
   around each field so .mm-field's own gap (base.css) sets the rhythm. */
.main-content .wpcf7-form .mm-field > p,
.main-content .wpcf7-form .mm-field > fieldset > p { margin: 0; }
.main-content .wpcf7-form .mm-checks p { margin: 0; }

/* Text/email/url/textarea inputs -> the .mm-input look. */
.main-content .wpcf7-form .wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-submit):not(.wpcf7-hidden) {
  display: block; width: 100%; min-height: var(--mm-control-h); padding: 0.625rem 0.875rem;
  border: 1px solid var(--mm-field-border); border-radius: var(--mm-radius-sm);
  background: var(--mm-field-bg); color: var(--mm-field-text);
  font: 400 var(--mm-font-size-ui)/1.4 var(--mm-font-ui);
  transition: border-color var(--mm-dur) var(--mm-ease);
}
.main-content .wpcf7-form .wpcf7-form-control::placeholder { color: var(--mm-gray-600); opacity: 1; }
.main-content .wpcf7-form .wpcf7-form-control:hover { border-color: var(--mm-ink); }
.main-content .wpcf7-form .wpcf7-form-control:focus-visible { border-color: var(--mm-ink); outline-offset: 2px; }
.main-content .wpcf7-form .wpcf7-textarea { min-height: 9rem; resize: vertical; }

/* Checkbox group -> the .mm-check look (a bordered, tappable row per option). */
.main-content .wpcf7-form .mm-checks .wpcf7-form-control-wrap { display: contents; }
.main-content .wpcf7-form .mm-checks .wpcf7-form-control.wpcf7-checkbox {
  display: grid; gap: var(--mm-space-2); grid-template-columns: minmax(0, 1fr); margin-top: var(--mm-space-2);
}
@media (min-width: 480px) {
  .main-content .wpcf7-form .mm-checks .wpcf7-form-control.wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.main-content .wpcf7-form .wpcf7-list-item { margin: 0; }
.main-content .wpcf7-form .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: var(--mm-space-3); min-height: var(--mm-target-min);
  min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--mm-field-border);
  border-radius: var(--mm-radius-sm); background: var(--mm-field-bg); color: var(--mm-field-text);
  font: 400 var(--mm-font-size-ui)/1.35 var(--mm-font-ui); cursor: pointer;
}
.main-content .wpcf7-form .wpcf7-list-item label:hover { border-color: var(--mm-ink); }
.main-content .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--mm-brand-primary);
}
/* "Privacy or data request" (last option): its own row, same as the mockup's .mm-check--apart. */
.main-content .wpcf7-form .wpcf7-list-item.last { grid-column: 1 / -1; margin-top: var(--mm-space-2); }

/* Submit button -> the .mm-btn.mm-btn--primary look; the plugin renders it as an <input type="submit">,
   so text comes from the value attribute, not innerHTML -- no ::before/::after tricks needed. */
.main-content .wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--mm-control-h); max-width: 100%; padding: 0.75rem 1.5rem;
  border: 2px solid var(--mm-action-bg); border-radius: var(--mm-radius-sm);
  background: var(--mm-action-bg); color: var(--mm-action-text);
  font: 600 var(--mm-font-size-ui)/1.2 var(--mm-font-ui); letter-spacing: var(--mm-tracking-ui);
  text-align: center; cursor: pointer;
  transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.main-content .wpcf7-form .wpcf7-submit:hover {
  background: var(--mm-action-bg-hover); border-color: var(--mm-action-bg-hover); color: var(--mm-action-text-hover);
}
.main-content .wpcf7-form .wpcf7-submit.wpcf7-submit-processing,
.main-content .wpcf7-form .wpcf7-spinner { opacity: 0.7; }

/* Inline error text: tied to the field with aria-describedby (the plugin sets this itself); the design
   system's amber/red error look, not the plugin's default unstyled text. */
.main-content .wpcf7-form .wpcf7-not-valid-tip {
  display: flex; align-items: flex-start; gap: var(--mm-space-2); margin-top: 0.35rem;
  font: 500 var(--mm-font-size-sm)/1.4 var(--mm-font-ui); color: var(--mm-error);
}
.main-content .wpcf7-form .wpcf7-not-valid-tip::before { content: "!"; flex: none; }
.main-content .wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--mm-error-border); box-shadow: inset 0 0 0 1px var(--mm-error-border);
  background-color: var(--mm-error-bg);
}
/* Form-level status banners (sent / spam / validation error): the plugin puts the text in
   .wpcf7-response-output and toggles a class on the <form> for which state applies. */
.main-content .wpcf7-form .wpcf7-response-output {
  margin-top: var(--mm-space-4); padding: 0.75rem 1rem; border-radius: var(--mm-radius-sm);
  font: 500 var(--mm-font-size-ui)/1.4 var(--mm-font-ui);
}
.main-content .wpcf7-form.invalid .wpcf7-response-output,
.main-content .wpcf7-form.unaccepted .wpcf7-response-output,
.main-content .wpcf7-form.spam .wpcf7-response-output,
.main-content .wpcf7-form.failed .wpcf7-response-output,
.main-content .wpcf7-form.aborted .wpcf7-response-output {
  background: var(--mm-error-bg); border: 1px solid var(--mm-error-border); color: var(--mm-error);
}
.main-content .wpcf7-form.sent .wpcf7-response-output {
  background: var(--mm-bg-alt); border: 1px solid var(--mm-border); color: var(--mm-text);
}