/* ===== 全站统一导航 / 刊头 / 底部（由 server.js 注入到每个页面） ===== */

/* 期刊信息 Banner（贯穿全站，置于导航之上，与导航合并为一个板块）
   渐变末端与导航底色同为 var(--c-primary)，接缝处肉眼无色差 */
.banner { position:relative; background:linear-gradient(180deg,var(--c-banner-from) 0%,var(--c-primary) 100%); color:#fff; overflow:hidden; box-shadow:inset 0 2px 0 rgba(150,225,255,.45); }
.banner::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:22px 22px; opacity:.5; pointer-events:none; }
/* 科技感装饰层：斜向电路光带 + 冷色光晕（44px 细网格已按需求移除）；纯装饰层 z-index:0，内容层 z-index:1 不受影响 */
.banner::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(115deg, transparent 33%, rgba(130,215,255,.10) 48%, rgba(165,235,255,.20) 50%, rgba(130,215,255,.10) 52%, transparent 67%),
    radial-gradient(circle at 88% 6%, rgba(120,205,255,.22), transparent 46%);
  background-size:100% 100%, 100% 100%;
  background-position:0 0, 0 0;
  background-repeat:no-repeat, no-repeat; }
.banner.banner-top { padding:40px 0 38px; }
.banner-flex { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:26px; }
/* 顶部横幅宽度随内容自适应：解除 .container 的 1200px 限宽，容器按内容实际宽度撑开并整体居中；
   上限为视口宽度（100%），仅当内容真的超出屏幕时才回落到换行，避免出现横向滚动条。
   这样左栏收录条目增加到多列时，横幅会向左自动加宽，而不是把中/右栏挤到第二行 */
.banner-top .container.banner-flex { max-width:none; width:fit-content; }
.bt-title { flex:none; }
/* 中英文刊名上下两端对齐：两行同宽，中文行加粗大字，英文行按字距撑满，
   字号已按「中文 50px/3px 字距 ≈ 318px、英文 13px/2.5px 字距 ≈ 322px」配平，
   两侧仅差数像素，justify 拉伸量极小，看上去齐平而不松散 */
.bt-title .bt-name { font-size:50px; font-weight:800; letter-spacing:3px; margin:0; line-height:1.12; white-space:nowrap; text-align:justify; text-align-last:justify; }
.bt-en { font-size:13px; letter-spacing:2.5px; color:rgba(255,255,255,.85); margin-top:8px; white-space:nowrap; text-align:justify; text-align-last:justify; }
.bt-dbs, .bt-info { list-style:none; margin:0; padding:0; font-size:13px; line-height:1.6; color:rgba(255,255,255,.92); }
/* 左栏 · 数据库收录：固定 6 行，第 7 条起自动排到右侧新列的第 1 行，
   每满 6 行再开一列（以此类推）。grid-auto-flow:column 保证按列填充顺序：
   1~6 条 → 第 1 列，7~12 条 → 第 2 列，13~18 条 → 第 3 列…… */
