/* ─────────────────────────────────────────────────────────────────────
   contact.css — Contact section, form fields, and social links
───────────────────────────────────────────────────────────────────── */

.contact { padding-block: 6rem; }

.contact__sub {
  color:         var(--text-muted);
  margin-top:    -1.5rem;
  margin-bottom: 2rem;
}

.contact__form {
  max-width:      640px;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     1.25rem;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

label {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--text-muted);
}

input, textarea {
  background:    var(--bg-card);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text);
  font-family:   var(--font-sans);
  font-size:     0.95rem;
  padding:       0.7rem 1rem;
  outline:       none;
  resize:        vertical;
  transition:    border-color var(--t);
}
input:focus,
textarea:focus { border-color: var(--accent); }

input::placeholder,
textarea::placeholder { color: var(--text-muted); opacity: 0.55; }

.contact__socials {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  margin-top: 3rem;
}

.social-link {
  color:          var(--text-muted);
  font-size:      0.88rem;
  border-bottom:  1px solid var(--border);
  padding-bottom: 2px;
  transition:     color var(--t), border-color var(--t);
}
.social-link:hover {
  color:           var(--accent);
  border-color:    var(--accent);
  text-decoration: none;
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact    { padding-block: 4rem; }
  .form-row   { grid-template-columns: 1fr; }
}