/* =============================================================================
   Sunvale Refined — 多语言层（语言切换器 / RTL / 多语种字体）
   由 scripts/21-setup-multilingual.sh 部署；单独成文件便于回滚。
   ========================================================================== */

/* ---------- 1. 页头语言切换器：地球图标 + 当前语言码 + 下拉 ---------- */
.sv-lang{position:relative;display:inline-flex;align-items:center}
.sv-lang__btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:6px 4px;font-size:.875rem;font-weight:500;color:var(--sv-ink-600);
  cursor:pointer;border-radius:8px;transition:color .2s var(--sv-ease)}
.sv-lang__btn:hover{color:var(--sv-forest-700)}
.sv-lang__globe{flex:none;opacity:.75}
.sv-lang__code{font-family:var(--sv-font-mono);font-size:.8125rem;letter-spacing:.02em}
.sv-lang__caret{flex:none;opacity:.6;transition:transform .2s var(--sv-ease)}
.sv-lang.is-open .sv-lang__caret{transform:rotate(180deg)}

/* 下拉面板：10 种语言两列，比单列省一半高度 */
.sv-lang__menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:100000;
  min-width:250px;margin:0;padding:8px;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--sv-white);border:1px solid var(--sv-line);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(20,38,30,.35)}
.sv-lang__menu[hidden]{display:none}
.sv-lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border-radius:8px;font-size:.875rem;color:var(--sv-ink-900);
  white-space:nowrap;transition:background .15s var(--sv-ease)}
.sv-lang__menu a:hover{background:var(--sv-sand-200)}
.sv-lang__menu a[aria-current="true"]{background:var(--sv-sand-100);font-weight:600}
.sv-lang__menu a[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--sv-clay-500);flex:none;margin-inline-start:auto}
.sv-lang__tag{font-family:var(--sv-font-mono);font-size:.6875rem;color:var(--sv-ink-400);
  text-transform:uppercase;letter-spacing:.04em}
.sv-lang__menu a[aria-current="true"] .sv-lang__tag{color:var(--sv-clay-600)}

/* ---------- 2. 移动端抽屉里的语言列表 ---------- */
.sv-drawer__langs{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.sv-drawer__langs-label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sv-moss-300);margin-bottom:12px}
.sv-drawer__langs-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
/* 抽屉内语言项要覆盖 .sv-drawer a 的 1.5rem 大字号与下边框 */
.sv-drawer .sv-drawer__lang{font-family:var(--sv-font-body);font-size:.9375rem;
  padding:9px 0;border-bottom:0;color:rgba(255,255,255,.82)}
.sv-drawer .sv-drawer__lang:hover{color:var(--sv-white)}
.sv-drawer .sv-drawer__lang.is-current{color:var(--sv-white);font-weight:600}
.sv-drawer .sv-drawer__lang.is-current::before{content:"";display:inline-block;
  width:5px;height:5px;border-radius:50%;background:var(--sv-clay-500);
  margin-inline-end:7px;vertical-align:middle}

@media(max-width:520px){
  /* 手机上收起代码只留地球图标，给主 CTA 让位 */
  .sv-lang__code,.sv-lang__caret{display:none}
  .sv-lang__menu{min-width:min(78vw,260px);inset-inline-end:-8px}
}

/* ---------- 3. 多语种字体 fallback ----------
   拉丁字形走 Fraunces / Inter（本地 woff2）；
   日 / 韩 / 俄 / 阿拉伯语缺字时按下面的顺序回落到系统字体。
   项目里只自托管了拉丁子集：CJK 字体动辄数 MB，自托管会让首屏明显变慢，
   而这些字符用系统字体渲染质量已经足够（各平台都预装了对应字体）。
   注意顺序：阿拉伯语字体要排在前面，否则会被拉丁字体接走部分字符。 */
:lang(ar) body,
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4{
  font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,"Arial",sans-serif}
:lang(ja) body,
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) h4{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Meiryo",var(--sv-font-body)}
:lang(ko) body,
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(ko) h4{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",var(--sv-font-body)}
:lang(ru) body,:lang(ru) h1,:lang(ru) h2,:lang(ru) h3,:lang(ru) h4{
  font-family:var(--sv-font-body)} /* 西里尔字形 Inter 已覆盖 */
/* 标题字体在 CJK/阿拉伯语下不用衬线体：Fraunces 无这些字形，
   回落时会变成宋体/明朝体，与设计系统的无衬线观感冲突。 */
:lang(ja) .sv-eyebrow,:lang(ko) .sv-eyebrow,:lang(ar) .sv-eyebrow{letter-spacing:.08em}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{font-weight:700;letter-spacing:0}

/* ---------- 4. RTL（阿拉伯语）覆盖 ----------
   用逻辑属性 + 少量显式翻转。只覆盖确实需要翻转的地方，
   不做整体镜像 —— 整体镜像会把图标、徽标也翻过去，反而更怪。 */
[dir="rtl"] .sv-lang__menu{inset-inline-end:0;inset-inline-start:auto}
[dir="rtl"] .sv-lang__caret{transform:scaleX(-1)}
[dir="rtl"] .sv-lang.is-open .sv-lang__caret{transform:scaleX(-1) rotate(180deg)}

/* 箭头类图标翻转 */
[dir="rtl"] .sv-arrow,
[dir="rtl"] .sv-link-arrow,
[dir="rtl"] [data-sv-arrow]{transform:scaleX(-1)}

/* 文本对齐：默认左对齐的区块改右对齐 */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .sv-eyebrow,
[dir="rtl"] .sv-lead,
[dir="rtl"] p,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{text-align:right}

/* 列表项目符号与缩进 */
[dir="rtl"] ul,[dir="rtl"] ol{padding-inline-start:1.25rem;padding-inline-end:0}

/* 表单：输入框内容与占位文字右对齐 */
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{
  text-align:right;direction:rtl}
/* 邮箱、电话、数字编号保持 LTR —— 否则会显示成 "@a.com" 这种反序 */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] .sv-mono,
[dir="rtl"] .sv-lang__code,
[dir="rtl"] .sv-lang__tag{direction:ltr;text-align:right}

/* 规格表：dt/dd 的位置互换 */
[dir="rtl"] .sv-specrow-wrap .sv-specrow dd{text-align:left}

/* 面包屑与页脚的分隔符 */
[dir="rtl"] .sv-crumb > *{direction:rtl}

/* 卡片与网格里的图标盒 */
[dir="rtl"] .sv-feature__icon,
[dir="rtl"] .sv-cat-tile__icon{margin-inline-end:0;margin-inline-start:12px}