/* Embody 官网全站共享组件样式（样式 SSOT）
   注意：本站 Tailwind 走 Play CDN，不处理外部 CSS 文件，
   本文件必须是原生 CSS（不支持 @apply 与任意值语法）。
   页面级特有样式仍用页内 Tailwind 工具类。 */

/* ---- 页头导航（移动优先：<768px 收纳为汉堡菜单） ---- */
.site-nav {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 80rem;                      /* max-w-7xl */
  margin-inline: auto;
  padding: 2rem;                         /* p-8 */
  border-bottom: 1px solid #0f172a;      /* gray-900 → slate-900（见 assets/tailwind-theme.js） */
  background: rgba(0, 0, 0, 0.5);        /* bg-black/50 */
  backdrop-filter: blur(12px);           /* backdrop-blur-md */
}

.brand-mark {
  font-size: 1.25rem;                    /* text-xl */
  font-weight: 700;
  letter-spacing: -0.05em;               /* tracking-tighter */
}

/* 汉堡菜单开关：视觉隐藏但保留键盘可聚焦与切换能力（零 JS，禁 JS 可用） */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
}

.nav-toggle {                            /* 汉堡按钮：44×44 触控热区 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-block: -0.5rem;                 /* 负边距抵消，页头保持 92px 高 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  width: 1.5rem;                         /* 24px 线长 */
  height: 2px;
  background: #94a3b8;                   /* gray-400 → slate-400 */
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.15s ease;
}

.nav-toggle:hover span,
.nav-toggle-input:checked ~ .nav-toggle span {
  background: #ffffff;
}

.nav-toggle-input:focus-visible ~ .nav-toggle {
  outline: 2px solid #3b82f6;            /* 焦点可见（键盘可达） */
  outline-offset: 2px;
}

.nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav-links {                        /* 移动端：默认收起，展开为纵向全宽菜单 */
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  margin-top: 1.25rem;
  border-top: 1px solid #0f172a;
  font-size: 0.75rem;                    /* text-xs */
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;                 /* tracking-widest */
  color: #94a3b8;                        /* gray-400 → slate-400 */
}

.nav-toggle-input:checked ~ .site-nav-links { display: flex; }

.site-nav-links a {                      /* 菜单项：44px 触控热区 */
  display: block;
  padding-block: 0.875rem;
}

.site-nav-links a,
.blue-link,
.site-footer .links a {
  transition: color 0.15s ease;
}

.site-nav-links a:hover,
.blue-link:hover,
.site-footer .links a:hover {
  color: #ffffff;
}

.blue-link {                            /* 品牌蓝链接：导航语言切换 EN/ZH 与正文强调链接共用 */
  color: #3b82f6;                        /* text-blue-500 */
}

.nav-divider {                           /* 移动端菜单内：全宽横线 */
  width: 100%;
  height: 1px;
  margin-block: 0.25rem;
  background: #0f172a;
}

/* 断点：桌面恢复横排导航（全站唯一断点 768px） */
@media (min-width: 768px) {
  .nav-toggle,
  .nav-toggle-input { display: none; }

  .site-nav-links {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;                         /* gap-6 */
    margin-top: 0;
    border-top: 0;
  }

  .site-nav-links a { padding-block: 0; }

  .nav-divider {                         /* 桌面：竖线恢复 */
    width: 1px;
    height: 1rem;                        /* h-4 */
    margin-block: 0;
  }
}

/* ---- 主容器（全站唯一宽度体系：所有内容页共用；首页 hero 为全屏形态除外，2026-10-06 定稿） ---- */
.container-page {                        /* 全站内容页主容器：阅读宽 48rem */
  max-width: 48rem;                      /* max-w-3xl */
  margin-inline: auto;
  padding-inline: 2rem;                  /* px-8 */
}

/* ---- 正文测度（宽度归 CSS：页面不写 max-w-* / mx-auto） ---- */
.measure {                               /* 长段落正文测度：限宽 48rem（与阅读型容器同宽） */
  max-width: 48rem;                      /* max-w-3xl */
}

.article-body,
.prose.article-body {                    /* 博客文章正文：占满阅读容器（双类提高权重，覆盖 prose 插件注入的 65ch 测度） */
  max-width: none;
}

/* ---- 内容页标题（白皮书/路线图/进化日志/博客文章） ---- */
.page-title {
  font-size: 2.25rem;                    /* text-4xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.section-title {                         /* 白皮书章节标题 */
  font-size: 1.875rem;                   /* text-3xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.25;                     /* leading-tight */
}

@media (min-width: 768px) {
  .page-title { font-size: 3rem; }       /* text-5xl */
  .section-title { font-size: 2.25rem; } /* text-4xl */
}

/* ---- 页脚 ---- */
.site-footer {
  position: relative;
  z-index: 10;
  padding: 4rem 0;                       /* py-16 */
  border-top: 1px solid #0f172a;
  text-align: center;
}

.site-footer .copyright {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: #334155;                        /* gray-700 → slate-700 */
  margin-bottom: 2rem;                   /* mb-8 */
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;                        /* gap-y-4 gap-x-8 */
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;                        /* gray-500 → slate-500 */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
