/* =============================================================
   CloudSonic Docs Pro — sonic-code.css
   Loads on every page that has <pre> or <code>.
   Override variables in your theme's Additional CSS.
   ============================================================= */
:root {
    --sonic-code-bg: #f9f9f9;
    --sonic-code-text: #333333;
    --sonic-code-radius: 0.4rem;
    --sonic-inline-code-bg: rgba(0, 0, 0, 0.04);
    --sonic-inline-code-text: rgba(0, 0, 0, 0.73);
    --sonic-inline-code-border: rgba(0, 0, 0, 0.13);
    --sonic-font-mono: "SF Mono", "SFMono-Regular", ui-monospace, consolas, "Liberation Mono", menlo, monospace;
    --sonic-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Theme overrides — force our styles on code everywhere */
code[class*="language-"] { padding: 0 !important; background: none !important; background-color: transparent !important; border-radius: 0 !important; font-size: 13px !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-word !important; color: var(--sonic-code-text) !important; font-family: var(--sonic-font-mono) !important; }
pre[class*="language-"], .sonic-code-wrap pre { background: var(--sonic-code-bg) !important; background-color: var(--sonic-code-bg) !important; border-radius: var(--sonic-code-radius) !important; padding: 1em 3em 1em 1.2em !important; margin: 0 !important; overflow: visible !important; color: var(--sonic-code-text) !important; font-family: var(--sonic-font-mono) !important; font-size: 13px !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-word !important; word-wrap: break-word !important; tab-size: 4 !important; max-width: 100% !important; margin-bottom: 0 !important; }
.sonic-code-wrap pre *, pre[class*="language-"] * { font-family: inherit !important; font: inherit !important; }
.sonic-code-wrap pre, pre[class*="language-"] { background: var(--sonic-code-bg) !important; color: var(--sonic-code-text) !important; }

/* Line numbers — override Prism plugin injected styles */
pre[class*="language-"].line-numbers { position: relative !important; padding-left: 4.2em !important; counter-reset: linenumber; }
pre[class*="language-"].line-numbers > code { position: relative !important; white-space: inherit !important; }
.line-numbers .line-numbers-rows { position: absolute !important; pointer-events: none; top: -2px!important; left: -2.4em!important; width: auto!important; border-right: none !important; user-select: none; padding: 0 !important; margin: 0 !important; line-height: 1.4!important; text-align: left!important; font-family: inherit!important; font: inherit!important; }
.line-numbers-rows > span { display: block !important; counter-increment: linenumber; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
.line-numbers-rows > span::before { content: counter(linenumber) !important; color: #c4c4c4!important; display: block !important; padding-right: 0.8em !important; text-align: right !important; font-size: 13px !important; font-family: var(--sonic-font-mono) !important; font-weight: normal !important; font-style: normal !important; }

/* Inline code */
:not(pre) > code:not([class*="language-"]) { background: var(--sonic-inline-code-bg) !important; background-color: var(--sonic-inline-code-bg) !important; color: var(--sonic-inline-code-text) !important; padding: 2px 6px !important; border-radius: var(--sonic-code-radius)!important; font-family: inherit!important; white-space: normal !important; font-family: inherit;     box-shadow: inset 0 0 0 1px  var(--sonic-inline-code-border)!important;  }

/* Prism token colours (Sanity-style light theme) */
.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata { color: #c4c4c4; font-style: italic; }
.token.punctuation { color: #666666; }
.token.tag,.token.attr-name,.token.namespace,.token.deleted { color: #e3116c; }
.token.function-name { color: #6f42c1; }
.token.boolean,.token.number { color: #005cc5; }
.token.function { color: #6f42c1; }
.token.property,.token.class-name,.token.constant,.token.symbol { color: #005cc5; }
.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin { color: #d73a49; }
.token.string,.token.char,.token.attr-value,.token.regex,.token.variable { color: #22863a; }
.token.operator,.token.entity,.token.url { color: #d73a49; }
.token.important,.token.bold { font-weight: 700; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }
.token.inserted { color: #22863a; }

/* Code block wrapper + copy icon */
.sonic-code-wrap { position: relative; margin: 20px 0; border-radius: var(--sonic-code-radius); overflow: hidden; border: 1px solid #e1e4e8; }
.sonic-code-wrap pre[class*="language-"] { border-radius: 0 !important; }
.sonic-copy-btn { position: absolute; top: 11px; right: 10px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; cursor: pointer; color: #aaa; z-index: 10; transition: background 0.15s, color 0.15s; }
.sonic-copy-btn:hover { background: rgba(0,0,0,0.07); color: #555; }
.sonic-copy-btn .sonic-icon-copy { display: block; transition: opacity 0.15s; }
.sonic-copy-btn .sonic-icon-check { display: none; opacity: 0; transition: opacity 0.15s; }
.sonic-copy-btn.sonic-copied .sonic-icon-copy { display: none; }
.sonic-copy-btn.sonic-copied .sonic-icon-check { display: block; opacity: 1; color: #555; }

/* Callouts */
.sonic-callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 8px; margin: 20px 0; font-size: 0.9rem; line-height: 1.6; }
.sonic-callout--note { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.sonic-callout--warning { background: #fefce8; border: 1px solid #fde68a; color: #854d0e; }
.sonic-callout--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.sonic-callout-icon { flex-shrink: 0; margin-top: 2px; }
.sonic-callout-body { flex: 1; }
.sonic-callout-label { font-weight: 600; margin-right: 2px; }

/* kbd */
kbd { display: inline-block; color: #374151; background: #f9fafb; border: 1px solid #d1d5db; border-bottom-width: 3px; border-radius: 5px; padding: 0.1875em 0.375em; font-family: var(--sonic-font-sans); font-size: 0.8em; line-height: 1.4; white-space: nowrap; }

/* docs-image */
.docs-image { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e1e4e8; margin: 24px 0; display: block; }