/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE — contact.html
   Requires: theme.css, components.css, pages/legal.css
───────────────────────────────────────────────────────────── */

/* ── Form layout ────────────────────────────────────────── */
.contact-form {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.contact-field {
  margin-bottom: 1.25rem;
}

.contact-label {
  display: block;
  font-family: var(--mono);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 0.4rem;
}

.contact-label .required {
  color: var(--orange);
}

.contact-label .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--dust-dim);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

/* ── Inputs ─────────────────────────────────────────────── */
.contact-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  color: var(--parchment);
  background: var(--navy);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.contact-input::placeholder {
  color: var(--dust-dim);
}

.contact-input:focus {
  border-color: var(--orange);
}

.contact-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* ── SMS Consent Block ──────────────────────────────────── */
.sms-consent-block {
  background: var(--navy);
  border: 1px solid var(--slate);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.sms-consent-text {
  font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
  color: var(--dust) !important;
  line-height: 1.65;
  margin-bottom: 0 !important;
}

.sms-consent-text a {
  color: var(--orange);
  text-decoration: none;
}

.sms-consent-text a:hover {
  text-decoration: underline;
}

/* ── Submit Button ──────────────────────────────────────── */
.contact-submit-btn {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  font-family: var(--mono);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: var(--orange);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.contact-submit-btn:hover {
  background: var(--orange-dim);
}

.contact-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Feedback ───────────────────────────────────────────── */
.contact-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: 500;
}

.contact-feedback-success {
  background: rgba(76, 175, 125, 0.12);
  border: 1px solid var(--correct);
  color: var(--correct);
}

.contact-feedback-error {
  background: rgba(224, 85, 85, 0.12);
  border: 1px solid var(--wrong);
  color: var(--wrong);
}

/* ── Alt Contact ────────────────────────────────────────── */
.contact-alt {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--slate);
}