/* ============================================================
   TITAN CAPITAL - CONTACT PAGE
   Page-specific styles. The channel cards (.tc-*) come from
   /css/contact-section.css (shared with the homepage widget);
   the callback band reuses .talk from /css/home.css.
   ============================================================ */

/* ---------- Hero call / WhatsApp dropdowns ---------- */
/* Native <details> disclosure: keyboard-accessible with no JS dependency.
   The little JS that ships with the page only handles outside-click,
   Escape and "one menu at a time". */
.hero-menu { position: relative; }
.hero-menu > summary {
  list-style: none;
  cursor: pointer;
}
.hero-menu > summary::-webkit-details-marker { display: none; }
.hero-menu > summary::marker { content: ""; }
.hero-menu .btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.hero-menu[open] .btn svg { transform: rotate(180deg); }
.hero-menu__pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  min-width: 13.5rem;
  display: grid;
  gap: 2px;
  padding: 0.35rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(31, 35, 41, 0.16);
}
.hero-menu__pop a {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.hero-menu__pop a:hover {
  background: var(--color-light);
  text-decoration: none;
}
/* The hero clips its decorative overlay (overflow: hidden), which would also
   clip an open menu near the band's bottom edge — release the clip only while
   a menu is open. .hero::before is inset: 0, so nothing else spills. */
.hero:has(.hero-menu[open]) { overflow: visible; }

/* ---------- Hero quick actions ---------- */
/* Sits under .hero__copy (which has margin-bottom: 0), so it owns
   its own top spacing. Chips wrap on narrow screens. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__actions .btn {
  padding: 0.7rem 1.25rem;
}
@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
  .hero__actions .hero-menu { width: 100%; }
  .hero-menu__pop { width: 100%; }
}

/* ---------- Callback band extras ---------- */
/* The band itself is the homepage .talk pattern (charcoal, white
   inputs). Only the numbered "what happens next" list is new. */
.talk__steps {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: callback-step;
  display: grid;
  gap: var(--space-4);
}
.talk__steps li {
  counter-increment: callback-step;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-on-dark-muted);
}
.talk__steps li::before {
  content: counter(callback-step);
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  display: grid;
  place-items: center;
}
/* Inline links on the dark steps list (the aside no longer has inline links —
   its dropdown pop is a white card, so its links keep the default color). */
.talk__steps a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
/* .talk__grid > div > p (0-1-2) outranks a bare class for color, so the
   aside's tone needs the doubled selector to keep the silver tone. */
.talk .talk__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-silver);
}
/* Slightly more compact than the default chip — sits inline in body copy */
.talk__aside .hero-menu > summary { padding: 0.55rem 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn { transition: none; }
}