/**
 * Claude / KnowMoreQuant warm polish for hugo-theme-even
 * Tokens mirror knowmorequant-website/frontend/static/css/theme.css
 */
:root {
  --kmq-font-display: "Newsreader", "Noto Serif SC", "Songti SC", Georgia, serif;
  --kmq-font-sans: "Instrument Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --kmq-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, monospace;

  --kmq-accent: #cc785c;
  --kmq-accent-deep: #a9583e;
  --kmq-accent-rgb: 204, 120, 92;
  --kmq-ink: #141413;
  --kmq-body: #3d3d3a;
  --kmq-muted: #6c6a64;
  --kmq-muted-soft: #8e8b82;
  --kmq-line: #e6dfd8;
  --kmq-line-strong: #ddd5c8;
  --kmq-paper: #faf9f5;
  --kmq-surface: #f5f0e8;
  --kmq-hover: #f3eee6;
  --kmq-card: #ffffff;
  --kmq-radius: 6px;
  --kmq-radius-lg: 10px;
}

html {
  background-color: var(--kmq-paper);
  -webkit-font-smoothing: antialiased;
}

body {
  letter-spacing: 0;
}

/* Logo & headings: editorial serif weight */
.logo,
.post-title,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--kmq-ink);
}

.logo {
  color: var(--kmq-ink) !important;
}

/* ——— Nav ——— */
.header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--kmq-line);
  margin-bottom: 0.5rem;
}

.logo-wrapper .logo {
  font-size: 1.65rem;
  letter-spacing: -0.03em;
}

.site-navbar .menu {
  font-family: var(--kmq-font-sans);
  padding-right: 0;
}

.site-navbar .menu .menu-item + .menu-item {
  margin-left: 0.35rem;
}

/* Prefer soft pill hover over underline animation */
.site-navbar .menu .menu-item::before {
  display: none !important;
}

.menu .menu-item-link {
  font-family: var(--kmq-font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kmq-muted) !important;
  padding: 0.35rem 0.65rem;
  border-radius: var(--kmq-radius);
  transition: color 0.12s, background 0.12s;
}

.menu .menu-item-link:hover,
.menu .menu-item-link:focus,
.menu .menu-item.active .menu-item-link {
  color: var(--kmq-ink) !important;
  background: var(--kmq-hover);
}

/* Mobile nav */
.mobile-navbar {
  background: var(--kmq-paper) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--kmq-line);
}

.mobile-navbar .mobile-header-logo .logo {
  font-family: var(--kmq-font-display);
  font-weight: 500;
  color: var(--kmq-ink);
}

.mobile-menu {
  background-color: var(--kmq-surface) !important;
}

.mobile-menu .mobile-menu-list {
  border-top-color: var(--kmq-line) !important;
}

.mobile-menu .mobile-menu-item {
  border-bottom-color: var(--kmq-line) !important;
}

.mobile-menu .mobile-menu-list a {
  font-family: var(--kmq-font-sans);
  font-weight: 500;
  color: var(--kmq-body);
}

.mobile-menu .mobile-menu-list a:hover {
  color: var(--kmq-accent);
}

.slideout-panel {
  background-color: var(--kmq-paper) !important;
}

/* Flatten shadows to match KnowMoreQuant */
.post-content blockquote,
.post-content .table-wrapper > table,
.archive .collection .archive-post,
.copyright {
  box-shadow: none !important;
}

.post-content blockquote {
  color: var(--kmq-muted);
  border-radius: 0 var(--kmq-radius) var(--kmq-radius) 0;
}

.post-content img {
  border-radius: var(--kmq-radius);
}

/* Archive / list hover in warm accent */
.archive .collection .archive-post:hover {
  border-left-color: var(--kmq-accent);
}

