/* ==========================================================================
   Openn™ — contact page additions (layers on styles.css)
   ========================================================================== */

/* clearance under the fixed nav before the marquee heading */
.contact-hero__pad {
  padding-top: 11rem;
}

/* success state (replaces the form after submit) */
.form-success[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 20rem;
  padding: 2rem;
  text-align: center;
}

.form-success__title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  color: #101010;
}

.form-success__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-300);
}

/* invalid required field: hairline accent, no shadows */
.form-field.is-invalid {
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}

.form-field.is-invalid::placeholder {
  color: var(--accent);
}

/* inline field error — only occupies space once it is shown */
.form-error {
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}

.form-error[hidden] {
  display: none;
}

/* honeypot: present for a bot, gone for everyone else */
.btn-dark[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* send failed — hand over the email address rather than swallow the message */
.form-fail {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.form-fail[hidden] {
  display: none;
}

.form-fail a {
  color: inherit;
}

/* the standing note under the form: quieter than an error, same gutter */
.form-note {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--grey-400);
}

/* keep the four info blocks tidy on mid widths */
.contact-info {
  min-width: 12rem;
}

@media (max-width: 767px) {
  .contact-hero__pad {
    padding-top: 8rem;
  }

  .contact-infos {
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-actions {
    gap: 1.5rem;
    padding: 1.5rem 1.25rem 2rem;
  }

  .btn-dark {
    width: 100%;
    min-height: 3.25rem;
  }

  .form-fail {
    padding: 0 1.25rem 1.5rem;
  }
}