/* Layout */
.contact {
  max-width: 1100px;
  margin: 3rem auto 5rem;
}

.contact-header {
  margin: 1rem 0 2rem;
  text-align: left;
}

.contact-header h1 {
  font-size: 2.2rem;
  letter-spacing: .5px;
}

.contact-header p {
  margin-top: .4rem;
  color: var(--contrasting-colorful);
}

/* Inline feedback banner (used by JS) */
.notice {
  margin-top: .75rem;
  padding: .75rem .9rem;
  border-radius: .75rem;
  background: color-mix(in oklab, var(--surface-color) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-color) 10%, transparent);
}

/* Success uses the new --confirmation color */
.notice--success {
  background: color-mix(in oklab, var(--confirmation) 12%, var(--surface-color));
  border-color: color-mix(in oklab, var(--confirmation) 40%, transparent);
  color: color-mix(in oklab, var(--confirmation) 70%, var(--text-color));
}

.notice--error {
  background: color-mix(in oklab, #dc3545 12%, var(--surface-color));
  border-color: color-mix(in oklab, #dc3545 40%, transparent);
  color: color-mix(in oklab, #dc3545 75%, var(--text-color));
}

/* Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.5rem;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.card {
  background: var(--accent-bg-color);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 6px 18px var(--shadow-color);
  border: 1px solid color-mix(in oklab, var(--text-color) 12%, transparent);
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}

.disclaimer {
  margin-top: 0.2rem;
  font-size: .7rem;
}

label {
  font-weight: 600;
}

/* Inputs, including email */
input[type="text"],
input[type="email"],
select,
textarea {
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid color-mix(in oklab, var(--text-color) 10%, transparent);
  border-radius: .75rem;
  padding: .8rem .9rem;
  outline: none;
  font: inherit;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--text-color) 55%, transparent);
}

textarea {
  resize: vertical;
  min-height: 140px;
  max-height: 50vh;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in oklab, var(--colorful) 55%, var(--text-color));
  box-shadow: 0 0 0 .18rem color-mix(in oklab, var(--colorful) 20%, transparent);
}

/* Soft invalid hint that pairs with notice */
input:required:invalid,
textarea:required:invalid,
select:required:invalid {
  border-color: color-mix(in oklab, #dc3545 45%, transparent);
}

/* Meta row */
.meta {
  margin-top: .25rem;
  display: flex;
  justify-content: flex-end;
  color: color-mix(in oklab, var(--text-color) 65%, transparent);
  font-size: .85rem;
}

/* Actions */
.actions {
  display: flex;
  align-items: center;
  margin-top: .5rem;
}

button#send-btn {
  background: var(--colorful);
  color: #fff;
  border: none;
  padding: .8rem 1.1rem;
  border-radius: .75rem;
  cursor: pointer;
  font-weight: 650;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--colorful) 25%, transparent);
  transition: transform .12s ease, opacity .12s ease;
}

button#send-btn[aria-busy="true"] {
  opacity: .8;
  cursor: wait;
}

button#send-btn:active {
  transform: translateY(1px);
}

/* Info card */
.info h2 {
  margin-bottom: .6rem;
}

.info ul {
  list-style: none;
  margin: .25rem 0 1rem;
  padding: 0;
}

.info li {
  margin: .4rem 0;
}

.tip {
  color: color-mix(in oklab, var(--text-color) 70%, transparent);
  font-size: .95rem;
}