/* ============================================================
   NPF Core — contact form, in the New Home design language.

   Tokens are the ones the redesign uses (assets/css/npf-home.css):
   primary #4f84c3, Plus Jakarta Sans for headings and Inter for
   body, 20px card radius, 16px button radius. No elevation: the
   form is drawn with borders only. They are redeclared locally
   rather than inherited, because
   npf-home.css is scoped to `body.npf-home .npf-main` and this
   form renders on an ordinary theme page.

   Everything is scoped under .npf-contact so it cannot reach the
   theme's own forms, header or footer.
   ============================================================ */

.npf-contact {
  --npf-c-primary: #4f84c3;
  --npf-c-primary-dark: #3e6ea6;
  --npf-c-primary-soft: #e1eeff;
  --npf-c-ink: #020b18;
  --npf-c-text: #4c5563;
  --npf-c-soft: #616e84;
  --npf-c-line: #e4e7e9;
  --npf-c-line-soft: #eef1f6;
  --npf-c-bed: #f9fbff;
  --npf-c-radius: 20px;
  --npf-c-radius-sm: 10px;
  --npf-c-radius-btn: 16px;
  --npf-c-font-head: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
  --npf-c-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-c-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  max-width: 760px;
  margin-inline: auto;
  font-family: var(--npf-c-font-body);
  color: var(--npf-c-text);
  font-size: 16px;
  line-height: 1.6;
}

.npf-contact *,
.npf-contact *::before,
.npf-contact *::after { box-sizing: border-box; }

.npf-contact__title {
  margin: 0 0 8px;
  font-family: var(--npf-c-font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.25;
  letter-spacing: -1.4px;
  color: var(--npf-c-ink);
}

.npf-contact__lead {
  margin: 0 0 28px;
  max-width: 52ch;
  color: var(--npf-c-soft);
  font-size: 1.02rem;
}

/* ---------- Notices ---------- */

.npf-contact__notice {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--npf-c-radius-sm);
  font-size: 0.97rem;
  line-height: 1.55;
}
.npf-contact__notice.is-ok {
  background: #ecf7f1;
  border: 1px solid #bfe3d0;
  color: #12673c;
}
.npf-contact__notice.is-bad {
  background: #fdeef1;
  border: 1px solid #f6c6ce;
  color: #a11d33;
}

/* ---------- The card ---------- */

.npf-contact__form {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--npf-c-line-soft);
  border-radius: var(--npf-c-radius);
}

.npf-contact__row {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .npf-contact__row { grid-template-columns: 1fr; }
}

.npf-contact__field { display: grid; gap: 9px; }

.npf-contact__field > span {
  font-family: var(--npf-c-font-head);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--npf-c-ink);
}
.npf-contact__field > span b { color: #d1344b; font-weight: 600; }

/* Inputs. `!important` on nothing — the theme's form rules are weaker than
   these two-class selectors, and the reset above keeps padding predictable. */
.npf-contact input[type="text"],
.npf-contact input[type="email"],
.npf-contact textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--npf-c-line);
  border-radius: var(--npf-c-radius-sm);
  background: var(--npf-c-bed);
  font-family: var(--npf-c-font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--npf-c-ink);
  box-shadow: none;
  transition: border-color 0.25s var(--npf-c-ease),
              background 0.25s var(--npf-c-ease);
}

.npf-contact input[type="text"],
.npf-contact input[type="email"] { height: 52px; }

.npf-contact textarea {
  min-height: 168px;
  resize: vertical;
}

.npf-contact input::placeholder,
.npf-contact textarea::placeholder { color: #8a94a3; }

.npf-contact input:hover,
.npf-contact textarea:hover { border-color: #cfd8e3; }

/* Focus is drawn with an outline, not a shadow — same visible ring, and it
   survives the "no box-shadow" rule the rest of this form follows. */
.npf-contact input:focus,
.npf-contact textarea:focus {
  background: #fff;
  border-color: var(--npf-c-primary);
  outline: 2px solid rgba(79, 132, 195, 0.55);
  outline-offset: 1px;
}

/* ---------- Submit ---------- */

/* Copied field-for-field from the design's own `.btn`
   (npf-home.css: Inter 600, 16/28, 12px 18px, --radius-btn 16px, and a
   translateY on hover with no resting elevation). Nothing invented here — the
   earlier version used the heading font at 700 with 34px padding, which is why
   it read as a different button from the ones on the Home page. */
.npf-contact__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--npf-c-radius-btn);
  background: var(--npf-c-primary);
  color: #fff;
  font-family: var(--npf-c-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.25s var(--npf-c-ease),
              transform 0.25s var(--npf-c-ease);
}
.npf-contact__submit:hover {
  background: var(--npf-c-primary-dark);
  transform: translateY(-3px);
  box-shadow: none;
}
.npf-contact__submit:active { transform: translateY(0); }
.npf-contact__submit:focus-visible {
  outline: 3px solid rgba(79, 132, 195, 0.45);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .npf-contact__submit { justify-self: stretch; text-align: center; }
}

/* The honeypot. Moved off-screen rather than hidden with display:none,
   because the bots worth catching skip fields that are display:none. */
.npf-contact__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}