/*
 * bs-contact-form.css - the Contact page form. Companion to bs-contact-form.php.
 *
 * Reproduces the retired Elementor Form widget exactly. Its look came from the
 * ".bs-contact-form .elementor-*" rules in bs-contact-page.css; every value below was
 * read from that file and from the rendered form on production, September 24, 2026:
 *
 *   desktop  first/last 151.5 x 47 side by side, 10px apart; email 312.9 x 47 at 61;
 *            message 312.9 x 131 at 122; button 312.9 x 47 at 267
 *   375px    every field full width, stacked on the same 61px rhythm; button padding 14px 20px
 *
 * One deliberate difference: the font. The old form computed to
 * font-family: "Verdana, Geneva, sans-serif", sans-serif - one quoted family name that does
 * not exist, so it rendered in a generic sans-serif. This form is set in Verdana, the
 * site's body font (Jessie, September 24, 2026). Heights are fixed by pixel line-heights,
 * so the geometry above does not move.
 *
 * Everything is scoped under .bs-contact. !important matches the house pattern, to outrank
 * Elementor post CSS and the theme's button styles.
 */

.bs-contact {
  width: 100% !important;
  font-family: Verdana, Geneva, sans-serif !important;
}

.bs-contact__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  row-gap: 14px !important;
}

.bs-contact__field {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bs-contact__field--half {
  grid-column: auto !important;
}

/* Labels are announced, not shown, as the old form's were (elementor-screen-only). */
.bs-contact__label,
.bs-contact__hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The honeypot is also pushed off-screen, so a sighted keyboard user can never land in it. */
.bs-contact__hp {
  left: -9999px !important;
}

.bs-contact__input {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: #f7f5f2 !important;
  color: #1a1a1a !important;
  border: 1px solid #e0dbd4 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.bs-contact__input::placeholder {
  color: #9e9791 !important;
  font-size: 0.9375rem !important;
  opacity: 1 !important;
}

.bs-contact__input:focus {
  outline: none !important;
  border-color: var(--bs-bronze, #b0743e) !important;
  box-shadow: 0 0 0 3px rgba(176, 116, 62, 0.12) !important;
  background: #ffffff !important;
}

.bs-contact__input[aria-invalid="true"] {
  border-color: #8b2020 !important;
}

.bs-contact__textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

.bs-contact__actions {
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

.bs-contact__button {
  display: block !important;
  width: 100% !important;
  min-height: 47px !important;
  height: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 14px 32px !important;
  background: var(--bs-bronze, #b0743e) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--bs-r-btn, 50px) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: capitalize !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.bs-contact__button:hover {
  background: #9a6235 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.bs-contact__button:focus-visible {
  outline: 2px solid var(--bs-bronze, #b0743e) !important;
  outline-offset: 2px !important;
}

.bs-contact__button:disabled {
  background: var(--bs-bronze, #b0743e) !important;
  opacity: 0.7 !important;
  cursor: default !important;
  transform: none !important;
}

/* Status line: the old form's .elementor-message styles, success and error. */
.bs-contact__status {
  margin: 12px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #1a1a1a !important;
}

.bs-contact__status:empty {
  display: none !important;
}

.bs-contact[data-state="sending"] .bs-contact__status {
  padding: 0 !important;
  color: #6b6b6b !important;
}

.bs-contact[data-state="ok"] .bs-contact__status {
  background: rgba(176, 116, 62, 0.1) !important;
  color: #7a5030 !important;
  border: 1px solid rgba(176, 116, 62, 0.3) !important;
}

.bs-contact[data-state="error"] .bs-contact__status {
  background: rgba(200, 50, 50, 0.07) !important;
  color: #8b2020 !important;
  border: 1px solid rgba(200, 50, 50, 0.2) !important;
}

/* Elementor stacks its half-width columns at 767px and below; so does this. */
@media (max-width: 767px) {
  .bs-contact__grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .bs-contact__button {
    padding: 14px 20px !important;
  }
}