/*
 * forms.css - styles for the Contact and LoggedInLearning forms.
 * Replaces the WS Form plugin styles. Colors and sizes are copied from the old
 * WS Form style settings so the forms look the same as before.
 */
.dpw-form {
  --dpw-accent: #e8613b;        /* WS Form "primary" color on the old site */
  --dpw-accent-dark: #ba4e2f;   /* hover shade, about 20% darker */
  --dpw-border: #ceced2;       /* light gray, matches the live form's field borders */
  --dpw-danger: #bb0000;
  --dpw-gap: 20px;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
}

/* 12-column grid, same idea as WS Form, so field widths match (6 = half, 3 = quarter, etc.) */
.dpw-grid { display: flex; flex-wrap: wrap; gap: var(--dpw-gap); margin-bottom: var(--dpw-gap); }
.dpw-field { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
/* Widths only kick in on wider screens; on phones every field is full width */
@media (min-width: 768px) {
  .dpw-c2  { flex-basis: calc(16.66% - var(--dpw-gap) * 10 / 12); }
  .dpw-c3  { flex-basis: calc(25%    - var(--dpw-gap) * 9 / 12); }
  .dpw-c5  { flex-basis: calc(41.66% - var(--dpw-gap) * 7 / 12); }
  .dpw-c6  { flex-basis: calc(50%    - var(--dpw-gap) * 6 / 12); }
}

.dpw-form .dpw-field > label,
.dpw-form .dpw-field legend { display: block; margin-bottom: 5px; padding: 0; color: #000; font-size: 14px; }
.dpw-req { color: var(--dpw-danger); }

.dpw-form .dpw-field input,
.dpw-form .dpw-field select,
.dpw-form .dpw-field textarea {   /* ".dpw-form" prefix outranks the Automatic CSS input styles */
  box-sizing: border-box;
  width: 100%;
  padding: 8.5px 10px;
  font: inherit;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--dpw-border);
  border-radius: 4px;
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.dpw-field textarea { resize: vertical; min-height: 110px; }
/* Theme CSS removes the dropdown arrow from selects; bring the browser's own arrow back */
.dpw-form .dpw-field select { appearance: auto; -webkit-appearance: auto; cursor: pointer; }
.dpw-form .dpw-field input:focus,
.dpw-form .dpw-field select:focus,
.dpw-form .dpw-field textarea:focus { outline: none; border-color: var(--dpw-accent); box-shadow: 0 0 0 4px rgba(232, 97, 59, 0.35); }

/* Only flag a field red after the visitor has tried to submit (site.js adds .dpw-tried) */
.dpw-form.dpw-tried .dpw-field :invalid { border-color: var(--dpw-danger); }

/* Checkbox and radio rows, laid out horizontally like the old form */
.dpw-choices { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.dpw-form .dpw-choice { color: #000; display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.dpw-form .dpw-choice input {
  /* The old theme CSS hides checkboxes (absolute + opacity 0) so its own plugin could draw them.
     Put the plain native box back in the normal flow. */
  appearance: auto; -webkit-appearance: auto;
  position: static; opacity: 1; flex: 0 0 auto;
  width: 16px; height: 16px; margin: 0; padding: 0; border: 0; box-shadow: none;
  accent-color: var(--dpw-accent);
}

.cf-turnstile { margin-bottom: var(--dpw-gap); }

.dpw-form .dpw-submit {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 8.5px 10px;
  font: inherit;
  color: #fff;
  background: var(--dpw-accent);
  border: 1px solid var(--dpw-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}
.dpw-form .dpw-submit:hover,
.dpw-form .dpw-submit:focus-visible { background: var(--dpw-accent-dark); border-color: var(--dpw-accent-dark); }
.dpw-submit[disabled] { opacity: 0.6; cursor: wait; }

.dpw-status { margin: 12px 0 0; min-height: 1.4em; }
.dpw-status.is-error { color: var(--dpw-danger); }
.dpw-status.is-success { color: #2e8540; font-weight: 600; }

/* Honeypot: visually gone, still in the page so bots fill it in */
.dpw-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fixes to the old site (not form related) ----------
 * The phone-size menu button was black bars on the black menu bar, so it was invisible on the
 * live WordPress site. White bars make it visible. Delete this block to restore the old look. */
#brx-header .bricks-mobile-menu-toggle { color: #fff; }
#brx-header .bricks-mobile-menu-toggle span { background-color: #fff; }