@charset "UTF-8";
/**
 * WPForms UI overrides — compact, label-less, placeholder-driven forms.
 *
 * The rounded white card look (background/border/radius/padding) lives
 * in assets/css/cubelaw.scss's `.cubelaw-contact-card` rule instead of
 * here — that wrapper contains BOTH the "Leave a Message" heading and
 * this form's shortcode, so the heading reads as part of the same card
 * rather than floating above it. `.wpforms-container` itself stays
 * unstyled (no nested second box).
 *
 * Kept as its own stylesheet (compiled separately from cubelaw.css and
 * enqueued as its own <link>) rather than folded into the main theme
 * SCSS, specifically so it stays easy to find, review, or drop entirely
 * once this goes to production, without hunting through the general
 * theme stylesheet for WPForms-specific rules.
 *
 * Field labels/sublabels themselves are hidden via WPForms' own native
 * "Hide Label" / "Hide Sublabels" field settings (Cubelaw Contact Form,
 * form ID 8242, in the WPForms builder) — not CSS — since that's the
 * accessible, supported way to do it (removes the label from the a11y
 * tree properly, rather than just visually). Placeholder text is set the
 * same way, per field, in the builder. This file only handles pure
 * visual spacing/sizing that has no equivalent builder setting.
 *
 * Rounded corners (fields, button) are a deliberate one-off here —
 * every other button/card on the site uses a sharp 0px radius
 * (theme.json styles.elements.button) — kept isolated to this stylesheet
 * so it doesn't bleed into the sharp-corner look everywhere else.
 */
.wpforms-container .wpforms-form {
  /*
   * WPForms' own CSS puts 15px top+bottom padding on every .wpforms-field
   * (30px of combined visual gap between adjacent fields, confirmed via
   * computed styles — it's padding, not margin). Tighten that down.
   */
}
.wpforms-container .wpforms-form .wpforms-field {
  padding: 6px 0;
}
.wpforms-container .wpforms-form .wpforms-field:first-child {
  padding-top: 0;
}
.wpforms-container .wpforms-form .wpforms-field:last-child {
  padding-bottom: 0;
}
.wpforms-container .wpforms-form {
  /*
   * Shorter message box — 3 rows. WPForms renders this field noticeably
   * taller than its own "Rows" attribute would suggest (its base CSS
   * forces a tall default for the "Large" field size) — overriding
   * height directly here is more reliable than fighting that via the
   * Rows setting in the builder.
   */
}
.wpforms-container .wpforms-form .wpforms-field-textarea textarea {
  height: 64px;
  min-height: 64px;
}
.wpforms-container .wpforms-form {
  /*
   * Fields sit on the white card now (not directly on a sage/ink section
   * background), so a subtle linen fill is enough to separate each field
   * from the card without needing full white-on-white. Ink border is a
   * solid, fully-opaque line (WPForms' own default border color is a
   * low-opacity gray) so each field stays clearly defined.
   */
}
.wpforms-container .wpforms-form .wpforms-field input:not([type=radio]):not([type=checkbox]),
.wpforms-container .wpforms-form .wpforms-field textarea,
.wpforms-container .wpforms-form .wpforms-field select {
  background-color: var(--color-linen) !important;
  border: 1px solid var(--wp--preset--color--custom-ink) !important;
  border-radius: 6px !important;
}
.wpforms-container .wpforms-form .wpforms-submit-container {
  margin-top: 8px;
}
.wpforms-container .wpforms-form {
  /*
   * Match the site's primary button colors (theme.json styles.elements.
   * button) — sage fill, white text, ink on hover — since WPForms' own
   * submit button ships with its own hardcoded blue and isn't a real
   * "wp:button" block, so it never picks up that styling on its own.
   * Radius is rounded here (unlike the real primary button, which is
   * sharp) to match the rest of this card. Full width so it reads as
   * this card's one clear action.
   *
   * !important throughout: WPForms' own CSS targets the submit button
   * via `.wp-core-ui div.wpforms-container-full button[type="submit"]`
   * — 2 classes + 1 attribute + 2 elements. Ours (3 plain classes, 0
   * elements) ties on the class/attribute count but loses the element-
   * count tiebreaker, so a normal override never wins here regardless of
   * source order. Confirmed via computed styles before adding this.
   */
}
.wpforms-container .wpforms-form .wpforms-submit {
  display: block !important;
  width: 100% !important;
  padding: 14px 24px !important;
  background: var(--wp--preset--color--custom-sage) !important;
  color: var(--wp--preset--color--custom-white) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: var(--wp--preset--font-size--small) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
}
.wpforms-container .wpforms-form .wpforms-submit:hover, .wpforms-container .wpforms-form .wpforms-submit:focus {
  background: var(--wp--preset--color--custom-ink) !important;
  color: var(--wp--preset--color--custom-white) !important;
}

/*# sourceMappingURL=wpforms.css.map */