/* Contact page only */

/* Keep spacing consistent with your theme pages */
.contact-form-wrap{
  padding: 14px;
}

/* Flash messages (sent / error) */
.contact-alert{
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  font-size: 13px;
  color: var(--muted);
}

.contact-alert.is-success{
  border-color: rgba(22,163,74,0.25);
  background: rgba(22,163,74,0.06);
  color: #14532d;
}

.contact-alert.is-error{
  border-color: rgba(185,28,28,0.25);
  background: rgba(185,28,28,0.06);
  color: #7f1d1d;
}

/* Form layout */
.contact-form{
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

/* Label helpers: you already use skip-link visually hidden styles in global */
.contact-form label{
  font-size: 12px;
  color: var(--muted);
}

/* Inputs match your header search input style */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
}

/* Make textarea feel nicer */
.contact-textarea{
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* Focus state consistent with your theme */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{
  outline: 3px solid rgba(22, 163, 74, 0.35);
  outline-offset: 2px;
}

/* Submit button styled like your other buttons */
.contact-submit{
  justify-self: start;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.05);
}

.contact-submit:hover{
  border-color: rgba(11, 61, 145, 0.35);
}

/* Small helper text under form */
.contact-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Mobile spacing */
@media (max-width: 900px){
  .contact-form{ gap: 10px; }
}