/**
 * Code Block Pre-Styling (FOUC Prevention)
 *
 * This CSS loads BEFORE Prism.js to ensure code blocks look styled immediately
 * on page load. It provides monospace font, background colors, and padding
 * that match the theme's dark/light modes using [data-theme] attribute.
 *
 * The styling is intentionally minimal and structural - Prism.js token colors
 * are applied by prism-theme-*.css in Phase 7.
 */

/* ==========================================================================
   Block Code Containers
   ========================================================================== */

.wp-block-code,
pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  padding: 1em;
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin: 1.5em 0;
  white-space: pre;
  word-wrap: normal;
}

/* ==========================================================================
   Dark Theme Pre-Styling
   ========================================================================== */

[data-theme="dark"] .wp-block-code,
[data-theme="dark"] pre {
  background-color: var(--color-code-block-bg);
  color: var(--color-code-block-text);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Light Theme Pre-Styling
   ========================================================================== */

[data-theme="light"] .wp-block-code,
[data-theme="light"] pre {
  background-color: var(--color-code-block-bg);
  color: var(--color-code-block-text);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Code Element Inside Pre
   ========================================================================== */

.wp-block-code code,
pre code {
  font-family: inherit;
  background: none;
  padding: 0;
  display: block;
  color: inherit;
}

/* Theme-scoped overrides to beat [data-theme] inline code rules */
[data-theme="light"] .wp-block-code code,
[data-theme="light"] pre code,
[data-theme="dark"] .wp-block-code code,
[data-theme="dark"] pre code {
  background: none;
  color: inherit;
}

/* ==========================================================================
   Prism Token Baseline
   ========================================================================== */

.token {
  line-height: inherit;
}

/* ==========================================================================
   Scrollbar Styling for Horizontal Overflow
   ========================================================================== */

[data-theme="dark"] pre::-webkit-scrollbar {
  height: 8px;
}

[data-theme="dark"] pre::-webkit-scrollbar-track {
  background: #2a2a2a;
}

[data-theme="dark"] pre::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

[data-theme="dark"] pre::-webkit-scrollbar-thumb:hover {
  background: #666;
}

[data-theme="light"] pre::-webkit-scrollbar {
  height: 8px;
}

[data-theme="light"] pre::-webkit-scrollbar-track {
  background: #f2f3f3;
}

[data-theme="light"] pre::-webkit-scrollbar-thumb {
  background: #bcc0c4;
  border-radius: 4px;
}

[data-theme="light"] pre::-webkit-scrollbar-thumb:hover {
  background: #9a9ea2;
}