/**
 * Velonix Labs — Contact (page-specific)
 * Enqueued only on the Contact page template (see inc/enqueue.php).
 *
 * .contact-card is the shared shell used for all three cards on this
 * page (Before Contacting Us / Contact Form / Contact Information) —
 * same recipe already established for this kind of prominent, singular
 * panel elsewhere in the theme (background:var(--surface),
 * border:var(--line), border-radius:var(--radius-lg) — the token
 * itself documented sitewide as "large feature panels only"). This is
 * a NEW page-scoped class, not a cross-reference into
 * page-tracking.css's .tracking-card: that stylesheet is only enqueued
 * on the Order Tracking template, so its classes carry no styling
 * anywhere else — reusing the class NAME across pages without the
 * stylesheet loaded would silently produce unstyled content (exactly
 * the bug already diagnosed and fixed once this project). Reusing the
 * same VALUES under this page's own class is the same approach
 * page-tracking.css itself took when it first borrowed .trust-card's
 * background/border language rather than becoming .trust-card.
 *
 * .contact-notice reuses var(--accent-tint) + the same
 * rgba(91,132,224,0.3) border already used for .tracking-badge — the
 * same "highlighted" colour language, just applied to a full-width
 * paragraph instead of a small pill.
 *
 * .field-label / .field-input / .btn / .prose are NOT redefined here —
 * shared components from components.css, reused as-is.
 */

.contact-card{
  max-width:600px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:44px;
}
.contact-card + .contact-card{ margin-top:32px; }
.contact-card h2{ margin-bottom:12px; }
.contact-card > p.prose{ margin-bottom:0; }

.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.contact-actions .btn{ flex:1 1 auto; }

.contact-notice{
  background:var(--accent-tint);
  border:1px solid rgba(91,132,224,0.3);
  border-radius:var(--radius);
  padding:16px 20px;
  font-size:var(--text-body-sm);
  color:var(--ink-soft);
  line-height:1.7;
}

.contact-field{ margin-bottom:24px; }
.contact-field:last-of-type{ margin-bottom:0; }
.contact-field textarea.field-input{ resize:vertical; min-height:120px; font-family:'Inter',sans-serif; }

.contact-submit{ margin-top:36px; }
.contact-submit .btn{ width:100%; }

.contact-info-row{ padding:20px 0; border-bottom:1px solid var(--line); }
.contact-info-row:first-child{ padding-top:0; }
.contact-info-row:last-child{ border-bottom:none; padding-bottom:0; }
.contact-info-row .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:8px; }
.contact-info-row .value{ font-size:15px; color:var(--ink); line-height:1.6; }
.contact-info-row .value a{ color:var(--accent); }
.contact-info-row .note{ font-size:13px; color:var(--ink-faint); margin-top:8px; line-height:1.6; }

@media (max-width: 700px){
  .contact-card{ padding:28px 24px; }
  .contact-actions{ flex-direction:column; }
}