/* Code block styling, layered over Beautiful Jekyll's defaults. */

code, pre, kbd, samp {
  font-family: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

/* Inline code: neutral instead of Bootstrap's pink-on-pink */
:not(pre) > code {
  color: inherit;
  background-color: rgba(175, 184, 193, 0.2);
  font-size: 0.85em;
  padding: 0.15em 0.35em;
  border-radius: 0.375rem;
}

/* Blocks: plain background, no zebra stripes or heavy left border */
figure.highlight,
div.highlighter-rouge {
  position: relative;
  margin: 0 0 1.25rem;
}
body .highlight > pre:not(.lineno) {
  background-image: none;
  border: 1px solid #d0d7de;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
}

/*
 * macOS hides overlay scrollbars; keep overflow visible so long lines don't look truncated.
 * Chrome ignores ::-webkit-scrollbar if scrollbar-width/color are set, so those are Firefox-only.
 */
@supports (-moz-appearance: none) {
  .highlight > pre {
    scrollbar-width: thin;
    scrollbar-color: #afb8c1 transparent;
  }
}
.highlight > pre::-webkit-scrollbar {
  height: 8px;
}
.highlight > pre::-webkit-scrollbar-thumb {
  background-color: #afb8c1;
  border-radius: 4px;
}
.highlight > pre::-webkit-scrollbar-track {
  background: transparent;
}

/* Line numbers */
.highlight table td {
  padding: 0;
}
.highlight pre.lineno {
  color: #8c959f;
  border-right: 1px solid #d0d7de;
  padding-right: 0.75rem;
  margin: 0;
  text-align: right;
}
.highlight td.code pre {
  padding-left: 0.75rem;
}

/*
 * Widen the content column on wide screens (theme default is 8 of 12 columns)
 * so code blocks have room without breaking out of the text width.
 */
@media (min-width: 1200px) {
  .col-xl-8.offset-xl-2 {
    flex: 0 0 75%;
    max-width: 75%;
    margin-left: 12.5%;
  }
}

/* Copy button (added by code-copy.js) */
.code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  color: #57606a;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
figure.highlight:hover .code-copy-btn,
div.highlighter-rouge:hover .code-copy-btn,
.code-copy-btn:focus {
  opacity: 1;
}
@media (hover: none) {
  .code-copy-btn {
    opacity: 1;
  }
}
.code-copy-btn:hover {
  background: #eaeef2;
}