/*
 * 项目自有的覆盖样式 —— 只放「刻意偏离源站」的规则。
 *
 * 源站快照有一批体验缺陷是原样搬过来的，本文件逐条改掉。每一条都必须能对应
 * AGENTS.md「允许的偏离」清单里的一个条目，否则就是缺陷而不是偏离。
 *
 * ⚠️ 权重问题：本文件由根 layout 引入，渲染顺序**早于**页面级的 wd.css
 * （页面组件里的 <link> 会被 React 提升到 layout 的 <link> 之后）。
 * 因此这里不能靠"后加载"取胜，只能靠选择器权重 —— 每条都写明了它压的是哪条规则。
 */

/* ------------------------------------------------------------------
 * 偏离 10：顶部导航常驻，不随滚动方向隐藏
 *
 * 源站 wd.js:23 给**每页**的 header 加 w-nav-fixed：
 *     $(".c_portalResnav_main-01001").parents(".w_grid-000").addClass("w-nav-fixed");
 * 而 wd.css:76 的 .wd .w-nav-fixed{top:-100px!important} 把它推出屏幕，
 * 只靠 scroll_handle() 里的 addClass("show") 拉回 —— 但那个函数**只挂在 scroll
 * 事件上**。后果有二：向下滚动导航即消失；产品详情页首屏根本不触发 scroll，
 * 一进页面导航就在屏幕外。
 *
 * 权重：(0,2,0) → (0,3,0)，用 .w_grid-000 这个恒在的类压过源站规则。
 * 与 .wd .w-nav-fixed.show 同为 (0,3,0) 但取值相同（都是 0），不冲突。
 * ------------------------------------------------------------------ */
.wd .w_grid-000.w-nav-fixed {
  top: 0 !important;
}

/* ------------------------------------------------------------------
 * 偏离 11：页脚不参与滚动淡入，始终可见且贴住页面底部
 *
 * 源站 wd.js 把 #w_grid-footer 纳入了滚动动画集合（sub() 与 index() 两条
 * 选择器链都会命中它），而 wd.css:7 的
 *     body.sub .w-scroll-ani > div{animation:fadeOutDown 0s both}
 * 在元素未获得 .scrolled 时把它定格在 opacity:0。
 * 判定条件是 top < window_height + t - 30（wd.js:109）——
 * 新闻详情页页脚 top=772、视口 779，772 > 749，**首屏永远拿不到 .scrolled，
 * 页脚恒不可见**。这就是"footer 有时没有在页面底部显示"。
 *
 * 这里直接取消页脚上的该动画。用 ID 选择器（权重远高于类）即可稳定取胜。
 * ------------------------------------------------------------------ */
body.sub #w_grid-footer > div,
body #w_grid-footer > div {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ------------------------------------------------------------------
 * 偏离 12：header 的固定定位兜底
 *
 * 源站的每个页面级 CSS 都自带一段
 *     #w_grid-header { position: fixed; top: 0px; left: 0px; ... }
 * 而本项目**手写**的页面（产品详情页、404 页）没有这段，于是 header 变成
 * position:static，在文档流末尾摊成一个 1520px 高的巨块 —— 这正是
 * 「产品详情页面点进去」看到的东西（顶部没有导航条）。
 *
 * 放在这里而不是逐个补进各页 CSS：它对已有该段的页面取值完全相同（同权重时
 * 页面级 CSS 在后、仍然胜出），对手写页面则是从无到有。
 * ------------------------------------------------------------------ */
#w_grid-header {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: auto;
  right: auto;
  transform: none;
  width: 1912px;
  height: 60px;
  z-index: 11;
  content: "lt";
  max-width: none;
  min-width: 0px;
  max-height: none;
  min-height: 80px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  -webkit-transform: none;
}
/* 首页的 page_Home.css 自带了另一版（width:100%; height:80px）。上面这版来自
   其余 6 个页面级 CSS 的共同取值；首页那份权重相同且在文档流中更靠后，仍然生效。 */

/* 手写页面（产品分类页）没有 banner 垫底，内容会钻到固定定位的导航条下面。
   产品详情页的同类留白写在 page_Product_detail.css 里，那是它自己的页面样式；
   分类页直接复用列表页的 page_impt_Product.css，故在此统一给一档顶部留白。 */
