/* ===========================================================================
 *  Vopth 博客自定义样式
 *  加载方式：_config.butterfly.yml → inject.head
 *
 *  全部使用 Butterfly 自带的 CSS 变量（--card-bg / --font-color / --card-meta
 *  / --card-box-shadow 等），所以亮色与暗色模式会自动适配，不用写两套。
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 *  1. 首页个人简介卡片
 *  由 source/js/profile-hero.js 插入到 #recent-posts 的第一个位置
 * ------------------------------------------------------------------------- */
.ph-card {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--card-box-shadow);
  transition: box-shadow 0.3s;
}

.ph-card:hover {
  box-shadow: var(--card-hover-box-shadow);
}

.ph-avatar {
  flex: 0 0 auto;
  line-height: 0;
}

.ph-avatar img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.18);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ph-card:hover .ph-avatar img {
  transform: rotate(360deg);
}

.ph-body {
  min-width: 0;
}

.ph-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--font-color);
}

.ph-badge {
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #4a6cf7, #7c5cff);
}

.ph-bio {
  margin: 8px 0 14px;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--card-meta);
}

.ph-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ph-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.86rem;
  border-radius: 999px;
  color: var(--font-color);
  background: var(--text-bg-hover);
  transition: all 0.3s;
}

.ph-links a:hover {
  color: #fff;
  background: #4a6cf7;
  transform: translateY(-2px);
}

.ph-links a i {
  font-size: 0.95em;
}

@media screen and (max-width: 768px) {
  .ph-card {
    flex-direction: column;
    padding: 20px 18px;
    text-align: center;
  }

  .ph-name,
  .ph-links {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 *  2. 细节打磨（都很克制，只调观感不动布局）
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 *  banner 上的站点标题 / 页面标题
 *
 *  注意：#site-title 在【两类页面】上都会出现 ——
 *    - 首页 banner（全屏 100vh）      -> header 的 class 含 .full_page
 *    - 内页 banner（关于页等，400px） -> header 的 class 含 .not-home-page
 *    - 文章页 banner（400px）         -> header 的 class 含 .post-bg
 *  两者尺寸需求差很多，所以必须分别设置。
 *  只写 #page-header #site-title 一个选择器，会把首页的大字号带到内页上。
 * ------------------------------------------------------------------------- */

/* 首页（全屏 banner）：主题默认 2.85em（约 40px），放大到约 62px。
   用 em 而不是 px：会跟随主题基础字号一起缩放，用户放大字体时也跟着变。 */
#page-header.full_page #site-title {
  font-size: 4.4em;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

#page-header.full_page #site-subtitle {
  /* 主题默认 1.72em（约 24px）→ 约 32px
     注意：这里【只给容器】设字号。#subtitle 是它的子元素，
     如果再给 #subtitle 写一次 em，会变成 2.3 × 2.3 的复合效果（约 74px）而爆掉。 */
  font-size: 2.3em;
  font-weight: 400;
  opacity: 0.95;
}

/* 内页 / 文章页（400px 高的 banner）：适度放大到约 36px，不照搬首页尺寸 */
#page-header.not-home-page #site-title,
#page-header.post-bg #site-title {
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* banner 背景是照片和视频，画面偏亮。
   白色文字压在亮背景上对比度不够，加文字阴影保证可读性。
   text-shadow 是【继承属性】，设在外层容器上，内部元素会自动继承，
   不需要（也绝不应该）再写一遍。 */
#page-header #site-title,
#page-header #site-subtitle {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 手机上屏幕窄，标题要缩回去，否则会折行溢出。
   必须自己写：上面的选择器用了两个 id，优先级高于主题的移动端规则，
   不覆盖的话手机上会一直用桌面的大字号。 */
@media screen and (max-width: 768px) {
  /* 手机端首页 banner 的两个修正：
   *
   * 1) 高度用 svh（small viewport height）。
   *    iOS Safari 的 100vh 包含地址栏后面的区域，导致 banner 比可见区高约 90px，
   *    底部的下滑箭头会被地址栏挡住、需要先滚一下才看得到。
   *    svh 取「地址栏展开时」的可见高度，保证整屏内容都看得见、且不会随地址栏
   *    收起/展开来回跳动。不认识 svh 的老浏览器回落到上一行的 100vh（主题原值）。
   *
   * 2) 横向焦点左移到 25%。
   *    首页大图是 1920x1186 的横图，竖屏 390x844 下 cover 的缩放比是
   *    max(390/1920, 844/1186) = 0.712，图片被渲染成 1367x844，
   *    于是只显示原图中间约 29% 的宽度。而人物在画面偏左（脸约在 28%~35% 处），
   *    默认的 center 取的是 35.7%~64.3% —— 正好把脸裁在窗口外，只剩躯干。
   *    25% 让可视区落在约 17.9%~46.4%，脸就进来了。 */
  #page-header.full_page {
    height: 100vh;
    height: 100svh;
    background-position: 25% center;
  }

  #page-header.full_page #site-title {
    font-size: 2.6em;
  }

  #page-header.full_page #site-subtitle {
    font-size: 1.5em;
  }

  #page-header.not-home-page #site-title,
  #page-header.post-bg #site-title {
    font-size: 1.9em;
  }
}

