/* Extends styles.css + landing.css for the Contact Us page (public/contact.html).
   Reuses the app-header/app-footer chrome rather than a third visual language. */

.contact-page { padding-top: 34px; padding-bottom: 60px; }

.contact-hero { margin-bottom: 28px; text-align: center; }
.contact-hero-logo { height: 360px; width: auto; max-width: 90%; display: block; margin: 0 auto 20px; }
.contact-hero h1 { margin: 0 0 8px; font-size: 1.6rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .contact-hero h1 { color: var(--gold-light); } }
.contact-hero .lede { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

.contact-vision {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}
.contact-vision h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .contact-vision h2 { color: var(--gold-light); } }
.contact-vision p { margin: 0; font-size: 0.95rem; color: var(--text); line-height: 1.5; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.contact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.contact-card.soon { opacity: 0.92; }
.contact-card h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .contact-card h2 { color: var(--gold-light); } }
.contact-card p { margin: 0 0 18px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.contact-cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
  color: #fff;
}

.channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.channel-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.88rem;
}
.channel-list li:first-child { border-top: none; }

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