/* ============================================================
   Marketing Kit — HomeLight Offers dark-navy print system.
   Scoped under .mk-doc so this CSS doesn't leak into the app.
   Mirrors the dark-navy tokens from the design handoff.
   ============================================================ */

/* Force browsers to print background colors, gradients, and the
   header/footer art. Without this Chrome/Safari strip backgrounds on
   print, washing the dark navy bands out to white. Applied to the doc
   and every descendant. */
.mk-doc,
.mk-doc *,
.mk-doc *::before,
.mk-doc *::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.mk-doc {
  --mk-d-900: #0d1a2e;
  --mk-d-800: #16243d;
  --mk-d-700: #1e2d49;
  --mk-d-600: #28395b;
  --mk-d-slate: #36537e;
  --mk-dark-grad: linear-gradient(118deg, #16243d 0%, #1e2d49 46%, #2c456d 78%, #36537e 100%);
  --mk-line-dark: rgba(168, 190, 222, 0.22);
  --mk-on-dark: #cdd9ec;
  --mk-on-dark-soft: #94a7c4;

  --mk-sky: #46b6ff;
  --mk-sky-600: #1192e5;
  --mk-sky-bright: #6db8ff;
  --mk-sky-50: #e8f5ff;
  --mk-sky-100: #d0ecff;

  --mk-ink: #273653;
  --mk-body: #3a4a63;
  --mk-secondary: #52617a;
  --mk-muted: #8a97ab;

  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--mk-ink);
  background: #fff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mk-doc *,
.mk-doc *::before,
.mk-doc *::after { box-sizing: border-box; }

/* Dark navy band — header / footer surface used across the kit. The solid
   background-color is the print-safe fallback: if a browser/printer drops
   the gradient, the band still paints solid navy instead of white. */
.mk-dark {
  background-color: #1e2d49;
  background-image: var(--mk-dark-grad);
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* faint blueprint grid, like the in-app property header */
.mk-dark-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(150, 180, 220, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 180, 220, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 120% at 88% 8%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 120% at 88% 8%, #000 0%, transparent 72%);
}

/* soft sky glow bleeding from the top-right corner */
.mk-dark-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 100% 0%, rgba(80, 150, 235, 0.42), transparent 62%);
}

.mk-dark-h1 {
  font-family: "Centra No2", "Open Sans", sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
}
.mk-dark-h1 .mk-accent { color: var(--mk-sky); }

.mk-dark-body {
  font-family: "Open Sans", sans-serif;
  color: var(--mk-on-dark);
  line-height: 1.55;
}

/* Light-surface headings/body */
.mk-h1 {
  font-family: "Centra No2", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--mk-ink);
  letter-spacing: -0.02em;
  line-height: 1.0;
}
.mk-h2 {
  font-family: "Centra No2", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--mk-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.mk-body {
  font-family: "Open Sans", sans-serif;
  color: var(--mk-body);
  line-height: 1.55;
}
.mk-accent { color: var(--mk-sky); }

.mk-divider { height: 1px; background: #bfe1fb; border: 0; }
.mk-divider-dark { height: 1px; background: var(--mk-line-dark); border: 0; }

/* Round icon chip on light surface */
.mk-chip {
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #e8f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Editable placeholder field — partner/rep fills in before publishing */
.mk-fld {
  background: rgba(70, 182, 255, 0.12);
  border-bottom: 1.5px dashed currentColor;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.96;
}

/* Uploadable headshot — sky-tinted hover ring so reps know the circle is
   interactive. The ring lives on the wrapper so it sits *outside* the
   overflow-hidden image clip. */
.mk-headshot:hover { box-shadow: 0 0 0 2px rgba(70, 182, 255, .65); }
@media print {
  .mk-headshot { cursor: default; }
  .mk-headshot:hover { box-shadow: none; }
}

/* Editable legal disclaimer — no blue highlight by default (this is real
   copy, not a placeholder) but visibly editable on hover/focus. Uses the
   sky accent (rgba so it reads on both the dark navy footer and the email's
   light surface). */
.mk-legal-editable {
  outline: 0;
  border-radius: 3px;
  cursor: text;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.mk-legal-editable:hover {
  background: rgba(70, 182, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(70, 182, 255, .35);
}
.mk-legal-editable:focus {
  background: rgba(70, 182, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(70, 182, 255, .65);
}

/* The print pieces are fixed-size canvases. We let the page background show
   through around them; the parent gives a soft gray backing.                */
.mk-canvas {
  background: linear-gradient(180deg, #e6ebf2 0%, #dde4ee 100%);
  min-height: 100vh;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mk-canvas .mk-doc {
  box-shadow: 0 18px 50px rgba(20, 40, 70, 0.18), 0 2px 8px rgba(20, 40, 70, 0.08);
}

/* Hub / index card grid */
.mk-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.mk-hub h1 {
  font-family: "Centra No2", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--hl-blue-800, #273653);
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.mk-hub-card {
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mk-hub-card:hover {
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.12);
  transform: translateY(-2px);
}
.mk-hub-card .mk-hub-thumb {
  background: linear-gradient(118deg, #16243d 0%, #1e2d49 46%, #2c456d 78%, #36537e 100%);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Centra No2", "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Print: each piece prints on its own page at its native size. Per-view
   @page rules live in each template's content_for(:head) so the page box
   matches the doc canvas exactly (Letter for the print pieces, native
   pixel sizes for the social pieces). */
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .mk-canvas { padding: 0 !important; gap: 0 !important; background: #fff !important; min-height: 0 !important; }
  .mk-canvas .mk-doc {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-inside: avoid;
    page-break-after: always;
    break-inside: avoid;
    break-after: page;
  }
  .mk-hub, .mk-toolbar, .mk-email-preview-note { display: none !important; }
  /* When printing the intro email, strip the gray wrapper around the white
     card so the printed page is just the card itself. */
  .mk-email-wrapper {
    background: #fff !important;
    padding: 0 !important;
    width: auto !important;
  }
  .mk-email-card { box-shadow: none !important; border-radius: 0 !important; }
}