/* ============================================================================
 * 言語別フォント + RTL対応（Step 7 / 2026-08-26、2026-08-26 システムフォント化）
 *
 * tailwind.config.js の font-sans スタックはシステムフォントのみで構成されて
 * おり、簡体字中国語・韓国語ハングル・アラビア文字の字形をカバーしない。
 * html[lang] 属性（language_attributes() がWPMLの現在言語に応じて自動出力
 * する。header.php参照）を使い、該当言語のページだけ、その言語のOS標準
 * フォントへ font-family を上書きする（Webフォントは配信しない）。
 * ========================================================================= */

html[lang="zh-hans"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

html[lang="ko"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

html[lang="ar"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'Geeza Pro', Tahoma, 'Noto Sans Arabic', sans-serif;
}

/* ============================================================================
 * RTL対応（アラビア語）
 *
 * WordPress標準の language_attributes() が is_rtl() に基づき
 * <html dir="rtl"> を自動出力する（WPMLがアラビア語コンテキストで
 * is_rtl()=true を返すことを実機確認済み）。
 *
 * サイト全体をlogical propertiesへ全面置換するのは大規模改修になるため、
 * [dir="rtl"] スコープで「向きが逆転すると崩れる」代表的なTailwind
 * ユーティリティ（margin/padding/text-align/float/border/position の
 * 左右指定、フレックス方向）だけをピンポイントで反転させる。
 * 新規に左右固定のユーティリティを使う場合は、ここに対応を追加するか、
 * 最初から ms-* または me-*（logical properties）を使うこと。
 * ========================================================================= */

[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* margin */
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; }

/* padding */
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }

/* float */
[dir="rtl"] .float-left { float: right; }
[dir="rtl"] .float-right { float: left; }

/* flex direction（アイコン+テキストの横並び等、視覚順序の反転が必要な箇所） */
[dir="rtl"] .flex-row { flex-direction: row-reverse; }

/* 角丸（カード・ボタンの左右非対称な角丸） */
[dir="rtl"] .rounded-l-full { border-radius: 0; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
[dir="rtl"] .rounded-r-full { border-radius: 0; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
[dir="rtl"] .rounded-l-lg { border-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
[dir="rtl"] .rounded-r-lg { border-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
[dir="rtl"] .rounded-l-2xl { border-radius: 0; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
[dir="rtl"] .rounded-l-xl { border-radius: 0; border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }

/* border（左右のアクセント罫線） */
[dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; }
[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }

/* 固定配置（サイドバナー・フローティングUI。floating-stack.cssのゾーンは
   物理プロパティ（left/right）を使っているため、RTL時は左右反転する） */
[dir="rtl"] #side-banner {
    right: auto;
    left: 0;
}

[dir="rtl"] .aa-float-rail,
[dir="rtl"] .aa-float-anchor {
    right: auto;
    left: var(--aa-float-edge, 1rem);
}

[dir="rtl"] .aa-float-cards {
    left: auto;
    right: var(--aa-float-edge, 1rem);
}