/* =========================
   Code Blocks
   ========================= */

/* Container div - handles scrolling and dimensions */
div.sourceCode {
  background: #f5f5f5; /* Light mode background */
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  position: relative;
  animation: fadeIn 0.5s ease-out;
  max-height: 50em;
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
}

[data-theme="dark"] div.sourceCode {
  background: #19183B; /* Dark mode background */
  border: 1px solid #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Top accent bar - REMOVED FROM HERE */
/* Moved to pre.sourceCode so it scrolls with content */

/* Pre element - remove extra styling, just handle padding */
pre.sourceCode {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
  padding-top: calc(1.5rem + 3px) !important; 
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: fit-content; 
  min-width: 100%; 
  max-width: none;
  display: block;
  position: relative; 
}

pre.sourceCode::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 3px;
  background: linear-gradient(90deg, #6a5acd, #ff6f61);
  border-radius: 8px 8px 0 0;
}

pre:not(.sourceCode) {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  position: relative;
  animation: fadeIn 0.5s ease-out;
  width: 100%;
  display: block;
}

[data-theme="dark"] pre:not(.sourceCode) {
  background: #19183B;
  border: 1px solid #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

pre:not(.sourceCode)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6a5acd, #ff6f61);
  border-radius: 8px 8px 0 0;
}

/* Code element styling */
pre code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 1rem;
  line-height: 1.6;
  background: none !important;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: 500;
  color: #19183B; /* Light mode text */
  display: block;
  white-space: pre;
  min-height: 0;
}

[data-theme="dark"] pre code {
  color: #FFF5F2; /* Dark mode text */
}

pre.sourceCode code,
div.sourceCode code {
  display: block;
  min-height: 100%;
  background: inherit !important;
}

pre.sourceCode code *,
div.sourceCode code *,
pre.sourceCode code span,
div.sourceCode code span,
pre.sourceCode code .kw, 
pre.sourceCode code .dt,
pre.sourceCode code .dv, 
pre.sourceCode code .bn, 
pre.sourceCode code .fl, 
pre.sourceCode code .ch, 
pre.sourceCode code .st, 
pre.sourceCode code .co, 
pre.sourceCode code .ot, 
pre.sourceCode code .al, 
pre.sourceCode code .fu, 
pre.sourceCode code .re, 
pre.sourceCode code .er, 
pre.sourceCode code .cn, 
pre.sourceCode code .sc, 
pre.sourceCode code .vs, 
pre.sourceCode code .ss, 
pre.sourceCode code .im, 
pre.sourceCode code .va, 
pre.sourceCode code .cf, 
pre.sourceCode code .op, 
pre.sourceCode code .in {
  background: inherit !important;
  color: inherit !important;
}

pre:not(.sourceCode) code * {
  display: inline;
  background: inherit;
  color: inherit;
}

/* =========================
   Inline Code
   ========================= */
code:not(pre code) {
  background: #f5f5f5; 
  color: #19183B; 
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  font-weight: 500;
}

[data-theme="dark"] code:not(pre code) {
  background: #19183B; 
  color: #FFF5F2;
  border: 1px solid #333;
}