/* ===================================
   Contact Page Styles
   css/contact.css
   =================================== */

:root {
  --contact-primary: var(--brand-primary);
  --contact-secondary: var(--brand-secondary);
  --contact-accent: var(--brand-accent);
  --contact-bg: var(--bg-secondary);
  --contact-card-bg: rgba(255, 255, 240, 0.96);
  --contact-text: var(--text-primary);
  --contact-muted: var(--text-secondary);
  --contact-gradient: linear-gradient(135deg, rgba(253, 248, 241, 1) 0%, rgba(240, 235, 227, 1) 100%);
  --contact-shadow: var(--shadow-md);
}

/* Hero */
.contact-hero {
  min-height: 60vh;
  background: var(--contact-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 96px; /* navbar offset */
  position: relative;
  overflow: hidden;
}

.contact-hero__content { max-width: 900px; margin: 0 auto; }

.contact-hero__badge {
  display: inline-block;
  background: var(--gradient-brand);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: var(--shadow-colored);
  margin-bottom: 1rem;
}

.contact-hero__title {
  margin-bottom: 0.75rem;
}

.contact-hero__subtitle {
  color: var(--contact-muted);
}

/* Layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 2rem;
}

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

.contact-side { display: flex; flex-direction: column; gap: 1.5rem; }

.contact-card {
  background: var(--contact-card-bg);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--contact-shadow);
  border: 1px solid rgba(31, 61, 84, 0.12);
}

.contact-card__title { font-size: 1.125rem; margin-bottom: 0.75rem; }
.contact-card__text { color: var(--contact-muted); margin-bottom: 1rem; }

.contact-methods { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-method { display: flex; align-items: center; gap: 0.75rem; }
.contact-method__icon { font-size: 1.25rem; }
.contact-method__label { font-weight: 600; }
.contact-method__link { color: var(--contact-primary); text-decoration: none; }
.contact-method__link:hover { text-decoration: underline; }

.contact-faq { list-style: disc; padding-left: 1.25rem; color: var(--contact-muted); display: grid; gap: 0.5rem; }

/* Form */
.contact-form {
  background: var(--contact-card-bg);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--contact-shadow);
  border: 1px solid rgba(31, 61, 84, 0.12);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }

.form-group { display: grid; gap: 0.5rem; }
.form-group label { font-weight: 600; }
.required { color: var(--warning); font-weight: 700; }

.input, .select, .textarea {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  color: var(--contact-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--contact-primary);
  box-shadow: 0 0 0 3px rgba(31, 61, 84, 0.22);
}

.input--error, .select--error, .textarea--error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field-meta { display: flex; justify-content: flex-end; }
.char-count { color: var(--contact-muted); font-size: 0.85rem; }

.field-error { color: var(--error); font-size: 0.9rem; min-height: 1.25em; }

.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

.form-note { color: var(--contact-muted); font-size: 0.9rem; margin-top: 0.75rem; }

.form-status { margin-top: 0.75rem; font-weight: 600; color: var(--success); }

/* CTA tweaks */
.contact-cta .cta-content { text-align: center; }