/**
 * LUAP /signup direct form layout v5
 * ---------------------------------
 * - restores a tighter site-wide rhythm
 * - keeps entered type at 16px
 * - uses the hand-drawn line for every field
 * - replaces browser validation bubbles with LUAP inline messages
 */

/* Intro: one clean 50px beat to the hand-drawn divider, then 50px to fields. */
body.page-signup .luap-signup-standard-node .luap-signup-description-field {
  position: relative !important;
  margin: 0 0 50px 0 !important;
  padding: 0 0 50px 0 !important;
  border: 0 !important;
  background: transparent url('/sites/all/themes/luap/images/line_new.png') repeat-x left bottom !important;
  background-size: auto 2px !important;
}

body.page-signup .luap-signup-standard-node .luap-signup-description-field .field-items,
body.page-signup .luap-signup-standard-node .luap-signup-description-field .field-item,
body.page-signup .luap-signup-standard-node .mailchimp-signup-subscribe-form-description,
body.page-signup .luap-signup-standard-node .mailchimp-signup-subscribe-form-description p {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Remove old form spacing so only the rhythm below controls the layout. */
body.page-signup form#mailchimp-signup-subscribe-page-signup-form,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .luap-signup-fields-field,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .luap-signup-fields-field .field-items,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .luap-signup-fields-field .field-item,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* A row is roughly 30px high + 20px breathing room = 50px pitch. */
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields .form-item {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  min-height: 30px !important;
}

body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields .form-item:last-child {
  margin-bottom: 0 !important;
}

/* Every field uses the same geometry and hand-drawn underline. */
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.form-text,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input[type="text"],
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input[type="email"] {
  box-sizing: border-box !important;
  width: 65% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 0 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: url('/sites/all/themes/luap/images/line_new.png') !important;
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
  background-size: auto 2px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1.35 !important;
  color: #000 !important;
}

/* No blue/boxed focus state. Keep the caret and the drawn line only. */
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:focus,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:focus-visible,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:active,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:invalid,
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:user-invalid {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url('/sites/all/themes/luap/images/line_new.png') !important;
}

/* Custom validation message: quiet, dark pink/red, directly under the line. */
body.page-signup .luap-signup-error {
  display: none;
  width: 65%;
  margin: 5px 0 0 35%;
  padding: 0;
  color: #9b1b4b;
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.3;
}

body.page-signup .form-item.luap-has-error .luap-signup-error {
  display: block;
}

body.page-signup .form-item.luap-has-error {
  margin-bottom: 8px !important;
}

/* Submit area: keep breathing room without opening up the whole form. */
body.page-signup form#mailchimp-signup-subscribe-page-signup-form .form-actions {
  margin-top: 20px !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  body.page-signup .luap-signup-standard-node .luap-signup-description-field,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:focus,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:focus-visible,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:invalid,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input:user-invalid {
    background-image: url('/sites/all/themes/luap/images/line@2x.png') !important;
    background-size: auto 2px !important;
  }
}

@media only screen and (max-width: 767px) {
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.luap-signup-input,
  body.page-signup form#mailchimp-signup-subscribe-page-signup-form .mailchimp-newsletter-mergefields input.form-text {
    width: 100% !important;
  }

  body.page-signup .luap-signup-error {
    width: 100%;
    margin-left: 0;
  }
}