/* ============================================================
   wp-bridge.css —— WordPress 结构 与 设计稿静态 HTML 的差异补丁
   ------------------------------------------------------------
   这个文件只放「因为跑在 WordPress 上、结构和静态稿不得不不一样」而需要的规则。
   纯粹的设计样式请改 assets/css/site.css（那是设计稿原件）。
   底座 karewash 遗留的组件样式在 assets/css/shared.css。
   三个文件的加载顺序：shared.css → site.css → wp-bridge.css（本文件最后，赢冲突）。

   每加一条规则请写清「为什么静态稿不需要它」，否则半年后没人知道能不能删。
   ============================================================ */

/* ------------------------------------------------------------
   1. masthead 脱离 hero
   静态稿：.meta / nav.mast / .nav-drawer 是 <header class="hero scene"> 的子元素。
   WP：header.php 和 hero 是两个独立输出，标签无法跨文件闭合。
   改成绝对定位覆盖 —— 半透明毛玻璃依然透出 hero 照片，视觉等价。
   用 absolute 而不是 fixed：设计稿的 masthead 是随页面滚走的，不是常驻吸顶。
   ------------------------------------------------------------ */
.sitetop{position:absolute;top:0;left:0;right:0;z-index:60}

/* hero 要给覆盖上去的 masthead 让出高度。
   下面这些是兜底值（JS 没跑起来时用），真正生效的是 header.php 里那段同步脚本 ——
   它量 .sitetop 的真实高度写进 --km-mast-h，见那里的说明。
   ⚠ 别再回去写死单一数值。这个高度受三件事影响，估不准：
     · 信息条在窄屏会折行（1440px 下 113.44，768px 下 152.88，实测值）
     · 七种语言的邮箱、电话、语言切换器长度不同，折行的宽度也就不同
     · 字体加载完成前后，行高会变
   兜底值按 1440px 实测的 36.44（信息条）+ 77（导航）取整给 114px。 */
:root{ --km-mast-h:114px }
@media(max-width:640px){ :root{ --km-mast-h:154px } }  /* 信息条折成两行 */
.hero,.pagehero{padding-top:var(--km-mast-h)}

/* 没有 hero 的页面（搜索结果 / 归档兜底 / Elementor 空白页）：
   不能让绝对定位的导航悬空盖住正文，切回正常流并补上实底。 */
body.km-no-hero .sitetop{position:relative;background:var(--deep)}
body.km-no-hero .sitetop nav.mast{backdrop-filter:none;background:transparent}

/* ------------------------------------------------------------
   2. logo
   静态稿写死一张白色 logo 图。主题里 logo 由后台上传，可能是彩色的，
   所以统一用 filter 转白 —— 换 logo 不用重新出反相图。
   ------------------------------------------------------------ */
.mastlogo{display:flex;align-items:center;flex:none}
.mastlogo img{height:28px;width:auto;filter:brightness(0) invert(1)}
.mastwordmark{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t5);
  letter-spacing:-.03em;color:var(--white)}

/* ------------------------------------------------------------
   3. 顶部信息条右侧
   静态稿是单语言站，右侧就是一段用斜杠分隔的纯文本。
   这里要塞进「城市 / 邮箱 / 电话 / 语言切换」四件，所以改成 flex 分段。
   ------------------------------------------------------------ */
