/* Contact form additions layered on top of /assets/css/main.css, which is a
   compiled build artifact with no source in this repo and can't be
   re-generated — new form styling lives here instead of touching it. */

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact .section-contact .form-box .error.form-error {
  position: static;
  display: block;
  margin-top: 12px;
}

.contact .section-contact .form-box .input-box.privacy-box .error {
  position: static;
  display: block;
  margin-top: 10px;
}

/* .input-box is a flex row (title | control), so an element appended after
   the textarea becomes a third flex item sitting beside it instead of below
   it. Take it out of flow and anchor it under the box, the same way
   main.css positions .error. */
.contact .section-contact .form-box .input-box .char-counter {
  position: absolute;
  right: 0;
  bottom: -24px;
  margin-top: 0;
  font-size: 12px;
  color: #828282;
}

.contact .section-contact .form-box .input-box .char-counter.is-over {
  color: #da3b38;
}

/* main.css's compiled .select-box/.file-box variants stack the title above
   the control (display:block) at every width down to 751px — that layout
   was built for a different, more elaborate form elsewhere on the site.
   Our inquiry_type/contact_pref fields should read like their sibling text
   fields (title left, control right), matching everything else in this
   form; below 750px main.css already stacks every .input-box uniformly,
   so this override only needs to apply above that. */
@media screen and (min-width: 751px) {
  .contact .section-contact .form-box .input-box.select-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .contact .section-contact .form-box .input-box.select-box .inner {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-width: 560px;
  }
}

/* main.css's .select rule (also from that other form) is 611px wide —
   51px wider than every sibling text/email/tel input (560px, from the
   shared "select, input[type=text], input[type=email]" rule further down
   in the same file). .select is the more specific selector so it wins,
   making inquiry_type/contact_pref visibly longer than the fields around
   them. Match the sibling inputs' width at both desktop tiers; below
   750px main.css already sets every field (select included) to 100%, so
   no override is needed there. */
.contact .section-contact .form-box .select {
  width: 560px;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact .form-box .select {
    width: 38.88889vw;
  }
}

/* main.css styles input[type="text"|"email"] explicitly and has no rule for
   type="tel", so it was falling back to unstyled browser defaults. Mirror
   the text/email rule (including its two responsive tiers) for tel so the
   phone field matches its siblings at every width. */
.contact .section-contact .form-box input[type="tel"] {
  width: 560px;
  height: 60px;
  font-size: 14px;
  padding-left: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  outline: none;
  background: #f4f4f4;
  color: #828282;
  border: solid 1px #d0d0d0;
  border-radius: 0;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact .form-box .input-box input[type="tel"] {
    width: 38.88889vw;
    height: 4.16667vw;
    font-size: 0.97222vw;
    padding-left: 2.22222vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact .form-box .input-box input[type="tel"] {
    width: 100%;
    height: 16vw;
    font-size: 4.26667vw;
    padding-left: 6.4vw;
  }
}