/**
 * form.css — Novagroup Form Component
 * Underline-only fields, floating label, copper underline draw on focus.
 * ALL values reference tokens from css/tokens.css.
 *
 * Class convention: dash-style (form-field, form-input, etc.) matching HTML+JS.
 */

/* ============================================================
 * FORM LAYOUT
 * ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * FIELD WRAPPER — floating label container
 * ============================================================ */
.form-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * LABEL — floats up on focus / when filled
 * ============================================================ */
.form-label {
  position: absolute;
  top: 0.8rem;
  left: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-steel);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform  var(--dur-short) var(--ease-out),
    color      var(--dur-short) var(--ease-out),
    font-size  var(--dur-short) var(--ease-out);
}

/* Float label when input is focused or has value.
 * HTML order is <label> then <input>, so sibling selector won't match
 * downward — use :has() on the parent .form-field. */
.form-field:has(.form-input:focus) .form-label,
.form-field:has(.form-input:not(:placeholder-shown)) .form-label,
.form-field:has(.form-textarea:focus) .form-label,
.form-field:has(.form-textarea:not(:placeholder-shown)) .form-label {
  transform: translateY(-1.35rem) scale(0.78);
  color: var(--c-copper);
}

/* ============================================================
 * INPUT / TEXTAREA — underline-only style
 * ============================================================ */
.form-input,
.form-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-fog);
  border-radius: 0;
  padding: 0.8rem 0 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-ink);
  transition: border-color var(--dur-short) var(--ease-out);
  position: relative;
  z-index: var(--z-raised);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: transparent; /* hidden — label acts as placeholder */
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-bottom-color: transparent; /* replaced by the copper line below */
}

/* Copper underline draw — pseudo-element on wrapper */
.form-field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--c-copper);
  transition: width var(--dur-medium) var(--ease-out);
}

.form-field:focus-within::after {
  width: 100%;
}

/* Error state */
.form-field.has-error::after {
  background-color: var(--c-error);
  width: 100%;
}

.form-field.has-error .form-label {
  color: var(--c-error);
}

/* ============================================================
 * TEXTAREA
 * ============================================================ */
.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ============================================================
 * ERROR MESSAGE
 * ============================================================ */
.form-error {
  font-size: var(--fs-small);
  color: var(--c-error);
  margin-top: var(--sp-2);
  display: none;
}

.form-field.has-error .form-error {
  display: block;
}

/* ============================================================
 * CHARACTER COUNT
 * ============================================================ */
.form-char-count {
  font-size: var(--fs-small);
  color: var(--c-steel);
  text-align: right;
  margin-top: var(--sp-1);
}

.form-char-count.is-near-limit {
  color: var(--c-copper);
}

.form-char-count.is-over-limit {
  color: var(--c-error);
}

/* ============================================================
 * SUBMIT AREA
 * ============================================================ */
.form-submit-area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* ============================================================
 * INLINE MARKERS
 * ============================================================ */
.form-required {
  color: var(--c-copper);
  font-size: 0.9em;
}

.form-optional {
  color: var(--c-steel);
  font-size: 0.85em;
  font-weight: 400;
}

/* ============================================================
 * PRIVACY NOTICE (also defined in contact.css; kept here for standalone use)
 * ============================================================ */
.form-privacy {
  font-size: var(--fs-small);
  color: var(--c-steel);
  line-height: var(--leading-body);
}

.form-privacy a {
  color: var(--c-copper);
}

/* ============================================================
 * FORM STATUS CONTAINERS
 * Hidden by default; JS removes hidden attr to show.
 * The [hidden] attribute suppressor ensures browser default doesn't fight CSS.
 * ============================================================ */
.form-status[hidden] {
  display: none !important;
}

/* ============================================================
 * FORM STATES (legacy selectors kept for backward compatibility)
 * ============================================================ */
.form-success {
  display: none;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.form-success.is-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.form-success-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-navy);
}

.form-success-divider {
  width: 60px;
  height: 1px;
  background-color: var(--c-copper);
}

.form-fallback-error {
  display: none;
  background-color: var(--c-fog-2);
  border-left: 3px solid var(--c-error);
  padding: var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
}

.form-fallback-error.is-visible {
  display: block;
}

/* Hidden honeypot — visually hidden, not in tabindex */
.form-honeypot {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .form-field::after,
  .form-label,
  .form-input,
  .form-textarea {
    transition: none;
  }
}