.meta .metaright{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.meta .metabit{display:inline-flex;align-items:center}
.meta .metabit + .metabit::before{content:"/";margin-right:var(--s4);color:rgba(147,170,188,.5)}
.meta .metabit a{color:inherit}
.meta .metabit a:hover{color:var(--orange-lit)}

/* ------------------------------------------------------------
   4. 语言切换器
   设计稿没有这个组件（单语言站）。样式按信息条的 mono / 大写 / 深蓝语言做，
   不要引入底座那套黄黑配色。

   ⚠ 触发器绝对不能有边框和内边距（v1.28.5 修）
   信息条的高度是 --km-mast-h 的组成部分（111px = 信息条 35 + masthead 76），
   而 masthead 是绝对定位盖在 hero 上、靠 hero 的 padding-top 让位的。
   之前这颗按钮带 1px 边框 + 2px 上下内边距 + line-height 1.6，比旁边的纯文字高约 5px，
   把信息条撑到 40 出头 —— hero 让出的 111px 就不够了，首屏文案整体被顶上去。
   所以它必须跟 metabit 里的其它文字一样是「纯文字 + 一个小箭头」，
   字号行高全部继承，不引入任何自己的盒模型高度。
   ------------------------------------------------------------ */
/* ⚠ 信息条必须压过导航栏，否则展开的面板会被切掉上半截（v1.28.6 修）
   site.css 里 .meta 和 nav.mast 是兄弟，z-index 都是 40，DOM 里导航栏在后，
   所以导航栏盖在信息条上。而 .meta 自己带 position:relative + z-index，
   本身就是一个层叠上下文 —— 面板在它内部，写多高的 z-index 对外都还是 40，
   于是从信息条垂下来的那一截被导航栏裁掉，露出来的第一项变成了第三个语言。
   两者物理上不重叠（信息条在上、导航栏在下），抬高信息条不会遮挡任何东西。
   下面三个选择器要盖住 site.css 里的 .meta / .scene > .meta / .pagehero.media > .meta。 */
.sitetop .meta,
.scene > .meta,
.pagehero.media > .meta{z-index:55}

.langbit .lang-switcher{position:relative}
.langbit .lang-toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:0;padding:0;margin:0;
  color:inherit;cursor:pointer;
  font-family:'Roboto Mono',monospace;
  font-size:inherit;letter-spacing:inherit;line-height:inherit;
  text-transform:uppercase;
}
.langbit .lang-toggle:hover,
.langbit .lang-toggle:focus-visible{color:var(--orange-lit)}
.langbit .lang-toggle:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
.langbit .lang-toggle svg{flex:none;transition:transform .16s ease;opacity:.7}
.langbit .lang-toggle:hover svg{opacity:1}
.langbit .lang-switcher.is-open .lang-toggle{color:var(--orange-lit)}
.langbit .lang-switcher.is-open .lang-toggle svg{transform:rotate(180deg);opacity:1}

/* 面板：贴住信息条底沿展开，顶上压一条橙线把它和触发器锚在一起。
   背景比信息条再深一档 —— 它会浮在 hero 照片上，同色会糊在一起看不清边界。 */
.langbit .lang-dropdown{
  position:absolute;top:calc(100% + 7px);right:0;
  min-width:186px;margin:0;padding:0;list-style:none;
  background:#102435;
  border:1px solid rgba(217,230,232,.14);
  border-top:2px solid var(--orange);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.62);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:80;
}
/* .is-open 是 main.js 点击时加的；:focus-within 兜键盘操作。
   （v1.28.5 之前只写了 :focus-within，JS 那条链路一直是死的。） */
.langbit .lang-switcher.is-open .lang-dropdown,
.langbit .lang-switcher:focus-within .lang-dropdown{opacity:1;visibility:visible;transform:none}
.langbit .lang-option{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:9px var(--s4);color:#CBD9E2;font-size:var(--t3);
  text-transform:none;letter-spacing:0;
  border-left:2px solid transparent;transition:.14s;
}
.langbit .lang-option + .lang-option{border-top:1px solid rgba(217,230,232,.08)}
.langbit .lang-option:hover{background:rgba(255,255,255,.06);color:var(--white);border-left-color:var(--orange)}
.langbit .lang-option.is-current{color:var(--orange-lit);border-left-color:var(--orange-lit)}
.langbit .lang-option .lang-code{font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.1em;opacity:.6}
/* 断点跟着 site.css 走：信息条的字号在 640px 换档、本来就在那里折行，
   语言面板也在同一处放宽，别自己另起一个 720px。 */
