/* =====================================================================
   Purple Plum — extra styles added by the CMS

   Your original assets/css/style.css is NOT modified. This small file
   only styles the handful of elements that did not exist on the static
   site: the success / error message after sending the enquiry form, the
   little red note under an invalid field, and the hidden anti-spam box.

   It is loaded after style.css so nothing here can be overridden by
   accident, and nothing here changes your existing design.
   ===================================================================== */

/* --- Message shown after the enquiry form is submitted --------------- */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 22px;
  border: 1.5px solid transparent;
}

.form-alert i {
  flex-shrink: 0;
  font-size: 17px;
  margin-top: 1px;
}

.form-alert-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.form-alert-error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.form-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.form-alert ul li {
  margin-bottom: 3px;
}

/* --- Note under a field that failed validation ---------------------- */
.field-error {
  display: block;
  margin-top: 6px;
  color: #dc2626;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
}

.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: #f87171;
}

/* --- Honeypot: a field only an automated spam bot will fill in ------- */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Empty-state note, used when a section has no records yet -------- */
.cms-empty {
  text-align: center;
  color: var(--text-body, #6b7280);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  padding: 28px 0 6px;
}

@media (max-width: 600px) {
  .form-alert { font-size: 14px; padding: 14px 15px; border-radius: 14px; }
}