/**
 * CDC form styles — spec sections 3B (colour), 5B (accessibility), 9.
 *
 * Uses the theme's own preset custom properties so the forms inherit the design
 * system, with literal fallbacks so they stay legible if the theme is ever
 * swapped (the forms live in mu-plugins for exactly that reason).
 *
 * Colour rule (spec 3B): #FF1A58 is never used for text under 24px or a button
 * fill. Every button, link, and label here uses Action Pink #E01050 (4.82:1).
 */

.cdc-form {
  --cdc-form-body: var(--wp--preset--color--body, #1a1a1a);
  --cdc-form-action: var(--wp--preset--color--action-pink, #e01050);
  --cdc-form-border: var(--wp--preset--color--surface-border, #e7e7ec);
  --cdc-form-surface: var(--wp--preset--color--surface, #f6f6f9);
  --cdc-form-slate: var(--wp--preset--color--slate, #6e6880);

  margin-block: clamp(2rem, 1rem + 3vw, 3rem);
  color: var(--cdc-form-body);
}

/* --- Sections and fields ------------------------------------------------ */

.cdc-form__section {
  margin-block-end: 2.5rem;
  border: 0;
  padding: 0;
}

.cdc-form__section-title,
.cdc-form__heading {
  margin-block: 0 1.25rem;
  font-size: var(--wp--preset--font-size--h3, 1.3125rem);
  font-weight: 700;
  line-height: 1.3;
}

.cdc-field {
  margin-block-end: 1.5rem;
}

.cdc-field > label,
.cdc-field__legend {
  display: block;
  margin-block-end: 0.375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Required marked in text as well as colour (spec 5B). */
.cdc-field__req {
  color: var(--cdc-form-action);
  font-weight: 600;
  white-space: nowrap;
}

.cdc-field__optional {
  color: var(--cdc-form-slate);
  font-weight: 400;
  white-space: nowrap;
}

.cdc-field__help {
  margin-block: 0 0.5rem;
  color: var(--cdc-form-slate);
  font-size: var(--wp--preset--font-size--caption, 0.9375rem);
  line-height: 1.5;
}

.cdc-field input[type="text"],
.cdc-field input[type="email"],
.cdc-field input[type="tel"],
.cdc-field input[type="url"],
.cdc-field select,
.cdc-field textarea {
  width: 100%;
  max-width: 34rem;
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--cdc-form-slate);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: var(--wp--preset--font-size--body, 1.125rem);
}

.cdc-field textarea {
  min-height: 9rem;
  max-width: 44rem;
  resize: vertical;
}

/* --- Checkbox and radio groups ----------------------------------------- */

.cdc-field .wpcf7-checkbox,
.cdc-field .wpcf7-radio {
  display: grid;
  gap: 0.5rem;
}

.cdc-field .wpcf7-list-item {
  margin: 0;
}

/* The label is the tap target — clicking it toggles the control — so the row,
   not the 24px box, has to clear 44×44 (spec 2B). */
.cdc-field .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.75rem;
  padding-block: 0.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.cdc-field input[type="checkbox"],
.cdc-field input[type="radio"] {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--cdc-form-action);
  flex: 0 0 auto;
}

/* --- Character counters ------------------------------------------------- */

.wpcf7-character-count {
  display: inline-block;
  margin-block-start: 0.375rem;
  color: var(--cdc-form-slate);
  font-size: var(--wp--preset--font-size--caption, 0.9375rem);
}

.wpcf7-character-count.too-long {
  color: #b3003c;
  font-weight: 600;
}

/* The honeypot is display:none (set inline, so it holds even if this stylesheet
   fails to load) — anything merely off-screen is still a rendered field that
   browser autofill will fill, which would reject real visitors as spam. */
.cdc-hp {
  display: none !important;
}

/* The announced counter: available to assistive technology, off-screen for
   everyone else. */
.cdc-form__count-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Error summary (spec 5B) ------------------------------------------- */

.cdc-form__errors {
  margin-block-end: 2rem;
  border: 3px solid var(--cdc-form-action);
  padding: 1.25rem 1.5rem;
  background: #fff;
}

.cdc-form__errors:focus-visible {
  outline: 3px solid var(--wp--preset--color--violet, #8326fb);
  outline-offset: 2px;
}

.cdc-form__errors-title {
  margin-block: 0 0.75rem;
  font-size: var(--wp--preset--font-size--h3, 1.3125rem);
  font-weight: 700;
}

.cdc-form__errors-list {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.cdc-form__errors-list li + li {
  margin-block-start: 0.5rem;
}

.cdc-form__errors-list a {
  color: var(--cdc-form-action);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Inline field errors ----------------------------------------------- */

.wpcf7-not-valid-tip {
  display: block;
  margin-block-start: 0.375rem;
  color: #b3003c;
  font-size: var(--wp--preset--font-size--caption, 0.9375rem);
  font-weight: 600;
}

.cdc-field .wpcf7-not-valid {
  border-color: #b3003c;
  border-width: 2px;
}

/* --- Response output and submit ---------------------------------------- */

.cdc-form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  border: 2px solid var(--cdc-form-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.cdc-form form.invalid .wpcf7-response-output,
.cdc-form form.unaccepted .wpcf7-response-output,
.cdc-form form.spam .wpcf7-response-output,
.cdc-form form.failed .wpcf7-response-output {
  border-color: var(--cdc-form-action);
}

.cdc-form .wpcf7-submit {
  margin-block-start: 0.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0.9375rem 2rem;
  background: var(--cdc-form-action);
  color: #fff;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--button, 1.0625rem);
  font-weight: 700;
  cursor: pointer;
}

.cdc-form .wpcf7-submit:hover {
  background: #b3003c;
}

.cdc-form .wpcf7-submit:disabled {
  background: var(--cdc-form-slate);
  cursor: not-allowed;
}

/* --- Conditional note (State = Other, spec 5A) ------------------------- */

.cdc-form__note {
  margin-block: 0 1.5rem;
  border-inline-start: 4px solid var(--cdc-form-action);
  padding: 0.875rem 1.125rem;
  background: var(--cdc-form-surface);
  font-size: var(--wp--preset--font-size--caption, 0.9375rem);
  line-height: 1.5;
}

/* Editor-only warning when a form key does not resolve. */
.cdc-form__missing {
  border: 2px dashed var(--cdc-form-action);
  padding: 1rem;
}