@media(max-width:640px){
  .langbit .lang-dropdown{min-width:200px}
}

/* ------------------------------------------------------------
   5. Hero 标题高亮
   静态稿用 <span class="o"> 标记要变橙的词。给编辑者用 <em> 更好写，
   两者等价 —— 这条让 em 拿到同样的效果，编辑者不用在面板里敲 span 标签。
   ------------------------------------------------------------ */
.hero h1 em,.hero h1 .o{font-style:normal;color:var(--orange)}

/* ------------------------------------------------------------
   6. 首页两列骨架挂到 Elementor Container 上
   ------------------------------------------------------------
   静态稿是 .dossier > .wrap > (aside.rail + .doscol) 三层写死的 HTML。
   WordPress 这边右列要能自由拖 widget，所以改成：
     Container [CSS class: km-dossier]        ← 两列 grid
       ├─ KARE Mop「侧栏目录」widget          ← 左列，sticky
       └─ Container [CSS class: km-doscol]    ← 右列，里面放各个段落
            └─ Container [CSS class: km-blk]  ← 一个编号段
                 ├─ 「段落标题」widget
                 └─ 内容 widget…

   Elementor 4.1.1 的 Container：外层永远是 .e-con，
   content_width=boxed 时内部多一层 .e-con-inner，full 时没有。
   两种都要接住，所以下面写了两条 —— 再用 :has() 把 boxed 情况的外层退回 block，
   否则会套两层 grid。
   ------------------------------------------------------------ */
/* ⚠ 为什么这一段用 !important
   Elementor 4.1.1 的 Container 通过 CSS 变量控制自身布局：
     .elementor-12 .elementor-element.elementor-element-xxx{--display:flex;--padding-top:0px;…}
   选择器优先级 0,3,0，比这里的单类高，而且 --display 默认是 flex。
   桥接层的职责就是「无论面板里怎么设，结构必须按设计稿走」，所以这几条布局属性
   锁死。副作用是在 Elementor 面板里改这些容器的内外边距不会生效 —— 这是有意的，
   跟底座「视觉锁死、只开放文案」的原则一致。要调版式请改这个文件。 */
.km-dossier,
.km-dossier > .e-con-inner{
  display:grid !important;
  grid-template-columns:var(--railw) minmax(0,1fr) !important;
  gap:var(--railgap) !important;
  align-items:start !important;
  /* 版心自己管 —— 静态稿由 .wrap 提供，这里 Container 用整宽，
     由本规则统一收到 1360 + 40 内边距，跟站内其它区块对齐 */
  width:100%;
  max-width:var(--maxw) !important;
  margin-inline:auto !important;
  padding-inline:var(--pad) !important;
}
.km-dossier:has(> .e-con-inner){display:block !important;padding-inline:0 !important;max-width:none !important}
.km-dossier{background:var(--cold)}
.km-doscol{min-width:0;display:block !important}

/* ------------------------------------------------------------
   内容段的浅灰 / 白交替（v1.29.0 补）
   ------------------------------------------------------------
   静态稿每个内页的区块是 <section class="sect"> 和 <section class="sect white">
   一深一浅轮着来的（about / factory 是「· 白 · 白 ·」，认证 / 条款 / 下载是「· 白」），
   靠这个节奏把长页面切成看得出层次的几块。
   WP 这边区块是 Elementor Container（.km-sect），原来没有对应规则，
   于是整页全是同一个 --cold 底色，读起来是一整片。
   给容器加 CSS class「white」即可切成白底 —— 下面这条让那个 class 生效。
   ------------------------------------------------------------ */
.km-sect.white,
.km-blk.white{background:var(--white)}

/* 区块导语。site.css 里写的是 `.sect p.intro`，要求父元素带 .sect ——
   WP 这边区块是 Elementor Container（.km-sect），选择器落空，导语会退回默认正文样式。
   同理 .disclaimer 那条补充说明也是挂在 .sect 下的。 */
