/* codejs-chrome.css — head CSS, generated by scripts/generate-mu-plugin.js (v1.1.0). Do not edit by hand. */
/* Metric-matched fallback fonts. When Inter (or DM Serif) hasn't loaded yet,
   the browser renders with these system-font face declarations that have
   the same x-height, width, and line metrics as the real fonts. When the
   web font finally loads, the swap is layout-neutral → no CLS hit.
   Numbers are from https://github.com/seek-oss/capsize-style metrics. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.40%;
}
@font-face {
  font-family: 'DM Serif Fallback';
  src: local('Georgia');
  ascent-override: 95%;
  descent-override: 24%;
  size-adjust: 104%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Consolas'), local('Menlo'), local('Courier New');
  ascent-override: 102%;
  descent-override: 25%;
  size-adjust: 96%;
}
/* Astra theme used to apply Poppins to every H1-H6 via its base stylesheet.
   The customizer (Typography → Base Font) was later switched to "Inter",
   so Poppins is no longer requested at all. We keep an override here
   anyway because the WP-Optimize minified cache may still contain old
   Poppins references; this rule unifies all headings with the body. */
h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.site-title, .site-title a {
  font-family: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root {
  --cj-font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cj-font-display: 'DM Serif Display', 'DM Serif Fallback', Georgia, serif;
  --cj-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', 'Fira Code', Consolas, monospace;
  --cj-text: #0f172a;
  --cj-muted: #64748b;
  --cj-border: #e2e8f0;
  --cj-bg: #ffffff;
  --cj-soft: #f8fafc;
  --cj-primary: #2563eb;
}
body, body * { font-family: var(--cj-font-sans); }
body code, body pre, body kbd, body samp { font-family: var(--cj-font-mono); }
body { font-size: 16px; line-height: 1.65; color: var(--cj-text); -webkit-font-smoothing: antialiased; }

/* Display serif for big editorial headlines — opt-in via .cj-display. */
.cj-display,
.cj-display * { font-family: var(--cj-font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em; }

/* Pill CTA — fully rounded */
.cj-cta-pill { border-radius: 999px !important; }

/* Glass surface — document360-style frosted card */
.cj-glass {
  background: rgba(41, 41, 41, 0.45) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cj-glass-light {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.12);
}

/* ---- 0. Hide Astra's native single-post header rendering (title + featured
   image + meta), scoped strictly to the MAIN article. Related-posts cards
   ALSO use .entry-header and .post-thumb — we must NOT hide those.

   Astra DOM for the main article:
     <article class="ast-article-single">
       <div class="ast-post-format- single-layout-1">
         <header class="entry-header">  ← target this
   Related-posts use:
     <article class="related-post">
       <header class="entry-header related-entry-header">  ← leave this alone
*/
body.single-post .ast-article-single > .ast-post-format- > .entry-header,
body.single-post .ast-article-single > .ast-post-format- > .entry-header * {
  display: none !important;
}
body.single-post .ast-article-single > .ast-post-format- > .entry-header {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Defensive: Astra's featured-image wrappers when emitted outside entry-header */
body.single-post .ast-article-single > .ast-blog-featured-section,
body.single-post .ast-article-single > .post-thumb-img-content,
body.single-post .ast-article-single > img.wp-post-image:first-of-type {
  display: none !important;
}

/* ---- 1. Body canvas: deep purple gradient + fixed starfield ---- */
body.home,
body.single-post,
body.cj-articles-page,
body.cj-topics-hub,
body[class*="cj-topic-"] {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 50% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #1e1b4b 0%, #312e81 30%, #1e1b4b 70%, #0f0a1e 100%) !important;
  background-attachment: fixed !important;
  color: #e2e8f0 !important;
  min-height: 100vh;
}
body.home::before,
body.single-post::before,
body.cj-articles-page::before,
body.cj-topics-hub::before,
body[class*="cj-topic-"]::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 38% 42%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 72% 28%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.3px 1.3px at 28% 78%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 56% 88%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.4px 1.4px at 8% 52%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
  opacity: 0.9;
}

/* ---- 2. Astra wrappers go transparent so body gradient flows through ---- */
body.home #page, body.home .site, body.home .site-content, body.home #content, body.home #primary, body.home .ast-container, body.home .entry-content, body.home article.type-page, body.home article.type-post, body.home main#main,
body.single-post #page, body.single-post .site, body.single-post .site-content, body.single-post #content, body.single-post #primary, body.single-post .ast-container, body.single-post .entry-content, body.single-post article.type-page, body.single-post article.type-post, body.single-post main#main,
body.cj-articles-page #page, body.cj-articles-page .site-content, body.cj-articles-page #content, body.cj-articles-page #primary, body.cj-articles-page .ast-container, body.cj-articles-page .entry-content, body.cj-articles-page article.type-page,
body.cj-topics-hub #page, body.cj-topics-hub .site-content, body.cj-topics-hub #content, body.cj-topics-hub #primary, body.cj-topics-hub .ast-container, body.cj-topics-hub .entry-content, body.cj-topics-hub article.type-page,
body[class*="cj-topic-"] #page, body[class*="cj-topic-"] .site-content, body[class*="cj-topic-"] #content, body[class*="cj-topic-"] #primary, body[class*="cj-topic-"] .ast-container, body[class*="cj-topic-"] .entry-content, body[class*="cj-topic-"] article.type-page {
  background: transparent !important;
}
body.home #page, body.home .codejs-home,
body.single-post #page,
body.cj-articles-page #page, body.cj-articles-page .cj-articles,
body.cj-topics-hub #page, body.cj-topics-hub .cj-topic,
body[class*="cj-topic-"] #page, body[class*="cj-topic-"] .cj-topic { position: relative; z-index: 1; }

/* ---- 3. All Code-JS sections sit transparent on the canvas ---- */
.codejs-home section,
.cj-articles section,
.cj-topic section { background: transparent !important; }

/* ---- 4. Card glass surfaces (dark) ---- */
.codejs-home article, .codejs-home .cj-stat-card, .codejs-home a[href*="-tutorials/"][class*="cj-tilt"],
.cj-articles .cj-card,
.cj-topic article {
  background: rgba(30, 27, 75, 0.55) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 36px -14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.codejs-home article *, .cj-articles .cj-card *, .cj-topic article * { color: #fff !important; }
.codejs-home article p, .cj-articles .cj-card p, .cj-topic article p { color: rgba(255, 255, 255, 0.72) !important; }

/* ---- 5. Filter chips on /articles/ (dark theme) ---- */
body.cj-articles-page .cj-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.cj-articles-page .cj-chip.is-active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.cj-articles-page .cj-chip span { color: rgba(255, 255, 255, 0.55) !important; }

/* ---- 6. Pagination buttons (articles + topic landings) ---- */
body.cj-articles-page #cj-pagination button,
body[class*="cj-topic-"] #cj-load-more {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.cj-articles-page #cj-pagination button:disabled { color: rgba(255, 255, 255, 0.3) !important; }
body.cj-articles-page #cj-pagination button:hover:not(:disabled),
body[class*="cj-topic-"] #cj-load-more:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
body.cj-articles-page #cj-count,
body[class*="cj-topic-"] #cj-count { color: rgba(255, 255, 255, 0.6) !important; }

/* ---- 7. Articles page hero search input — dark theme ---- */
body.cj-articles-page #cj-search {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---- 8. Single posts content body — light text on dark ---- */
body.single-post .cj-post-body { color: rgba(255, 255, 255, 0.85) !important; }
body.single-post .cj-post-body h1, body.single-post .cj-post-body h2, body.single-post .cj-post-body h3, body.single-post .cj-post-body h4 { color: #fff !important; }
body.single-post .cj-post-body h2 { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
body.single-post .cj-post-body strong { color: #fff !important; }
body.single-post .cj-post-body code:not(pre code) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fbcfe8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
body.single-post .cj-post-body blockquote { color: rgba(255, 255, 255, 0.78) !important; }
body.single-post .cj-post-body table th { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.10) !important; }
body.single-post .cj-post-body table td { color: rgba(255, 255, 255, 0.85) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
body.single-post .cj-post-body figure.wp-block-table { background: rgba(255, 255, 255, 0.04) !important; }
body.single-post .cj-post-body ul, body.single-post .cj-post-body ol, body.single-post .cj-post-body li { color: rgba(255, 255, 255, 0.85) !important; }

/* ---- 9. Single post TL;DR + Up Next + section backgrounds ---- */
body.single-post .cj-tldr {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.10) 0%, rgba(168, 85, 247, 0.05) 100%) !important;
  border-left-color: rgba(168, 85, 247, 0.85) !important;
}
body.single-post .cj-tldr p { color: rgba(255, 255, 255, 0.85) !important; }
body.single-post .cj-tldr div { color: #c4b5fd !important; }

/* ---- 10. TOC sidebar on dark canvas ---- */
body.single-post .cj-toc-header { color: rgba(255, 255, 255, 0.95) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
body.single-post .cj-toc-item a { color: rgba(255, 255, 255, 0.55) !important; }
body.single-post .cj-toc-item a:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
body.single-post .cj-toc-item.is-active a { background: rgba(168, 85, 247, 0.20) !important; color: #fff !important; }

/* ---- 11. Single post mobile TOC accordion bg ---- */
@media (max-width: 1100px) {
  body.single-post .cj-toc {
    background: rgba(30, 27, 75, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(20px) saturate(180%);
  }
  body.single-post .cj-toc-item a {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
}

/* ---- 12. Categories hub + topic-page text colors ---- */
.cj-topic h1, .cj-topic h2, .cj-topic h3 { color: #fff !important; }
.cj-topic p:not([style*="color:#fff"]) { color: rgba(255, 255, 255, 0.78) !important; }
.cj-topic > section[style*="background:#"] { background: transparent !important; }

/* ---- 13. Reading order + related-topic + post-card spans (force white) ---- */
.cj-topic a[href][style*="background:#fff"],
.cj-topic a[href][style*="background:#ffffff"],
.cj-topic a[href][style*="background: #fff"] {
  background: rgba(30, 27, 75, 0.55) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
/* Catch any descendant with explicit dark inline color */
.cj-topic a[href][style*="color:#0f172a"] span,
.cj-topic a[href][style*="color: #0f172a"] span,
.cj-topic a[style*="color:#0f172a"],
.cj-topic a[style*="color: #0f172a"] { color: #fff !important; }
.cj-topic article h3,
.cj-topic article h3 a,
.cj-topic article span[style*="color:#0f172a"],
.cj-topic article span[style*="color: #0f172a"] { color: #fff !important; }
.cj-topic article p[style*="color:#64748b"],
.cj-topic article p[style*="color: #64748b"] { color: rgba(255,255,255,0.72) !important; }
.cj-topic article div[style*="color:#64748b"],
.cj-topic article div[style*="color: #64748b"] { color: rgba(255,255,255,0.65) !important; }
/* Reading order rail wrapper */
.cj-topic [style*="display:flex"][style*="background:#fff"] span,
.cj-topic [style*="display:flex"][style*="background:#ffffff"] span { color: #fff !important; }

/* ---- 14. Single-post tables: kill Astra's alternating-row light backgrounds ---- */
/* Astra defaults tr:nth-child(even) to a light fill which clashes with the dark
   canvas — text becomes white-on-light = unreadable. Force every row transparent
   and add a faint stripe in the SAME tonal family so striping still works. */
body.single-post .cj-post-body table tr,
body.single-post .cj-post-body table tbody tr,
body.single-post .cj-post-body table thead tr {
  background: transparent !important;
}
body.single-post .cj-post-body table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04) !important;
}
body.single-post .cj-post-body table tbody tr:nth-child(odd) {
  background: transparent !important;
}
body.single-post .cj-post-body table tbody tr td,
body.single-post .cj-post-body table tbody tr td * {
  color: rgba(255, 255, 255, 0.88) !important;
}
body.single-post .cj-post-body table tbody tr td code {
  color: #fbcfe8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- 15. Chat demo bubbles (add-chat-demos.js inline-styled blocks) ---- */
/* The chat demo HTML hardcodes light pastel backgrounds (#e3f2fd, #f5f5f5)
   and dark text colors. On dark canvas they read as light boxes that fight
   the page. Rewrite them to translucent dark-canvas surfaces with white text. */
body.single-post .cj-post-body div[style*="background:#e3f2fd"] {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #fff !important;
  border: 1px solid rgba(96, 165, 250, 0.25);
}
body.single-post .cj-post-body div[style*="background:#f5f5f5"] {
  background: rgba(30, 27, 75, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
body.single-post .cj-post-body div[style*="background:#e3f2fd"] strong,
body.single-post .cj-post-body div[style*="background:#f5f5f5"] strong {
  color: #fff !important;
}
body.single-post .cj-post-body div[style*="background:#e3f2fd"] code,
body.single-post .cj-post-body div[style*="background:#f5f5f5"] code {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fbcfe8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Hide Astra's default header AND footer; we render our own. This CSS travels
   inside any tutorial page (hub, module landings, /tutorials/) whose content
   bakes in TOP_STRIP_HTML + FOOTER_HTML. The chrome plugin handles the same
   hiding on POST pages via its own DARK_CANVAS_STYLES — this is the parallel
   for PAGE pages where the plugin is not managing them. */
header.site-header,
#masthead.site-header,
footer.site-footer,
#colophon.site-footer { display: none !important; }
/* Astra also renders an empty .ast-page-title-area on some page templates. */
body.page .ast-page-title-area,
body.page .entry-header { display: none !important; }