/* ============================================================================
   Unitex — RTL / Arabic overrides
   ----------------------------------------------------------------------------
   为什么需要这个文件
   assets/css/style.css 是**纯 LTR** 设计系统：全文使用物理方向属性
   （left / right / padding-left / margin-left / border-left / float / text-align:left），
   没有任何 `[dir]` 分支。浏览器在 `dir="rtl"` 下只会自动镜像「书写方向」相关的
   行为（文本对齐、flex/grid 的 start/end、列表缩进），**不会**镜像上面这些物理属性。
   结果：阿拉伯语页面里边框长在错误的一侧、悬停图标飘到版心外、右贴浮动按钮
   挡住正文、字距把连写字母拆开。

   本文件做四件事
   1. 字体栈插入阿拉伯语字族（**插在拉丁字族之后**，拉丁字符仍走 Inter/Fraunces/
      IBM Plex Mono，阿拉伯字符回落到 Noto Sans Arabic —— 字体回退是按字符的）。
   2. 把上述物理方向属性逐条镜像（选择器与声明与 style.css 一一对应）。
   3. 校正阿拉伯语排版禁忌：letter-spacing 会破坏连写观感、斜体在阿拉伯语里
      是浏览器合成的假斜体，两者都要归零。
   4. 方向性字形与位移镜像（→ 变 ←，translateX 反号）。

   作用域
   全部规则以 `[dir="rtl"]` 开头 —— Polylang 在阿拉伯语页面输出
   `<html dir="rtl" lang="ar">`。LTR 语言页面加载本文件**零命中**（本文件仍然
   只对 is_rtl() 入队，见 functions.php 的 unitex_assets()）。

   维护约定
   style.css 里新增任何 left/right 类属性时，请在本文件同步补一条镜像规则，
   否则该属性只在阿拉伯语下失准。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 字体栈 */

/* 插在拉丁字族之后：拉丁字符命中前一个家族，阿拉伯字符才回落到 Noto Sans Arabic。
   Noto Sans Arabic 由 functions.php 的 unitex-fonts 引入（与 Inter 同一个请求）。 */
[dir="rtl"] {
  --sans: "Inter", "Noto Sans Arabic", -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif;
  --serif: "Fraunces", "Noto Sans Arabic", Georgia, "Times New Roman", Tahoma, serif;
  --mono: "IBM Plex Mono", "Noto Sans Arabic", "SFMono-Regular", Consolas, Tahoma, monospace;

  /* 阿拉伯语的 x-height 与字面高度都小于拉丁字母，1.65 的行高会显得过紧；
     同时基线上下留白不对称，需要独立的 line-height。 */
  line-height: 1.85;
}

/* 连写语言禁用字距：letter-spacing 会在字母之间插入空隙，
   阿拉伯语词形（词首/词中/词尾变体）因此断裂成孤立字形。
   0.14em / 0.16em 这种「小型大写标签」的字距在阿拉伯语下是最刺眼的失准点。

   特异性说明：`[dir="rtl"][lang] body *` = (0,2,1)，高于 style.css 里
   最高的 (0,2,0)（如 .answer .a-label / .takeaways .t-entity），因此无需 !important。 */
[dir="rtl"][lang] body *,
[dir="rtl"][lang] body {
  letter-spacing: normal;
}

/* 例外：品牌字标与语言代码是纯拉丁字符，保留一点字距以维持设计识别度。
   特异性 (0,3,1) > (0,2,1)，写在本文件后面即可生效。 */
[dir="rtl"][lang] .brand,
[dir="rtl"][lang] .brand-mark,
[dir="rtl"][lang] .ls-code,
[dir="rtl"][lang] .ls-menu .ls-code {
  letter-spacing: 0.06em;
}

/* 阿拉伯语没有斜体传统，浏览器会合成倾斜（合成斜体在没有真斜体字族时是
   机械倾斜，观感廉价且降低可读性）。改用字重与引号承担强调。 */