.km-sect p.intro{
  margin:0 0 var(--s6);
  font-size:var(--t4);
  color:var(--tech);
  max-width:var(--measure-body);
}
.km-sect .disclaimer{
  margin-top:var(--s5);
  font-size:var(--t2);
  color:var(--tech);
}

/* ------------------------------------------------------------
   侧栏目录跟随滚动（v1.28.5 修）
   ------------------------------------------------------------
   静态稿里 <aside class="rail"> 是 .dossier .wrap 这个 grid 的直接子元素，
   自己 position:sticky 就够了。

   WordPress 这边中间多了 Elementor 的两层包裹：
     .e-con-inner（grid, align-items:start）
       └ .elementor-widget-km_rail      ← 真正的 grid item
           └ .elementor-widget-container
               └ aside.rail             ← site.css 的 sticky 写在这里

   sticky 的活动范围被限制在**父元素**的内容盒里，而 align-items:start
   已经让包裹层的高度正好等于 .rail 自身高度 —— 余量为 0，于是它一动不动。
   把 sticky 提到 grid item 那一层：它的父是整个 grid，高度等于右栏，余量充足。
   内层的 sticky 同时退回 static，免得两层 sticky 互相抵消。
   ------------------------------------------------------------ */
.km-dossier > .e-con-inner > .elementor-widget-km_rail,
.km-dossier > .elementor-widget-km_rail{
  position:sticky;
  top:var(--s5);          /* 20px —— 跟静态稿 .rail 的 top 一致 */
  align-self:start;
  z-index:6;
}
.km-dossier .rail{position:static;top:auto}

/* 1040px 以下静态稿把 rail 收成横排的目录条，不再跟随 */
@media(max-width:1040px){
  .km-dossier > .e-con-inner > .elementor-widget-km_rail,
  .km-dossier > .elementor-widget-km_rail{position:static;top:auto}
}

/* 一个编号段 —— 等价静态稿的 .blk */
.km-blk{display:block !important;padding:var(--block) 0 !important;border-bottom:1px solid var(--fiber)}
.km-blk:last-of-type{border-bottom:0}

/* ⚠ 这两件事在设计稿里是两个不同的断点，别再合并成一个：
     1040px —— .dossier .wrap 收成单列（跟上面 rail 那条同一个断点）
      860px —— .blk 的上下内边距 64px → 44px
   以前这里写成一个 @media(max-width:960px) 同时干两件事，于是
     · 960–1040px 之间：设计稿已经单列，线上还是两列
     · 860–960px 之间：线上已经把内边距收成 44px，设计稿还是 64px
   1024px 视口下每段都比设计稿高一截，就是这么来的。
   自造断点前先去 site.css 查原值。 */
@media(max-width:1040px){
  .km-dossier,
  .km-dossier > .e-con-inner{grid-template-columns:1fr !important;gap:0 !important}
  /* 设计稿这条是 `.dossier .wrap{grid-template-columns:1fr;gap:0}` —— 后代选择器，
     会连 dossier 里每一个 .wrap 的行间距一起清掉，包括照片带内部那个 12 列栅格
     （它的 gap 是 var(--gut)=24px，三行两道缝正好 48px）。
     只清容器自己的 gap 是不够的：1024px 下两条照片带都会比设计稿高 48px。 */
  .km-dossier .wrap{gap:0}
}
@media(max-width:860px){
  .km-blk{padding:44px 0 !important}
}

/* ------------------------------------------------------------
   7. 内页段落挂到 Elementor Container 上
   ------------------------------------------------------------
   静态稿的内页是 <section class="sect"><div class="wrap">…</div></section>：
   外层给上下留白和分隔线，内层收版心。WordPress 这边内容要能自由拖，
   所以把两层的职责合并到一个 Container 上，用法：
     Container [CSS class: km-sect] → 段落标题 widget + 内容 widget…
   ------------------------------------------------------------ */
