/* ============================================================
   青绿山水 · TechInk v2 — 科技感 × 中国水墨画
   背景取材：青绿山水画（孤舟渔隐）
   配色：宣纸米黄 + 山林青绿 + 亮青科技点缀
   ============================================================ */

:root {
  /* 青墨基调（来自画中竹叶与远山） */
  --ink-deep: #16332e;      /* 最深的青墨，用于页脚、标题 */
  --ink-dark: #1e453e;      /* 深青墨，主色 */
  --ink-mid: #2d5f56;       /* 中青墨 */
  --ink-soft: #4a7a70;      /* 柔和的青 */
  --ink-gray: #6b7d78;      /* 灰青，用于次要文字 */

  /* 宣纸底色（来自画中留白与水面） */
  --paper: #f5f1e6;
  --paper-warm: #efe9d9;
  --paper-deep: #e6ddc9;

  /* 青绿强调色（来自画中水面与山峦） */
  --jade: #3d8b7a;
  --jade-light: #4fa892;
  --jade-pale: #d8ebe4;

  /* 科技点缀：亮青 */
  --tech-glow-color: #5fc9b0;
  --tech-glow: rgba(95, 201, 176, 0.35);

  /* 朱红印章 */
  --seal-red: #b03a2e;

  /* Hero 横幅尺寸：用视口相对值，保证窗口缩小时横幅同步收缩，
     图片不会因过度裁切而把画面主体推进题跋区域 */
  --hero-height: min(460px, 40vw);
  --hero-fade: 105px;
}

/* ---------- 全局：宣纸底色 + 淡青晕染 ---------- */
/* 用 !important 覆盖 Astra 主题设置里输出的浅蓝背景色 */
body,
body.ast-separate-container,
body.ast-plain-container,
body.ast-page-builder-template,
body.home,
body.blog,
body.single {
  background-color: var(--paper) !important;
  background-image:
    radial-gradient(ellipse at 15% 3%, rgba(61, 139, 122, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 88% 97%, rgba(22, 51, 46, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, rgba(216, 235, 228, 0.25) 0%, transparent 300px) !important;
  color: #24352f;
  font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
}

/* Astra 给卡片内层铺了纯白底，改为透明以露出自定义卡片质感 */
.ast-separate-container .ast-article-post .ast-post-format-,
.ast-article-post .ast-post-format-,
.ast-post-format-,
.ast-separate-container .ast-article-post .post-content,
.ast-article-post .post-content {
  background-color: transparent !important;
}

/* 标题用黑体族，体现现代科技感 */
h1, h2, h3, h4, h5, h6,
.site-title, .main-header-menu .menu-link {
  font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink-dark);
  font-weight: 600;
}

/* ---------- 顶部导航：青墨横幅 ---------- */
.main-header-bar-wrap {
  border-bottom: 2px solid var(--ink-dark);
  background: rgba(245, 241, 230, 0.94) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Astra 内层默认铺白底，改为透明以透出上层的宣纸色 */
.ast-primary-header-bar,
.ast-primary-header,
.ast-main-header-bar-alignment {
  background-color: transparent !important;
}

/* 站点标题：青墨字 + 青绿渐变下划线 */
.site-title a {
  display: block !important;
  position: relative;
  color: var(--ink-dark) !important;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.site-title a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ink-dark) 0%, var(--jade-light) 100%);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.site-title a:hover::after { opacity: 1; }

/* 导航链接：悬停时青晕扩散 */
/* 导航链接：青墨色调（覆盖 Astra 默认蓝） */
.main-header-menu .menu-link,
.ast-builder-menu .menu-link {
  position: relative;
  color: var(--ink-dark) !important;
  transition: color 0.3s ease;
}
.main-header-menu .menu-link:hover,
.ast-builder-menu .menu-link:hover {
  color: var(--ink-deep) !important;
}
/* 当前所在页面 / 分类高亮 */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current-menu-parent > .menu-link {
  color: var(--jade) !important;
}
.main-header-menu .menu-link::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: radial-gradient(ellipse at center, var(--jade) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 50%;
}
.main-header-menu .menu-link:hover::before {
  height: 6px;
  opacity: 0.3;
  filter: blur(3px);
}

/* ---------- Header 工具栏：登录按钮 + 搜索图标 ---------- */
/* 登录按钮：青墨描边，悬停填充（覆盖 Astra 默认蓝） */
.ast-header-button-1 .ast-custom-button-link {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.ast-header-button-1 .ast-button {
  color: var(--ink-dark) !important;
  background: transparent !important;
  border: 1.5px solid var(--ink-dark) !important;
  border-radius: 2px;
  padding: 6px 16px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: all 0.35s ease;
}
.ast-header-button-1 .ast-custom-button-link:hover .ast-button {
  color: #fff !important;
  background: var(--ink-mid) !important;
  border-color: var(--ink-mid) !important;
  box-shadow: 0 0 12px var(--tech-glow);
}
/* 菜单内版本的按钮（若 Astra 切换显示方式，同样配色） */
.ast-header-button-1 .menu-link {
  color: var(--ink-dark) !important;
  background: transparent !important;
  border: 1.5px solid var(--ink-dark) !important;
  border-radius: 2px;
  padding: 6px 16px;
}

/* 搜索图标：青墨色 */
.ast-header-search .astra-search-icon,
.ast-header-search .ast-search-icon,
.ast-header-search .icon-search svg {
  color: var(--ink-dark) !important;
  fill: var(--ink-dark);
}
.ast-header-search .astra-search-icon:hover {
  color: var(--jade) !important;
  fill: var(--jade);
}

/* ---------- 首页 Hero：青绿山水横幅 ---------- */
/* Astra 默认给 #primary 加了 64px 上边距，这里消除以免顶部出现空白带 */
body.home #primary,
body.blog #primary {
  margin-top: 0 !important;
}

body.home .site-main::before,
body.blog .site-main::before {
  content: "";
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--hero-height);
  background-image: url("/wp-content/uploads/ink-assets/hero-ink-mountain.jpg");
  background-position: center 85%;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  position: relative;
}

