/* ============================================================
   Syntax Highlighting — Prism.js overrides for Golden Summer Fields
   All classes prefixed fr- to avoid conflicts with Prism's own toolbar plugin
   ============================================================ */

/* Outer wrapper for each code block */
.fr-code-block {
  margin: var(--space-lg) 0;
  /* No overflow:hidden here — that prevents the pre's horizontal scrollbar from working.
     Border-radius clipping is handled by applying radius to the children instead. */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-code-border);
  box-shadow: 0 2px 12px var(--color-shadow);
}

/* Toolbar: language label LEFT, copy button RIGHT — flex row, never absolute */
.fr-code-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-code-border);
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  gap: 0.5rem;
  min-height: 2rem;
  width: 100%;
  box-sizing: border-box;
  /* Round top corners to match the wrapper */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.fr-code-lang {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  line-height: 1.5;
  white-space: nowrap;
  flex: 0 0 auto;
  /* Ensure the button stays in the flex row, never floats or positions absolutely */
  position: relative;
  z-index: 1;
}
.fr-copy-btn:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.fr-copy-btn.copied {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

/* The <pre> sits below the header bar inside the wrapper */
.fr-code-block pre[class*="language-"] {
  margin: 0;
  padding: 1.25rem var(--space-lg);
  /* Allow horizontal scrolling for long code lines */
  overflow-x: auto;
  /* Round bottom corners to match the wrapper */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 600px;
  /* Reset the standalone pre's border and shadow — the wrapper provides these */
  border: none;
  box-shadow: none;
  /* Full width inside wrapper */
  width: 100%;
  box-sizing: border-box;
}

/* Prism base token styles */
pre[class*="language-"],
code[class*="language-"] {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.65;
  background: var(--color-code-bg);
  color: #3d3520;
  text-shadow: none;
  tab-size: 2;
  hyphens: none;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
}

/* Standalone pre without wrapper (fallback / safety net) */
pre[class*="language-"] {
  margin: var(--space-lg) 0;
  padding: 1.25rem var(--space-lg);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-code-border);
  box-shadow: 0 2px 12px var(--color-shadow);
  max-height: 600px;
}

/* Prism tokens — Golden Summer Fields palette */
.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: var(--color-text-muted);
  font-style: italic;
}
.token.punctuation { color: #8b7355; }
.token.namespace { opacity: 0.85; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {
  color: #7b3f00;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin {
  color: #5a7a3a;
}
.token.operator, .token.entity, .token.url, .token.variable {
  color: #9a6f09;
  background: transparent;
}
.token.atrule, .token.attr-value, .token.keyword { color: #6b3fb0; font-weight: 600; }
.token.function, .token.class-name { color: var(--color-accent); font-weight: 600; }
.token.regex, .token.important { color: #c0392b; }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.inserted { background: rgba(90, 122, 58, 0.15); color: #3a6020; }
.token.deleted { background: rgba(192, 57, 43, 0.12); color: #c0392b; }

/* Line numbers gutter */
pre[class*="language-"].line-numbers { padding-left: 3.5em; }