/* ——— Code: VS Code Dark+ ——— */
:root {
  --vscode-bg: #1e1e1e;
  --vscode-fg: #d4d4d4;
  --vscode-gutter: #858585;
  --vscode-line: #2d2d2d;
  --vscode-header: #252526;
  --vscode-selection: #264f78;
  --vscode-comment: #6a9955;
  --vscode-keyword: #569cd6;
  --vscode-control: #c586c0;
  --vscode-string: #ce9178;
  --vscode-number: #b5cea8;
  --vscode-function: #dcdcaa;
  --vscode-class: #4ec9b0;
  --vscode-variable: #9cdcfe;
  --vscode-type: #4ec9b0;
  --vscode-regexp: #d16969;
  --vscode-escape: #d7ba7d;
  --vscode-constant: #569cd6;
  --vscode-tag: #569cd6;
  --vscode-attr: #9cdcfe;
  --vscode-punct: #d4d4d4;
}

/* Inline code stays warm on paper */
.post-content code {
  font-family: var(--kmq-font-mono);
  font-size: 0.88em;
  color: var(--kmq-accent-deep);
  background: rgba(var(--kmq-accent-rgb), 0.08);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

/* Fenced / highlighted blocks → VS Code editor */
.post-content pre,
.post-content figure.highlight,
.post-content .highlight > .chroma {
  box-shadow: none !important;
  border: 1px solid var(--vscode-line);
  border-radius: var(--kmq-radius-lg);
  background: var(--vscode-bg) !important;
  color: var(--vscode-fg);
  margin: 1.25em 0;
  overflow: hidden;
  line-height: 1.55;
}

.post-content pre {
  padding: 0.9rem 1rem;
}

.post-content pre code,
.post-content .highlight pre,
.post-content .highlight code {
  padding: 0;
  color: var(--vscode-fg);
  background: transparent !important;
  border-radius: 0;
  font-family: var(--kmq-font-mono);
  font-size: 0.85em;
}

/* Language label bar */
.post-content figure.highlight table::after,
.post-content .highlight > .chroma table::after {
  font-family: var(--kmq-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cccccc !important;
  background: var(--vscode-header) !important;
  border-bottom: 1px solid var(--vscode-line);
  padding: 0.4rem 0.85rem !important;
}

/* Line numbers */
.post-content .highlight .gutter,
.post-content .highlight .lntd:first-child,
.post-content .highlight .lnt,
.post-content .highlight .ln {
  color: var(--vscode-gutter) !important;
  background: transparent !important;
}

.post-content .highlight .lntd:first-child {
  border-right: 1px solid var(--vscode-line);
  background: #1e1e1e !important;
}

.post-content .highlight .lntd:last-child,
.post-content .highlight .code {
  background: var(--vscode-bg) !important;
}

.post-content .highlight pre {
  border: 0;
  margin: 0;
  background: transparent !important;
}

.post-content .highlight .hl {
  background-color: var(--vscode-selection) !important;
}

/* Chroma tokens → Dark+ */
.post-content .chroma .c,
.post-content .chroma .ch,
.post-content .chroma .cm,
.post-content .chroma .c1,
.post-content .chroma .cs,
.post-content .chroma .cp,
.post-content .chroma .cpf { color: var(--vscode-comment) !important; font-style: italic; }

.post-content .chroma .k,
.post-content .chroma .kc,
.post-content .chroma .kd,
.post-content .chroma .kn,
.post-content .chroma .kp,
.post-content .chroma .kr,
.post-content .chroma .kt { color: var(--vscode-keyword) !important; font-weight: normal !important; }

.post-content .chroma .kd,
.post-content .chroma .kn,
.post-content .chroma .ow { color: var(--vscode-control) !important; }

.post-content .chroma .s,
.post-content .chroma .sa,
.post-content .chroma .sb,
.post-content .chroma .sc,
.post-content .chroma .dl,
.post-content .chroma .sd,
.post-content .chroma .s2,
.post-content .chroma .sh,
.post-content .chroma .si,
.post-content .chroma .sx,
.post-content .chroma .sr,
.post-content .chroma .s1,
.post-content .chroma .ss { color: var(--vscode-string) !important; }

.post-content .chroma .se { color: var(--vscode-escape) !important; }
.post-content .chroma .sr { color: var(--vscode-regexp) !important; }

.post-content .chroma .m,
.post-content .chroma .mb,
.post-content .chroma .mf,
.post-content .chroma .mh,
.post-content .chroma .mi,
.post-content .chroma .il,
.post-content .chroma .mo,
.post-content .chroma .l,
.post-content .chroma .ld { color: var(--vscode-number) !important; font-weight: normal !important; }

.post-content .chroma .nf,
.post-content .chroma .fm { color: var(--vscode-function) !important; }

.post-content .chroma .nc,
.post-content .chroma .nn,
.post-content .chroma .ne,
.post-content .chroma .nl { color: var(--vscode-class) !important; }

.post-content .chroma .n,
.post-content .chroma .na,
.post-content .chroma .nb,
.post-content .chroma .bp,
.post-content .chroma .no,
.post-content .chroma .nd,
.post-content .chroma .ni,
.post-content .chroma .nx,
.post-content .chroma .py,
.post-content .chroma .nv,
.post-content .chroma .vc,
.post-content .chroma .vg,
.post-content .chroma .vi,
.post-content .chroma .vm { color: var(--vscode-variable) !important; }

.post-content .chroma .nc .nf,
.post-content .chroma .kt { color: var(--vscode-type) !important; }

.post-content .chroma .nt { color: var(--vscode-tag) !important; font-weight: normal !important; }
.post-content .chroma .na { color: var(--vscode-attr) !important; }

.post-content .chroma .o,
.post-content .chroma .p { color: var(--vscode-punct) !important; }

.post-content .chroma .gd { color: #f44747 !important; background: rgba(244, 71, 71, 0.15); }
.post-content .chroma .gi { color: #89d185 !important; background: rgba(137, 209, 133, 0.12); }
.post-content .chroma .gh,
.post-content .chroma .gu { color: var(--vscode-keyword) !important; font-weight: bold; }
.post-content .chroma .err { color: #f44747 !important; }

/* ——— TOC ——— */
.post-toc {
  box-shadow: none !important;
  border: 1px solid var(--kmq-line);
  border-radius: var(--kmq-radius-lg);
  background: var(--kmq-card) !important;
  padding: 0.85rem 0.75rem 1rem;
}

.post-toc .post-toc-title {
  font-family: var(--kmq-font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--kmq-ink);
  margin: 0 0.35rem 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--kmq-line);
}

.post-toc .post-toc-content {
  font-family: var(--kmq-font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
}

.post-toc .post-toc-content ul {
  list-style: none;
  padding-left: 0.15rem;
  margin: 0;
}

.post-toc .post-toc-content ul ul {
  padding-left: 0.75rem;
  margin-top: 0.15rem;
  border-left: 1px solid var(--kmq-line);
}

.post-toc .post-toc-content li {
  margin: 0.15rem 0;
}

.post-toc .post-toc-content a {
  display: block;
  color: var(--kmq-muted);
  padding: 0.28rem 0.5rem;
  border-radius: var(--kmq-radius);
  border-left: 2px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.post-toc .post-toc-content a:hover {
  color: var(--kmq-ink);
  background: var(--kmq-hover);
  text-decoration: none;
}

.post-toc .post-toc-content .toc-link.active {
  color: var(--kmq-accent-deep) !important;
  background: rgba(var(--kmq-accent-rgb), 0.08);
  border-left-color: var(--kmq-accent);
  font-weight: 500;
}

/* Footer soft */
.footer {
  color: var(--kmq-muted);
}

.footer a:hover {
  color: var(--kmq-accent);
}

/* Back to top */
.back-to-top {
  background: var(--kmq-accent) !important;
}

.back-to-top:hover {
  background: var(--kmq-accent-deep) !important;
}