/* 文章卡片 / 侧边栏卡片圆角统一 */
.recent-post-item,
#aside-content .card-widget {
  border-radius: 12px;
}

/* 正文里的链接：下划线稍微离开文字，更好认 */
#article-container a {
  text-underline-offset: 3px;
}

/* 代码块与引用块圆角 */
#article-container figure.highlight,
#article-container pre,
#article-container blockquote {
  border-radius: 8px;
}

#article-container blockquote {
  border-radius: 0 8px 8px 0;
}

/* 标签云用胶囊样式 */
#aside-content .card-tag-cloud a {
  border-radius: 999px;
}

/* 目录卡片在暗色下更清楚 */
#card-toc .toc-link.active {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 *  3. 关于页 / 个人主页（/about/）
 * ------------------------------------------------------------------------- */
.about-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 26px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(74, 108, 247, 0.1), rgba(124, 92, 255, 0.1));
  border: 1px solid rgba(74, 108, 247, 0.18);
}

.about-avatar {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(74, 108, 247, 0.15);
}

.about-name {
  margin: 0 0 4px;
  font-size: 1.6rem;
  color: var(--font-color);
}

.about-tagline {
  margin: 0 0 10px;
  font-weight: 600;
  color: #4a6cf7;
}

.about-desc {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--card-meta);
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.86rem;
  border-radius: 999px;
  color: var(--font-color);
  background: var(--text-bg-hover);
  transition: all 0.3s;
}

.about-links a:hover {
  color: #fff;
  background: #4a6cf7;
  transform: translateY(-2px);
}

.about-skills {
  margin: 6px 0 18px;
}

.about-skill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.about-skill span {
  flex: 0 0 190px;
  font-size: 0.9rem;
  color: var(--font-color);
}

/* 用 i 元素当进度条，宽度由内联 --w 决定 */
.about-skill i {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  font-style: normal;
  border-radius: 999px;
  background: var(--text-bg-hover);
  overflow: hidden;
}

.about-skill i::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #4a6cf7, #7c5cff);
}

@media screen and (max-width: 768px) {
  .about-hero {
    flex-direction: column;
    padding: 20px 18px;
    text-align: center;
  }

  .about-avatar {
    width: 88px;
    height: 88px;
  }

  .about-links {
    justify-content: center;
  }

  .about-skill span {
    flex: 0 0 118px;
    font-size: 0.82rem;
  }
}

/* ---------------------------------------------------------------------------
 *  4. 白底头像的描边处理
 *
 *  当前头像是白底 JPEG（JPEG 不支持透明通道）。
 *  在亮色模式下白底很干净，但在暗色模式下会变成"卡片上的一块白圆盘"。
 *  加一圈主题色描边后，无论亮色暗色都像一个"圆形头像相框"，观感是有意为之。
 *
 *  以后换成透明背景的 PNG，这段也可以保留 —— 描边本身不难看。
 * ------------------------------------------------------------------------- */

/* 首页个人简介卡片 + 关于页 */
.ph-avatar img,
.about-avatar {
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.4);
}

/* 侧边栏作者卡头像
   注意：主题的 .avatar-img 容器设了 overflow: hidden，且内部 img 是 100%×100%，
   所以描边必须加在【容器】上。加在 img 上会因为超出容器而被裁掉，看不到效果。 */
#aside-content .avatar-img {
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.4);
}

/* ---------------------------------------------------------------------------
 *  5. 首页 banner 照片的遮罩加深
 *
 *  背景换成了照片，画面中上部是大面积【亮白天空】，而标题正好落在 43% 高度那一带。
 *  主题默认遮罩是 --mark-bg = 30% 黑，算下来：白底 255 → 178 (#B2B2B2)，
 *  白字压在上面对比度只有约 1.9:1，远低于 WCAG 建议的 4.5:1，标题会"糊在背景里"。
 *
 *  这里改成中间深、两端略浅的渐变：
 *    - 把文字所在的中间带压到 50% 黑（#808080，对比度约 3.9:1），配合上面的
 *      text-shadow 已经足够清晰；
 *    - 顶部保留稍浅的遮罩，不至于把树叶和天空的层次全部压死。
 *
 *  选择器比主题多一个 .full_page 类，优先级更高；且 custom.css 加载在主题 CSS 之后。
 *  只作用于首页 banner —— 内页用的是渐变 SVG，不需要加深。
 *
 *  觉得太暗或还是看不清，改下面这几个数字即可。
 * ------------------------------------------------------------------------- */
