/*
 * Blog dead-click fixes (Microsoft Clarity).
 *
 * Kept out of style.css on purpose: header.php links style.css with no
 * version string, so edits there sit behind browser/Cloudflare caches. This
 * file is enqueued with a filemtime version (functions.php), so a deploy
 * reaches readers straight away.
 */

/* ---- Phones: nothing may be wider than the screen ----------------------- */

/* (The footer's 412px trust-badge row that made every page scroll sideways
   on phones is gone with the rebuilt footer — see css/blog-footer.css.) */

/* Posts paste HTML blocks with an inline two-column grid (pros/cons boxes).
   On a phone the second column ran off the screen. Inline styles can only be
   overridden with !important. */
@media only screen and (max-width: 600px) {
  .blog-text [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Some pasted comparison tables sit in a wrapper with inline overflow:hidden,
   which cut off their right-hand columns on phones with no way to reach
   them. Scroll instead (still clips to the rounded corners). */
.blog-text div[style*="overflow:hidden"]:has(> table),
.blog-text div[style*="overflow: hidden"]:has(> table) {
  overflow-x: auto !important;
}

/* ---- Screenshot lightbox (js/blog-dead-clicks.js) ----------------------- */

.blog-text img.mc-zoomable {
  cursor: zoom-in;
}

.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the fixed header (z-index 6700) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 10, 19, 0.85);
  cursor: zoom-out;
}

.mc-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: #fff;
}

.mc-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #020a13;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

body.mc-lightbox-open {
  overflow: hidden;
}

/* ---- Comparison table → review links (js/blog-dead-clicks.js) ------------ */

.blog-text a.mc-table-jump {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 123, 255, 0.5);
  text-underline-offset: 3px;
}

.blog-text td.mc-table-jump-cell {
  cursor: pointer;
}

.blog-text a.mc-table-jump:hover {
  color: #007bff;
}

/* Land the jumped-to heading below the fixed site header. */
.blog-text h2[id],
.blog-text h3[id] {
  scroll-margin-top: 110px;
}

/* ---- Tables (core Table block, e.g. "Quick Comparison") ----------------- */
/* style.css gives every cell 28px 30px !important padding and the block is
   saved with has-fixed-layout (equal columns), which left ~94px of text per
   cell: tool names broke mid-word ("ActiveCampai gn") and the inline
   "Yes (250 contacts)" pills split across lines. Size columns to content,
   tighten the padding, keep pills whole, and on narrow screens scroll the
   table sideways with the first column pinned. Specificity + !important is
   needed to beat style.css's !important rules. */

.blog-text .wp-block-table {
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e9ecef;
  border-radius: 12px;
}
.blog-text .wp-block-table table {
  width: 100%;
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.blog-text .wp-block-table th,
.blog-text .wp-block-table td {
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e9ecef !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #22364c;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
  background: #fff;
}
.blog-text .wp-block-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.blog-text .wp-block-table thead th,
.blog-text .wp-block-table thead td {
  background: #f6f8fa;
  color: #4e5e70;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-text .wp-block-table tbody tr:nth-child(even) td {
  background: #fbfcfd;
}
.blog-text .wp-block-table tbody tr:hover td {
  background: #f2f7ff;
}
/* First column = the tool / item name: one line, bold, and pinned while the
   rest of the table scrolls on a phone. */
.blog-text .wp-block-table th:first-child,
.blog-text .wp-block-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  white-space: nowrap;
}
.blog-text .wp-block-table td:first-child {
  color: #020a13;
  font-weight: 600;
}
.blog-text .wp-block-table td:first-child img.emoji {
  margin-left: 4px !important;
  vertical-align: -2px !important;
}
/* Inline "pill" spans pasted into cells (Free plan column). */
.blog-text .wp-block-table td span[style*="border-radius"] {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  /* Phones: keep columns readable and scroll the table sideways instead. */
  .blog-text .wp-block-table table {
    min-width: 640px;
  }
  .blog-text .wp-block-table th,
  .blog-text .wp-block-table td {
    padding: 12px 14px !important;
    font-size: 14px;
  }
  .blog-text .wp-block-table td:first-child {
    box-shadow: 1px 0 0 #e9ecef;
  }
}