/* ==========================================================================
   全站导航 —— nav.css
   两行版式：上一行只放品牌标与右侧按钮，下一行分类靠左排在通栏白底上。
   参考 cupidso.com 的导航。

   做法：css/style.css 不改动（它的 .nav-inner 是定高 64px 的单行 flex），
        本文件只做覆盖，HTML 里除了 logo 换成图片外不动结构。
   注意：本文件不依赖任何色盘变量 —— 颜色写死。因为 home.css 的粉色色盘只有
        首页加载，其余页面还是米金档，若用 var(--paper)/var(--line)
        各页导航会长得不一样，而这里要的正是「全站一致」。
   加载顺序：必须排在 css/style.css 之后。
   ========================================================================== */

/* 导航底色：淡粉毛玻璃（style.css:84 写死的是米色） */
.nav { background: rgba(253, 239, 242, .86); }

/* 品牌标：光环（也是誓言之环）夹在两片翅膀中间，替代原来的圆角方块印章。
   图形是透明底 webp（宽高约 1.71:1），高度定住、宽度自适应；
   页脚是深色底，换成白色那份 logo-white.webp，尺寸再小一级 */
.logo-mark { height: 36px; width: auto; }
.footer .logo-mark { height: 30px; }

/* 品牌字跟图形同色（style.css:89 原本是墨色）；页脚在深色底上，不要跟着改 */
.nav .logo { color: #a3164c; }

/* 品牌名 + 底下一行域名：.logo 本身是横向 flex，所以这两行得包一层再竖排。
   域名用无衬线小字、颜色淡一档，不能抢主名的比重 */
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text em {
  margin-top: 3px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  color: #c98aa4;
}

/* logo 印章的阴影里写死了朱砂 rgba（style.css:94）；印章虽已不用，
   但 ceming.html 这类还没改造的页面仍在用，一并调成酒红 */
.logo .seal { box-shadow: 0 4px 12px rgba(163, 22, 76, .32); }

/* ≤1024px 时 style.css:121 会把 .nav-menu 整个隐掉换成汉堡菜单，
   展开态的下拉位置由 js/main.js 按 top:64px 写死，所以两行版式
   必须限定在 min-width:1025px，不能注到手机端。 */
@media (min-width: 1025px) {
  /* 第二行的白底要通到屏幕两边，用了 100vw 的伪元素；
     100vw 包含竖向滚动条宽度，不裁掉会多出横向滚动条 */
  .nav { overflow-x: clip; }
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    /* 左右必须保留 .wrap 的 20px（style.css:59），
       写成 padding:18px 0 0 会把它覆盖掉，导航就比下面的区块各宽 20px */
    padding: 18px 20px 0;
    /* 行间距 16px：让第一行（logo 与右侧按钮）与第二行的白底拉开，
       中间露出一条粉色空隙，同时给「开始解读」的投影留出位置 */
    gap: 16px 28px;
  }
  .nav-cta { order: 2; }
  .nav-menu {
    order: 3;
    position: relative;
    flex-basis: 100%;
    margin-left: 0;
    padding: 15px 0 14px;
    gap: 30px;
  }
  /* 白底通栏 + 两行之间的分隔线：
     负 z-index 让它盖在 .nav 的粉色背景之上、导航文字之下 */
  .nav-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #ffffff;
    border-top: 1px solid #f6dce5;
    z-index: -1;
  }
}

/* 当前分类仅改变颜色与下划线；固定字重，避免点击后分类宽度和位置变化。 */
.nav-menu a,
.nav-menu a.active { font-weight: 500; }

/* ========================================================================== 
   语言切换、登录注册，以及手机端的抽屉菜单
   规矩同上：颜色一律写死，因为 home.css 只在首页把色盘变量整套改掉。
   ========================================================================== */

/* 宽屏右上角：当前语言排在左边、酒红实心，另一种跟在后面做淡粉链接，
   所以中文站是「中文 / English」、英文站是「English / 中文」，切过去后左右刚好调个头。
   链接指向的是本页在另一站的同名页面，不是一律回首页。
   position 是给下面那条提示当定位父级用的 */
