/* =============================================================================
   LUMIN — Floating Label Contact Fields
   Premium, app-like floating labels on a refined bottom-line field.
   Black + teal: transparent field, subtle line, TEAL focus underline + label.
   The float is pure CSS (:placeholder-shown / :focus) and works with NO JS; the
   companion JS only reinforces the filled state + detects Chrome autofill.
   Real <label> kept for a11y. Respects prefers-reduced-motion.
   ========================================================================== */

.contact-form {
  --ff-accent: var(--accent);                 /* teal */
  --ff-line: rgba(244, 240, 231, 0.18);
  --ff-line-hover: rgba(244, 240, 231, 0.34);
  --ff-muted: rgba(244, 240, 231, 0.56);
  --ff-shift: -1.15rem;                        /* label float distance */
  --ff-dur: .25s;                              /* label / underline motion */
}

/* field wrapper = positioning context for the floating label */
.ff-field { position: relative; }

/* refined bottom-line control — transparent, no default browser chrome */
.ff-field input,
.ff-field textarea {
  display: block; width: 100%; font: inherit; margin: 0;
  color: var(--daylight); background: transparent;
  border: 0; border-bottom: 1px solid var(--ff-line); border-radius: 0;
  padding: 1.4rem 0 .55rem;
  caret-color: var(--ff-accent);
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s var(--ease);
}
.ff-field textarea { line-height: 1.5; min-height: 4.4rem; resize: vertical; }
.ff-field input:hover,
.ff-field textarea:hover { border-bottom-color: var(--ff-line-hover); }
.ff-field input:focus,
.ff-field textarea:focus { outline: none; box-shadow: none; }

/* the floating label — placeholder-like when empty, floats up when active */
.ff-field label {
  position: absolute; left: 0; top: 0; padding-top: 1.4rem;
  font-size: 1rem; line-height: 1.4; color: var(--ff-muted);
  pointer-events: none; transform-origin: left top; white-space: nowrap;
  transition: transform var(--ff-dur) var(--ease), color var(--ff-dur) var(--ease);
}
.ff-field .field__opt { color: var(--ash); font-weight: 400; }

/* floated state: focused, filled (:not placeholder-shown), or JS is-filled */
.ff-field input:focus ~ label,
.ff-field input:not(:placeholder-shown) ~ label,
.ff-field textarea:focus ~ label,
.ff-field textarea:not(:placeholder-shown) ~ label,
.ff-field.is-filled label,
.ff-field.is-focused label {
  transform: translateY(var(--ff-shift)) scale(0.78);
  color: var(--ff-muted);
}
/* focused: accent the label teal (declared last so it wins over the filled rule) */
.ff-field input:focus ~ label,
.ff-field textarea:focus ~ label,
.ff-field.is-focused label { color: var(--ff-accent); }

/* restrained animated teal focus underline — no glow, no neon */
.ff-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ff-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease); pointer-events: none;
}
.ff-field:focus-within::after { transform: scaleX(1); }

/* Chrome autofill: keep the dark field + light text (no yellow box) and expose a
   hook (ff-autofill) so the JS can float the label on autofill */
.ff-field input:-webkit-autofill,
.ff-field input:-webkit-autofill:hover,
.ff-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--daylight);
  caret-color: var(--ff-accent);
  transition: background-color 9999s ease-in-out 0s;
  animation-name: ff-autofill;
}
@keyframes ff-autofill { from {} to {} }

@media (prefers-reduced-motion: reduce) {
  .ff-field label,
  .ff-field::after,
  .ff-field input,
  .ff-field textarea { transition: none; }
}

/* -----------------------------------------------------------------------------
   Submission states (real send). Existing tokens only; errors are never colour-only:
   each carries text, a diamond marker (the same mark as the eyebrow), and aria-invalid.
   -------------------------------------------------------------------------- */

/* spam trap: out of sight and out of the tab order for people */
.cf-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile-slot:empty { display: none; }
.cf-turnstile-slot { margin: .25rem 0 .5rem; }

.field__error {
  margin: -.55rem 0 1rem; font-size: .84rem; line-height: 1.45; color: var(--daylight);
}
.field__error:not([hidden])::before {
  content: ""; display: inline-block; width: .42rem; height: .42rem; margin-right: .5rem;
  background: var(--daylight); transform: rotate(45deg); vertical-align: .08em;
}
.ff-field.has-error input,
.ff-field.has-error textarea { border-bottom-color: var(--daylight); }

.contact-form__note--error {
  color: var(--daylight); border-left: 2px solid var(--daylight); padding-left: .75rem; min-height: 0;
}
.contact-form__note--error a { color: var(--accent); border-bottom: 1px solid rgba(47, 212, 194, 0.4); }
.contact-form__note--error a:hover { color: #fff; border-color: var(--accent); }

.contact-form__privacy { margin-top: .9rem; font-size: .78rem; line-height: 1.5; color: var(--ash); }

/* sending: the button stays focusable (aria-disabled) so keyboard focus is not lost */
.contact-form .btn[aria-disabled="true"] { opacity: .65; cursor: progress; pointer-events: none; }
.contact-form .btn:disabled { opacity: .5; cursor: not-allowed; }