/*
 * code-highlight.css — structural + token-color CSS for code-highlight.js.
 *
 * CONTRACT: every curriculum theme's :root must define these semantic
 * --code-* custom properties (derive their VALUES from the theme's own
 * palette — never hardcode a color here). This file maps hljs-* token
 * classes to those variables, so it is copy-paste reusable, unmodified,
 * across every future curriculum site:
 *
 *   --code-bg, --code-border, --code-gutter-bg, --code-gutter-fg,
 *   --code-fg, --code-comment, --code-keyword, --code-string, --code-number,
 *   --code-type, --code-function, --code-meta, --code-special,
 *   --code-variable, --code-selection-bg
 *
 * If a theme forgets one, browsers fall back to `currentColor` /
 * transparent gracefully rather than erroring — but define all of them
 * deliberately, don't rely on the fallback.
 */

pre[data-lang] {
  direction: ltr;
  unicode-bidi: isolate;
  margin: 20px 0;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--code-border, var(--line));
  background: var(--code-bg, var(--bg-code, #0d0d10));
  overflow: hidden;
}

/* progressive-enhancement baseline: correct + readable even before JS runs */
pre[data-lang] code {
  display: block;
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  color: var(--code-fg, var(--fg));
  background: transparent;
}

/* once enhanced, the raw <code> is replaced by the header + scroll/table */
pre.code-enhanced > code {
  display: none;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--code-border, var(--line));
  background: var(--code-gutter-bg, var(--bg-elevated));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.code-lang {
  color: var(--code-gutter-fg, var(--fg-dim));
  margin-right: auto;
}
.code-copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--code-border, var(--line));
  color: var(--code-gutter-fg, var(--fg-dim));
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.code-copy:hover {
  color: var(--dominant, var(--acid));
  border-color: var(--dominant, var(--acid));
}
.code-copy.done {
  color: var(--code-string, #7ec699);
  border-color: var(--code-string, #7ec699);
}

.code-scroll {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

/* the alignment guarantee: a real <table>, one <tr> per source line.
   white-space:pre + no wrapping means a source line is always exactly
   one visual row, so the gutter can never drift from its content. */
table.code-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 100%;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
}
table.code-table td {
  padding: 0;
  vertical-align: top;
  white-space: pre;
  text-align: left; /* الكود LTR دائمًا — لا تترك هذا لقاعدة td عامة في ثيم المستخدم قد تفرض right للجداول العربية */
}
table.code-table td.ln {
  width: 1%;
  min-width: 34px;
  padding: 0 12px;
  text-align: right;
  color: var(--code-gutter-fg, var(--fg-faint));
  background: var(--code-gutter-bg, var(--bg-elevated));
  border-right: 1px solid var(--code-border, var(--line));
  user-select: none;
}
table.code-table td.lc {
  padding: 0 18px;
  color: var(--code-fg, var(--fg));
}
table.code-table tr:hover td {
  background: color-mix(in srgb, var(--code-gutter-fg, #fff) 6%, transparent);
}
table.code-table tr:hover td.ln {
  color: var(--dominant, var(--acid));
}

pre[data-lang] ::selection {
  background: var(--code-selection-bg, var(--dominant, #7dff9b));
  color: var(--bg-void, #000);
}

/* ---- token → theme mapping (hljs standard class names, any language) ---- */
.hljs-comment,
.hljs-quote {
  color: var(--code-comment, var(--fg-dim));
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst,
.hljs-operator {
  color: var(--code-keyword, var(--dominant));
  font-weight: 600;
}
.hljs-string,
.hljs-doctag,
.hljs-addition {
  color: var(--code-string, var(--secondary));
}
.hljs-number,
.hljs-literal {
  color: var(--code-number, var(--warn));
}
.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: var(--code-type, var(--fg));
  font-weight: 600;
}
.hljs-title.function_,
.hljs-function .hljs-title {
  color: var(--code-function, var(--fg));
  font-weight: 600;
}
.hljs-meta,
.hljs-meta .hljs-keyword {
  color: var(--code-meta, var(--warn));
}
.hljs-symbol {
  color: var(--code-special, var(--dominant));
  font-style: italic;
}
.hljs-variable,
.hljs-params,
.hljs-attr,
.hljs-attribute,
.hljs-property {
  color: var(--code-variable, var(--fg-muted));
}
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: var(--code-type, var(--secondary));
}
.hljs-deletion {
  color: var(--danger, #ff6b6b);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}

@media (max-width: 640px) {
  table.code-table td.ln {
    padding: 0 8px;
    min-width: 26px;
  }
  table.code-table td.lc {
    padding: 0 12px;
  }
}