[dir="rtl"] .prose blockquote,
[dir="rtl"] .prose em,
[dir="rtl"] .prose i,
[dir="rtl"] blockquote em,
[dir="rtl"] blockquote i {
  font-style: normal;
}

/* 阿拉伯语正文行高略放宽，长段落（本页多数是 3–6 行）更易读 */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .prose p,
[dir="rtl"] .answer p {
  line-height: 1.9;
}

/* 表格与规格行里的拉丁数字保持等宽数字，避免阿拉伯语环境下的比例数字导致列错位 */
[dir="rtl"] .spec-table td,
[dir="rtl"] .data-table td,
[dir="rtl"] .prose table td,
[dir="rtl"] .prose table th {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- 2. 页头 / 导航 / 语言切换 */

/* .nav a { border-left: 1px solid #2E2A25 } → 分隔线换到右侧 */
[dir="rtl"] .nav a {
  border-left: 0;
  border-right: 1px solid #2E2A25;
}
[dir="rtl"] .nav.open a {
  border-left: 0;
  border-right: 0;
}

/* .head-cta { padding-left: 18px; border-left: 1px } */
[dir="rtl"] .head-cta {
  padding-left: 0;
  padding-right: 18px;
  border-left: 0;
  border-right: 1px solid #2E2A25;
}

/* .burger { border-left: 1px } */
[dir="rtl"] .burger {
  border-left: 0;
  border-right: 1px solid #2E2A25;
}

/* .nav a.nav-vip { border-left: 1px } */
[dir="rtl"] .nav a.nav-vip {
  border-left: 0;
  border-right: 1px solid #2E2A25;
}

/* 下拉箭头的前置间距：.nav-item.has-sub > a::after { margin-left: 8px } */
[dir="rtl"] .nav-item.has-sub > a::after {
  margin-left: 0;
  margin-right: 8px;
}

/* 子菜单锚点默认挂在父项**左**边缘；RTL 下应挂右边缘，否则菜单会从左边越界 */
[dir="rtl"] .submenu {
  left: auto;
  right: 0;
}
[dir="rtl"] .submenu a {
  border-left: 0;
  border-right: 0;
}
/* 移动端：子菜单缩进用 border-left + padding-left 表现层级 */
[dir="rtl"] .submenu {
  border-left: 0;
  border-right: 1px solid #2E2A25;
  padding: 0 14px 6px 0;
}

/* .lang-switch { border-left: 1px } */
[dir="rtl"] .lang-switch {
  border-left: 0;
  border-right: 1px solid #2E2A25;
}

/* 语言下拉面板原本靠 right: 0 对齐切换器右缘（切换器贴页头右侧）；
   RTL 下切换器在左，面板改为靠左对齐 */
[dir="rtl"] .ls-menu {
  right: auto;
  left: 0;
}
[dir="rtl"] .ls-menu .ls-name {
  margin-left: 0;
  margin-right: auto;
}

/* ---------------------------------------------------------------- 3. Hero 区 */

/* 首页 hero 文字岛：渐变从左深到右透明（照片在右侧）。
   RTL 下照片与文字的左右关系对调，渐变换成「右深左透明」。 */
[dir="rtl"] .hero-island {
  background: linear-gradient(270deg,
    rgba(11, 11, 11, .995) 0%,
    rgba(11, 11, 11, .985) 40%,
    rgba(11, 11, 11, .86) 48%,
    rgba(11, 11, 11, .46) 56%,
    rgba(11, 11, 11, .12) 63%,
    rgba(11, 11, 11, 0) 70%);
  /* 大内边距原本在左（把文字推进与居中 .wrap 对齐的位置），镜像到右 */
  padding-left: clamp(20px, 2.5vw, 40px);
  padding-right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}

/* 内页 banner：文字栏占宽 44% 在左、照片占宽 56% 在右 */
[dir="rtl"] .page-hero.banner > img.bg,
[dir="rtl"] .page-hero.banner > picture > img.bg {
  left: 0;
  right: auto;
}
[dir="rtl"] .page-hero.banner .wrap {
  padding-left: clamp(20px, 2.5vw, 40px);
  padding-right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}

/* 首页轮播圆点原贴右缘 */
[dir="rtl"] .hero-dots {
  right: auto;
  left: var(--pad);
}

/* 品牌页 hero 上方的橙色短线原贴左缘 */
[dir="rtl"] .page-hero.brand::before {
  left: auto;
  right: var(--pad);
}

/* ------------------------------------------------- 4. 细线网格（hairline grid） */

/* 这一类区块的统一做法是：外层给 border-top + border-left，
   每个 cell 给 border-right + border-bottom，从而拼出完整细线网格。
   RTL 下整组左右对调。 */

[dir="rtl"] .cat-grid,
[dir="rtl"] .rule-grid,
[dir="rtl"] .steps,
[dir="rtl"] .reel-grid,
[dir="rtl"] .post-nav {
  border-left: 0;
  border-right: 1px solid var(--line-strong);
}

[dir="rtl"] .cat-cell,
[dir="rtl"] .rule-cell,
[dir="rtl"] .step,
[dir="rtl"] .reel-cell,
[dir="rtl"] .post-nav a,
[dir="rtl"] .field,
[dir="rtl"] .stat {
  border-right: 0;
  border-left: 1px solid var(--line-strong);
}

/* 末列/特定列要去掉的分隔线 */
[dir="rtl"] .stat:last-child,
[dir="rtl"] .stat:nth-child(2) {
  border-left: 0;
}

/* 联系页：外层细线取消、只留 cell 之间的竖线，原为 border-left 版本 */
[dir="rtl"] .contact-split .rule-grid {
  border-right: 0;
}
[dir="rtl"] .contact-split .rule-grid .rule-cell {
  border-left: 0;
  border-right: 1px solid var(--line-strong);
}

/* 产品网格卡右上角的悬停「→」标记：位置与位移方向都要镜像 */
[dir="rtl"] .cat-cell .go {
  right: auto;
  left: 20px;
  transform: translateX(6px);
}

/* strip3 图组：桌面用 border-right 分隔，移动端改为 border-bottom */
[dir="rtl"] .strip3 figure {
  border-right: 0;
  border-left: 1px solid var(--line-strong);
}
[dir="rtl"] .strip3 figure:last-child {
  border-right: 0;
  border-left: 0;
}
[dir="rtl"] .strip3 figure {
  border-left: 0;
  border-bottom: 1px solid var(--line-strong);
}

/* ------------------------------------------------------------ 5. 正文组件 */

/* 引用块：左侧竖条 + 左侧内缩 → 镜像到右 */
[dir="rtl"] .prose blockquote {
  border-left: 0;
  border-right: 2px solid var(--accent);
  padding: 6px 22px 6px 0;
}

/* GEO answer 区块：左缘 3px 强调条 → 右缘 */
[dir="rtl"] .answer {
  border-left: 1px solid var(--line-strong);
  border-right: 3px solid var(--accent);
}

/* takeaways / checklist 的行内标记（箭头、方框）原本绝对定位在 left: 0 */
[dir="rtl"] .takeaways li {
  padding-left: 0;
  padding-right: 24px;
}
[dir="rtl"] .takeaways li::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .checklist li {
  padding-left: 0;
  padding-right: 30px;
}
[dir="rtl"] .checklist li::before {
  left: auto;
  right: 0;
}

/* markets 列表项的行首箭头：RTL 下换向左箭头，并去掉原本的 padding-left: 0 修正 */
[dir="rtl"] .markets li {
  padding-left: 0;
  padding-right: 0;
}
[dir="rtl"] .markets li::before {
  content: "\2190\00a0";
}

/* 嵌套评论缩进 */
[dir="rtl"] .comment-list ol.children {
  padding-left: 0;
  padding-right: 22px;
}

/* 图片对齐类：float 与 margin 都要反向 */
[dir="rtl"] .alignleft {
  float: right;
  margin: 0 0 18px 24px;
}
[dir="rtl"] .alignright {
  float: left;
  margin: 0 24px 18px 0;
}

/* 表格与问答标题原为 text-align: left；RTL 下必须靠右，否则
   单元格文字会贴着错误的一侧，与行首/行尾语义相反 */
[dir="rtl"] .spec-table th,
[dir="rtl"] .spec-table td,
[dir="rtl"] .faq-q,
[dir="rtl"] .prose th,
[dir="rtl"] .prose td,
[dir="rtl"] .cta-band,
[dir="rtl"] .entity-block .spec-table caption,
[dir="rtl"] .spec-table caption,
[dir="rtl"] .data-table caption,
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td,
[dir="rtl"] .entry-content .wp-block-table.spec-table td,
[dir="rtl"] .utx-table-scroll caption {
  text-align: right;
}

/* 页脚品牌标签：左缘竖线 + 左内边距 */
[dir="rtl"] .brand-tag {
  border-left: 0;
  border-right: 1px solid #2E2A25;
  padding-left: 0;
  padding-right: 16px;
}

/* 图片角上的 UNITEX 水印：定位与 background-position 都在左上角落 */
[dir="rtl"] .imgbox.utx-brand::after,
[dir="rtl"] .showcase-thumb::after {
  left: auto;
  right: 0;
  background-position: calc(100% - 12px) 10px;
}

/* CTA 按钮的箭头位移：原本向右推 4px，RTL 下改为向左 */
[dir="rtl"] .btn:hover .arrow {
  transform: translateX(-4px);
}

/* 跳转到主内容链接：屏幕外定位方向反转 */
[dir="rtl"] .skip {
  left: auto;
  right: -9999px;
}
[dir="rtl"] .skip:focus {
  left: auto;
  right: 0;
}

/* ------------------------------------------------- 6. 浮动联系按钮（右下角） */

/* 浮动联系条固定在右下角、标签在按钮左侧伸出。
   RTL 下整组镜像到左下角：flex 的 align-items: flex-end 会随书写方向自动
   落到左侧，因此只需改定位与标签的偏移方向。 */
[dir="rtl"] .float-dock {
  right: auto;
  left: 18px;
}
[dir="rtl"] .float-dock .fd-label {
  right: auto;
  left: 62px;
}

/* 移动端断点的定位覆盖 */
@media (max-width: 720px) {
  [dir="rtl"] .float-dock {
    right: auto;
    left: 12px;
  }
}

/* ------------------------------------------------- 7. bidi 标点保护（纯拉丁行） */

/* 问题：页脚联系块 .foot-contact 里是多行纯拉丁文本，例如
       `Xiamen Unitex Trade Co., Ltd.`
   它没有显式方向属性，于是继承段落方向 rtl。行末的 `.` 在 Unicode 双向算法里
   属于「中性字符」，在 RTL 段落里会被重排到**行的最左端**，实际渲染成
       `.Xiamen Unitex Trade Co., Ltd`
   —— 看起来像行首多了个点、行末少了个点（英文访客一眼能看出是 bug）。

   解法：`unicode-bidi: plaintext`。它按**每一行第一个强方向字符**决定该行方向：
   纯拉丁行判为 LTR 行，句点回到行末；以阿拉伯语开头的行仍是 RTL 行，行为不变。
   注意不能用 isolate —— isolate 只阻止元素内外互相影响，**不保护内部的中性字符**，
   因此对本问题无效。

   作用域：[dir="rtl"] 前缀 —— LTR 语言页面加载本文件零命中。

   维护约定：若将来在 RTL 页面新增「纯拉丁文本 + 行末标点」的多行块
   （地址、银行信息、法规编号等），把该容器追加到下面的选择器列表。 */
[dir="rtl"] .foot-contact,
[dir="rtl"] .foot-contact > *,
[dir="rtl"] address,
[dir="rtl"] .foot-addr {
  unicode-bidi: plaintext;
}