/* Hero 底部渐隐到宣纸底色，避免图片与卡片生硬衔接 */
body.home .site-main,
body.blog .site-main {
  position: relative;
}
body.home .site-main::after,
body.blog .site-main::after {
  content: "";
  position: absolute;
  top: calc(var(--hero-height) - var(--hero-fade));
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--hero-fade);
  background: linear-gradient(180deg,
    rgba(245, 241, 230, 0) 0%,
    rgba(245, 241, 230, 0.7) 55%,
    rgba(245, 241, 230, 1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- 首页题跋：仿中国画"题跋"形制 ---------- */
/* 与横幅同宽（100vw 全出血），否则会被内容容器收窄而挤到画面主体上 */
.hero-inscription {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--hero-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* 贴右侧留白 */
  justify-content: center; /* 纵向居中 */
  gap: 16px;
  padding-right: 6%;
  pointer-events: none;
  z-index: 3;
}

.hero-inscription__text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.22em;
  /* 75% 灰：中性的淡墨色，柔和不与画面争色 */
  color: rgba(64, 64, 64, 0.75);
  /* 极淡的轮廓，保证落在水纹上时仍可辨认 */
  text-shadow: 0 0 1.5px rgba(70, 70, 70, 0.22);
}

/* 竖排时全角逗号会独占一格而显得空旷，缩小并沿行内方向适度收紧 */
.hero-inscription__comma {
  display: inline-block;
  font-size: 0.6em;
  margin-top: -0.28em;
  margin-bottom: -0.28em;
  opacity: 0.8;
}

/* 落款印章：使用「知叶斋」篆刻图（已去白底，透明叠加） */
.hero-inscription__seal {
  width: 48px;
  height: 48px;
  background-image: url("/wp-content/uploads/ink-assets/seal-zhiye-zhai.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* 印泥略透，与画面更融合 */
  opacity: 0.92;
}

/* ---------- 文章卡片：青绿描边 + 悬浮亮青辉光 ---------- */
.ast-separate-container .ast-article-post,
.ast-grid-common-col,
article.ast-article-post {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(30, 69, 62, 0.14);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(22, 51, 46, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
  z-index: 2;
}

/* 卡片左上角：朱印点缀 */
article.ast-article-post::before,
.ast-separate-container .ast-article-post::before {
  content: "文";
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--seal-red) 0%, #8c2a20 100%);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(176, 58, 46, 0.35);
  z-index: 2;
}

/* 悬停：微微上浮 + 亮青辉光 */
article.ast-article-post:hover,
.ast-separate-container .ast-article-post:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 168, 146, 0.5);
  box-shadow:
    0 8px 24px rgba(22, 51, 46, 0.13),
    0 0 22px var(--tech-glow);
}

