/* ==========================================================
   Nalapad Group – Forms (component)
   Used by the Careers and Contact pages.
   Loaded automatically by the <x-form> component.
   ========================================================== */

/* White card the form sits in */
.fm__card {
  background: var(--color-white);
  padding: clamp(28px, 4vw, 52px);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 24px 48px -32px rgba(14, 34, 56, .35);
}

/* Success / error message above the form */
.fm__alert { margin: 0 0 24px; padding: 14px 18px; font-size: 15px; line-height: 1.5; border-inline-start: 3px solid; }
.fm__alert--ok { background: #ECF6EF; border-color: #2E7D4F; color: #1E5134; }
.fm__alert--err { background: #FDF0EF; border-color: var(--color-error); color: #7A1A12; }

/* Two-column grid of fields */
.fm__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.fm__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fm__field--full { grid-column: 1 / -1; }
.fm__field > label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); }

/* ---------------- Text inputs ---------------- */
.fm__field input,
.fm__field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fm__field textarea { min-height: 160px; padding: 14px 16px; line-height: 1.6; resize: vertical; }

.fm__field input:hover,
.fm__field textarea:hover { border-color: #AEB8C4; }
.fm__field input:focus,
.fm__field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint); }

.fm__field [aria-invalid="true"] { border-color: var(--color-error); }
.fm__error { margin: 0; font-size: 13px; color: var(--color-error); }

/* ---------------- File upload (same height as the other inputs) ---------------- */
.fm__file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--color-primary);
  background: var(--color-soft);
  border: 1px dashed #B9C4D2;
  transition: background .2s ease, border-color .2s ease;
}
/* The real input covers the whole box, so clicking and dropping both work */
.fm__file input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.fm__file:hover,
.fm__file.is-dragover { background: var(--color-tint); border-color: var(--color-primary); }
.fm__file:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint); }
.fm__file.is-filled { border-style: solid; border-color: var(--color-primary); background: var(--color-white); }
.fm__file.is-invalid { border-color: var(--color-error); }
.fm__file-text { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Submit ---------------- */
.fm__actions { grid-column: 1 / -1; display: flex; margin-top: 8px; }
.fm__actions--center { justify-content: center; }
.fm__submit {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 40px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease;
}
.fm__submit:hover { background: var(--color-ink); }
.fm__submit:focus-visible { outline-color: var(--color-primary); }

/* Spam trap, kept off-screen */
.fm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- Phone ---------------- */
@media (max-width: 600px) {
  .fm__form { grid-template-columns: 1fr; }
  .fm__submit { width: 100%; justify-content: center; }
}