html {
  scroll-padding-top: 80px; 
  scroll-behavior: smooth; 
}

p code {
  font-size: 0.875em;
}

/* Highlight.js & Code Blocks */
pre code.hljs {
  background: transparent !important;
  padding: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* DaisyUI Mockup Code & Line Numbers */
.mockup-code pre code.hljs {
  background: transparent !important;
  padding: 0 !important;
  font-family: inherit;
}

.mockup-code pre::before {
  content: none;
}

/* Code Surface & Editor Theming */
[data-theme="light"] .code-block {
  background-color: #f6f8fa;
  border-color: #d0d7de;
}

[data-theme="light"] .hljs-ln-numbers {
  color: #656d76;
  opacity: 0.70;
}

[data-theme="dark"] .code-block {
  background-color: #161b22;
  border-color: #30363d;
}

/* --- Landing Page Hero Mockup --- */
[data-theme="dark"] .mockup-code {
  background-color: #000000;
  border-color: #27272a;
}

/* Theme-aware code panel: token colors follow the active daisyUI theme */
.code-panel code.hljs {
  color: var(--color-base-content);
}
.code-panel .hljs-comment {
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  font-style: italic;
}
.code-panel .hljs-string {
  color: color-mix(in oklab, var(--color-success) 70%, var(--color-base-content));
}
.code-panel .hljs-keyword,
.code-panel .hljs-built_in {
  color: var(--color-primary);
}
.code-panel .hljs-title,
.code-panel .hljs-title.function_ {
  color: var(--color-secondary);
}

[data-theme="dark"] .hljs-ln-numbers {
  color: #768390;
  opacity: 0.5;
}

/* Polished window controls on mockup-code */
.mockup-code:before {
  opacity: 0.85 !important;
  background-color: #ff5f56 !important;
  box-shadow: 1.25em 0 0 #ffbd2e, 2.5em 0 0 #27c93f !important;
  margin-left: 1.5rem;
}

/* Style highlightjs-line-numbers table to match DaisyUI */
.hljs-ln {
  border-collapse: collapse;
  width: 100%;
}

.hljs-ln td {
  padding: 0 !important;
}

.hljs-ln-numbers {
  user-select: none;
  text-align: right;
  opacity: 0.5;
  padding-right: 1.25rem !important;
  width: 2.25rem;
}

.hljs-ln-n {
  margin-right: 0.75rem;
}

.hljs-ln-code {
  padding-left: 0.5rem !important;
}

@media (width >= 768px) {
  pre code.hljs {
    font-size: 0.825rem;
  }

  .hljs-ln-numbers {
    width: 3rem;
  }

  .hljs-ln-n {
    margin-right: 1rem;
  }
}