/* ============================================================================
   contact.css — "/contact".

   Source of truth: apps/editor/src/pages/resources/ContactPage.tsx. The page
   hero is PageShell/PageHero (marketing.css).
   ========================================================================= */

/* `hidden` must outrank the display rules below — see §5.10. */
.contact [hidden] { display: none; }

/* "max-w-5xl mx-auto px-6 pb-28" */
.contact {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}
/* "grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-10 items-start" */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 300px 1fr; } }

/* ═══ Quick-answer cards ═══════════════════════════════════════════════════ */

/* "flex flex-col gap-4" */
.contact__aside { display: flex; flex-direction: column; gap: 1rem; }
/* "rounded-2xl border border-slate-200/80 dark:border-white/6 p-5" + card
   gradient. `dark:border-white/6` generates no rule (§5.1). */
.contact-card {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.25rem;
  background: var(--mk-card-grad);
}
/* The last card swaps the gradient for a flat indigo tint. */
.contact-card--tint { background: rgba(99, 102, 241, 0.05); }
/* "text-sm font-bold text-slate-900 dark:text-white" */
.contact-card__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #0f172a; }
.mk-dark .contact-card__title { color: #fff; }
/* "text-xs text-[#444444] dark:text-slate-500 mt-1 leading-relaxed" */
.contact-card__desc { font-size: 0.75rem; color: #444; margin-top: 0.25rem; line-height: 1.625; }
.mk-dark .contact-card__desc { color: #64748b; }
/* The tinted card's paragraph is text-[#000000] rather than #444444. */
.contact-card--tint .contact-card__desc { color: #000; }
.mk-dark .contact-card--tint .contact-card__desc { color: #64748b; }
/* "inline-block mt-2.5 text-xs font-semibold text-indigo-600
    dark:text-indigo-400" — hover equals resting, so no visible hover change. */
.contact-card__link {
  display: inline-block;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #4f46e5;
}
.mk-dark .contact-card__link { color: #818cf8; }
/* The inline mail link inside the tinted card: same colours, font-medium. */
.contact-card__mail { color: #4f46e5; font-weight: 500; }
.mk-dark .contact-card__mail { color: #818cf8; }

/* ═══ Form panel ═══════════════════════════════════════════════════════════ */

/* "rounded-2xl border border-slate-200 dark:border-white/8 p-7" + card gradient.
   `dark:border-white/8` generates no rule either. */
.contact-form-panel {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.75rem;
  background: var(--mk-card-grad);
}
/* "flex flex-col gap-5" */
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
/* labelCls: "block text-xs font-semibold text-[#444444] dark:text-slate-400 mb-1.5" */
.contact-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.375rem;
}
.mk-dark .contact-label { color: #94a3b8; }
/* inputCls: "w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-white/[0.04]
    border border-slate-200 dark:border-white/10 text-slate-900
    dark:text-white text-sm outline-none focus:border-indigo-500
    placeholder:text-slate-400 dark:placeholder:text-slate-600
    transition-colors" */
.contact-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-family: inherit;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-input::placeholder { color: #94a3b8; }
.contact-input:focus { border-color: #6366f1; }
.mk-dark .contact-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.mk-dark .contact-input::placeholder { color: #475569; }
/* The textarea adds "resize-y min-h-[140px] leading-relaxed". */
.contact-textarea { resize: vertical; min-height: 140px; line-height: 1.625; }

/* Topic chips: "px-3.5 py-1.5 rounded-full text-xs font-semibold border
    transition-colors" + inline colours per selected state. */
.contact-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contact-topic {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  border: 1px solid var(--mk-divider);
  background: transparent;
  color: var(--mk-status-neutral);
  font-family: inherit;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-topic.is-active {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
  color: var(--mk-text);
}

/* "grid sm:grid-cols-2 gap-4" */
.contact-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "flex items-center justify-between mb-1.5" + the counter */
.contact-message-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; }
/* "text-xs font-semibold text-[#444444] dark:text-slate-400" — same as the
   label but without `block`. */
.contact-message-label { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #444; }
.mk-dark .contact-message-label { color: #94a3b8; }
/* "text-[11px] text-slate-500 dark:text-slate-600 tabular-nums" */
.contact-counter { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.mk-dark .contact-counter { color: #475569; }

/* Honeypot — hidden from humans, irresistible to bots. */
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* reCAPTCHA slot: "flex justify-start min-h-[78px]" */
.contact-captcha { display: flex; justify-content: flex-start; min-height: 78px; }

/* "text-xs text-red-600 dark:text-red-400 px-3 py-2 rounded-lg" + tint */
.contact-error {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #dc2626;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
}
.mk-dark .contact-error { color: #f87171; }

/* "flex items-center gap-4 flex-wrap" */
.contact-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* "px-6 py-2.5 rounded-lg text-sm font-bold text-slate-900 dark:text-white
    transition-transform hover:scale-[1.02] active:scale-[0.98]
    disabled:opacity-50 disabled:hover:scale-100" + gradient and glow.
   NOTE the colour: slate-900 on the indigo gradient in LIGHT mode — dark text
   on a saturated background. That is what the original renders; reproduced
   rather than "corrected". */
.contact-submit {
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  border: none;
  font-family: inherit;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .contact-submit { color: #fff; }
.contact-submit:hover { transform: scale(1.02); }
.contact-submit:active { transform: scale(0.98); }
.contact-submit:disabled { opacity: 0.5; }
.contact-submit:disabled:hover { transform: scale(1); }
/* "text-[11px] text-slate-500 dark:text-slate-600 leading-snug max-w-[280px]" */
.contact-privacy { font-size: 11px; color: #64748b; line-height: 1.375; max-width: 280px; }
.mk-dark .contact-privacy { color: #475569; }
/* "text-slate-500 hover:text-[#444444] dark:hover:text-slate-400 underline" */
.contact-privacy a { color: #64748b; text-decoration: underline; }
.contact-privacy a:hover { color: #444; }
.mk-dark .contact-privacy a:hover { color: #94a3b8; }

/* ═══ Sent state ═══════════════════════════════════════════════════════════ */

/* "py-10 text-center" */
.contact-sent { padding-top: 2.5rem; padding-bottom: 2.5rem; text-align: center; }
/* "w-12 h-12 rounded-full mx-auto mb-5 flex items-center justify-center" */
.contact-sent__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
/* "text-slate-900 dark:text-white font-bold text-lg" */
.contact-sent__title { color: #0f172a; font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; }
.mk-dark .contact-sent__title { color: #fff; }
/* "text-[#444444] dark:text-slate-500 text-sm mt-2 max-w-sm mx-auto leading-relaxed" */
.contact-sent__body {
  color: #444;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625;
}
.mk-dark .contact-sent__body { color: #64748b; }
/* "text-slate-700 dark:text-slate-300" on the echoed address */
.contact-sent__body strong { color: #334155; font-weight: 700; }
.mk-dark .contact-sent__body strong { color: #cbd5e1; }
/* "mt-6 px-4 py-2 rounded-lg border border-slate-300 dark:border-white/15
    text-slate-700 dark:text-slate-300 hover:text-slate-900
    dark:hover:text-white hover:border-slate-400 dark:hover:border-white/30
    text-sm font-semibold transition-colors" */
.contact-sent__again {
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  background: transparent;
  font-family: inherit;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-sent__again:hover { color: #0f172a; border-color: #94a3b8; }
.mk-dark .contact-sent__again { border-color: rgba(255, 255, 255, 0.15); color: #cbd5e1; }
.mk-dark .contact-sent__again:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }