/* ==========================================================================
   PAGES/CONTACT.CSS
   Contact page only (contact.php).
   ========================================================================== */

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.np-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Porter steps: 4 squeezed columns overflowed phones (528px wide document at 360px) */
@media (max-width: 991px) {
  .np-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .np-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Operational Status Pill (Contact Page) */
.np-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #E7E0D5;
  border: 1px solid #D4C9BA;
  border-radius: 3px;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #2E2A4A;
  margin-top: 14px;
}

.np-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #2E8B57;
  display: inline-block;
  flex-shrink: 0;
}

.np-status-dot.closed {
  background-color: #8C8476;
}

/* Contact Inquiry Form */
.np-form-card {
  background-color: #F8F5F0;
  border: 1px solid #D8CFBF;
  border-radius: 4px;
  padding: 32px;
}

.np-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax: long <select> options must not widen the form */
  gap: 20px;
  margin-bottom: 18px;
}

.np-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.np-form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #2E2A4A;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.np-form-input,
.np-form-select,
.np-form-textarea {
  background-color: #EDE8DF;
  border: 1px solid #D2C7B8;
  border-radius: 3px;
  padding: 11px 14px;
  /* font-family: 'Plus Jakarta Sans', sans-serif; */
  font-size: 14px;
  color: #2E2A4A;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.np-form-input:focus,
.np-form-select:focus,
.np-form-textarea:focus {
  border-color: var(--coral);
  background-color: #F4EFEB;
}

.np-form-input::placeholder,
.np-form-textarea::placeholder {
  color: #8C8476;
}

.np-form-textarea {
  min-height: 120px;
  resize: vertical;
}

.np-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--coral);
  color: #FFFFFF;
  border: 1px solid var(--coral);
  border-radius: 3px;
  padding: 13px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.np-form-submit:hover {
  background-color: #E87A57;
  border-color: #E87A57;
}

.np-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.np-form-status {
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 13.5px;
  margin-top: 14px;
  display: none;
}

.np-form-status.success {
  background-color: #E4ECE3;
  border: 1px solid #C4D6C2;
  color: #245722;
  display: block;
}

.np-form-status.error {
  background-color: #F4E4E2;
  border: 1px solid #E6C8C5;
  color: #822722;
  display: block;
}

@media (max-width: 991px) {
  .np-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .np-form-card {
    padding: 20px;
  }
}

/* Porter step titles: <h3> for a correct heading outline, styled exactly as the
   original <h4> (global h1–h3 rule would otherwise switch them to Sora 700) */
.np-card-title--plain {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

/* Privacy notice above the submit button */
.np-form-privacy {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.np-form-privacy a {
  color: var(--ink);
  font-weight: 600;
}