/* TTA 新版 · Classic ASP 兼容层  v2/css/asp-compat.css
   在 base / theme-classic / theme-classic-v5 / theme-classic-light 之后载入。
   (a) 后台富文本(KindEditor,存在数据库)放进 .prose 后的排版:电脑 / 手机两版切换、去掉内联字体、
       图片与表格自适应、标题与有序列表补样式
   (b) 中和旧版包裹层(.headerbox / .content / .container / .row / .clearfix / .fullpage)
   (c) 多页切换过渡:@view-transition(纯 CSS,无 JS)
   旧 css/settings.css、wrapper.css 已不再载入。 */

/* =====================================================================
   (b) 旧版包裹层
   ===================================================================== */
/* 页头外的 <div class="headerbox">:不产生盒子,否则 .site-header 的 sticky 只能在这个小盒子里吸顶 */
.headerbox { display: contents; }
/* 包着新版结构的旧容器:不产生盒子(旧 CSS 已不载入,这里只防内联宽度 / 边距把新版版心撑歪) */
:where(.fullpage, .content, .container, .row):not(.prose *):has(> .site-header, > main, > .page-hero, > .page-body, > .cx-hero, > .site-footer, > .wrap, > section, > .headerbox) { display: contents; }
.clearfix::after { content: ""; display: table; clear: both; }
/* 还没改版的旧页面:至少不让图片 / 表格撑破手机版面 */
html[data-theme] :where(.fullpage, .content, .container) img { max-width: 100%; height: auto; }

/* =====================================================================
   (a) 富文本
   ===================================================================== */
/* 电脑版 / 手机版内容切换(≤640px 显示手机版);两版相同时脚本会只留一份并加 .content_all */
.content_mobile { display: none; }
@media (max-width: 640px) {
  .content_computer { display: none; }
  .content_mobile { display: block; }
}
.content_all { display: block !important; }

/* 富文本容器的子元素沿用 .prose 的段距与行宽 */
[data-theme="classic"] .prose > :where(.content_computer, .content_mobile, .content_all, .cx-content) { max-width: none; }
[data-theme="classic"] .prose :where(.content_computer, .content_mobile, .content_all, .cx-content) > * { max-width: 68ch; }
[data-theme="classic"] .prose :where(.content_computer, .content_mobile, .content_all, .cx-content) > * + * { margin-top: 20px; }
[data-theme="classic"] .prose :where(.content_computer, .content_mobile, .content_all, .cx-content) > :where(table, .cx5-sec, .cx5-clauses, .cx5-cards, .cx5-flow) { max-width: none; }

/* 后台编辑器留下的内联字体 / 字号 / 行高:一律跟随新版(颜色、粗细、对齐保留) */
.prose [style*="font-family"], .prose font[face] { font-family: inherit !important; }
.prose :not(h1, h2, h3, h4, h5, h6)[style*="font-size"], .prose font[size] { font-size: inherit !important; }
.prose [style*="line-height"] { line-height: inherit !important; }
.prose [style*="text-indent"] { text-indent: 0 !important; }
.prose [style*="background"]:not(table, td, th, tr) { background: none !important; }
.prose font[color="#000000"], .prose font[color="black"], .prose [style*="color:#000000"], .prose [style*="color: #000000"], .prose [style*="color:black"], .prose [style*="color: rgb(0, 0, 0)"], .prose [style*="color:#333333"], .prose [style*="color: #333333"] { color: inherit !important; }
.prose [style*="width"]:not(img, table, td, th, col, iframe, video) { width: auto !important; max-width: 100% !important; }
.prose .MsoNormal { margin: 0; }

/* 标题:后台常把章节标题写成 h1 / h2 / h4,统一成新版正文标题层级 */
[data-theme="classic"] .prose :where(h1, h2) { margin-top: 56px; font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; color: var(--ink); }
[data-theme="classic"] .prose :where(h4, h5, h6) { margin-top: 40px; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); }
[data-theme="classic"] .prose :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
[data-theme="classic"] .prose :where(h1, h2, h3, h4, h5, h6) :where(span, font, strong, b) { font-weight: inherit; color: inherit; }
[data-theme="classic"] .prose .cx5-anchor, [data-theme="classic"] .prose [id^="cx5-"] { scroll-margin-top: 130px; }