/* 卡片内青墨分隔线 */
.ast-separate-container .ast-article-post .entry-content::before {
  content: "";
  display: block;
  width: 60%;
  height: 2px;
  margin: 0 auto 1em;
  background: linear-gradient(90deg, transparent, var(--ink-soft) 25%, var(--jade-light) 75%, transparent);
  border-radius: 1px;
  opacity: 0.45;
}

/* 文章标题：悬停时青绿水墨晕开下划线 */
.entry-title a,
.ast-article-post .entry-title a {
  color: var(--ink-dark);
  background-image: linear-gradient(90deg, var(--ink-dark), var(--jade-light));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.35s ease, color 0.3s ease;
}
.entry-title a:hover {
  background-size: 100% 2px;
  color: var(--ink-deep);
}

/* ---------- 分类标签：青绿徽章 ---------- */
.ast-article-post .cat-links a,
.post-tags a,
.tags-links a {
  display: inline-block;
  padding: 3px 12px;
  margin: 2px 4px;
  font-size: 0.8em;
  color: var(--ink-mid);
  background: rgba(61, 139, 122, 0.1);
  border: 1px solid rgba(61, 139, 122, 0.28);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.ast-article-post .cat-links a:hover,
.post-tags a:hover,
.tags-links a:hover {
  color: #fff;
  background: var(--ink-mid);
  border-color: var(--ink-mid);
  box-shadow: 0 0 10px var(--tech-glow);
}

/* ---------- 正文排版：书卷气息 ---------- */
.entry-content {
  font-size: 1.05em;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: justify;
}
.entry-content p { margin-bottom: 1.2em; }

/* 正文引用块：青墨侧边 + 淡青底 */
.entry-content blockquote,
.entry-content .wp-block-quote {
  position: relative;
  margin: 1.5em 0;
  padding: 1em 1.5em 1em 2.2em;
  background: rgba(61, 139, 122, 0.06);
  border-left: 4px solid var(--jade);
  border-radius: 0 4px 4px 0;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  color: #2f453f;
}
.entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 8px; top: 4px;
  font-size: 2.4em;
  color: rgba(30, 69, 62, 0.2);
  font-family: serif;
}

/* 代码块：深青终端风 */
.entry-content code,
.entry-content pre {
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
.entry-content pre,
.entry-content .wp-block-code {
  background: var(--ink-deep) !important;
  color: #cfe8e0;
  border: 1px solid rgba(79, 168, 146, 0.25);
  border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(95, 201, 176, 0.06);
  padding: 1.2em !important;
  overflow-x: auto;
}
.entry-content :not(pre) > code {
  background: rgba(61, 139, 122, 0.1);
  color: var(--ink-mid);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* 正文链接：青绿点缀 */
.entry-content a {
  color: var(--ink-mid);
  text-decoration: none;
  border-bottom: 1px dashed rgba(61, 139, 122, 0.5);
  transition: all 0.25s ease;
}
.entry-content a:hover {
  color: var(--jade);
  border-bottom: 1px solid var(--jade-light);
  text-shadow: 0 0 8px var(--tech-glow);
}

/* ---------- 分页与按钮：青墨按钮 ---------- */
.ast-pagination .page-numbers,
.wp-block-search__button,
.button,
.ast-button,
button[type="submit"],
input[type="submit"],
.form-submit input,
#ast-commentform .submit {
  position: relative;
  display: inline-block;
  padding: 8px 22px;
  color: var(--ink-dark);
  background: transparent;
  border: 1.5px solid var(--ink-dark);
  border-radius: 2px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.35s ease;
  overflow: hidden;
  cursor: pointer;
}
.ast-pagination .page-numbers:hover,
.wp-block-search__button:hover,
.button:hover,
.ast-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.form-submit input:hover,
#ast-commentform .submit:hover {
  color: #fff;
  background: var(--ink-mid);
  box-shadow: 0 0 16px var(--tech-glow);
  border-color: var(--ink-mid);
}
.ast-pagination .page-numbers.current {
  color: #fff;
  background: var(--ink-dark);
  border-color: var(--ink-dark);
}

