/* ═══════════════════════════════════════════════════════════════════
   NIGHT THEME — BLOG ARTICLES. Loads AFTER /theme.css on every
   blog/*.html post + the three legacy root blog-*.html pages.
   Additive overrides keyed on html[data-theme="night"]; day mode is
   the page's own stylesheet untouched — nothing here fires.
   Palette (must match the homepage ladder in /theme.css):
     bg #0B1220 · raised #101A2E · card #131F38 · inset #1D2A44
     headings #F1F5F9 · body #A9B6CC (long-form prose #C3CEDF)
     muted #94A3B8 · borders white @ 12% / 7% · links #60A5FA
   Brand gradients (blue→cyan) + emerald/amber accents stay.
   The blog template pipes most colors through :root variables, so the
   bulk of the flip happens by re-declaring those vars on the html
   element (html[data-theme="night"] outranks :root). Literal-color
   holdouts are overridden individually below.
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="night"] {
  /* NOTE: --white / --blue / --blue-light / --green and the per-page
     accent vars (--teal/--cyan/--pink/--purple/--red) are deliberately
     NOT flipped — they feed brand gradients, the CTA box, and accent
     chips that must keep their hue in night mode. */
  --dark: #F1F5F9;                 /* headings / strong / th text */
  --gray-900: #E2E8F0;             /* body base color */
  --gray-700: #A9B6CC;             /* secondary text */
  --gray-500: #94A3B8;             /* muted */
  --gray-300: rgba(255,255,255,0.12); /* table/hr borders */
  --gray-100: #1D2A44;             /* inset fills: code, th, toc, callouts */
}

/* ═══ ARTICLE HEADER ═══
   Day mode tints the header with one of a dozen pastel gradients that
   all fade to var(--white); flatten them onto the raised night band. */
