/* ==================================================================
/*  zq-highlight - custom syntax highlighting for zQuery docs       
/*  and compare cards                                         
/* 
/*  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 */


/* -- 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;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
}

code.zq-inline::-webkit-scrollbar {
  height: 3px;
}

code.zq-inline::-webkit-scrollbar-track {
  background: transparent;
}

code.zq-inline::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}

code.zq-inline::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

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: 6px;
    padding: 2px 8px;
    font-size: 0.82em;
    line-height: 1.5;
    border-radius: 5px;
  }

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

/* -- 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;
}