#page-header.full_page:not(.not-top-img)::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.42) 30%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.44) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ---------------------------------------------------------------------------
 *  6. 订阅页（/subscribe/）
 *
 *  全部规则都以 #article-container 开头，因为页面内容在正文容器里，
 *  而主题对容器内的 h2 / code 等元素有一套默认样式，不提高优先级会被盖掉。
 *  标题特意用 <div> 而不是 <h2>，从根上避开主题的标题装饰（下划线 + 图标）。
 * ------------------------------------------------------------------------- */

#article-container .subscribe-hero {
  padding: 30px 20px 26px;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(242, 101, 34, 0.12), rgba(74, 108, 247, 0.12));
  border: 1px solid rgba(242, 101, 34, 0.2);
}

#article-container .subscribe-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  font-size: 27px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #f26522, #ff9a44);
  box-shadow: 0 6px 18px rgba(242, 101, 34, 0.32);
}

#article-container .subscribe-hero-title {
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--font-color);
}

#article-container .subscribe-hero-desc {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--card-meta);
}

/* 订阅地址 + 复制按钮 */
#article-container .subscribe-copy {
  display: flex;
  align-items: stretch;
  margin: 16px 0 12px;
  border: 1px solid rgba(74, 108, 247, 0.25);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
}

#article-container .subscribe-copy code {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 13px 16px;
  font-size: 0.92rem;
  color: var(--font-color);
  background: transparent;
  border: 0;
  border-radius: 0;
  word-break: break-all;
}

#article-container .subscribe-copy button {
  flex: 0 0 auto;
  padding: 0 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: #4a6cf7;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s;
}

#article-container .subscribe-copy button:hover {
  background: #3355e0;
}

#article-container .subscribe-copy button.copied {
  background: #00c4b6;
}

/* 小提示条 */
#article-container .subscribe-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--card-meta);
  border-radius: 8px;
  border-left: 3px solid #00c4b6;
  background: rgba(0, 196, 182, 0.08);
}

#article-container .subscribe-tip i {
  margin-top: 5px;
  color: #00c4b6;
}

#article-container .subscribe-tip code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--text-bg-hover);
}

@media screen and (max-width: 768px) {
  #article-container .subscribe-copy {
    flex-direction: column;
  }

  #article-container .subscribe-copy button {
    padding: 12px;
  }
}

/* ---------------------------------------------------------------------------
 *  8. 视频 banner（关于页）
 *
 *  注入逻辑见 source/js/banner-video.js。这里只负责「铺满 + 层级」。
 *
 *  层级关系（已逐条核实过主题 CSS）：
 *    - #nav 是 position:fixed + z-index:91 —— 天生在最上层，不需要处理；
 *    - header 自身的背景（海报图）在最底，作为视频加载前的占位；
 *    - 视频 z-index:0 压在海报图之上；
 *    - 主题的遮罩 ::before【默认没有 z-index】，会排在视频下面 ——
 *      必须显式提到 1，否则视频会把遮罩盖掉，白色标题压在亮画面上就看不清了；
 *    - 页面标题 #page-site-info 是 absolute 且无 z-index，要提到 2 才在遮罩之上。
 *
 *  这两者本来就已经定位，加 z-index 只影响绘制顺序，不会改变它们的位置。
 * ------------------------------------------------------------------------- */
#page-header.has-video-banner {
  overflow: hidden;
}

#page-header.has-video-banner .banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例铺满，超出部分裁掉 */
  z-index: 0;
  pointer-events: none; /* 不拦截鼠标，避免挡住导航栏的点击 */
}

#page-header.has-video-banner:not(.not-top-img)::before {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.42);
}

#page-header.has-video-banner #page-site-info {
  z-index: 2;
}

/* ---------------------------------------------------------------------------
 *  9. 文章作者署名（由 scripts/post-author.js 在服务端注入）
 *
 *  注入位置：文章标题 </h1> 之后、文章元信息之前。
 *  #post-info 位于 banner 上、文字是白色的，所以这里也用白色，
 *  并加半透明深色底 + 文字阴影，避免压在亮画面上看不清。
 * ------------------------------------------------------------------------- */
#post-info .post-author {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
}

#post-info .post-author a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--white);
  text-decoration: none;
  transition: background 0.25s;
}

#post-info .post-author a:hover {
  background: rgba(0, 0, 0, 0.36);
  color: var(--white);
}

#post-info .post-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

#post-info .post-author .post-author-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

@media screen and (max-width: 768px) {
  #post-info .post-author a {
    padding: 3px 12px 3px 3px;
  }

  #post-info .post-author img {
    width: 34px;
    height: 34px;
  }

  #post-info .post-author .post-author-name {
    font-size: 0.88rem;
  }
}