#form {
  margin-top: 2em;
}

/* ================================================
   iPad (≤1024px)
   ================================================ */
@media screen and (max-width: 1024px) {
  #form {
    margin-top: 1em;
  }
}

/* ================================================
   Tablet (≤768px)
   ================================================ */
@media screen and (max-width: 768px) {
  #form {
    margin-top: 0em;
  }

  #form form {
    margin-top: 0 !important;
  }

  #buttondown-form form {
    margin-top: 1em !important;
  }
}

/* ================================================
   Mobile (≤576px)
   ================================================ */
@media screen and (max-width: 576px) {
  #note,
  #form,
  #buttondown,
  #buttondown-form {
    padding: 0 0.5em !important;
  }

  #form {
    margin-top: 0;
  }

  #form form {
    margin-top: 0 !important;
  }

  #buttondown-form form {
    margin-top: 1em !important;
  }

  #note h1,
  #buttondown h1 {
    font-size: 1.4em;
  }

  .form-control {
    font-size: 0.95em;
  }

  .btn {
    width: 100%;
  }
}

/* ================================================
   Dark Mode Contact Overrides
   ================================================ */
body.quarto-dark .form-control,
body.quarto-dark .form-select {
  background-color: #1A1A2E !important; /* spc-bg-1 */
  color: #F5F5F7 !important;            /* light text */
  border: 1px solid rgba(230, 81, 0, 0.5) !important; /* subtle secondary orange */
}

body.quarto-dark .form-control::placeholder {
  color: #9DA3AA !important; 
}

/* Ensure "(Optional)" text is legible */
body.quarto-dark .text-muted {
  color: #9DA3AA !important; 
}

/* Ensure success message has high contrast */
body.quarto-dark .alert-success {
  background-color: #0f3f26 !important; /* deep green */
  color: #d4edda !important;            /* light green text */
  border: 1px solid #1a6f44 !important;
}

body.quarto-dark .alert-heading {
  color: #ffffff !important;
}