/* ============================================================
 * Dark mode for the logged-out public pages: services, API guide,
 * blog, FAQ and free numbers.
 *
 * The signed-in panel's palette (includes2/head.php) already covers the
 * Bootstrap markup those pages share, and the home page ships its own
 * palette in homepage-v2.css. What is left is the landing kit in
 * home-landing.css plus each page's own light-only styles, which is what
 * this file repaints. Same html.sp-dark class and sp_theme key as the
 * rest of the site, so one choice carries everywhere.
 * ============================================================ */

html.sp-dark {
  --blue: #4fa5dc;
  --blue-dark: #3d8fc8;
  --blue-deep: #7cc6f2;
  --ink: #e7ecf3;
  --slate: #a3b3c6;
  --slate-light: #8494a8;
  --line: #2c3648;
  --bg: #141821;
  --card: #1d2431;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, .7);
  --shadow-lg: 0 26px 60px -22px rgba(0, 0, 0, .8);
}

html.sp-dark body.lp {
  background: var(--bg);
  color: var(--ink);
}

/* ---------- header ---------- */
html.sp-dark .lp-nav {
  background: rgba(20, 24, 33, .93);
  border-bottom-color: #27313f;
}

html.sp-dark .lp-nav-menu a:hover,
html.sp-dark .lp-nav-menu a:focus,
html.sp-dark .lp-nav-login:hover,
html.sp-dark .lp-nav-login:focus {
  color: #7cc6f2;
  background: #263140;
}

html.sp-dark .lp-burger span {
  background: #cdd8e5;
}

/* ---------- generic surfaces from the landing kit ---------- */
html.sp-dark .lp-btn-ghost {
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark .lp-logos,
html.sp-dark .lp-fn {
  background: #191f2b;
  border-color: var(--line);
}

html.sp-dark .lp-fn-card,
html.sp-dark .lp-step,
html.sp-dark .lp-feat,
html.sp-dark .lp-faq details,
html.sp-dark .lp-eyebrow,
html.sp-dark .lp-phone,
html.sp-dark .lp-phone-badge,
html.sp-dark .lp-table tbody tr {
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark .lp-fn-go,
html.sp-dark .lp-bubble {
  background: #263140;
  color: var(--ink);
}

html.sp-dark .lp-table tbody td {
  color: var(--ink);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}

html.sp-dark .lp-table tbody td:first-child {
  border-left-color: var(--line);
}

html.sp-dark .lp-table tbody td:last-child {
  border-right-color: var(--line);
}

html.sp-dark .lp-logos-row img {
  filter: grayscale(1) brightness(2.4);
}

/* The strip and the stats panel are dark-on-light by design, so they only
 * need to stop being lighter than the page around them. */
html.sp-dark .lp-stats,
html.sp-dark .lp-foot {
  background: #10141c;
}

html.sp-dark .lp-tp-review {
  background: var(--card);
  border-color: var(--line);
  border-left-color: #00b67a;
}

html.sp-dark .lp-tp-text {
  color: var(--ink);
}

/* The services directory ships its own light and dark styles in
 * assets/css/services-page.css. */

/* ---------- API guide ---------- */
html.sp-dark .api-section {
  border-color: #333a49 !important;
  background: #1f232e;
}

html.sp-dark code,
html.sp-dark pre {
  background: #262b38 !important;
  color: #e6e9f0;
}

html.sp-dark .api-tabs .nav-tabs {
  border-bottom-color: #333a49;
}

html.sp-dark .api-tabs .nav-tabs .nav-link {
  color: #9aa4b5;
}

/* The overview block carries its light background inline. */
html.sp-dark .json-api-intro {
  background: #1f232e !important;
}

html.sp-dark input.api_get {
  background: transparent !important;
  color: #e6e9f0 !important;
}

/* ---------- free numbers ---------- */
html.sp-dark .fn-notice {
  background: #22303c;
  color: #e6e9f0;
}

html.sp-dark .fn-btn-outline {
  background: #262b38;
  color: #4dd0e1;
}

html.sp-dark .fn-btn-outline:hover {
  background: #2d3646;
}

html.sp-dark .fn-sidebar-title,
html.sp-dark .fn-msgs-header,
html.sp-dark .fn-msg-from,
html.sp-dark .fn-msg-time,
html.sp-dark .fn-refresh-bar {
  color: #9aa4b5;
}

html.sp-dark .fn-sidebar-title {
  border-bottom-color: #333a49;
}

html.sp-dark .fn-num-item {
  background: #1f232e;
  border-color: #333a49;
  color: #e6e9f0;
}

html.sp-dark .fn-num-item:hover {
  background: #26313f;
  border-color: #4dd0e1;
}

html.sp-dark .fn-msg-card,
html.sp-dark .fn-empty,
html.sp-dark .fn-review {
  background: #1f232e;
  border-color: #333a49;
}

html.sp-dark .fn-msg-body,
html.sp-dark .fn-msg-from strong,
html.sp-dark .fn-review-text {
  color: #e6e9f0;
}

html.sp-dark .fn-msg-body,
html.sp-dark .fn-msg-from {
  border-right-color: #2b3240;
}

html.sp-dark .fn-review {
  border-left-color: #00b67a;
}

/* The panel palette repaints every link with the accent colour, which leaves
 * white-on-colour buttons unreadable, so they are restated. */
html.sp-dark .fn-review-btn,
html.sp-dark .fn-btn-primary,
html.sp-dark .fn-num-item.active,
html.sp-dark .lp-btn,
html.sp-dark .lp-float,
html.sp-dark .download-app-btn {
  color: #fff !important;
}

@media (max-width: 768px) {
  html.sp-dark .fn-msg-from {
    background: #262b38;
  }

  html.sp-dark .fn-msg-body,
  html.sp-dark .fn-msg-time {
    border-color: #2b3240;
  }
}

/* ---------- blog ---------- */
html.sp-dark .blog-card,
html.sp-dark .card h2 a {
  color: var(--ink);
}