/* ============================================================
   VKSight 原生主题 —— 基础样式层
   design token 直接从 handsome-medium-skin.css 搬过来做第一层基础样式，
   不再是"主题默认样式 + CSS覆盖层"的双层结构。
   ============================================================ */

/* 字体自托管：原来用 CSS @import 挂 Google Fonts CDN，跟当初定的架构方案（"字体自托管，
   不依赖 Google Fonts CDN——国内访问不稳定"，见 eventual-orbiting-cookie.md）正好相反，
   而且 @import 本身是阻塞式加载——浏览器得先下载解析完这个文件才会发现这一行，再去发起
   字体请求，白白多一轮串行往返。改成本地 @font-face：只留 Lora/Work Sans 实际用到的
   latin 子集（正文中日常出现的西文只有标题里偶尔的英文单词和标点，不需要 cyrillic/vietnamese
   等其他子集），Lora/Work Sans 本来就是可变字体，一个文件用 font-weight 区间覆盖多个字重，
   不需要每个字重单独下一个文件。 */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/worksans-latin.woff2') format('woff2');
}

:root {
  --vk-bg:        oklch(98% 0.015 65);
  --vk-bg-alt:    oklch(95% 0.02 58);
  --vk-ink:       oklch(22% 0.02 50);
  --vk-ink-muted: oklch(45% 0.026 50);
  --vk-ink-faint: oklch(65% 0.022 55);
  --vk-border:    oklch(88% 0.02 55);
  --vk-accent:    #B45309;
}
html.theme-dark {
  --vk-bg:        oklch(18% 0.016 50);
  --vk-bg-alt:    oklch(23% 0.018 50);
  --vk-ink:       oklch(92% 0.012 60);
  --vk-ink-muted: oklch(70% 0.018 55);
  --vk-ink-faint: oklch(52% 0.02 55);
  --vk-border:    oklch(32% 0.018 50);
  --vk-accent:    #DB7F3D;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--vk-bg);
  color: var(--vk-ink);
  font-family: 'Work Sans', 'Microsoft YaHei', system-ui, sans-serif;
  line-height: 1.6;
}
a { color: var(--vk-ink); text-decoration: none; }

/* ---------- 顶部导航 ---------- */
.vk-header {
  border-bottom: 1px solid var(--vk-border);
  position: sticky;
  /* 声明了 viewport-fit=cover 就要真的用上 safe-area-inset，不然横屏时刘海/灵动岛区域
     没有做避让，等于声明了却没兑现。 */
  top: env(safe-area-inset-top, 0px);
  background: var(--vk-bg);
  z-index: 10;
}
.vk-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 24px;
}
.vk-brand {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
}
.vk-nav { display: flex; gap: 16px; flex: 1; }
.vk-nav a { color: var(--vk-ink-muted); font-size: 14px; }
.vk-nav a.current { color: var(--vk-accent); }
.vk-header-actions { display: flex; align-items: center; gap: 10px; }
#vk-search input {
  border: 1px solid var(--vk-border);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--vk-bg-alt);
  color: var(--vk-ink);
  /* 16px 是 iOS Safari 判断"要不要自动放大页面"的分界线，低于这个数聚焦输入框会被
     强制缩放，体验很差——之前是 13px，手机上点搜索框会突然被放大。 */
  font-size: 16px;
}
#vk-mode-toggle, #vk-nav-toggle {
  background: none;
  border: 1px solid var(--vk-border);
  border-radius: 999px;
  /* iOS 人机界面指南建议的最小触控尺寸是 44pt，之前是 32px，手机上不好点准。 */
  width: 44px; height: 44px;
  cursor: pointer;
  display: none;
}
#vk-nav-toggle { align-items: center; justify-content: center; font-size: 18px; }

