/*
 * Module 15 · Form Block. Contact Form 7 with its own stylesheet dequeued, so
 * every rule here is ours.
 *
 * ⚠️ VALUES FROM THE FRAME (694:3001). Fields were 15px text in a 1px hairline
 * box on a 620px measure. The design draws a 50px-tall field, a 1.5px border in
 * full-strength ink, a 5px radius, 18px text with a ~17px inset, 10px between
 * fields and 30px between the parts of the block — all on an 804px column.
 *
 * The 1.5px full-ink border also settles the contrast note below: it clears
 * WCAG 1.4.11 comfortably, where the old tinted hairline did not.
 */

.ema-form { max-width: 804px; }

/* The form fills the right-hand column (BugHerd #16); the column is already
   804 wide on the design's split. */
.ema-form-block__main .ema-form { max-width: none; width: 100%; }
.ema-form-block__main .ema-module__head { max-width: none; margin: 0; }
.ema-form-block__main .ema-module__title {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--t-h2); line-height: 1.25;
}

/*
 * ⚠️ CF7 6.x wraps its hidden inputs in <fieldset class="hidden-fields-container">.
 * Its own stylesheet removes the fieldset's default border; that stylesheet is
 * dequeued in this theme, so the browser's groove border rendered as an empty
 * box above the first field.
 */
/*
 * Contact Form 7 prints its message box on every form and only fills it after a
 * submission — an empty outlined bar under the button (#51, #58). Hidden until
 * it actually says something.
 */
.wpcf7 .wpcf7-response-output:empty,
.wpcf7 .wpcf7-response-output[aria-hidden="true"] { display: none; }

.wpcf7 .hidden-fields-container { border: 0; padding: 0; margin: 0; min-width: 0; }

.ema-field { margin: 0 0 10px; }

.ema-field__label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--t-small);
}

.ema-field__hint { display: block; margin: 0 0 4px; font-size: var(--t-small); color: var(--cw-ink-soft); }

.ema-form input[type="text"],
.ema-form input[type="email"],
.ema-form input[type="tel"],
.ema-form input[type="url"],
.ema-form select,
.ema-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 17px;
  border-radius: var(--r-button);
  background: var(--cw-bg);
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--fw-light);
  color: var(--cw-ink);

  /*
   * Full-strength ink at 1.5px, as drawn. A field boundary needs 3:1 under
   * WCAG 1.4.11 and the tinted hairline this used to carry was nowhere near
   * it — the design's own border is both correct and accessible.
   */
  border: var(--border-w) solid var(--cw-ink);
}

.ema-form ::placeholder { color: var(--cw-ink); opacity: .65; }

.ema-form textarea { min-height: 140px; padding: 14px 17px; resize: vertical; }

.ema-form input:focus-visible,
.ema-form select:focus-visible,
.ema-form textarea:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 1px;
}

.ema-field--submit { margin-top: 30px; }
.ema-form .ema-btn { cursor: pointer; }

/* CF7's own response and validation output. */
.wpcf7-not-valid-tip { display: block; margin: 4px 0 0; font-size: 12px; color: var(--error); }
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: var(--border-w) solid var(--cw-ink);
  border-radius: var(--r-button);
  font-size: var(--t-small);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--door-invest); }
.wpcf7-spinner { display: inline-block; margin-left: 8px; }