/* ==================================================================
   ABA Pathways — form control styling

   Block themes emit no CSS for raw form controls, so the browser's own
   defaults win (Arial 13.3px inputs, monospace textareas, grey OS
   buttons). This supplies what the theme is missing, using the theme's
   existing colour tokens.

   Site-wide by design: covers Fluent Forms, search, comments, and any
   form added later. Fluent Forms stays on "Inherit Theme Style".
   ================================================================== */

:root {
  --abp-field-border: #8f8ea8;   /* 3.2:1 on white, meets WCAG 1.4.11 */
  --abp-field-radius: 8px;
  --abp-danger: #b3261e;         /* 6.4:1 on white */
}


/* ---- Text-like controls ------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.fluentform .ff-el-form-control {
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  font-size: 16px;      /* 16px minimum, or iOS Safari zooms in on focus */
  line-height: 1.5;
  color: var(--wp--preset--color--custom-contrast, #201e50);
  background-color: var(--wp--preset--color--custom-base, #ffffff);
  border: 1px solid var(--abp-field-border);
  border-radius: var(--abp-field-radius);
  padding: 12px 16px;
  transition: border-color 0.15s ease;
}

textarea,
.fluentform textarea.ff-el-form-control {
  min-height: 140px;
  resize: vertical;
}


/* ---- Placeholders -------------------------------------------------
   opacity: 1 is not redundant. Firefox dims placeholders by default,
   which drags the contrast below AA. */

input::placeholder,
textarea::placeholder {
  color: #6f6e85;       /* 4.6:1 on white */
  opacity: 1;
}


/* ---- Focus --------------------------------------------------------
   A visible focus ring is a WCAG requirement, not decoration. Dark
   green reads clearly against both the white and pale-green sections. */

input:focus,
textarea:focus,
select:focus,
.fluentform .ff-el-form-control:focus {
  outline: 3px solid var(--wp--preset--color--custom-primary, #1a3c29);
  outline-offset: 2px;
  border-color: var(--wp--preset--color--custom-primary, #1a3c29);
}


/* ---- Checkboxes and radios ---------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--wp--preset--color--custom-secondary, #6aa84f);
}


/* ---- Submit button: matches the site's pill CTAs ------------------ */

button[type="submit"],
input[type="submit"],
.fluentform .ff-btn-submit {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  background-color: var(--wp--preset--color--custom-secondary, #6aa84f);
  border: 0;
  border-radius: 9999px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.fluentform .ff-btn-submit:hover {
  background-color: #5b9143;
}

button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible,
.fluentform .ff-btn-submit:focus-visible {
  outline: 3px solid var(--wp--preset--color--custom-primary, #1a3c29);
  outline-offset: 2px;
}


/* ---- Fluent Forms layout ------------------------------------------ */

.fluentform .ff-el-group {
  margin-bottom: 20px;
}

.fluentform .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 6px;
}

.fluentform .ff-el-form-check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}


/* ---- Required markers and errors ---------------------------------- */

.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-input--label.ff-el-is-required label:after {
  color: var(--abp-danger);
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--abp-danger);
}

.fluentform .error.text-danger {
  color: var(--abp-danger);
  font-size: 14px;
  margin-top: 4px;
}