/* =============================================================================
   Contact — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is specific to this page. The shared vocabulary (.da-sec, .da-h1/2/3,
   .da-body, .da-rows, .da-row--qa, .da-btn, .da-note) lives in
   marketing/da_system.css.

   Rebuilt 2026-09-04 from the pre-rebrand page, which used .chero / .croute /
   .rtile / .cmain / .cform / .caside / .direct / .office / .sla / .cfaq. None of
   that survives here.

   THE FORM PRIMITIVES ARE NOT TOUCHED. .field, .input, .textarea, .select and
   .check live in marketing/site.css and are used by auth, onboarding and the
   explore filters. Restyling them here would reach all three. That is also why
   the form's band is bone: those controls are drawn for a light surface, and on
   charcoal they render as white boxes on near-black.

   Scoped without a page-root class: marketing_page_stylesheet_tag loads
   marketing/pages/<action>.css, so this file is only ever on the contact page
   and a bare .ct-* selector is page-local by construction.

   Reads var(--da-*) / var(--da-sec-*) only. Colour literals belong in
   colors_and_type.css. See docs/marketing-design-system.md.
   ============================================================================= */

/* ═══ ROUTE TILES ══════════════════════════════════════════════════════════
   Four buttons that retitle the form below. State is [aria-pressed], not a
   class, so the styling and what a screen reader hears come from one source. */
.ct-routes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  align-items: stretch;
}

.ct-route {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-hover-out) linear,
              background-color var(--dur-hover-out) linear;
}
/* A border step for hover, never a fill: the selected state below IS a fill,
   and two fills a shade apart read as two selected tiles. See CLAUDE.md. */
.ct-route:hover { border-color: color-mix(in srgb, var(--da-sec-accent) 55%, transparent); }
.ct-route[aria-pressed="true"] {
  background: color-mix(in srgb, var(--da-sec-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--da-sec-accent) 55%, transparent);
}
.ct-route:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); }

/* A tinted square, evenly rounded on all four sides. */
.ct-route__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--da-sec-accent) 16%, transparent);
  color: var(--da-sec-accent);
}
.ct-route__title {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
}
.ct-route__body {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  line-height: 1.5;
  color: var(--da-sec-muted);
}

/* ═══ FORM AND ASIDE ═══════════════════════════════════════════════════════
   The form is the wider track. The aside carries the routes that actually
   work today (the form posts nowhere), so it is a set of cards rather than a
   thin column of small print. */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}
.ct-form { min-width: 0; }
.ct-form .da-body { margin-top: var(--sp-4); }
.ct-fields { margin-top: var(--sp-8); display: grid; gap: var(--sp-5); }
/* .da-actions carries a band's top margin; inside a form it is one more row of
   the grid and the gap already spaces it. */
.ct-form__actions { margin-top: var(--sp-2); }

.ct-aside { min-width: 0; display: grid; gap: var(--sp-4); }

.ct-card {
  padding: var(--sp-6);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--da-sec-ink) 4%, transparent);
}
.ct-card .da-eyebrow { margin-bottom: var(--sp-4); }

/* ── Direct lines ─────────────────────────────────────────────────────────── */
.ct-emails { margin: 0; display: grid; gap: var(--sp-3); }
.ct-emails > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ct-emails dt {
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  color: var(--da-sec-muted);
}
.ct-emails dd {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-medium);
}

/* ── Office ───────────────────────────────────────────────────────────────── */
.ct-office__name {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}
.ct-office__addr {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  line-height: 1.6;
  color: var(--da-sec-muted);
}

/* ── Reply time ───────────────────────────────────────────────────────────── */
.ct-sla { display: flex; align-items: flex-start; gap: var(--sp-4); }
.ct-sla__ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--da-sec-accent) 16%, transparent);
  color: var(--da-sec-accent);
}
.ct-sla__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}
.ct-sla__body {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  line-height: 1.55;
  color: var(--da-sec-muted);
}

/* ═══ INLINE LINK ══════════════════════════════════════════════════════════
   Inside running copy and inside the email list, so it underlines rather than
   becoming a .da-link (a block-level action with its own rule and arrow).
   The colour is declared on :hover as well as at rest, because
   colors_and_type.css carries a global a:hover that would otherwise repaint it.
   `bin/rails marketing:link_button_hovers` is the guard for that. */
.ct-link {
  color: var(--da-sec-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}
.ct-link:hover { color: var(--da-sec-accent); opacity: 0.72; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Matches the shared breakpoints in da_system.css (1099 / 899 / 639) rather
   than inventing new ones, so a band and its contents change together. */
@media (max-width: 1099px) {
  .ct-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-route { padding: var(--sp-5); }
  .ct-grid { gap: var(--sp-8); }
}

@media (max-width: 899px) {
  /* Form first, then the direct lines. The aside is the fallback route, and a
     fallback above the primary one reads as the primary one. */
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  /* Three cards side by side once the aside is full width, so it stays a strip
     rather than three stacked banners. */
  .ct-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .ct-routes { grid-template-columns: minmax(0, 1fr); }
  .ct-aside { grid-template-columns: minmax(0, 1fr); }
  /* .field__row is a two-up row in site.css; at this width the two inputs are
     about 140px each. It is stacked here rather than in site.css, because that
     rule is shared with auth and onboarding. */
  .ct-fields .field__row { grid-template-columns: minmax(0, 1fr); display: grid; gap: var(--sp-5); }
}