/* ---------- 侧边栏组件：淡青卡片 ---------- */
.widget {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(30, 69, 62, 0.12);
  border-radius: 6px;
  padding: 1.5em;
  margin-bottom: 1.5em;
}
.widget-title {
  position: relative;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
  border-bottom: 1px solid rgba(30, 69, 62, 0.16);
}
.widget-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 24px; height: 8px;
  background: radial-gradient(ellipse at center, var(--jade) 0%, transparent 70%);
  opacity: 0.55;
  filter: blur(1px);
}

/* ---------- 页脚：深青收尾 ---------- */
.site-footer {
  position: relative;
  background: var(--ink-deep);
  color: #9db8b1;
  padding-top: 3em;
}
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .ast-builder-grid-row-container-inner,
.site-footer .site-footer-section {
  background: transparent;
}
.site-footer .ast-footer-copyright,
.site-footer p {
  color: #9db8b1;
}
.site-footer a { color: #c4d8d3; }
.site-footer a:hover { color: var(--tech-glow-color); text-shadow: 0 0 8px var(--tech-glow); }

/* ---------- 滚动条：青墨配色 ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ink-mid), var(--jade));
  border-radius: 5px;
  border: 2px solid var(--paper-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--jade); }

/* ---------- 文字选中效果：青墨渍 ---------- */
::selection {
  background: rgba(30, 69, 62, 0.85);
  color: #e6f7f2;
}

/* ---------- 文章详情页 ---------- */
.single .entry-header {
  text-align: center;
  padding-bottom: 1.5em;
  border-bottom: 2px solid rgba(30, 69, 62, 0.16);
  position: relative;
}
.single .entry-header::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 40%; height: 4px;
  background: linear-gradient(90deg, transparent, var(--ink-dark) 30%, var(--jade-light) 70%, transparent);
  border-radius: 2px;
  opacity: 0.55;
}

/* 文章元信息 */
.entry-meta {
  color: var(--ink-gray);
  font-size: 0.9em;
  letter-spacing: 0.05em;
}
.entry-meta a { color: var(--ink-mid); }

/* ---------- 响应式微调 ---------- */
@media (max-width: 768px) {
  /* 窄屏下横幅用固定矮高度，保证画面主体不被放大挤出 */
  :root { --hero-height: 240px; --hero-fade: 75px; }

  body.home .site-main::before,
  body.blog .site-main::before { background-position: center 78%; }
  .entry-content { font-size: 1em; }
  article.ast-article-post::before { width: 22px; height: 22px; font-size: 12px; }

  /* 移动端题跋等比缩小并内收 */
  .hero-inscription { padding-right: 5%; gap: 10px; }
  .hero-inscription__text { font-size: 17px; letter-spacing: 0.16em; }
  .hero-inscription__seal { width: 32px; height: 32px; }
}

/* 超窄屏：图片会被大幅裁切而把主体推向右侧，
   将背景定位右移，使画面主体左移，为右侧题跋让出空间 */
@media (max-width: 480px) {
  body.home .site-main::before,
  body.blog .site-main::before { background-position: 90% 78%; }

  .hero-inscription { padding-right: 4%; gap: 8px; }
  .hero-inscription__text { font-size: 16px; letter-spacing: 0.14em; }
  .hero-inscription__seal { width: 28px; height: 28px; }
}

/* ---------- 无障碍：尊重减少动画偏好 ---------- */@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}