/*
 * Contact Form 7, restyled onto the contact page's enquiry form.
 *
 * assets/css/contact.css describes the prototype's markup — bare <input>s as the direct children
 * of .contact-form__row, and a <textarea> as a direct child of the form. CF7 renders something
 * else: an outer <div class="wpcf7">, a hidden <fieldset>, a <span class="wpcf7-form-control-wrap">
 * around every field, and a <div class="wpcf7-response-output"> after the button. contact.css is
 * the UI team's file and is not edited, so the overrides live here, enqueued straight after it —
 * the same arrangement as newsletter.css in the footer and mini-cart.css in the header.
 *
 * Less is needed here than in the footer, because reset.css:4 already sets box-sizing: border-box
 * globally — CF7's size="40"/cols="40" only need a width to beat them, not a box model.
 *
 * SPECIFICITY: CF7 writes `.wpcf7 form .wpcf7-response-output` (0,3,1 with its status class), so a
 * plain `.contact-form .wpcf7-response-output` (0,2,0) silently loses. The response rule therefore
 * leads with `.wpcf7 form` to match it and win on load order, this file being enqueued after CF7's.
 */

/*
 * The wrap is now the grid item in .contact-form__row (contact.css:119) and the block-level child
 * where the bare <textarea> used to be. CF7's own stylesheet makes it a block, but only inside
 * `.wpcf7-form`; stating it here keeps the layout right if that ever changes, and stops the
 * textarea's wrap sitting on a text line with an inline descender gap under it.
 */
.contact-form .wpcf7-form-control-wrap {
  display: block;
}

/*
 * The one thing that genuinely breaks. CF7 emits size="40" on every text input, which resolves to
 * about 404px — wider than the grid column, so the two-up rows overflowed the panel. In the
 * prototype the input was itself the grid item and stretched to its column; here the wrap is, and
 * the input inside it has no width of its own.
 */
.contact-form .wpcf7-form-control-wrap .wpcf7-form-control {
  width: 100%;
}

/*
 * The submit arrow.
 *
 * The design draws it as an <img> of arrow-btn-dark.svg, but CF7's form template lives in the
 * database and cannot call get_template_directory_uri(), so a hardcoded src there would not
 * survive a move between environments. A masked <span> tinted with currentColor solves both: the
 * URL stays in this stylesheet, and the arrow follows the button's own text colour, which is what
 * reproduces `.button.button-white:hover img { filter: brightness(0) invert(1) }` (style.css:149)
 * without an image to invert. Copied from footer.css:246, which does this for the newsletter.
 */
.contact-form__submit .btn-icon-arrow {
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/svg/arrow-btn.svg");
  mask-image: url("../images/svg/arrow-btn.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/*
 * The response message.
 *
 * CF7 gives it `margin: 2em 0.5em 1em`, which would drop it 32px below the button and indent it
 * out of line with the fields. The text colour is the panel's own dark ink rather than CF7's
 * inherited default: this panel is --primary olive, and the design's white would wash out against
 * it. The border colour is left to CF7 on purpose — green when sent, amber when a field is
 * invalid, red when the send fails. That traffic light is conventional, and all three were checked
 * against this background rather than assumed legible.
 */
.wpcf7 form.contact-form .wpcf7-response-output {
  border-width: 1px;
  border-radius: var(--radius-md);
  font-size: 14px;

  color: var(--secondary);
  background: #fff;
  margin-bottom: 20px;
}

/*
 * The per-field error. CF7's #dc3232 sits on white in its own designs; here it is on olive, where
 * it reads as brown. This is the same red darkened until it separates from the background, and it
 * carries the field's own white so the two are never confused.
 */
.contact-form .wpcf7-not-valid-tip {
  padding: 2px var(--space-10);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--white);
  padding: 6px 10px;
}

/* The spinner sits inline after the button and carries a light-page background of its own. */
.contact-form .wpcf7-spinner {
  background-color: #7f8f47;
  position: absolute;
  right: 0;
}
.contact-form-panel__disclaimer {
  color: #fff;
  font-size: 12px;
  margin-top: 20px;
  a {
    text-decoration: underline;
    &:hover {
      color: var(--secondary);
    }
  }
}