.km-sect{
  display:block !important;
  padding-block:var(--block) !important;
  padding-inline:var(--pad) !important;
  border-bottom:1px solid var(--fiber);
  width:100%;
  max-width:var(--maxw) !important;
  margin-inline:auto !important;
}
.km-sect:last-of-type{border-bottom:0}
/* ⚠ 断点是 640px，跟着 site.css 的 `.sect{padding:var(--s9) 0}` 走。
   这里以前写 860px，于是 641–860px 之间的每个区块都比设计稿窄 16px ——
   自己造断点就会这样，改这一行前先去 site.css 确认原值。 */
@media(max-width:640px){ .km-sect{padding-block:var(--s9) !important} }

/* 首页的编号段用 .blkhead（左侧带编号），内页段落用 .secthead（无编号）。
   同一个「段落标题」widget 两处都在用，所以让没填编号的那种也拿到内页样式。 */
.km-sect .blkhead{border-bottom-width:2px}

/* ------------------------------------------------------------
   8. 生产流程还没配图时
   静态稿里六步一定配着右侧预览面板，所以 .linegrid 写死两列。
   主题里图片是后台上传的，一张都没传时右列会空出一大块白。
   ------------------------------------------------------------ */
.linegrid.km-nopanel{grid-template-columns:1fr}

/* ------------------------------------------------------------
   8. 底部询盘区改成设计稿的收尾带
   ------------------------------------------------------------
   底座那个是橙底黑字 + 上下两条黑边，跟设计稿的「深色照片底 + 白字」完全两回事，
   而且它自动注入在每一页，所以不改的话整站每页结尾都会跳一次风格。

   这里用样式覆盖而不是重写 PHP：注入逻辑（footer-cta.php）本身是好的
   —— 表单、询盘编号、附件、多语言都挂在上面，重写要连带迁移一堆东西。
   ------------------------------------------------------------ */

/* 底座给「正文末尾和 CTA 之间留空气」加的 80px。设计稿的收尾带是紧贴上一段的，
   它自己有 88px 内边距，外面再垫 80px 就成了一条突兀的浅色空带。 */
.km-cta-auto-wrap{padding-top:0}

/* ------------------------------------------------------------
   10. 宽表格的横向滚动
   设计稿是按桌面宽度排的，阶梯价表 4 列在 375px 上会把整页撑宽，
   导致 body 出现横向滚动条 —— 页面主体永远不该横向滚动，
   要滚也是表格自己滚。
   ------------------------------------------------------------ */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablescroll > table{min-width:520px}

/* 询盘提交后回跳显示的横幅。底座原来那个是黄底黑字的后台风格，
   这里改成跟站点一致的深色 / 橙色。 */
.km-inquiry-flash{padding:14px 0;font-size:var(--t3);color:var(--white)}
.km-inquiry-flash-success{background:var(--deep)}
.km-inquiry-flash-error{background:var(--orange-ink)}
.km-inquiry-flash .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}

/* ------------------------------------------------------------
   11. 兼容系列首屏的品牌标
   设计稿把品牌 logo 放在深色照片上，原图多是深色描边，
   直接贴上去几乎看不见 —— 垫一块白底再限高。
   .brandmark 的 max-height:44px 在 site.css 里已有，这里只加容器。
   ------------------------------------------------------------ */
/* 照片带事实表的列数。
   site.css 的 .bandsheet 默认四列，并在 1040px 收成两列、640px 收成一列。
   设计稿的 05 那条用内联 style 写死了三列 —— 内联优先级最高，那两个断点
   对它一概不生效，也就是说设计稿里这张表在任何视口都是三列。
   这里用同等特异性的属性选择器复刻这个行为：不加断点覆盖，就是照抄设计稿。
   （别好心「帮它」在窄屏收成一列 —— 那样反而跟设计稿对不上。） */