/* 列表:base.css 把 ul/ol 的符号清掉了,有序列表补回数字 */
[data-theme="classic"] .prose ol:not([class]) { list-style: decimal; padding-left: 1.6em; display: grid; gap: 8px; }
[data-theme="classic"] .prose ol:not([class]) > li { padding-left: .2em; }
[data-theme="classic"] .prose ol:not([class]) > li::marker { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-theme="classic"] .prose ol:not([class]) ol { list-style: lower-alpha; }
[data-theme="classic"] .prose li > :where(ul, ol) { margin-top: 8px; }
[data-theme="classic"] .prose li p { margin: 0; }

/* 图片:去掉固定宽高造成的变形 / 溢出;居中段落里的图跟着居中 */
.prose img { max-width: 100% !important; height: auto !important; }
.prose p > img, .prose p > a > img { display: inline-block; vertical-align: middle; }
.prose p[style*="center"] img, .prose p[align="center"] img, .prose center img { margin-left: auto; margin-right: auto; }
[data-theme="classic"] .prose :where(.content_computer, .content_mobile, .content_all, .cx-content) img:not([width]), [data-theme="classic"] .prose img[width="100%"] { border-radius: var(--radius-lg, 12px); }
.prose iframe, .prose video { max-width: 100%; }
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg, 12px); }

/* 表格:横向可滑动,不撑破版面(display:block 让表格自己成为滚动容器,无需额外包裹层) */
.prose table { display: block; max-width: 100% !important; width: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 15px; line-height: 1.6; height: auto !important; }
.prose table[width="100%"], .prose table[style*="100%"] { width: 100% !important; }
.prose table > tbody, .prose table > thead { width: 100%; }
.prose td, .prose th { padding: 10px 14px; border: 1px solid var(--line); vertical-align: top; min-width: 6em; height: auto !important; }
.prose th, .prose thead td, .prose tr:first-child > td[style*="background"] { background: var(--surface-2, #f6f4f2) !important; color: var(--ink); font-weight: 600; }
.prose td p, .prose th p { margin: 0; }
.prose table[border="0"] td, .prose table[border="0"] th { border-color: transparent; }

/* 旧内容里的「加 LINE 好友」按钮图、分隔线 */
.prose img[src*="line_add_friends"] { display: inline-block; height: 36px !important; width: auto; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand); color: var(--ink-2); }
.prose sup, .prose sub { line-height: 0; }

@media (max-width: 640px) {
  .prose td, .prose th { padding: 8px 10px; font-size: 14px; }
  [data-theme="classic"] .prose :where(h1, h2) { font-size: 22px; margin-top: 40px; }
}

/* =====================================================================
   页头下拉:触屏点击展开(脚本切换 .is-open;滑鼠仍用 :hover / :focus-within)
   ===================================================================== */
.has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub.is-open > .sub-mega { transform: translate(-50%, 0); }
[data-theme="classic"] .has-sub.is-open > a svg { transform: rotate(180deg); }

/* 开场动画:head 内联脚本判定「已播过 / 非首页 / 静态」时加 html.cx-ld-skip,避免脚本执行前闪一下 */
html.cx-ld-skip #cx-loader { display: none !important; }
/* 同一会话第二页起:悬浮栏不再重播入场动画 */
html.cx-nav-seen .cx-dock { animation: none !important; }

/* 页内锚点(服务总览分类导览等)避开吸顶页头 */
[data-theme="classic"] .svc-group[id], [data-theme="classic"] [id^="cx5-g"] { scroll-margin-top: 120px; }

/* =====================================================================
   (c) 多页切换过渡(同源页面间,Chrome / Edge 126+、Safari 18.2+;不支持的浏览器直接跳转)
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tta-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: tta-vt-in .38s cubic-bezier(.16, 1, .3, 1) .04s both; }
@keyframes tta-vt-out { to { opacity: 0; } }
@keyframes tta-vt-in { from { opacity: 0; } }
/* 页头 / 悬浮栏在两页之间保持不动 */
[data-theme="classic"] .site-header { view-transition-name: cx-header; }
[data-theme="classic"] #cx-dock .cx-dock { view-transition-name: cx-dock; }
::view-transition-group(cx-header), ::view-transition-group(cx-dock) { animation: none; }
::view-transition-old(cx-header), ::view-transition-old(cx-dock) { display: none; }
::view-transition-new(cx-header), ::view-transition-new(cx-dock) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}