/* ============================================================
   阿拉伯语 RTL 版面镜像（مرآة التصميم للعربية）
   140 批（2026-10-17 银月）
   ------------------------------------------------------------
   【为什么只有这么短】
     本站 style.css 的「方向硬编码」极少：
        float: left/right ...... 0 处
        display: flex .......... 103 处
        display: grid .......... 31 处
        margin-left ............ 4 处
        padding-left ........... 1 处
        border-left ............ 5 处
        translateX ............. 5 处（其中 3 处是装饰动画）
     flex / grid 的排列顺序**由 `direction` 自动镜像**，
     所以给 `<html dir="rtl">` 之后，绝大部分版面自动转过来，
     只需要手工处理剩下的那十几处「物理左/右」。

   【加载条件】
     仅当 `smLangIsRtl()` 为真（当前只有 ar）时，
     由 includes/header.php 在 style.css 之后追加本文件。
     非阿拉伯语访客 **一个字节都不下载**。

   【不做的事（留给阶段 2 视觉走查）】
     · `left:` / `right:` 共 47 处，绝大多数是装饰性定位
       （徽章、汉堡按钮、角标），批量镜像反而会错位。
     · 图标方向：箭头类图标指向需要翻转（见下方 .category-arrow svg）。
     · 375 / 768 / 1440 三档实际截图走查，按真实错位再补规则。
   ============================================================ */

/* ---------- ① 文字方向与字体 ---------- */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* 阿拉伯语字形不自带中文字体的字重，必须显式给字体栈。
   顺序：系统阿拉伯语字体优先 → 再回落到站内 Noto Sans SC（它没有阿拉伯语字形，
   会继续回落到系统默认，所以必须把阿拉伯语字体放在最前）。 */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: "Segoe UI", "Tahoma", "Noto Naskh Arabic", "Noto Sans Arabic",
               "Geeza Pro", "Arial", sans-serif;
}

/* 阿拉伯语没有「字母间距」概念，加 letter-spacing 会把连写拆断 */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .hero-title, html[dir="rtl"] .section-title {
  letter-spacing: 0 !important;
}

/* 混排（阿拉伯语 + 拉丁品牌名 + 数字）时按内容自身方向排版，避免标点跳到行首 */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] .qa-answer {
  unicode-bidi: plaintext;
}

/* ---------- ② 表单：输入框内容方向 ---------- */
/* 邮箱 / 电话 / 网址是纯拉丁内容，输入时若跟着 RTL 会很别扭；
   但**对齐**仍用右对齐，版面才统一。 */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
}
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* ---------- ③ 首页数据条：竖分隔线换到右边 ---------- */
html[dir="rtl"] .hero-stat {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
html[dir="rtl"] .hero-stat:first-child {
  border-right: none;
  padding-right: 0;
}

/* ---------- ④ 分类卡片右上角箭头：移到左上角，入场方向反向 ---------- */
html[dir="rtl"] .category-arrow {
  right: auto;
  left: 20px;
  transform: translateX(10px);
}
html[dir="rtl"] .category-card:hover .category-arrow {
  transform: translateX(0);
}
html[dir="rtl"] .category-arrow svg {
  transform: scaleX(-1);   /* 箭头指向改为「向左」＝RTL 的前进方向 */
}

/* ---------- ⑤ 左侧强调条（社会责任卡 / 问答卡）换到右边 ---------- */
html[dir="rtl"] .resp-card {
  border-left: none;
  border-right: 3px solid var(--orange);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
html[dir="rtl"] .qa-item {
  border-left: none;
  border-right: 3px solid var(--orange);
}

/* ---------- ⑥ 播放按钮图标间距 ---------- */
html[dir="rtl"] .audit-play svg {
  margin-left: 0;
  margin-right: 3px;
}

/* ---------- ⑦ 表单必填星号 ---------- */
html[dir="rtl"] .form-group label .required {
  margin-left: 0;
  margin-right: 2px;
}

/* ---------- ⑧ 顶栏右侧工具区 ---------- */
html[dir="rtl"] .top-bar-right {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

/* ---------- ⑨ 无缝滚动条：RTL 下滚动方向要反过来 ---------- */
html[dir="rtl"] .reception-scroll {
  animation-name: smScrollRight;
}
@keyframes smScrollRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ---------- ⑩ 后台表格表头对齐 ---------- */
html[dir="rtl"] .admin-table th {
  text-align: right;
}

/* ---------- ⑪ 面包屑 / 列表分隔符方向 ---------- */
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .breadcrumbs {
  direction: rtl;
}

/* ---------- ⑫ 语言切换器：阿拉伯语自身在 RTL 下不能被镜像成反向排列 ---------- */
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .language-switcher {
  direction: ltr;   /* 语言名本身是拉丁/本地文字混排，LTR 更稳 */
}

/* ---------- ⑬ 输入框清除按钮（WebKit 自带） ---------- */
html[dir="rtl"] input[type="search"]::-webkit-search-cancel-button {
  margin-right: 0;
  margin-left: 6px;
}