/* Janigo code blocks — Cursor / VS Code Dark+ editor slice */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.janigo-code-wrap {
  --jc-bg: #212B30;
  --jc-header: #1a2226;
  --jc-border: #212B30;
  --jc-fg: #EEFFFF;
  --jc-comment: #546E7A;
  --jc-string: #FFCB6B;
  --jc-keyword: #C792EA;
  --jc-flow: #89DDFF;
  --jc-function: #82AAFF;
  --jc-class: #FFCB6B;
  --jc-number: #F78C6C;
  --jc-decorator: #FFCB6B;
  --jc-self: #FF5370;
  --jc-operator: #89DDFF;
  --jc-variable: #EEFFFF;
  --jc-fstring: #89DDFF;
  --jc-muted: #546E7A;
  --jc-font: "JetBrains Mono", "estedad", Consolas, "Courier New", monospace;

  position: relative;
  margin: 1.35rem 0 1.6rem;
  border: 1px solid var(--jc-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--jc-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-family: "JetBrains Mono", "estedad", Consolas, "Courier New", monospace;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: normal;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.janigo-code-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  background: var(--jc-header);
  border-bottom: 1px solid var(--jc-border);
}

.janigo-code-wrap__lang {
  color: var(--jc-muted);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  user-select: none;
}

.janigo-article-body pre,
.ck-content pre,
.janigo-code-wrap,
.janigo-code-wrap pre,
.janigo-code-wrap pre code {
  font-family: "JetBrains Mono", "estedad", Consolas, "Courier New", monospace !important;
  font-variation-settings: normal !important;
}

.janigo-code-wrap pre span {
  font-family: inherit !important;
  font-variation-settings: inherit !important;
}

.janigo-code-wrap pre {
  direction: ltr !important;
  text-align: left !important;
  background: var(--jc-bg) !important;
  color: var(--jc-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  overflow-x: auto;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  tab-size: 4;
  box-shadow: none !important;
}

.janigo-code-wrap pre code {
  display: block;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-variation-settings: inherit !important;
  font-variant-ligatures: inherit;
  font-feature-settings: inherit;
  white-space: pre;
}

.janigo-code-copy {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2rem;
  min-height: 1.75rem;
  border: 1px solid #212B30;
  background: #161d21;
  color: #EEFFFF;
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.janigo-code-copy svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.janigo-code-copy:hover {
  background: #2a363c;
  border-color: #212B30;
  color: #ffffff;
}

.janigo-code-copy.is-copied {
  border-color: #89DDFF;
  color: #89DDFF;
  padding-inline: 0.55rem;
}

.jc-comment { color: #546E7A; font-style: italic !important; }
.jc-keyword { color: #C792EA; }
.jc-flow { color: #89DDFF; font-style: italic !important; }
.jc-function { color: #82AAFF; }
.jc-class { color: #FFCB6B; }
.jc-number { color: #F78C6C; }
.jc-string { color: #FFCB6B; }
.jc-decorator { color: #FFCB6B; }
.jc-self { color: #FF5370; font-style: italic !important; }
.jc-operator { color: #89DDFF; }
.jc-variable { color: #EEFFFF; }
.jc-fstring { color: #89DDFF; }
.jc-builtin { color: #82AAFF; }
.jc-flag { color: #82AAFF; }
.jc-constant { color: #F78C6C; }

/* Inline code stays subtle; blocks use editor chrome */
.janigo-article-body :not(pre) > code {
  background: rgba(130, 170, 255, 0.12);
  color: #82AAFF;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  font-size: 0.92em;
  font-family: "JetBrains Mono", "estedad", Consolas, "Courier New", monospace;
  font-weight: 400;
  font-variation-settings: normal;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1, "liga" 1;
}

html[tp-theme="tp-theme-dark"] .janigo-article-body :not(pre) > code {
  background: rgba(130, 170, 255, 0.14);
  color: #82AAFF;
}

html[tp-theme="tp-theme-light"] .janigo-article-body :not(pre) > code {
  background: rgba(86, 156, 214, 0.1);
  color: #1e4f7a;
}