/* Third-party integration styling for ACLM Sections.
   Kept out of monolith.css so that file stays a faithful port of the guide. */

/* ---------- WPForms bridge ----------
   The contact widget renders a real WPForms form. WPForms runs in "modern"
   render mode, which styles itself through --wpforms-* custom properties and
   div.wpforms-container-full selectors that outrank a plain class selector.
   So drive its variables rather than fighting specificity; only the few things
   it has no variable for fall back to a matched-specificity override.
   Scoped to .aclm-contact so other forms on the site are untouched. */
.aclm-contact .wpforms-container {
  margin: 0;
  --wpforms-field-border-radius: 0px;
  --wpforms-field-border-size: 1px;
  --wpforms-field-background-color: transparent;
  --wpforms-field-border-color: var(--aclm-border-16);
  --wpforms-field-text-color: var(--aclm-text);
  --wpforms-label-color: var(--aclm-text);
  --wpforms-label-sublabel-color: var(--aclm-dim);
  --wpforms-button-border-radius: 100vw;
  --wpforms-button-background-color: var(--aclm-text);
  --wpforms-button-text-color: var(--aclm-ink);
}
.aclm-contact .wpforms-form { display: flex; flex-direction: column; gap: 24px; }
.aclm-contact .wpforms-field { padding: 0; }
.aclm-contact .wpforms-field-label {
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.02em;
  text-transform: uppercase; margin-bottom: 12px;
}
.aclm-contact div.wpforms-container-full .wpforms-form input[type="text"],
.aclm-contact div.wpforms-container-full .wpforms-form input[type="email"],
.aclm-contact div.wpforms-container-full .wpforms-form input[type="tel"],
.aclm-contact div.wpforms-container-full .wpforms-form textarea {
  height: 48px; padding: 12px 16px; font-family: var(--aclm-font); font-size: 16px;
  box-shadow: none; transition: border-color 0.2s;
}
.aclm-contact div.wpforms-container-full .wpforms-form textarea { height: 169px; resize: none; }
.aclm-contact div.wpforms-container-full .wpforms-form input:focus,
.aclm-contact div.wpforms-container-full .wpforms-form textarea:focus { border-color: var(--aclm-accent); }
.aclm-contact div.wpforms-container-full .wpforms-form ::placeholder { color: var(--aclm-dim-50); }
.aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"] {
  /* WPForms prints its per-form variables in an inline #wpforms-<id> block, and
     an ID beats a class, so the button tone is set directly here. This selector
     still outranks WPForms' own div.wpforms-container-full rule. */
  background-color: var(--aclm-text); color: var(--aclm-ink);
  padding: 10px 24px; border: 1px solid transparent; border-radius: 100vw;
  font-family: var(--aclm-font); font-size: 16px; font-weight: 600; line-height: 150%;
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
  background-color: var(--aclm-accent); color: var(--aclm-ink);
}

/* Light frames flip the field and button tones. */
.frame-blush .aclm-contact .wpforms-container,
.frame-paper .aclm-contact .wpforms-container {
  --wpforms-field-border-color: var(--aclm-ink-16);
  --wpforms-field-text-color: var(--aclm-ink);
  --wpforms-label-color: var(--aclm-ink);
  --wpforms-label-sublabel-color: var(--aclm-ink-64);
  --wpforms-button-background-color: var(--aclm-ink);
  --wpforms-button-text-color: var(--aclm-text);
}
.frame-blush .aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"],
.frame-paper .aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"] {
  background-color: var(--aclm-ink); color: var(--aclm-text);
}
.frame-blush .aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.frame-paper .aclm-contact div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
  background-color: var(--aclm-accent-deep); color: var(--aclm-text);
}

/* ---------- Touch targets on mobile ----------
   WPForms renders radios and checkboxes at 16px with a 21px label, which is a
   21x32 tap target. That is well under the 44px guideline, and the tenancy
   application asks for three of them on a form most people will complete on a
   phone. Grow the whole row rather than just the box, so the label is the
   target and the layout stays on the Monolith grid. */
@media (max-width: 767px) {
  .aclm-contact .wpforms-field-radio ul li,
  .aclm-contact .wpforms-field-checkbox ul li,
  .aclm-contact .wpforms-field-gdpr-checkbox ul li {
    margin: 0 0 4px;
  }
  .aclm-contact .wpforms-field-radio ul li label,
  .aclm-contact .wpforms-field-checkbox ul li label,
  .aclm-contact .wpforms-field-gdpr-checkbox ul li label {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 44px; min-width: 64px; padding: 6px 14px 6px 0; margin: 0;
    cursor: pointer;
  }
  .aclm-contact .wpforms-field-radio ul li input[type="radio"],
  .aclm-contact .wpforms-field-checkbox ul li input[type="checkbox"],
  .aclm-contact .wpforms-field-gdpr-checkbox ul li input[type="checkbox"] {
    width: 22px; height: 22px; margin: 0; flex: 0 0 auto;
  }
}

/* WPForms sets hyphens: auto on every field, which splits words mid-line in
   long labels such as the tenancy declaration. Wrap whole words instead. */
div.wpforms-container-full .wpforms-form .wpforms-field,
div.wpforms-container-full .wpforms-form .wpforms-field-label,
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-description,
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form li,
div.wpforms-container-full .wpforms-form th {
  -webkit-hyphens: manual;
  hyphens: manual;
}