/* ==========================================================================
   DREAM 111 - CONTACT PAGE
   Loads after the design system and site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HEAD  (shared shape with the about page)
   -------------------------------------------------------------------------- */

.pagehead {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
  background-image: var(--grad-spotlight);
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.pagehead__title { max-width: 18ch; margin-top: var(--s-4); }
.pagehead__title em { font-style: italic; color: var(--fg-gold); }
.pagehead__lead { margin-top: var(--s-5); }

.crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  margin-bottom: var(--s-5);
}
.crumb a { color: var(--fg-subtle); text-decoration: none; }
.crumb a:hover { color: var(--fg-gold); }

/* --------------------------------------------------------------------------
   CONTACT CHANNELS
   -------------------------------------------------------------------------- */

.channels { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .channels { grid-template-columns: repeat(2, 1fr); } }

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-7);
  background: var(--bg-surface);
  background-image: var(--grad-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  transition: var(--t-colors), var(--t-transform);
}
.channel:hover { transform: translateY(-4px); border-color: var(--border-gold); }

/* The WhatsApp route is the one we actually want people to take. */
.channel--primary {
  border-color: var(--border-gold-strong);
  box-shadow: var(--glow-gold), var(--elev-3);
}

.channel__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.channel__label h2 {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-normal);
}
.channel__num {
  font-family: var(--font-numeric);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--fg-gold);
  text-decoration: none;
  display: inline-block;
}
.channel__num:hover { color: var(--c-gold-200); }
.channel__note { font-size: var(--fs-body-sm); color: var(--fg-muted); }
.channel .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   MESSAGE BUILDER
   Composes a WhatsApp message rather than pretending to be a contact form
   that posts somewhere. Nothing is submitted and nothing is stored.
   -------------------------------------------------------------------------- */

.composer { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 940px) { .composer { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.composer__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
}
.section--alt .composer__form  { background-color: var(--c-obsidian-850); }
.section--band .composer__form { background-color: var(--c-obsidian-800); }

.composer__preview {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-inset);
  border: var(--bw-hairline) solid var(--border-default);
  border-left: var(--bw-thick) solid var(--brand);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   HOURS & EXPECTATIONS
   -------------------------------------------------------------------------- */

.hours { display: flex; flex-direction: column; }
.hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt { font-size: var(--fs-body-sm); color: var(--fg-default); font-weight: var(--fw-semibold); }
.hours dd {
  margin: 0;
  font-family: var(--font-numeric);
  font-size: var(--fs-caption);
  color: var(--fg-gold);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SAFETY CALLOUT
   -------------------------------------------------------------------------- */

.verify {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7);
  border: var(--bw-hairline) solid var(--border-gold);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 240px at 12% 0%, var(--a-gold-16), transparent 70%),
    var(--bg-surface);
}
.verify__body { flex: 1 1 340px; }
.verify__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.verify__nums span {
  font-family: var(--font-numeric);
  font-size: var(--fs-body-sm);
  padding: var(--s-2) var(--s-4);
  border: var(--bw-hairline) solid var(--border-gold-strong);
  border-radius: var(--r-pill);
  color: var(--fg-gold);
  white-space: nowrap;
}