/* ---------- 布局 ---------- */
.vk-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .vk-layout { grid-template-columns: 1fr; }
  /* 之前手机上直接把 .vk-nav 整个 display:none，"关于我"这类页面链接完全不可达，
     不是体验降级，是功能缺失。改成收进一个由 #vk-nav-toggle 触发的下拉菜单，
     跟 #vk-mode-toggle 一样在窄屏才显示。 */
  #vk-mode-toggle, #vk-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .vk-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--vk-bg);
    border-bottom: 1px solid var(--vk-border);
    padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  }
  .vk-nav.vk-nav-open { display: flex; }
  .vk-nav a { padding: 10px 0; border-bottom: 1px solid var(--vk-border); font-size: 15px; }
  .vk-nav a:last-child { border-bottom: none; }
  .vk-header-inner { position: relative; }
}
@media (min-width: 761px) {
  #vk-nav-toggle { display: none !important; }
}

/* ---------- 首页信息流 / 卡片 ---------- */
.vk-archive-title { font-family: 'Lora', Georgia, serif; font-size: 28px; margin-bottom: 28px; }
.vk-feed { display: flex; flex-direction: column; gap: 40px; }
.vk-post-card {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vk-border);
  transition: opacity .15s ease;
}
.vk-post-cover {
  display: block;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
}
.vk-post-cover img { width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; display: block; }
.vk-post-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--vk-ink-faint);
  margin-bottom: 10px;
  gap: 8px;
}
.vk-post-dot { margin: 0 2px; }
.vk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Work Sans', sans-serif;
  flex-shrink: 0;
  object-fit: cover; /* 真图头像(<img>)时用，色块头像(<span>)时这条规则被忽略，无副作用 */
}
.vk-post-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 27px;
  margin: 0 0 10px;
  line-height: 1.3;
}
.vk-post-title a { color: var(--vk-ink); font-weight: 700; }
.vk-post-excerpt { color: var(--vk-ink-muted); margin: 0 0 12px; }
.vk-post-tags a,
.vk-tag-pill {
  display: inline-block;
  background: var(--vk-bg-alt);
  color: var(--vk-ink-muted);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
  font-size: 12px;
  font-weight: 500;
}
.vk-page-nav { margin-top: 24px; display: flex; justify-content: space-between; font-size: 14px; }

/* ---------- 侧边栏 ---------- */
.vk-sidebar { display: flex; flex-direction: column; gap: 32px; }
.vk-widget-title { font-family: 'Lora', Georgia, serif; font-size: 16px; margin: 0 0 12px; }
.vk-widget-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.vk-widget-list li { margin-bottom: 8px; color: var(--vk-ink-muted); }
.vk-tag-cloud { display: flex; flex-wrap: wrap; }
.vk-blog-info li { display: flex; justify-content: space-between; gap: 8px; }
.vk-blog-info { font-family: 'Work Sans', sans-serif; }
.vk-info-label { color: var(--vk-ink-faint); }
.vk-info-value { color: var(--vk-ink-muted); font-weight: 500; }

/* ---------- 文章详情页 ---------- */
.vk-article-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 28px;
}
.vk-article-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 36px;
  line-height: 1.25;
  margin: 0 0 20px;
}
.vk-byline { align-items: center; gap: 12px; }
.vk-byline .vk-avatar { width: 40px; height: 40px; font-size: 16px; }
.vk-byline .vk-post-author { font-weight: 600; color: var(--vk-ink); font-size: 14px; }
.vk-byline-sub { font-size: 13px; color: var(--vk-ink-faint); }
.vk-article-tools { margin-left: auto; display: flex; gap: 8px; }
.vk-tool-btn {
  background: none;
  border: 1px solid var(--vk-border);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 14px;
}

