/* ==========================================================
   validation.css – error messages, hints, counters and the
   spam trap for the RSVP and song request forms.
   ========================================================== */

:root { --error: #a8485e; }

/* Message under a field */
.field__error {
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--error);
}
.field__error:empty { display: none; }

/* Gentle helper text */
.field__hint {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Character counter, only appears near the limit */
.field__count {
  justify-self: end;
  margin-top: -.15rem;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
}
.field__count:empty { display: none; }
.field__count.is-full { color: var(--error); }

/* Invalid fields */
.field.is-invalid input[type="text"] {
  border-color: var(--error);
  background: #fdf5f5;
}
.field.is-invalid input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(168, 72, 94, .18);
}
.choice.is-invalid .choice__option span { border-color: var(--error); }

/* A small shake so the person notices which field to fix */
.field.is-invalid { animation: nudge .35s ease; }
@keyframes nudge {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* "You've already replied as…" note above the RSVP form */
.form__notice {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: var(--sage-soft, #eef1e8);
  border: 1px solid rgba(90, 102, 80, .2);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink);
}
.form__notice strong { font-weight: 600; color: var(--sage-forest, #5a6650); }
/* a soft glow when the note changes after a new reply */
.form__notice.is-updated { animation: notice-glow 1.6s ease; }
@keyframes notice-glow {
  0%   { box-shadow: 0 0 0 0 rgba(168, 173, 143, 0);   background: var(--sage-soft, #eef1e8); }
  25%  { box-shadow: 0 0 0 4px rgba(168, 173, 143, .45); background: #e3ead6; }
  100% { box-shadow: 0 0 0 0 rgba(168, 173, 143, 0);   background: var(--sage-soft, #eef1e8); }
}

/* Busy state while sending */
.form[aria-busy="true"] { cursor: progress; }
.form[aria-busy="true"] input:not([type="radio"]) { pointer-events: none; opacity: .75; }
.form[aria-busy="true"] .choice { pointer-events: none; }   /* radios stay hidden, just not clickable */

/* Honeypot: off-screen for people, still "visible" to bots */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Desktop song form: keep the button level with the inputs when
   an error message makes one field taller */
@media (min-width: 60rem) {
  .form--inline { align-items: start; }
  .form--inline > .btn { margin-top: 1.6rem; }
}