/**
 * Jetpack Forms (jetpack/contact-form).
 *
 * Matches the Figma form components: 14px grey labels, 56px inputs with a
 * 6px radius and border-grey outline, 101px textarea, theme pill button.
 * Jetpack styles its fields with zero-specificity :where() rules, so the
 * plain selectors below always win.
 */
.wp-block-jetpack-contact-form {
  --swf-form-input-height: 56px;
  --swf-form-textarea-height: 101px;
  --swf-form-radius: var(--wp--custom--border--radius-input);
  --swf-form-border: 1px solid var(--wp--preset--color--border-grey);
  gap: var(--wp--preset--spacing--30);
}
.wp-block-jetpack-contact-form .grunion-field-label {
  margin: 0 0 var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--text-grey);
  font-size: var(--wp--preset--font-size--paragraph-xs);
  font-weight: 400;
  line-height: 1.15;
}
.wp-block-jetpack-contact-form .grunion-label-required {
  margin-inline-start: 0;
  color: inherit;
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file]),
.wp-block-jetpack-contact-form textarea.grunion-field,
.wp-block-jetpack-contact-form select.grunion-field {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 var(--wp--preset--spacing--20);
  border: var(--swf-form-border);
  border-radius: var(--swf-form-radius);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--paragraph-s);
  line-height: 1.25;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file])::placeholder,
.wp-block-jetpack-contact-form textarea.grunion-field::placeholder,
.wp-block-jetpack-contact-form select.grunion-field::placeholder {
  color: var(--wp--preset--color--text-grey);
  opacity: 1;
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file]):hover,
.wp-block-jetpack-contact-form textarea.grunion-field:hover,
.wp-block-jetpack-contact-form select.grunion-field:hover {
  border-color: var(--wp--preset--color--black);
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file]):focus, .wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file]):focus-visible,
.wp-block-jetpack-contact-form textarea.grunion-field:focus,
.wp-block-jetpack-contact-form textarea.grunion-field:focus-visible,
.wp-block-jetpack-contact-form select.grunion-field:focus,
.wp-block-jetpack-contact-form select.grunion-field:focus-visible {
  border-color: var(--wp--preset--color--black);
  outline: 2px dashed var(--wp--preset--color--black);
  outline-offset: 2px;
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file])[aria-invalid=true],
.wp-block-jetpack-contact-form textarea.grunion-field[aria-invalid=true],
.wp-block-jetpack-contact-form select.grunion-field[aria-invalid=true] {
  border-color: var(--wp--preset--color--alt-violet);
}
.wp-block-jetpack-contact-form {
  /* stylelint-disable-next-line no-descending-specificity -- we don't want to apply to textarea*/
}
.wp-block-jetpack-contact-form input.grunion-field:not([type=checkbox], [type=radio], [type=file]), .wp-block-jetpack-contact-form select.grunion-field {
  height: var(--swf-form-input-height);
}
.wp-block-jetpack-contact-form {
  /* stylelint-disable-next-line no-descending-specificity -- we only want to apply to textarea*/
}
.wp-block-jetpack-contact-form textarea.grunion-field {
  height: var(--swf-form-textarea-height);
  min-height: var(--swf-form-textarea-height);
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  resize: vertical;
}
.wp-block-jetpack-contact-form .contact-submit {
  flex-basis: 100%;
  margin: var(--wp--preset--spacing--10) 0 0;
}

/* Submit button: theme pill at its natural width (Jetpack stretches it by default). */
.contact-form .wp-block-jetpack-contact-form :is(.wp-block-button, .wp-block-jetpack-button) {
  flex-basis: auto;
  min-height: 0;
}
.contact-form .wp-block-jetpack-contact-form :is(.wp-block-button, .wp-block-jetpack-button) .wp-block-button__link {
  width: auto;
  min-height: 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}
/*# sourceMappingURL=jetpack-contact-form.css.map */