/* ==========================================================================
   IMMERSION — contact
   Same shape as loglineit.com's contact page, in this theme's vocabulary.
   ========================================================================== */

.imm-contact { max-width: var(--imm-prose-max); }

.imm-contact__panel {
  margin-top: var(--imm-s-9);
  padding: var(--imm-s-9);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-field { margin: 0 0 var(--imm-s-6); }

.imm-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--imm-muted);
}

.imm-field__optional {
  margin-left: var(--imm-s-2);
  font-weight: 400;
  color: var(--imm-faint);
}

.imm-field input[type="text"],
.imm-field input[type="email"],
.imm-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line-2);
  border-radius: var(--imm-r-input);
  font-family: var(--imm-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--imm-text);
}

.imm-field textarea { resize: vertical; min-height: 150px; }

.imm-field input:focus,
.imm-field textarea:focus {
  border-color: var(--imm-link);
  outline: 2px solid var(--imm-teal);
  outline-offset: 1px;
}

/* The honeypot. Not display:none — some bots skip hidden fields, and a few
   screen readers would announce it. Moved out of sight and out of the tab
   order, with aria-hidden on the wrapper. */
.imm-field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.imm-contact__actions { margin: 0; }

.imm-contact__note {
  margin: var(--imm-s-6) 0 0;
  font-size: 14px;
  color: var(--imm-faint);
}

.imm-contact__note a { color: var(--imm-link); }

/* --- Outcome notices ------------------------------------------------------- */

.imm-note {
  margin: 0 0 var(--imm-s-7);
  padding: var(--imm-s-5) var(--imm-s-6);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--imm-r-card);
}

.imm-note--good {
  background: var(--imm-teal-wash);
  border-color: var(--imm-teal-wash-line);
  border-left-color: var(--imm-link);
}

.imm-note--bad {
  background: var(--imm-red-wash);
  border-color: var(--imm-red-wash-line);
  border-left-color: var(--imm-red);
}

.imm-note__title {
  margin: 0 0 var(--imm-s-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--imm-text);
}

.imm-note__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--imm-body);
}

@media (max-width: 700px) {
  .imm-contact__panel { padding: var(--imm-s-6); }
}