/* ---------------------------------------------------
   Code Snippet Styling (Universal for Markdown & Liquid)
----------------------------------------------------- */
figure.highlight,
div.highlighter-rouge .highlight {
  background-color: #161616; /* Matches rrt.css background */
  border-radius: 8px;
  padding: 16px;
  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-ghost);
  margin-bottom: 1.5rem;
}

figure.highlight pre,
div.highlighter-rouge .highlight pre {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Rouge Table layout adjustments (for line numbers) */
.highlight .rouge-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* Line numbers column */
.highlight .rouge-gutter {
  color: #4b5263;
  text-align: right;
  padding-right: 16px;
  user-select: none; /* Prevents selecting line numbers when copying */
  border-right: 1px solid #3e4451 !important;
  width: 1%;
}

/* Actual code column */
.highlight .rouge-code {
  padding-left: 16px;
  white-space: pre;
}

/* Prevent markdown table styles from ruining Rouge code blocks */
.highlight table,
.highlight th,
.highlight td {
    border: none !important;
    background-color: transparent !important;
    white-space: pre;
}

.highlight table {
    display: table !important; /* Reverts the mobile block display */
}

.highlight td {
    display: table-cell !important;
    padding: 0 !important;
}

.highlight table { border-spacing: 0; border: none; margin-bottom: 0; }
.highlight td { padding: 0; border: none; }
.highlight pre { margin: 0; }

code.language-plaintext {
    font-size: .9em;
    color: #0F6;
    word-wrap: break-word;
    background: #333;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
    margin-top:0.05em;
    margin-bottom: 0.05em;
}

/* TODO: not related to rogue, consider relocating */
blockquote > p:first-child::before {
  content: "💡 ";
  font-style: normal; /* Keeps the emoji upright even if the blockquote text is italicized */
  margin-right: 0.5rem; /* Adds a clean space after the emoji */
}