.astro-code, .shiki {
  /* Use the syntax theme's own background, not --color-code-bg: its token
     colors are tuned for that background, so this keeps them at AA on every
     Rana theme. !important beats Shiki's inline style. */
  background-color: var(--shiki-light-bg, var(--color-code-bg)) !important;
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: var(--weight-regular);
  border-radius: 4px;
  padding: 1.25rem;
  overflow-x: auto;
  line-height: 1.6;
  border: 1px solid var(--color-border);

  @media (prefers-color-scheme: dark) {
    background-color: var(--shiki-dark-bg, var(--color-code-bg)) !important;
  }

  &:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  code {
    padding: 0;
    background-color: transparent;
    white-space: pre;
    border-radius: 0;
  }

  /* Requires defaultColor: false in shikiConfig so both palettes land as
     variables on each token; !important beats Shiki's inline styles */
  span {
    color: var(--shiki-light) !important;

    @media (prefers-color-scheme: dark) {
      color: var(--shiki-dark) !important;
    }
  }
}

a.heading-link {
  opacity: 0;
  margin-inline-start: 0.5em;
  text-decoration: none;
  color: var(--color-meta);
  transition: opacity var(--duration-fast) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  :is(h1, h2, h3, h4, h5, h6):hover a.heading-link {
    opacity: 1;
  }
}

a.heading-link:focus-visible {
  opacity: 1;
}

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.5rem;
}

.markdown-alert {
  --alert-color: var(--color-meta);
  margin-block: var(--space-l);
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  border-inline-start: 3px solid var(--alert-color);
  border-radius: 0 4px 4px 0;
  background-color: color-mix(in srgb, var(--alert-color) 6%, var(--color-bg));

  > p {
    margin-block-end: 0.5rem;

    &:last-child { margin-block-end: 0; }
  }
}

.markdown-alert-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alert-color);
}

:lang(ar) .markdown-alert-title {
  letter-spacing: normal;
}

.markdown-alert-note      { --alert-color: light-dark(#0969DA, #4493F8); }
.markdown-alert-tip       { --alert-color: light-dark(#1A7F37, #3FB950); }
.markdown-alert-important { --alert-color: light-dark(#8250DF, #AB7DF8); }
.markdown-alert-warning   { --alert-color: light-dark(#9A6700, #D29922); }
.markdown-alert-caution   { --alert-color: light-dark(#CF222E, #F85149); }

/* Alerts and code carry meaning through color; keep it on paper instead
   of forcing black like rana.css's print reset does for body text */
@media print {
  .astro-code, .shiki,
  .markdown-alert {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}