html[data-theme="night"] .article-header {
  background: linear-gradient(180deg, #101A2E 0%, #0B1220 100%);
}
html[data-theme="night"] .article-header h1 { color: #F1F5F9; }

/* category badge hue varies per page (blue/green/purple) via literal
   colors — brighten in place rather than re-mapping every variant so
   each page keeps its own accent hue. */
/* .category night recolor lives in theme.css (uniform chip on all templates) */

/* ═══ PROSE ═══ long-form body copy gets the brighter rung so it
   never reads dim on a full article. */
html[data-theme="night"] .article-body p,
html[data-theme="night"] .article-body li,
html[data-theme="night"] .article-body blockquote { color: #C3CEDF; }
html[data-theme="night"] .article-body strong { color: #F1F5F9; }
html[data-theme="night"] .article-body a { color: #60A5FA; }
html[data-theme="night"] .article-body code { color: #E2E8F0; }
html[data-theme="night"] .article-body blockquote {
  background: rgba(96,165,250,0.08);
}

/* ═══ TABLES ═══ th/td borders + th fills flip via the vars above;
   these are the literal-color stragglers. */
html[data-theme="night"] .comparison-table th {
  background: #1D2A44; color: #F1F5F9;
}
html[data-theme="night"] .comparison-table td { color: #C3CEDF; }
html[data-theme="night"] .comparison-table tr.highlight td {
  background: rgba(96,165,250,0.10);
}
/* verdict cells: lift the dark-mode-dim reds/greens/blues one rung */
html[data-theme="night"] .cost-table td.best,
html[data-theme="night"] .data-table td.highlight,
html[data-theme="night"] .comp-table td.win,
html[data-theme="night"] .comparison-table .savings { color: #34D399; }
html[data-theme="night"] .cost-table td.worst,
html[data-theme="night"] .comp-table td.lose { color: #F87171; }
html[data-theme="night"] .vs-table td.win-sms { color: #60A5FA; }
html[data-theme="night"] .vs-table td.win-email { color: #C4B5FD; }

/* ═══ CALLOUTS ═══ light pastel fills → alpha tints of the same hue */
html[data-theme="night"] .callout { background: rgba(37,99,235,0.12); }
html[data-theme="night"] .callout strong { color: #60A5FA; }
html[data-theme="night"] .ok   { background: rgba(16,185,129,0.12); }
html[data-theme="night"] .warn { background: rgba(239,68,68,0.12); }
/* A/B-test variant cards sit on a var(--white) fill inside a tinted
   block — give them the card rung instead */
html[data-theme="night"] .test-block .v { background: #131F38; }

/* ═══ TOC (legacy root articles) ═══ fill flips via --gray-100 */
html[data-theme="night"] .toc a { color: #60A5FA; }

/* ═══ "KEEP READING" (interlink sweep) ═══ injected with inline styles,
   so these need [style*=] + !important to win over the style attribute. */
html[data-theme="night"] [data-rsms-related] {
  border-top-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="night"] [data-rsms-related] h2 { color: #F1F5F9 !important; }
html[data-theme="night"] [data-rsms-related] a { color: #60A5FA; }
/* stray inline light-pastel fills / dark inline headings elsewhere */
html[data-theme="night"] .article-body [style*="#F0F7FF"] {
  background: rgba(37,99,235,0.12) !important;
}
html[data-theme="night"] .article-body [style*="#FEF2F2"] {
  background: rgba(239,68,68,0.12) !important;
}
html[data-theme="night"] .article-body [style*="var(--blue)"] { color: #60A5FA !important; }

/* ═══ CTA BOX ═══ brand blue→cyan gradient + white button kept as-is
   (it reads as a bright band in night mode by design, matching the
   homepage). Nothing to override. */

/* ═══ BACK LINK ═══ */
html[data-theme="night"] .back-link a { color: #60A5FA; }

/* ═══ FOOTER ═══ replaced by the single-row tryready.com footer — see the
   BLACK + GREEN block at the end of this file. */

/* ═══════════════════════════════════════════════════════════════════
   Ready wordmark rebrand (2026-07)
   Blog chrome (nav + footer logo) uses the lowercase "ready" + green-dot
   mark. Markup is `ready<span class="dot"></span>`; the old inline
   `.logo .ready` / `.logo .sms` rules are now inert. Loaded after each
   post's inline <style>, so these win on conflict.
   ═══════════════════════════════════════════════════════════════════ */
.logo { font-weight: 800; letter-spacing: -0.04em; color: #0f172a; align-items: baseline; }
.logo .dot { display: inline-block; width: 0.26em; height: 0.26em; border-radius: 50%; background: #0BD873; margin-left: 0.08em; align-self: baseline; }
.footer-brand .logo { color: #fff; }
/* Nav sits on the dark night bar -> light wordmark; day mode keeps #0f172a. */
html[data-theme="night"] .logo { color: #F1F5F9; }

/* ═══════════════════════════════════════════════════════════════════
   BLACK + GREEN dark theme (2026-07) — match tryready.com.
   Day mode is retired (every post is force-set to night in <head> and
   the toggle is removed). These remap the navy night palette to
   tryready's near-black + green. Appended last → wins on equal specificity.
     bg #0A0E0C · pine #0E1411 · card #131B16 · inset #17211B
     line #1E2A22 · text #F4F8F3 / prose #C3D0C6 · green #34D399 / dot #0BD873
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="night"] {
  --gray-100: #17211B;                 /* inset fills: code, th, callouts */
  --gray-300: rgba(255,255,255,0.10);  /* table/hr borders */
}
html[data-theme="night"] body { background: #0A0E0C; color: #F4F8F3; }
html[data-theme="night"] nav {
  background: rgba(14,20,17,0.82);
  border-bottom: 1px solid #1E2A22;
}
/* Nav menu — identical to tryready.com's .nav-right (plain links + green
   "Try Ready" CTA). The hidden theme toggle sits after and adds no gap. */
html[data-theme="night"] .nav-r { gap: 26px; align-items: center; }
html[data-theme="night"] .nav-r a {
  padding: 0; border: 0 !important; border-radius: 0;
  font-size: 13.5px; font-weight: 600; color: #8FA396 !important;
  font-variant-ligatures: none;
}
html[data-theme="night"] .nav-r a:hover { color: #F4F8F3 !important; }
html[data-theme="night"] .nav-r a.cta-sm {
  background: #0BD873; color: #06251A !important; font-weight: 800;
  padding: 10px 20px; border-radius: 9px;
}
html[data-theme="night"] .nav-r a.cta-sm:hover { background: #34D399; color: #06251A !important; }
html[data-theme="night"] .article-header {
  background: linear-gradient(180deg, #0E1411 0%, #0A0E0C 100%);
}
html[data-theme="night"] .article-body p,
html[data-theme="night"] .article-body li,
html[data-theme="night"] .article-body blockquote { color: #C3D0C6; }

/* prose links + accents → green */
html[data-theme="night"] .article-body a,
html[data-theme="night"] .back-link a,
html[data-theme="night"] .toc a,
html[data-theme="night"] [data-rsms-related] a,
html[data-theme="night"] .callout strong { color: #34D399; }
html[data-theme="night"] .article-body a:hover,
html[data-theme="night"] .back-link a:hover { color: #5CE79A; }
html[data-theme="night"] .article-body blockquote {
  background: rgba(52,211,153,0.08);
  border-left-color: #34D399;
}
html[data-theme="night"] .callout { background: rgba(11,216,115,0.12); }
html[data-theme="night"] .article-body [style*="var(--blue)"] { color: #34D399 !important; }

/* category chip → green */
html[data-theme="night"] .category { background: rgba(11,216,115,0.14); color: #34D399; }

/* tables: green-black fills / verdicts */
html[data-theme="night"] .comparison-table th { background: #17211B; }
html[data-theme="night"] .comparison-table tr.highlight td { background: rgba(52,211,153,0.10); }
html[data-theme="night"] .test-block .v { background: #131B16; }

/* ═══ CTA BOX → dark card + green button (tryready) ═══ */
html[data-theme="night"] .cta-box {
  background: #0E1411; border: 1px solid #1E2A22; color: #F4F8F3;
}
html[data-theme="night"] .cta-box h2 { color: #F4F8F3; }
html[data-theme="night"] .cta-box p { color: #C3D0C6; opacity: 1; }
/* theme.css pins .btn-white color blue with !important — override in kind. */
html[data-theme="night"] .btn-white { background: #0BD873; color: #06251A !important; }
html[data-theme="night"] .btn-white:hover { background: #34D399; transform: translateY(-2px); }

/* ═══ FOOTER — identical to tryready.com's footer .row ═══ */
html[data-theme="night"] footer {
  background: #0B0F0D; border-top: 1px solid #1E2A22; padding: 0;
}
html[data-theme="night"] .footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: #5C6E60; font-weight: 600;
}
html[data-theme="night"] footer .logo { font-size: 18px; color: #F4F8F3; margin: 0; }
html[data-theme="night"] .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
html[data-theme="night"] .footer-legal { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
html[data-theme="night"] .footer-nav a,
html[data-theme="night"] .footer-legal a {
  font-size: 12px; font-weight: 600; color: #5C6E60; letter-spacing: -0.01em;
}
html[data-theme="night"] .footer-nav a:hover,
html[data-theme="night"] .footer-legal a:hover { color: #F4F8F3; }

/* toggle removed sitewide on the blog (day mode retired) */
.theme-toggle { display: none !important; }

@media (max-width: 760px) {
  html[data-theme="night"] .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  html[data-theme="night"] .footer-legal { margin-left: 0; }
}