/*
 * Validation messages and the captcha block.
 *
 * Loaded alongside the forms themselves rather than folded into
 * style.css, so a page with no form on it does not pay for these rules.
 */

.cw-error {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  line-height: 1.45;
  font-weight: 600;
  color: #dc2626;
}

.cw-error:empty { display: none; }

/* Every field shape on the site, marked the same way. The selector list is
   long because the four forms were built at different times and none of
   them share a field class - worth unifying one day, but not by rewriting
   four pages of stored HTML to fix a red border. */
.cw-fw { display: flex; flex-direction: column; min-width: 0; }
.cw-fw.is-wide { grid-column: 1 / -1; }

.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.cw-contact-field.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important;
}

.is-invalid:focus,
.cw-contact-field.is-invalid:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .16) !important;
}

/* The consent row has no border of its own, so the box is what turns red. */
.cw-consent-field.has-error label { color: #b91c1c; }
.cw-consent-field.has-error input[type="checkbox"] {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* The CV drop zone on the careers form is a dashed panel, not an input. */
.cw-cv-field.has-error .cw-cv-drop { border-color: #dc2626; background: #fef2f2; }

/* The newsletter sits on the dark footer, where #dc2626 disappears. */
.newsletter-form .cw-error { color: #fca5a5; }
.newsletter-input-group { align-items: start; }

.cw-captcha-field {
  margin: 16px 0 18px;
  min-width: 0;
}

/* Both builder grids place their children in columns, so the captcha has to
   claim the full width or it lands beside the submit button. */
.cw-consult-form > .cw-captcha-field,
.cw-contact-fields > .cw-captcha-field { grid-column: 1 / -1; }

.cw-captcha-field .g-recaptcha { display: inline-block; max-width: 100%; }

/* The v2 widget is a fixed 304px iframe. Below that it has to be scaled
   rather than allowed to push the page into a horizontal scroll. */
@media (max-width: 360px) {
  .cw-captcha-field .g-recaptcha {
    transform: scale(.86);
    transform-origin: 0 0;
  }
}

.cw-captcha-field.has-error .g-recaptcha {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
  border-radius: 4px;
}