/* ============================================================
   FORM VALIDATION — custom error styles
   Pairs with form-validation.js. Inline errors under each
   invalid field, styled to match Board Enhance brand.
   ============================================================ */

/* Red border on invalid fields. Uses a warm red that reads
   correctly on both navy backgrounds and light cards. */
.field-invalid,
.field-invalid:focus {
  border-color: #e85d5d !important;
  box-shadow: 0 0 0 1px rgba(232,93,93,0.15);
}

/* Inline error message — shown directly under the field */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #e85d5d;
  line-height: 1.4;
  letter-spacing: 0.01em;
  /* Reset any inherited transform from labels */
  text-transform: none;
  animation: feFadeIn 0.18s ease-out;
}

/* Small warning icon before the message */
.field-error::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23e85d5d' stroke-width='1.5'><circle cx='7' cy='7' r='6'/><line x1='7' y1='4' x2='7' y2='8'/><circle cx='7' cy='10.5' r='0.5' fill='%23e85d5d'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes feFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On dark form sections (navy backgrounds), brighten the red
   slightly so it reads well against the dark surface. */
.dark-section .field-error,
.contact-form-wrap .field-error,
.brief-form .field-error,
.meeting-form-wrap .field-error {
  color: #ff8585;
}
.dark-section .field-error::before,
.contact-form-wrap .field-error::before,
.brief-form .field-error::before,
.meeting-form-wrap .field-error::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ff8585' stroke-width='1.5'><circle cx='7' cy='7' r='6'/><line x1='7' y1='4' x2='7' y2='8'/><circle cx='7' cy='10.5' r='0.5' fill='%23ff8585'/></svg>");
}
.dark-section .field-invalid,
.contact-form-wrap .field-invalid,
.brief-form .field-invalid,
.meeting-form-wrap .field-invalid,
.dark-section .field-invalid:focus,
.contact-form-wrap .field-invalid:focus,
.brief-form .field-invalid:focus,
.meeting-form-wrap .field-invalid:focus {
  border-color: #ff8585 !important;
  box-shadow: 0 0 0 1px rgba(255,133,133,0.18);
}