/* Celebrate Diversity — form fields
 *
 * 04-wordpress-components.md §9 and the theme-options build brief both name this
 * as the one place custom CSS is genuinely unavoidable, because form plugins
 * render their own markup and cannot be reached by theme.json or block styles.
 *
 * Everything here is expressed in the design tokens. No value is invented.
 * Scoped to .nf-form-cont so it cannot leak into anything else.
 */

.nf-form-cont {
  --cd-field-border: #9AA3B5;          /* 3.1:1 on white - above the 3:1 UI minimum */
  max-width: var(--cd-measure-body);
}

.nf-form-cont .nf-form-content { padding: 0; max-width: 100%; }

/* Labels: small body, not a heading. Sentence case per rule 3. */
.nf-form-cont .nf-field-label label,
.nf-form-cont label {
  font-family: var(--cd-font-body);
  font-size: var(--cd-small-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cd-ink);
  margin-bottom: var(--cd-space-2);
  text-transform: none;
}
.nf-form-cont .ninja-forms-req-symbol { color: var(--cd-ember); }

/* [v2.0.2] Fields used to carry the cut corner at --cd-radius-cut-sm (60px).
 * On a control roughly 55px tall the browser clamps a radius it cannot fit, so
 * the top-right corner came out as a near semicircle while the other three
 * stayed at 8px. It read as a broken border rather than the brand shape, and
 * the textarea compounded it by putting the resize handle in the opposite
 * corner from the cut.
 *
 * The cut is a large-surface device. Below roughly 120px of height it stops
 * saying "Celebrate Diversity" and starts saying "rendering fault", so form
 * controls take the plain base radius and the submit button carries the brand
 * shape instead. See defect log DL-024. */
.nf-form-cont input[type="text"]:not([name*="-hp"]),
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="number"],
.nf-form-cont textarea,
.nf-form-cont select {
  font-family: var(--cd-font-body);
  font-size: var(--cd-body-size);
  line-height: 1.5;
  color: var(--cd-ink-body);
  background: var(--cd-white);
  border: 1px solid var(--cd-field-border);
  border-radius: var(--cd-radius-base);
  padding: var(--cd-space-3) var(--cd-space-4);
  width: 100%;
  min-height: var(--cd-tap-min);
  transition: border-color var(--cd-dur) var(--cd-ease),
              box-shadow var(--cd-dur) var(--cd-ease);
}
.nf-form-cont textarea { min-height: 160px; resize: vertical; }

.nf-form-cont input:hover,
.nf-form-cont textarea:hover,
.nf-form-cont select:hover { border-color: var(--cd-navy); }

/* 06-accessibility-and-qa.md §2: never a colour change alone. */
.nf-form-cont input:focus-visible,
.nf-form-cont textarea:focus-visible,
.nf-form-cont select:focus-visible {
  outline: 3px solid var(--cd-blue);
  outline-offset: 3px;
  border-color: var(--cd-navy);
}

/* Submit takes the primary button, not the giving button.
 * Rule 2: ember is for giving actions and an enquiry is not one. */
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"],
.nf-form-cont button[type="submit"] {
  font-family: var(--cd-font-display);
  font-size: var(--cd-pill-size);
  letter-spacing: var(--cd-pill-track);
  text-transform: uppercase;
  color: var(--cd-on-navy);
  background: var(--cd-navy);
  border: 0;
  border-radius: var(--cd-radius-pill);
  padding: var(--cd-space-4) var(--cd-space-6);
  min-height: var(--cd-tap-min);
  cursor: pointer;
  width: auto;
  transition: background var(--cd-dur) var(--cd-ease);
}
.nf-form-cont input[type="button"]:hover,
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont button[type="submit"]:hover { background: var(--cd-green); }

/* Errors: the system's error state, not the plugin's red. */
.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-error-wrap .nf-error-msg {
  font-family: var(--cd-font-body);
  font-size: var(--cd-small-size);
  color: #B03A22;                       /* 4.9:1 on white */
  margin-top: var(--cd-space-2);
}
.nf-form-cont .nf-error input,
.nf-form-cont .nf-error textarea,
.nf-form-cont .nf-error select { border-color: #B03A22; border-width: 2px; }

/* Success message takes the mint evidence ground. */
.nf-form-cont .nf-response-msg {
  background: var(--cd-mint-soft);
  color: var(--cd-on-mint);
  border: 0;
  border-radius: var(--cd-radius-base) var(--cd-radius-cut-sm)
                 var(--cd-radius-base) var(--cd-radius-base);
  padding: var(--cd-space-5) var(--cd-space-6);
  font-size: var(--cd-body-size);
}

/* On dark grounds the fields invert rather than punching white holes. */
.cd-section--navy .nf-form-cont label,
.cd-section--green .nf-form-cont label { color: inherit; }
.cd-section--navy .nf-form-cont input[type="text"],
.cd-section--navy .nf-form-cont input[type="email"],
.cd-section--navy .nf-form-cont textarea,
.cd-section--navy .nf-form-cont select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.34);
  color: var(--cd-on-navy);
}
.cd-section--navy .nf-form-cont input:focus-visible,
.cd-section--navy .nf-form-cont textarea:focus-visible {
  outline-color: var(--cd-blue-soft);   /* logo blue on navy is only 2.4:1 */
}

@media (max-width: 600px) {
  .nf-form-cont input[type="button"],
  .nf-form-cont input[type="submit"],
  .nf-form-cont button[type="submit"] { width: 100%; }
}

/* Ninja Forms' honeypot is visibility:hidden, which correctly blocks interaction
 * but still reserves 55px of layout, leaving a dead gap mid-form. Taking it out
 * of flow removes the gap without removing the field from the DOM or changing
 * what is submitted, so spam protection is untouched. */
.nf-form-cont input[name*="-hp"],
.nf-form-cont .nf-field-container:has(input[name*="-hp"]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip-path: inset(50%);
}