/*!
 * SitePulse — Free vs Pro comparison page contrast fix
 * Loaded ONLY on the Free vs Pro template page (conditional enqueue).
 * Solves the "white block" rendering issue by neutralizing bootstrap's
 * table-cell box-shadow hack and forcing readable text colors.
 *
 * Last review: 2026-07-11
 */

/* Tell the browser this page is intentionally dark-themed.
 * Prevents forced-light-mode overrides (e.g. Brave auto-dark). */
.page-template-template-free-vs-pro html {
  color-scheme: dark;
}

/* Muted text on this page needs higher contrast for readability. */
.page-template-template-free-vs-pro .text-muted,
.page-template-template-free-vs-pro .text-muted * {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Bootstrap 5 paints table cell backgrounds via box-shadow inset, not
 * background-color. Setting background-color alone is not enough.
 * Kill both the box-shadow and the CSS variables. */
.page-template-template-free-vs-pro .table,
.page-template-template-free-vs-pro .sp-card-static .table {
  background-color: transparent !important;
  --bs-table-bg: transparent !important;
  --bs-table-bg-state: transparent !important;
  --bs-table-accent-bg: transparent !important;
}

.page-template-template-free-vs-pro .table > :not(caption) > * > *,
.page-template-template-free-vs-pro .sp-card-static .table > :not(caption) > * > * {
  background-color: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88);
}

/* Free vs Pro comparison table — keep the cyan Pro column tint
 * but ensure the cyan background does not hide text. */
#sp-comparison-table .table tr td:nth-child(3),
#sp-comparison-table .table tr th:nth-child(3) {
  background-color: rgba(0, 240, 255, 0.04) !important;
}

/* Feature names in row headers should be bright white. */
#sp-comparison-table th[scope="row"] {
  color: #ffffff;
}

#sp-comparison-table th[scope="row"] > div.fw-semibold {
  color: #ffffff !important;
}

#sp-comparison-table th[scope="row"] > div.small {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Fix the small horizontal pill labels (Free=basic, Pro=monthly, etc.). */
#sp-comparison-table .badge {
  color: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid var(--sp-border, rgba(255, 255, 255, 0.1));
}