.bandsheet[data-cols="3"]{grid-template-columns:repeat(3,1fr) !important}
.bandsheet[data-cols="2"]{grid-template-columns:repeat(2,1fr) !important}

/* 首屏右侧单图面板的上下留白。
   设计稿这里靠的是浏览器给 <figure> 的默认 margin:1em 0，site.css 没有显式写；
   而 Elementor 的 frontend.css 把 figure 的 margin 重置成了 0，于是线上那张图
   紧贴着栅格上下沿，比设计稿矮 32px（实测 414.52 vs 446.56）。
   显式补回来 —— 别指望浏览器默认值，装了插件就作数不了。

   ⚠ 这里的 !important 不能去掉。压着它的是
     `.elementor .elementor-widget:not(…):not(…) figure{margin:0}`，特异性 (0,4,1)，
     比不带 !important 的任何合理写法都高；而且 wp-bridge.css 的 enqueue 顺序
     在 Elementor 的 frontend.css **之前**，就算特异性打平也是插件赢。
     本文件里凡是要盖 Elementor 的规则，都得这么写。 */
.pagehero .shot > .linepanel{margin-block:16px !important}

.pagehero .brandline{margin:0 0 var(--s3);display:inline-flex;align-items:center;
  background:var(--white);border-radius:4px;padding:8px 14px}
.pagehero .brandline img{display:block;max-height:44px;width:auto}
@media(max-width:640px){.pagehero .brandline img{max-height:34px}}


/* ------------------------------------------------------------
   9. 底座遗留组件的兜底
   shared.css 里还有一批未改造的 karewash widget 样式（.pd-* / .cat-page / .kit-*）。
   它们的圆角已归零、颜色已映射到设计稿 token，但排版仍是底座的。
   这里只做一件事：别让它们的 uppercase 大标题在设计稿版式里显得突兀。
   逐个改造在 P2/P3 做，改完一个就从下面这串选择器里删掉一个。
   ------------------------------------------------------------ */
.km-legacy h2,.km-legacy h3{text-transform:none;letter-spacing:-.03em}

/* ------------------------------------------------------------
   10. 从 shared.css 抢救出来的两条
   v1.27.0 撤掉 shared.css 时，全站真正还在用的只剩这两处。
   ------------------------------------------------------------ */

/* 语言下拉里的母语名（English / 简体中文 / Español …）。
   其余 .lang-* 规则本来就在上面的语言切换器段落里。 */
.langbit .lang-option .lang-native{
  flex:1;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
}

/* WordPress 无障碍标准类：屏幕阅读器读得到、视觉上不占位。
   核心和不少插件直接输出这个类名，主题必须提供样式，否则
   「跳到主内容」这类文字会明晃晃印在页面左上角。 */
.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus{
  position:static;
  width:auto;
  height:auto;
  clip:auto;
  clip-path:none;
  white-space:normal;
}

/* ------------------------------------------------------------
   11. 分页
   设计稿只有三篇文章，没画分页。这是 WordPress 必须有、设计稿没覆盖的部分，
   所以样式写在桥接层而不是 site.css —— site.css 保持跟设计稿逐字一致。
   视觉沿用设计稿的等宽小字 + 方框，跟 .post 列表同一套语言。
   ------------------------------------------------------------ */
.pagenav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  margin-top:var(--s7);
  font-family:'Roboto Mono',monospace;
  font-size:var(--t1);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.pagenav .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:9px 12px;
  border:1px solid var(--fiber);
  background:var(--white);
  color:var(--tech);
  transition:.15s;
}
.pagenav a.page-numbers:hover{
  border-color:var(--orange);
  color:var(--orange-ink);
}
.pagenav .page-numbers.current{
  background:var(--deep);
  border-color:var(--deep);
  color:var(--white);
}
.pagenav .page-numbers.dots{
  border-color:transparent;
  background:transparent;
}
.pagenav a.page-numbers:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}