.nav-cta { gap: 14px; position: relative; }
.nav-lang { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.nav-lang .cur { color: #a3164c; }
.nav-lang .sep { color: #e3b9c8; font-weight: 500; }
.nav-lang a { color: #a8798b; }
.nav-lang a:hover { color: #a3164c; }
/* 登录、注册都是长方框（不跟正文里的胶囊按钮一样）：登录只描边不上底色，注册酒红实底，
   一淡一重分出主次。两边 padding 差 1px 是故意的：登录多了 1px 边框，这样算下来两个框正好等高。
   margin-left 把这一对从语言切换那儿推开 */
.nav-login {
  margin-left: 10px;
  padding: 6px 15px; border-radius: 8px; border: 1px solid #e3b9c8;
  font-size: 13.5px; font-weight: 600; color: #55606f;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-login:hover { color: #a3164c; border-color: #a3164c; background: rgba(255, 255, 255, .6); }
.nav-reg {
  padding: 7px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #a3164c, #7d0f39); color: #fff;
  box-shadow: 0 5px 14px rgba(163, 22, 76, .28);
}
.nav-reg:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 9px 20px rgba(163, 22, 76, .38); }
/* 提示条：文案写在静态 HTML 里，脚本只切 .active（同 main.js 的原则，正文不靠 innerHTML 注入）。
   挂在 .nav-cta 下沿、右边跟注册按钮对齐，而不是浮在屏幕中间挡住首屏。
   粉底酒红字，底色比导航本身那层粉深一档，再加条边和投影，不然两层粉贴在一起看不出轮廓。
   上面那个 overflow-x: clip 只裁横向，所以这条不会被剪掉 */
.soon-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 10;
  padding: 10px 20px; border-radius: 10px; white-space: nowrap;
  background: #fce7ee; border: 1px solid #f2c6d6; color: #a3164c;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(163, 22, 76, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.soon-tip.active { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== 手机版抽屉菜单（≤1024px，即 style.css:132-134 把菜单和按钮隐掉的那一档） =====
   原来的做法是 main.js 给 .nav-menu 打一串内联样式，拉成占满整宽的一条下拉；
   现在换成从右边划出来的窄面板：面板只占 78vw、最宽 320px，左边留一片压暗的底，
   看一眼就知道点旁边能关掉。
   面板必须挂在 <header> 外面：.nav 上有 backdrop-filter，会给里面的 fixed 元素当定位父级，
   放进导航里它就跟着导航跑了。 */
.nav-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.nav-drawer.active { visibility: visible; }
.drawer-mask { position: absolute; inset: 0; background: rgba(47, 58, 74, .48); opacity: 0; transition: opacity .28s; }
.nav-drawer.active .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(78vw, 320px);
  display: flex; flex-direction: column;
  padding: 18px 20px 26px;
  background: #fff;
  box-shadow: -14px 0 34px rgba(163, 22, 76, .16);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s ease;
}
.nav-drawer.active .drawer-panel { transform: translateX(0); }
/* 标题居中、关闭键绝对定位到右上角：这样标题是相对整个面板居中，不会被关闭键挤偏 */
.drawer-head { position: relative; padding: 2px 0 12px; text-align: center; }
.drawer-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #a3164c; }
/* 关闭键：圈 2px 描边，里面的 × 跟圈同一个颜色，看着是一体的；圈径 28px、× 19px，
   圈再大就会在字周围空出一圈。× 用 grid 居中，不靠 line-height 对齐 ——
   按钮默认是文字基线排版，光给 line-height 会把 × 压得偏上或偏下，看着不在圈心。
   鼠标放上去时圈和字一起转酒红 */
.drawer-x {
  position: absolute; top: 0; right: -2px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #c98aa4; color: #c98aa4; font-size: 19px; line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.drawer-x:hover { background: #fce7ee; border-color: #a3164c; color: #a3164c; }
/* 语言切换直接复用上面 .nav-lang 那套配色，这里只把它摆居中 */
.drawer-lang { position: relative; justify-content: center; padding: 12px 0; font-size: 14px; }
/* 菜单项靠下面那些分割线分隔，所以 gap 收成 0；行高也收紧一点，不让六条排得那么松 */
.drawer-menu { position: relative; display: flex; flex-direction: column; padding: 0; }
.drawer-menu a { position: relative; padding: 9px 12px; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 500; color: #55606f; }
/* 面板从上到下每一档都压一条细线，同一个色号。
   线必须用伪元素画，不能用 border-bottom：菜单项有 10px 圆角，边框会跟着圆角弯，
   两头就翹成弧线了。左右各缩 14px，线两头比文字区稍短一点，不顶到面板边上。
   最后一条菜单项不画，它下面已经有菜单区自己那条了，不然两条叠在一起发黑 */
.drawer-head::after,
.drawer-lang::after,
.drawer-menu::after,
.drawer-menu a:not(:last-child)::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 1px; background: #f6dce5;
}
.drawer-menu a:hover { background: #fdf3f6; color: #a3164c; }
/* 当前所在的那一页压一层淡粉底 */
.drawer-menu a.active { background: #fce7ee; color: #a3164c; font-weight: 600; }
/* 登录、注册并排各占一半：跟右上角那一对一样一淡一重，只是拉成了通栏的块。
   padding 差的那 1px 还是给登录的边框留位，两个框才等高 */
.drawer-auth { display: flex; gap: 10px; margin-top: 14px; }
.drawer-login, .drawer-reg { flex: 1; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
.drawer-login { padding: 11px 10px; border: 1px solid #e3b9c8; color: #55606f; }
.drawer-login:hover { color: #a3164c; border-color: #a3164c; background: #fdf3f6; }
.drawer-reg {
  padding: 12px 10px;
  background: linear-gradient(135deg, #a3164c, #7d0f39); color: #fff;
  box-shadow: 0 6px 16px rgba(163, 22, 76, .26);
}
.drawer-reg:hover { color: #fff; }
/* 抽屉里那条提示不浮着，跟在按钮下面顺着面板排。收起时是 display:none，
   不然它的边框和内边距会在按钮底下留一道空档；淡入改用动画来做 */
.drawer-panel .soon-tip {
  display: none;
  position: static; margin-top: 12px;
  white-space: normal; text-align: center;
  transform: none; transition: none;
}
.drawer-panel .soon-tip.active { display: block; transform: none; animation: soonIn .25s ease; }
@keyframes soonIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 宽屏下抽屉不只是隐藏，而是整个从布局里去掉 */
@media (min-width: 1025px) { .nav-drawer { display: none; } }

/* ==========================================================================
   安装应用卡片 .nav-install —— 固定右下角，nav.js 捕获到 beforeinstallprompt
   （即浏览器确认本站可安装）后才显示，默认隐藏；「稍后」或原生框里取消本次会话不再出现。
   样式放 nav.css 是因为每个页面都加载它，不必为一张卡片新增 link。
   ========================================================================== */
.nav-install { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 300px;
  background: #fff; border-radius: 8px; padding: 14px 16px 12px; box-shadow: 0 6px 24px rgba(74, 42, 42, .18); }
.nav-install[hidden] { display: none; }
.ni-title { display: block; font-size: 13px; color: #8a1c42; font-weight: 700; }
.ni-desc { margin: 6px 0 10px; font-size: 12px; color: #8a8496; line-height: 1.6; }
.ni-acts { display: flex; justify-content: flex-end; gap: 8px; }
.ni-later { border: 1px solid #e4d9c8; background: #fff; color: #6b6b6b; font-size: 12px; border-radius: 4px; padding: 4px 14px; cursor: pointer; }
.ni-later:hover { border-color: #c9bda9; }
.ni-add { border: 0; background: var(--vermilion, #c0392b); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 5px 16px; cursor: pointer; }
.ni-add:hover { background: var(--vermilion-dark, #a12c20); }
@media (max-width: 640px) { .nav-install { left: 12px; right: 12px; bottom: 12px; width: auto; } }