/* apiscrapy.com — in-article Code Block ([code_block]).
   Editor-window styling with a title bar (traffic-light dots, filename,
   language badge, copy button) and a scrollable code area. Dark by default,
   with a light variant. Scoped under .apbs-code so it never leaks into Divi. */

.apbs-code{
  --code-radius:12px;
  margin:26px 0;
  border-radius:var(--code-radius);
  overflow:hidden;
  border:1px solid #241a45;
  box-shadow:0 12px 30px rgba(20,15,40,.18);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  max-width:100%;
}
/* Inside the article column, keep it aligned with the prose measure. */
.apbs .apbs-content .apbs-code{max-width:720px;}

/* ---- title bar ---- */
.apbs-code-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  font-family:'Poppins',system-ui,sans-serif;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.apbs-code-dots{display:inline-flex;gap:6px;flex:0 0 auto;}
.apbs-code-dots i{width:11px;height:11px;border-radius:50%;display:block;}
.apbs-code-dots i:nth-child(1){background:#ff5f56;}
.apbs-code-dots i:nth-child(2){background:#ffbd2e;}
.apbs-code-dots i:nth-child(3){background:#27c93f;}
.apbs-code-name{
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.apbs-code-lang{
  margin-left:auto;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  padding:3px 10px;border-radius:999px;
  background:linear-gradient(135deg,#8b5cf6,#7030a0);color:#fff;flex:0 0 auto;
}
/* When there's no language badge, push the copy button to the right. */
.apbs-code-bar .apbs-code-name + .apbs-code-copy{margin-left:auto;}
.apbs-code-bar > .apbs-code-dots + .apbs-code-copy{margin-left:auto;}

.apbs-code-copy{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:'Poppins',system-ui,sans-serif;font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:7px;cursor:pointer;line-height:1;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#e7e7f2;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.apbs-code-copy:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);}
.apbs-code-copy.is-copied{border-color:#27c93f;color:#7ee89a;background:rgba(39,201,63,.12);}
.apbs-code-copy svg{flex:0 0 auto;}

/* ---- code area ---- */
.apbs-code-pre{
  margin:0;padding:18px 18px;overflow-x:auto;
  font-size:14px;line-height:1.65;tab-size:2;-moz-tab-size:2;
  white-space:pre;
}
.apbs-code-pre code{
  font-family:inherit;font-size:inherit;color:inherit;background:none;
  padding:0;border:0;white-space:pre;display:block;
  font-weight:700 !important;
}
/* thin custom scrollbar */
.apbs-code-pre::-webkit-scrollbar{height:9px;}
.apbs-code-pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:9px;}
.apbs-code-pre::-webkit-scrollbar-track{background:transparent;}

/* ---- DARK theme (default) — brand deep indigo ---- */
.apbs-code--dark{background:#171331;border-color:#251b49;}
.apbs-code--dark .apbs-code-bar{background:#1f1940;}
.apbs-code--dark .apbs-code-name{color:#c9c6e6;}
.apbs-code--dark .apbs-code-pre{color:#e9e8f6;}
.apbs-code--dark .apbs-code-pre code{color:#e9e8f6;}

/* ---- LIGHT theme ---- */
.apbs-code--light{background:#fbfbfe;border-color:#e7e7ef;box-shadow:0 8px 22px rgba(25,22,39,.07);}
.apbs-code--light .apbs-code-bar{background:#f2f1f8;border-bottom-color:#e7e7ef;}
.apbs-code--light .apbs-code-name{color:#3b3b46;}
.apbs-code--light .apbs-code-copy{border-color:#d9d9e6;background:#fff;color:#4a4a58;}
.apbs-code--light .apbs-code-copy:hover{border-color:#b9b9cc;background:#fff;}
.apbs-code--light .apbs-code-pre,.apbs-code--light .apbs-code-pre code{color:#221f33;}
.apbs-code--light .apbs-code-pre::-webkit-scrollbar-thumb{background:rgba(25,22,39,.18);}

/* ---- syntax highlighting (Prism tokens; our own on-brand palette, no Prism theme) ----
   Prism.js wraps the code in <span class="token …"> elements; we colour them here.
   Two palettes: a vivid set on the dark window, a softer set on the light window. */
.apbs-code-pre .token.comment,
.apbs-code-pre .token.prolog,
.apbs-code-pre .token.doctype,
.apbs-code-pre .token.cdata{font-style:italic;}
.apbs-code-pre .token.namespace{opacity:.7;}

/* DARK window palette (Night-Owl-ish, tuned to the #171331 brand background) */
.apbs-code--dark .token.comment,
.apbs-code--dark .token.prolog,
.apbs-code--dark .token.doctype,
.apbs-code--dark .token.cdata{color:#7b88a8;}
.apbs-code--dark .token.punctuation{color:#a7a3d0;}
.apbs-code--dark .token.keyword,
.apbs-code--dark .token.rule,
.apbs-code--dark .token.important,
.apbs-code--dark .token.atrule{color:#c792ea;}
.apbs-code--dark .token.string,
.apbs-code--dark .token.char,
.apbs-code--dark .token.attr-value,
.apbs-code--dark .token.inserted{color:#c3e88d;}
.apbs-code--dark .token.function,
.apbs-code--dark .token.method{color:#82aaff;}
.apbs-code--dark .token.class-name,
.apbs-code--dark .token.attr-name,
.apbs-code--dark .token.builtin{color:#ffcb6b;}
.apbs-code--dark .token.number,
.apbs-code--dark .token.boolean,
.apbs-code--dark .token.constant,
.apbs-code--dark .token.symbol{color:#f78c6c;}
.apbs-code--dark .token.operator,
.apbs-code--dark .token.entity,
.apbs-code--dark .token.url{color:#89ddff;}
.apbs-code--dark .token.variable,
.apbs-code--dark .token.property,
.apbs-code--dark .token.tag,
.apbs-code--dark .token.regex,
.apbs-code--dark .token.deleted{color:#f07178;}

/* LIGHT window palette (same hues, darkened for contrast on #fbfbfe) */
.apbs-code--light .token.comment,
.apbs-code--light .token.prolog,
.apbs-code--light .token.doctype,
.apbs-code--light .token.cdata{color:#8a90a6;}
.apbs-code--light .token.punctuation{color:#5a5a6e;}
.apbs-code--light .token.keyword,
.apbs-code--light .token.rule,
.apbs-code--light .token.important,
.apbs-code--light .token.atrule{color:#7c3aed;}
.apbs-code--light .token.string,
.apbs-code--light .token.char,
.apbs-code--light .token.attr-value,
.apbs-code--light .token.inserted{color:#0a7d33;}
.apbs-code--light .token.function,
.apbs-code--light .token.method{color:#2563eb;}
.apbs-code--light .token.class-name,
.apbs-code--light .token.attr-name,
.apbs-code--light .token.builtin{color:#b7791f;}
.apbs-code--light .token.number,
.apbs-code--light .token.boolean,
.apbs-code--light .token.constant,
.apbs-code--light .token.symbol{color:#c2410c;}
.apbs-code--light .token.operator,
.apbs-code--light .token.entity,
.apbs-code--light .token.url{color:#0e7490;}
.apbs-code--light .token.variable,
.apbs-code--light .token.property,
.apbs-code--light .token.tag,
.apbs-code--light .token.regex,
.apbs-code--light .token.deleted{color:#cf2e2e;}

.apbs-code-pre .token.bold{font-weight:700;}
.apbs-code-pre .token.italic{font-style:italic;}

/* ---- responsive ---- */
@media (max-width:600px){
  .apbs-code-bar{padding:9px 12px;gap:9px;}
  .apbs-code-pre{padding:14px 14px;font-size:13px;}
  .apbs-code-name{font-size:12px;}
  .apbs-code-copy-txt{display:none;} /* icon-only copy button on small screens */
  .apbs-code-copy{padding:6px 8px;}
}