/* Ensure padding doesn't break mobile widths */
.contact-form,
.contact-form * {
  box-sizing: border-box;
}

/* Contact form layout */
.contact-form {
  max-width: 600px;
  width: 100%;
  margin: 1.5rem auto 2.5rem;
  padding: 1rem;
}

.contact-form .field {
  margin-bottom: 1rem;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  text-align: left; /* force left alignment */
}

.contact-form .req {
  color: #c00;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.85rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #111;
}

.contact-form textarea {
  resize: vertical;
}

/* Focus styles for accessibility */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Button styled to match your brand */
.contact-form .btn {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 0.85rem 1.2rem;
  background: #000;          /* black (matches hamburger) */
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.contact-form .btn:hover {
  filter: brightness(1.1);
}

/* Small note under the button */
.contact-form .form-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #555;
}

/* Honeypot hidden but present for bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Mobile niceties */
@media (max-width: 480px) {
  .contact-form {
    padding: 0.5rem;
  }
}

.contact-form a {
  color: #fff;
  text-decoration: underline;
}

.contact-form a:hover,
.contact-form a:focus {
  color: #f8f8f8;
  text-decoration-thickness: 2px;
}

/* Ensure status message area is styled */
#formStatus.form-status {
  margin-top: 1rem;
  font-weight: 600;
}
#formStatus.success { color: #0a7a27; }  /* green */
#formStatus.error   { color: #b00020; }  /* red */

/* Disabled button state */
.contact-form .btn[disabled] {
  opacity: .7;
  cursor: progress;
}

/* Hide both honeypots but keep them in DOM for bots */
#contact-form .cf-hp,
#contact-form .hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}