#w_grid-productCategory {
  padding-top: 80px;
}

/* 分类页的空态文案（该分类下暂无产品）。 */
.pd_empty {
  font-size: 14px;
  line-height: 2;
  color: #888;
  padding: 20px 0 40px;
}

/* 内容不足一屏时的"贴底"不用 flex 实现 —— 试过：
   .main.pagebox{display:flex;flex-direction:column} + 页脚 margin-top:auto
   会让 About / Video / 新闻列表 / 联系 四个页面的像素差异从 <0.5% 飙到
   8%~33%（flex 容器取消子元素的外边距合并，整页排版位移）。
   实测各页文档高 948~2019，全部大于视口 779，"内容不足一屏"当前不会发生，
   因此这里不引入布局风险；页脚"消失"的真实成因是上面的 opacity:0，已解决。 */
/* ============================================================
 * 页面 chrome 的共享规则（页头 / 页脚 / 导航）
 *
 * 源站是 CMS 导出，每个页面级 CSS **各自重复**了一份页头页脚规则。
 * 本项目手写的页面（产品详情页、404 页）没有这份拷贝，于是页头 logo 按
 * 原始尺寸 1334x1334 撑开、header 高达 1520px —— 直接表现就是
 * 「产品详情页面点进去看不到导航」。
 *
 * 下面这些规则在 7 个页面级 CSS 里**逐字完全相同**（脚本比对得出），
 * 因此抽到共享文件对既有页面是等价变换，对手写页面是从无到有。
 * 以后手写新页面无需再管页头样式。
 * ============================================================ */

#c_portalResnav_main-header2 > div {
    animation-fill-mode: both;
}
#c_portalResnav_main-header2 {
    width: auto;
    max-width: none;
    min-width: 0px;
    height: auto;
    max-height: none;
    min-height: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
#w_grid-footer .p_MatteIcon .iconfont:before {
    content: '\e602';
}
#w_grid-footer > div {
    animation-fill-mode: both;
}
#w_grid-footer > div > .p_gridbox > .p_gridCell:nth-child(n+1) {
    margin-left: 0px;
    clear: left;
}
#w_grid-header .p_MatteIcon .iconfont:before {
    content: '\e602';
}
#w_grid-header > div {
    animation-fill-mode: both;
}
#w_grid-header > div > .p_gridbox > .p_gridCell:nth-child(n+1) {
    margin-left: 0px;
    clear: left;
}
#w_fimg-header1 .p_MatteIcon .iconfont:before {
    content: '\e602';
}
#w_fimg-header1 > div {
    animation-fill-mode: both;
}
#w_fimg-header1 {
    width: 100%;
    max-width: 50px;
    min-width: 0px;
    height: auto;
    max-height: none;
    min-height: 70px;
    margin-top: 10px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
/* ---------- 页头分栏宽度（桌面断点）----------
 * 这段在源站每个页面级 CSS 里都有一份，**嵌在 @media (min-width: 769px) 内**，
 * 因此抽取脚本的扁平解析器第一次没抓到 —— 后果是手写页面里 logo 与导航不并排，
 * 导航块掉到 logo 下方。769px 以下由 w_grid-000.css 的移动端规则统一处理（竖排）。
 */
/*w_grid-header*/
@media only screen and (min-width: 769px) {
    #w_grid-header > div > .p_gridbox > .p_gridCell {
        margin-bottom: 0rem;
        margin-top: 0rem;
        margin-left: 0px;
    }

    #w_grid-header > div > .p_gridbox > .p_gridCell:nth-child(2n+0) {
        width: 76.83%;
        margin-left: 0px;
        margin-right: 0px;
        clear: none;
    }

    #w_grid-header > div > .p_gridbox > .p_gridCell:nth-child(2n+1) {
        margin-left: 0px;
        clear: left;
        margin-right: 0px;
        width: 23.17%;
    }

    #w_grid-header > div > .p_gridbox > .p_gridCell:nth-child(2n) {
        margin-right: 0px;
    }
}