/* contact.css 20260908 (C) Niamh Shaw */

.contact-container {
  --lightgrey: #f5f5f5;
  --frame-color: #999;
  --color-pink: #edadd2;

  width: 50%;
  max-width: 500px;
  margin: 4vh auto 0;
}

.contact-form *,
.contact-form *::before,
.contact-form *::after {
  box-sizing: border-box;
}

.contact-form label {
  display: block;
  margin: 12px 0 2px;
  font-size: 1.0rem;
  font-weight: 700;
  cursor: pointer;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 6px;
  font: inherit;
  background-color: var(--lightgrey);
  color: #222;
  border: 2px solid var(--frame-color);
  border-radius: 8px;
}

.contact-form button {
  display: block;
  margin: 16px auto 0;
  padding: 10px 22px;
  font: inherit;
  cursor: pointer;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid var(--color-pink);
  outline-offset: 2px;
  background-color: #fff;
}

.contact-form input:required:invalid:not(:placeholder-shown) {
  border-color: var(--color-pink);
}

.contact-alert {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
}

.contact-alert.visible {
  display: block;
}

.contact-alert.success {
  background: #69cf9d;
}

.contact-alert.error {
  background: #de524c;
}

@media (max-width: 600px) {
  .contact-container {
    width: calc(100% - 32px);
  }
}