/* Styling for the Web3Forms-backed site forms.
 *
 * The forms deliberately reuse the Gravity Forms class names the theme already
 * styles, so this file is small on purpose: it only covers what the theme does
 * not, and must not restate rules that designn/style.css already provides.
 */

/* The theme styles form fields with `#main .gform_wrapper input[type="text"]`,
 * an attribute selector that predates these forms using real email/tel/url
 * types. Those types need the same treatment, and the declarations below are
 * copied from that rule so the two stay identical. */
#main .gform_wrapper input[type="email"],
#main .gform_wrapper input[type="tel"] {
  width: 100% !important;
  padding: 5px 10px;
  margin: 0;
  border: 1px solid #aaa;
  background-color: #fff;
  font-size: 1em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Same gap in the theme's error state: its rule covers input[type="text"],
 * textarea and select only, so an invalid email would show the inline message with
 * no red border. Declarations copied from that rule. */
.gform_wrapper li.gfield_error input[type="email"],
.gform_wrapper li.gfield_error input[type="tel"] {
  border-color: #ff0000 !important;
  background-color: #ffd7d5 !important;
}

/* Spam trap. Web3Forms specifies a `botcheck` checkbox hidden with display:none;
 * the element also carries an inline style so it stays hidden if this file fails
 * to load. Never make this visually hidden but focusable — a keyboard user or a
 * screen reader would be walked straight into it. */
.w3f-honeypot {
  display: none !important;
}

/* The message and validation slots are toggled through the `hidden` property.
 * The theme sets `display` on `.validation_message` and `.validation_error`, and
 * a class selector outranks the browser's own `[hidden]` rule, so state it
 * explicitly here. */
.w3f-form [hidden] {
  display: none !important;
}

/* Submission feedback. `.validation_error` and `.gform_confirmation_message`
 * carry theme styling already; these rules add the spacing the theme only
 * applied via markup that no longer exists. */
.w3f-form .w3f-form-error,
.w3f-form .w3f-form-success {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 3px;
  font-size: 0.95em;
  line-height: 1.4;
}

.w3f-form .w3f-form-error {
  background-color: #ffd7d5;
  border: 1px solid #ffd7d5;
  color: #ce443e;
}

.w3f-form .w3f-form-success {
  margin: 14px 0 0;
  background-color: #e6f4ea;
  border: 1px solid #b7dfc4;
  color: #1d6b33;
}

/* Per-field errors sit under the input. The theme sizes these to 50% width in
 * sidebars, which truncates real sentences. */
#sidebar .w3f-form .gfield_description.validation_message,
#sidebar .w3f-form .top_label .gfield_description.validation_message,
.w3f-form .gfield_description.validation_message {
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: #ce443e;
  font-size: 0.85em;
  line-height: 1.35;
}

/* hCaptcha's iframe is a fixed 303px wide. The sidebar column is narrower than
 * that on small screens, so let it scale down rather than overflow the column. */
.w3f-captcha-field .h-captcha {
  margin-top: 8px;
}

.w3f-captcha-field .h-captcha iframe {
  max-width: 100%;
}

@media (max-width: 360px) {
  .w3f-captcha-field .h-captcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

/* A disabled submit button should look disabled — the theme's `.gform_button`
 * rule sets a solid background with no disabled state. */
.w3f-form .gform_button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}