.vk-related { margin: 40px 0; padding-top: 24px; border-top: 1px solid var(--vk-border); }
.vk-related-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 600px) { .vk-related-list { grid-template-columns: 1fr; } }
.vk-related-item {
  display: block;
  padding: 14px;
  border: 1px solid var(--vk-border);
  border-radius: 8px;
  color: var(--vk-ink);
}
.vk-related-title { display: block; font-family: 'Lora', Georgia, serif; font-weight: 700; margin-bottom: 6px; }
.vk-related-item time { font-size: 12px; color: var(--vk-ink-faint); }
.vk-article-content {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1.85;
  margin-top: 24px;
}
.vk-article-content pre {
  border-radius: 8px;
  overflow-x: auto;
}
/* highlight.js 的 github-dark 主题自己给 pre code.hljs 设了 padding:1em + 背景色，
   跟我们自己 .vk-article-content pre 的 padding/背景叠在一起会变成两层框——外层
   pre 只留圆角+溢出裁切，背景/内边距统一交给 hljs 的主题决定，不重复设置一份。
   代码高亮只在文章页加载（见 header.php/footer.php），没加载 hljs 的行内代码
   （没有 .hljs class）走下面这条普通样式，不受影响。 */
.vk-article-content pre:not(:has(code.hljs)) {
  background: var(--vk-bg-alt);
  padding: 14px;
}
.vk-article-content code {
  background: var(--vk-bg-alt);
  border-radius: 4px;
  padding: 2px 6px;
}
.vk-article-content code.hljs {
  border-radius: 8px;
}
.vk-article-content blockquote {
  border-left: 3px solid var(--vk-ink);
  margin-left: 0;
  padding-left: 16px;
  color: var(--vk-ink-muted);
  font-style: italic;
}
.vk-article-content img { max-width: 100%; border-radius: 8px; }
.vk-article-content h2, .vk-article-content h3 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: var(--vk-ink);
  margin: 32px 0 12px;
}
.vk-article-content h2 { font-size: 21px; }
.vk-article-content h3 { font-size: 18px; }
.vk-article-content strong { color: var(--vk-ink); }
.vk-article-content ul, .vk-article-content ol { padding-left: 22px; }
.vk-article-content li { margin-bottom: 6px; }
.vk-github-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vk-ink);
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  border: 1px solid var(--vk-border);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
}
.vk-github-link svg { flex-shrink: 0; }
.vk-post-near {
  display: flex;
  justify-content: space-between;
  margin: 32px 0;
  padding: 16px 0;
  border-top: 1px solid var(--vk-border);
  font-size: 14px;
}

/* ---------- 评论区 ---------- */
.vk-comments { margin-top: 40px; border-top: 1px solid var(--vk-border); padding-top: 24px; }
.vk-comments form input, .vk-comments form textarea {
  width: 100%;
  border: 1px solid var(--vk-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--vk-bg-alt);
  color: var(--vk-ink);
  font-family: inherit;
  margin-top: 4px;
}
.vk-comments form label { font-size: 13px; color: var(--vk-ink-muted); }
.vk-comments form button {
  background: var(--vk-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
}

.vk-footer {
  text-align: center;
  padding: 24px;
  color: var(--vk-ink-faint);
  font-size: 13px;
}
.vk-empty { color: var(--vk-ink-faint); }

/* ---------- hover 效果统一收在这里，只给"真的有鼠标"的设备用 ----------
   之前这些 :hover 规则直接散落在各自组件旁边、没有媒体查询保护。触摸设备（手机/平板）
   没有真正的 hover 概念，点一下会触发这些规则、状态卡住直到点别处才消失（"粘滞 hover"），
   iOS Safari 和 Android Chrome 都有这个通病。用 (hover: hover) and (pointer: fine)
   限定只在有精确指点设备（鼠标/触控板）时才生效，触摸设备完全不会命中这些规则。 */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--vk-accent); }
  .vk-nav a:hover { color: var(--vk-accent); }
  .vk-post-card:hover .vk-post-title a { color: var(--vk-accent); }
  .vk-post-tags a:hover,
  .vk-tag-pill:hover { background: var(--vk-accent); color: #fff; }
  .vk-tool-btn:hover { border-color: var(--vk-accent); }
  .vk-related-item:hover { border-color: var(--vk-accent); }
  .vk-github-link:hover { border-color: var(--vk-accent); color: var(--vk-accent); }
}