.bt-dbs {
  border-left:1px solid rgba(255,255,255,.18); padding-left:34px;
  display:grid;
  grid-template-rows:repeat(6, 1.6em); /* 固定 6 行高度：不足 6 行也占满，超出自动换列 */
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  column-gap:22px;
  flex:none; /* 多列时不被 flex 容器压缩，避免条目换行错位 */
}
.bt-dbs li { white-space:nowrap; }
.bt-info { border-left:1px solid rgba(255,255,255,.18); padding-left:22px; flex:none; }
.bt-dbs li::before { content:"\2714"; color:#ff9d9d; margin-right:8px; font-size:12px; }
.bt-info b { color:#fff; font-weight:600; }
@media (max-width:1080px){
  /* 窄屏沿用原高度，避免堆叠后过长 */
  .banner.banner-top { padding:22px 0 20px; }
  /* 窄屏恢复页面限宽（fit-content 在窄屏与 width:100% 叠加会错位） */
  .banner-top .container.banner-flex { width:auto; max-width:var(--maxw); }
  .banner-flex { flex-wrap:wrap; row-gap:16px; }
  .bt-dbs, .bt-info { border-left:0; padding-left:0; }
  .bt-dbs { column-gap:14px; }
  .bt-title { width:100%; }
  .bt-title .bt-name { font-size:38px; }
  /* 窄屏横幅全宽：两行改为居中对齐，保持上下视觉对齐 */
  .bt-title { text-align:center; }
  .bt-title .bt-name { text-align:center; text-align-last:center; }
  .bt-title .bt-en { text-align:center; text-align-last:center; }
}

/* 导航（与 Banner 同为深蓝，合并为同一板块） */
.site-header { background:var(--c-primary); border-bottom:0; position:sticky; top:0; z-index:50; box-shadow:0 2px 10px rgba(0,0,0,.14); }
.site-header .main-nav { display:block; background:var(--c-primary); border:0; padding:0; }
/* 导航通栏内居中：对齐页面 1200px 容器，菜单项在容器内平均分布 */
.site-header .main-nav .container { max-width:var(--maxw); margin:0 auto; padding:0 10px; }

.btn { display:inline-block; padding:7px 14px; border-radius:6px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; transition:.2s; }
.btn-accent { background:#e23b3b; color:#fff; }
.btn-accent:hover { background:#c92f2f; color:#fff; }
.btn-primary { background:#fff; color:var(--c-primary); }
.btn-primary:hover { background:#eef4ff; color:var(--c-primary); }

/* 注意：style.css 旧规则(.nav a 深色字)在 chrome.css 之后加载，
   故此处用 .site-header .main-nav a 提高优先级，确保深蓝底上显示白字 */
.site-header .main-nav a { flex:1; text-align:center; color:rgba(255,255,255,.92); font-size:15px; padding:9px 6px; border-radius:6px; text-decoration:none; white-space:nowrap; }
.site-header .main-nav a:hover { color:#fff; background:rgba(255,255,255,.14); }
.site-header .main-nav a.active { color:#fff; background:var(--c-accent); }
.nav-bar { display:flex; align-items:center; }
.nav-inner { display:flex; align-items:center; min-height:52px; flex-wrap:wrap; flex:1; }
.nav-inner a { flex:1; text-align:center; color:rgba(255,255,255,.92); font-size:15px; padding:9px 6px; border-radius:6px; text-decoration:none; white-space:nowrap; }
.nav-inner a:hover { color:#fff; background:rgba(255,255,255,.14); }
.nav-inner a.active { color:#fff; background:var(--c-accent); }
/* 中英文切换按钮（置于"出版道德"之后，自动宽度，不参与等分） */
.site-header .main-nav .lang-toggle { flex:none; display:inline-flex; align-items:center; align-self:center; margin-left:6px; padding:5px 12px; font-size:13px; font-weight:600; letter-spacing:1px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); border-radius:14px; cursor:pointer; line-height:1.4; white-space:nowrap; font-family:inherit; text-decoration:none; transition:.2s; }
.site-header .main-nav .lang-toggle:hover { background:#fff; color:var(--c-primary); border-color:#fff; }
/* 汉堡按钮：加 .site-header 前缀提高优先级 —— style.css 在本文件之后加载，
   其 .nav-toggle 基础规则(display:none + color:var(--c-primary) 深蓝字)会以同优先级
   覆盖本文件的设置，导致窄屏下按钮消失或「深蓝字配深蓝底」隐形 */
.site-header .nav-toggle { display:none; background:none; border:0; font-size:26px; color:#fff; cursor:pointer; margin-left:auto; }

/* 导航下拉：文章在线 → 过刊浏览 / 专题专辑 / 网络首发 */
.site-header .main-nav .nav-dropdown { position:relative; display:flex; flex:1 1 0; }
.site-header .main-nav .nav-dropdown > a { flex:1; text-align:center; color:rgba(255,255,255,.92); font-size:15px; padding:9px 6px; border-radius:6px; text-decoration:none; white-space:nowrap; }
.site-header .main-nav .nav-dropdown > a:hover { color:#fff; background:rgba(255,255,255,.14); }
.site-header .main-nav .nav-dropdown > a::after { content:' ▾'; font-size:11px; margin-left:2px; opacity:.85; }
.site-header .main-nav .nav-dropdown-menu { display:none; position:absolute; top:100%; left:0; min-width:168px; background:var(--c-primary); border-radius:0 0 8px 8px; box-shadow:0 8px 18px rgba(0,0,0,.25); padding:6px 0; z-index:60; }
.site-header .main-nav .nav-dropdown-menu a { display:block; flex:none; text-align:left; color:rgba(255,255,255,.92); font-size:14px; padding:9px 16px; text-decoration:none; white-space:nowrap; }
.site-header .main-nav .nav-dropdown-menu a:hover { color:#fff; background:rgba(255,255,255,.14); }
.site-header .main-nav .nav-dropdown-menu a.active { color:#fff; background:var(--c-accent); }
.site-header .main-nav .nav-dropdown:hover > .nav-dropdown-menu,
.site-header .main-nav .nav-dropdown:focus-within > .nav-dropdown-menu { display:block; }
.site-header .main-nav .nav-dropdown.active-parent > a { color:#fff; background:var(--c-accent); }

/* ===== 全站底部（需求七：合规必备） ===== */
.footer { position:relative; overflow:hidden; background:var(--c-primary-dark); color:#cdd9ec; padding:34px 0 22px; font-size:13px; margin-top:40px; }
/* 科技感装饰：顶部渐隐发光细线 + 冷色光晕 + 极淡同心圆（44px 细网格已按需求移除）；内容层统一置顶避免被遮 */
.footer > * { position:relative; z-index:1; }
.footer::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(150,225,255,.55) 35%, rgba(150,225,255,.55) 65%, transparent 100%),
    radial-gradient(circle at 8% 100%, rgba(120,205,255,.18), transparent 46%),
    radial-gradient(circle at 92% 0%, rgba(120,205,255,.14), transparent 42%);
  background-size:100% 1px, 100% 100%, 100% 100%;
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat; }
.footer::after { content:""; position:absolute; z-index:0; pointer-events:none; right:7%; top:18%; width:170px; height:170px; border-radius:50%;
  border:1px solid rgba(150,225,255,.20);
  box-shadow:0 0 0 30px rgba(150,225,255,.055), 0 0 0 60px rgba(150,225,255,.03), inset 0 0 34px rgba(150,225,255,.10); }
.footer a { color:#9fc1ff; text-decoration:none; }
.footer a:hover { color:#fff; }

@media (max-width:860px){
  .footer::after{ display:none; }
  .nav-bar{ flex-wrap:wrap; min-height:52px; }
  /* 汉堡按钮是 .nav-inner 的兄弟节点（不能放进 .nav-inner，否则随容器一起被隐藏） */
  .site-header .nav-toggle{ display:block; margin-left:auto; }
  .nav-inner{ display:none; width:100%; flex-direction:column; align-items:stretch; }
  .nav-inner.open{ display:flex; padding-bottom:8px; }
  .site-header .nav-inner a{ flex:none; text-align:left; padding:11px 14px; }
  .site-header .main-nav .lang-toggle{ align-self:flex-start; margin:6px 0 0 14px; }
  /* 窄屏：下拉改为直接展开的二级列表（汉堡展开后随导航一同显示） */
  .site-header .main-nav .nav-dropdown { display:block; flex:none; width:100%; }
  .site-header .main-nav .nav-dropdown > a { text-align:left; padding:11px 14px; }
  .site-header .main-nav .nav-dropdown > a::after { content:none; }
  .site-header .main-nav .nav-dropdown-menu { display:block; position:static; box-shadow:none; background:rgba(0,0,0,.14); border-radius:0; padding:0; }
  .site-header .main-nav .nav-dropdown-menu a { padding:9px 14px 9px 30px; }
}

/* 全站隐藏页面通栏标题区（page-hero） */
.page-hero { display:none !important; }

/* 英文站横幅：右侧信息列英文更长，仅缩小信息列字号并收紧间距；
   刊名两行（中文刊名 + 英文副名）中英文站保持一致，不再缩小（中文刊名英文站同样保持中文大字） */
html[lang="en"] .bt-dbs, html[lang="en"] .bt-info { font-size:12px; line-height:1.55; }
html[lang="en"] .bt-dbs { padding-left:24px; grid-template-rows:repeat(6, 1.55em); column-gap:18px; }
html[lang="en"] .bt-info { padding-left:20px; }
html[lang="en"] .bt-dbs li { white-space:nowrap; }
html[lang="en"] .bt-dbs, html[lang="en"] .bt-info { line-height:1.55; }

/* ===== 扫码分享至微信 ===== */
.share-fab {
  position:fixed; right:22px; bottom:86px; z-index:900;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#07c160; color:#fff; box-shadow:0 6px 18px rgba(7,193,96,.34);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.share-fab:hover { background:#06ad56; transform:translateY(-2px); box-shadow:0 10px 22px rgba(7,193,96,.42); }
.share-fab:active { transform:translateY(0); }
.share-fab:focus-visible { outline:3px solid rgba(7,193,96,.35); outline-offset:3px; }

.share-mask {
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(16,26,42,.5); backdrop-filter:blur(2px);
}
.share-mask.open { display:flex; }
body.share-lock { overflow:hidden; }

.share-card {
  position:relative; width:100%; max-width:330px; background:#fff; border-radius:16px;
  padding:24px 22px 20px; box-shadow:0 18px 50px rgba(0,0,0,.26); text-align:center;
  animation:sharePop .2s ease-out;
}
@keyframes sharePop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }

.share-close {
  position:absolute; top:8px; right:10px; width:30px; height:30px; border:0; border-radius:50%;
  background:transparent; color:#8a94a6; font-size:22px; line-height:1; cursor:pointer; transition:.15s;
}
.share-close:hover { background:#f1f3f7; color:#39424f; }

.share-title { margin:0 0 14px; font-size:16px; font-weight:700; color:#1f2a3a; letter-spacing:.5px; }

.share-qr { margin:0 auto 12px; width:200px; height:200px; }
.share-qr svg { display:block; width:100%; height:100%; border-radius:6px; }
.share-fail { padding:40px 8px; font-size:13px; color:#8a94a6; }

.share-tip { margin:8px 0 0; font-size:13px; line-height:1.65; color:#5b6779; }
.share-link {
  margin:10px 0 0; padding:7px 9px; font-size:11px; line-height:1.5; color:#8a94a6;
  background:#f6f7f9; border-radius:7px; word-break:break-all; max-height:52px; overflow:hidden;
}

.share-copy {
  margin-top:14px; width:100%; padding:10px 0; border:0; border-radius:9px; cursor:pointer;
  background:var(--c-primary, #1f4e79); color:#fff; font-size:13px; font-weight:600; font-family:inherit;
  transition:background .18s ease;
}
.share-copy:hover { background:#173d5f; }
.share-copy.is-ok { background:#07c160; }
.share-copy.is-fail { background:#d24b4b; }

/* 微信内：箭头指向右上角 */
.share-wechat { padding:4px 0 2px; }
.share-arrow { display:flex; justify-content:flex-end; padding-right:6px; color:var(--c-primary, #1f4e79); }
.share-wechat .share-tip { margin-top:2px; font-size:14px; color:#1f2a3a; }

@media (max-width:640px){
  .share-fab { right:14px; bottom:74px; width:44px; height:44px; }
  .share-card { padding:22px 18px 18px; }
  .share-qr { width:180px; height:180px; }
  /* 手机端隐藏顶部横幅三块文字（左栏收录列表 / 中栏主管主办出版 / 右栏刊期信息）：
     内容印在图上手机看不清且占满首屏，只保留刊名 + 英文刊名，横幅更紧凑 */
  .bt-dbs, .bt-info { display:none; }
  .banner.banner-top { padding:18px 0 16px; }
}
/* 手机端不显示二维码（自己扫不了自己），压缩留白让「复制链接」更突出 */
.share-qr-wrap.is-mobile { padding-top:6px; }
.share-qr-wrap.is-mobile .share-tip { margin-top:0; font-size:14px; color:#1f2a3a; }

/* 微信内：面板贴顶部，箭头指向屏幕右上角「···」，提示更直观 */
.share-mask.is-wechat { align-items:flex-start; padding-top:16px; }
.share-mask.is-wechat .share-card { max-width:340px; padding:18px 20px 16px; }
.share-mask.is-wechat .share-close { color:#8a94a6; }
.share-mask.is-wechat .share-arrow { padding-right:0; margin:-2px 0 -6px; }

/* ===== 英文站顶部横幅：译文较长时保持三栏同排（右侧 ISSN/CN 不被挤到第二行） ===== */
@media (min-width:1081px){
  html[lang="en"] .banner-top .container.banner-flex { flex-wrap:nowrap; gap:14px; }
  html[lang="en"] .banner-flex .bt-dbs { padding-left:16px; }
  html[lang="en"] .banner-flex .bt-info { padding-left:14px; }
  html[lang="en"] .banner-flex .bt-info:not(:last-child) { flex:0 1 auto; min-width:0; max-width:300px; }
  html[lang="en"] .banner-flex .bt-info:not(:last-child) li { white-space:normal; }
}
