/* ================================================================== */
/*  zq-highlight — Space-dark syntax theme for zQuery website          */
/*  Matches the site's space UI: deep backgrounds, nebula accent       */
/*  colours, and subtle glow effects.                                  */
/*                                                                     */
/*  Palette (5 hues + neutrals):                                       */
/*    Red      #ff7b72  — keywords                                     */
/*    Blue     #a5d6ff / #79c0ff — strings, numbers, attrs, props      */
/*    Purple   #d2a8ff  — functions, directives, events                */
/*    Orange   #ffa657  — builtins, classes, expression values         */
/*    Green    #7ee787  — HTML tag names                               */
/* ================================================================== */

/* ── Token colours ─────────────────────────────────────────────────── */

/* Keywords: if, const, return, export, etc. */
.zq-kw         { color: #ff7b72; }

/* this / super — italic blue, reads as part of property chains */
.zq-self       { color: #9cdcfe; font-style: italic; }

/* Strings */
.zq-str        { color: #a5d6ff; }

/* Template literals */
.zq-tpl        { color: #a5d6ff; }

/* Comments */
.zq-cmt        { color: #546270; font-style: italic; }

/* Numbers */
.zq-num        { color: #79c0ff; }

/* Built-in values: true, false, null, undefined */
.zq-val        { color: #79c0ff; font-style: italic; }

/* Regex */
.zq-rgx        { color: #d2a8ff; }

/* Function calls */
.zq-fn         { color: #d2a8ff; }

/* Built-in objects: console, document, window, etc. */
.zq-builtin    { color: #ffa657; }

/* Property access: subtle blue, distinct from plain text */
.zq-prop       { color: #9cdcfe; }

/* Class-like (PascalCase) — same as builtins, they're related */
.zq-cls        { color: #ffa657; }

/* Punctuation / operators */
.zq-punc       { color: #8b949e; }

/* @events in templates: @click, @submit.prevent — purple italic */
.zq-deco       { color: #d2a8ff; font-style: italic; }

/* ── zQuery-specific tokens ────────────────────────────────────────── */

/* $. API calls and $() — bold italic blue */
.zq-zq-api     { color: #79c0ff; font-weight: 600; font-style: italic; }

/* z-directives: z-if, z-for, z-model — purple italic to pair with @events */
.zq-directive  { color: #d2a8ff; font-style: italic; }

/* Directive / event expression values */
.zq-dir-val    { color: #ffa657; }

/* ── HTML-specific tokens ──────────────────────────────────────────── */

/* Tag names: div, span, script, etc. — the only green */
.zq-tag-name   { color: #7ee787; }

/* Attribute names */
.zq-attr       { color: #79c0ff; }

/* HTML entities */
.zq-ent        { color: #79c0ff; }

/* ── CSS-specific overrides (handled by shared classes above) ──────── */
/* Properties → .zq-prop already #c9d1d9 — override for CSS context */
/* We rely on the generic classes; no extra rules needed. */


/* ── Copy button ───────────────────────────────────────────────────── */

.zq-code-wrap {
  position: relative;
}

.zq-copy-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #30363d;
  background: rgba(22,27,34,0.85);
  color: #8b949e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 2;
  line-height: 1.5;
  user-select: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* On mobile / touch, always show the button */
@media (max-width: 768px) {
  .zq-copy-btn {
    opacity: 1;
  }
}

.zq-code-wrap:hover > .zq-copy-btn {
  opacity: 1;
}

.zq-copy-btn:hover {
  background: #30363d;
  color: #c9d1d9;
  border-color: #484f58;
}

.zq-copy-btn:active {
  background: #484f58;
}

.zq-copy-btn.zq-copied {
  color: #3fb950;
  border-color: rgba(63,185,80,0.3);
  background: rgba(63,185,80,0.08);
}


/* ── Inline code badges ────────────────────────────────────────────── */
/* Small single-line highlighted snippets for commands, paths, etc.     */
/* Usage: <code class="zq-inline language-bash">npx zquery dev</code> */

code.zq-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(22,27,34,0.85);
  border: 1px solid rgba(48,54,61,0.6);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: baseline;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

code.zq-inline:hover {
  border-color: rgba(88,166,255,0.2);
  box-shadow: 0 0 12px rgba(88,166,255,0.06), inset 0 0 16px rgba(88,166,255,0.02);
}

code.zq-inline.zq-highlighted {
  text-shadow: none;
}

.zq-inline-copy,
.zq-inline-copy:hover,
.zq-inline-copy:active {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #484f58;
  transition: color 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}

.zq-inline-copy:hover {
  color: #6e7681;
}

.zq-inline-copy:active {
  color: #58a6ff;
}

.zq-inline-copy.zq-copied,
.zq-inline-copy.zq-copied:hover {
  color: #58a6ff;
}

.zq-inline-copy svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Mobile: tighter inline badges */
@media (max-width: 768px) {
  code.zq-inline {
    gap: 4px;
    padding: 1px 5px;
    font-size: 0.78em;
    line-height: 1.4;
    border-radius: 4px;
  }

  .zq-inline-copy svg {
    width: 10px;
    height: 10px;
  }
}


/* ── Code block base styles (replaces Prism's) ─────────────────────── */
/* These are intentionally scoped to .docs-section and .compare-card
   so they layer on top of the existing pre/code rules in docs.css.
   The general pre styling is already in docs.css — these just handle
   highlighted content specific to zq-highlight.                        */

pre code.zq-highlighted {
  text-shadow: none;
}

/* Line highlight glow — subtle hover effect on code blocks */
pre:has(code.zq-highlighted):hover {
  border-color: rgba(88,166,255,0.15);
  box-shadow: 0 0 20px rgba(88,166,255,0.04), inset 0 0 30px rgba(88,166,255,0.02);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}