/* ============================================================
   contact.css  SSP TOURS
   Contact page. Emerald Daylight.
   Hero: template slideshow (template-hero-section.css).
   Shared layout, form card, side panels and trust points come from
   main.css section 33 (inq- classes). This file only styles what is
   unique to the contact page: the direct channel cards, the book
   panel, the route band label and the result / error messages.
   Form ids, names and Bootstrap validation classes are unchanged,
   so contact.js works as before. Only main.css variables are used.
   ============================================================ */

/* ── Direct channel cards ────────────────────────────────── */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-5);
}
.contact-channel {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-5) var(--spacing-7);
  border-radius: var(--radius-3xl);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary), var(--shadow-sm);
  text-align: center;
  transition: var(--transition-elegant);
}
.contact-channel::before {
  content: '';
  position: absolute;
  left: var(--spacing-6); right: var(--spacing-6); top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--sheen-silver);
  box-shadow: inset 0 0 0 1px var(--color-royal);
}
.contact-channel--featured::before { background: var(--sheen-gold); box-shadow: none; }
.contact-channel:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--color-royal), var(--shadow-lg);
}
.contact-channel--featured:hover { box-shadow: 0 0 0 1px var(--border-gold), var(--shadow-lg); }
.contact-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--sheen-emerald);
  color: var(--color-white);
  font-size: var(--text-xl);
  box-shadow: 0 0 0 5px var(--color-white), 0 0 0 6px var(--color-royal-light), var(--shadow-metal);
}
.contact-channel--featured .contact-channel-icon {
  box-shadow: 0 0 0 5px var(--color-white), 0 0 0 6px var(--color-gold-light), var(--shadow-metal);
}
.contact-channel-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.contact-channel-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
a.contact-channel-value:hover { color: var(--color-navy); }
.contact-channel-note { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Form intro sits tight above the result message / card ─ */
.contact-intro { margin-bottom: 0; }
.contact-message-field { min-height: 170px; }
.contact-submit { position: relative; }
.contact-submit .spinner-border { margin: 0 auto; }

/* ── Book-a-tour panel ───────────────────────────────────── */
.contact-book-panel { background: var(--color-gold-bg); box-shadow: 0 0 0 1px var(--border-gold); }
.contact-book-panel p { margin-bottom: var(--spacing-5); }
.contact-book-btn { width: 100%; }

/* ── Route band: light gold label and readable intro ─────── */
.contact-route .route-band { padding: var(--spacing-12) var(--spacing-10); }
.contact-route .route-band .section-label { justify-self: start; padding-left: 0; color: var(--color-gold-light); }
.contact-route .route-band .section-label::before { display: none; }
.contact-route .route-band h2 { font-size: clamp(var(--text-2xl), 3.2vw, var(--text-4xl)); }
.contact-route .route-band p { max-width: 62ch; margin: 0; color: var(--color-white-90); }
.contact-route .route-stop { color: var(--color-white-90); }
.contact-route .route-stop span,
.contact-route .route-stop small { color: var(--color-white-80); }

/* ── Result messages from contact.js (it rewrites the class) ─ */
#contact-message { margin: 0; border-radius: var(--radius-xl); }
#contact-message .alert-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-lg);
  color: inherit;
}
#contact-message p { color: inherit; }

/* ── Error fallback banner ───────────────────────────────── */
.page-error {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: var(--z-index-max);
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-error);
  color: var(--color-white);
  text-align: center;
}
.page-error[hidden] { display: none; }
.page-error p { margin: 0; color: var(--color-white); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .contact-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .contact-route .route-band { padding: var(--spacing-8) var(--spacing-6); }
}
@media (max-width: 560px) {
  .contact-channels { grid-template-columns: 1fr; }
}