/* ════════════════════════════════════════════════════════════
   SHARED CONTACT FORM COMPONENT
   Used by index.html (hero + footer forms) AND every article page.
   This is the SINGLE source of truth — edit only here.
   ════════════════════════════════════════════════════════════ */

.contact-form-card {
  position: relative; z-index: 2;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 24px rgba(35,25,24,0.08);
  padding: 32px;
  width: 100%; max-width: 530px;
  flex-shrink: 0;
  transition: height 0.4s ease;
  overflow: hidden;
}
.form-inputs,
form.form-inputs { display: flex; flex-direction: column; gap: 16px; }
.form-inputs input,
.form-inputs textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(67,61,25,0.28);
  border-radius: 8px;
  padding: 17px;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  resize: none;
}
.form-inputs input::placeholder,
.form-inputs textarea::placeholder { color: rgba(40,29,26,0.78); }
.form-inputs input:focus,
.form-inputs textarea:focus { border-color: var(--accent); box-shadow: 0 2px 12px rgba(235, 39, 14, 0.12); transform: translateY(-1px); }
.form-inputs textarea { height: 114px; align-items: flex-start; }

.btn-red {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 16px;
  font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 20px;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: background .2s, transform .1s;
  text-decoration: none;
}
.btn-red:hover { background: #c8200c; }
.btn-red:active { transform: scale(.98); }

.form-note {
  font-family: 'Roboto', sans-serif; font-size: 17px;
  color: rgba(40,29,26,0.78); text-align: center; line-height: 21px;
}
.form-divider {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0;
}
.form-divider-line { flex: 1; height: 1px; background: var(--divider); }
.form-divider-text {
  font-family: 'Roboto', sans-serif; font-size: 17px;
  color: rgba(40,29,26,0.4); white-space: nowrap; line-height: 18px;
}
.social-icons {
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.social-icons a {
  display: block; width: 56px; height: 56px;
  border-radius: 50%; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.social-icons a:hover { transform: scale(1.15) translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.14); }
.social-icons img { width: 100%; height: 100%; }