/* ===============================================
   SOS PERMESSO - CJK Typography Infrastructure
   For Chinese, Japanese, and Korean languages
   ===============================================

   Purpose: Provide proper CJK typography support with:
   - System font stacks for optimal rendering without web font downloads
   - Adjusted line-height for comfortable reading of dense characters
   - Italic overrides (CJK languages don't use slanted text)
   - Word-break rules for character-level text wrapping
   - Text-emphasis marks as culturally appropriate alternatives to italics

   Usage: Add lang attribute to HTML element
   - Chinese (Simplified): lang="zh" or lang="zh-CN"
   - Chinese (Traditional): lang="zh-TW" or lang="zh-HK"
   - Japanese: lang="ja"
   - Korean: lang="ko"

   Related: Phase 34 CJK Infrastructure
   =============================================== */

/* ===============================================
   CHINESE FONT STACKS
   =============================================== */

/* Chinese (Simplified) - Mainland China
   PingFang SC: macOS system font (modern, clean)
   Microsoft YaHei: Windows system font (excellent readability)
   Noto Sans SC: Android/Linux fallback
   Hiragino Sans GB: Older macOS fallback */
[lang="zh"],
[lang="zh-CN"] {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  line-height: 1.8; /* Extra space for dense CJK characters */
  letter-spacing: normal !important; /* NEVER add letter-spacing to CJK text */
}

/* Chinese (Traditional) - Taiwan, Hong Kong
   PingFang TC: macOS system font (Traditional character set)
   Microsoft JhengHei: Windows system font (Traditional)
   Noto Sans TC: Android/Linux fallback
   Hiragino Sans CNS: Older macOS fallback */
[lang="zh-TW"],
[lang="zh-HK"] {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Hiragino Sans CNS", sans-serif;
  line-height: 1.8;
  letter-spacing: normal !important;
}

/* ===============================================
   JAPANESE FONT STACK
   =============================================== */

/* Japanese
   Hiragino Sans: macOS modern font (clean sans-serif)
   Hiragino Kaku Gothic ProN: Older macOS (includes proportional Latin)
   Yu Gothic: Windows 8.1+ system font
   Noto Sans JP: Android/Linux fallback
   Meiryo: Older Windows fallback */
[lang="ja"] {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  line-height: 1.8;
  letter-spacing: normal !important;
}

/* ===============================================
   KOREAN FONT STACK
   =============================================== */

/* Korean
   Noto Sans KR: Universal modern font (excellent coverage)
   Nanum Gothic: Popular web font, good fallback
   Malgun Gothic: Windows system font
   Apple SD Gothic Neo: macOS system font */
[lang="ko"] {
  font-family: "Noto Sans KR", "Nanum Gothic", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.7; /* Korean can be slightly tighter than Chinese/Japanese */
  letter-spacing: normal !important;
}

/* ===============================================
   HEADING LINE-HEIGHT ADJUSTMENTS
   =============================================== */

/* CJK headings need more vertical space than Latin headings
   Latin headings: typically line-height 1.2-1.3
   CJK headings: need 1.5 for comfortable reading */
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh"] h4,
[lang="zh-CN"] h1, [lang="zh-CN"] h2, [lang="zh-CN"] h3, [lang="zh-CN"] h4,
[lang="zh-TW"] h1, [lang="zh-TW"] h2, [lang="zh-TW"] h3, [lang="zh-TW"] h4,
[lang="zh-HK"] h1, [lang="zh-HK"] h2, [lang="zh-HK"] h3, [lang="zh-HK"] h4,
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, [lang="ja"] h4,
[lang="ko"] h1, [lang="ko"] h2, [lang="ko"] h3, [lang="ko"] h4 {
  line-height: 1.5;
}

/* Large display text (hero titles) can be slightly tighter
   Still more generous than Latin (1.2-1.3) due to character density */
[lang="zh"] .hero-title,
[lang="zh-CN"] .hero-title,
[lang="zh-TW"] .hero-title,
[lang="zh-HK"] .hero-title,
[lang="ja"] .hero-title,
[lang="ko"] .hero-title {
  line-height: 1.4;
}

/* ===============================================
   ITALIC OVERRIDES
   ===============================================

   CJK languages don't use italic/slanted text.
   Italics make CJK characters appear distorted and unreadable.
   Override all italic styles to normal for CJK languages.
   =============================================== */

/* Global italic override - catches all cases
   Use !important to ensure this wins over component styles */
[lang="zh"] *,
[lang="zh-CN"] *,
[lang="zh-TW"] *,
[lang="zh-HK"] *,
[lang="ja"] *,
[lang="ko"] * {
  font-style: normal !important;
}

/* Specific overrides for known italic selectors in codebase
   - .hero-tagline (components.css:1117)
   - .disputed-note (document-page.css:152)
   - em, i semantic elements */
[lang="zh"] em,
[lang="zh"] i,
[lang="zh"] .hero-tagline,
[lang="zh"] .disputed-note,
[lang="zh-CN"] em,
[lang="zh-CN"] i,
[lang="zh-CN"] .hero-tagline,
[lang="zh-CN"] .disputed-note,
[lang="zh-TW"] em,
[lang="zh-TW"] i,
[lang="zh-TW"] .hero-tagline,
[lang="zh-TW"] .disputed-note,
[lang="zh-HK"] em,
[lang="zh-HK"] i,
[lang="zh-HK"] .hero-tagline,
[lang="zh-HK"] .disputed-note,
[lang="ja"] em,
[lang="ja"] i,
[lang="ja"] .hero-tagline,
[lang="ja"] .disputed-note,
[lang="ko"] em,
[lang="ko"] i,
[lang="ko"] .hero-tagline,
[lang="ko"] .disputed-note {
  font-style: normal !important;
}

/* ===============================================
   TEXT-EMPHASIS MARKS (Optional Enhancement)
   ===============================================

   Instead of italics, CJK languages use:
   - Japanese: Dots above text (sesame marks)
   - Chinese: Dots below text (emphasis dots)
   - Korean: Bold text (no traditional emphasis marks)

   Note: This is progressive enhancement.
   Older browsers will just show normal text (which is correct).
   =============================================== */

/* Japanese emphasis - dots above (over right)
   Position: above in horizontal text, right side in vertical text */
em:lang(ja),
[lang="ja"] .hero-tagline {
  font-style: normal;
  text-emphasis: dot;
  text-emphasis-position: over right;
  text-emphasis-color: currentColor; /* Match text color */
}

/* Chinese emphasis - dots below (under right)
   Sesame: Traditional filled sesame seed shape
   Position: below in horizontal text, right side in vertical text */
em:lang(zh),
em:lang(zh-CN),
em:lang(zh-TW),
em:lang(zh-HK),
[lang="zh"] .hero-tagline,
[lang="zh-CN"] .hero-tagline,
[lang="zh-TW"] .hero-tagline,
[lang="zh-HK"] .hero-tagline {
  font-style: normal;
  text-emphasis: sesame;
  text-emphasis-position: under right;
  text-emphasis-color: currentColor;
}

/* Korean emphasis - bold instead of dots
   Korean doesn't traditionally use emphasis marks */
em:lang(ko),
[lang="ko"] .hero-tagline {
  font-style: normal;
  font-weight: 700;
}

/* ===============================================
   WORD-BREAK RULES
   ===============================================

   Chinese and Japanese: No spaces between words
   - Browser default already breaks at any character
   - word-break: normal allows this natural breaking
   - overflow-wrap: break-word provides safety for URLs

   Korean: Uses spaces between words (like English)
   - Same word-break rules as Latin text
   =============================================== */

/* Chinese and Japanese - character-level breaking */
[lang="zh"],
[lang="zh-CN"],
[lang="zh-TW"],
[lang="zh-HK"],
[lang="ja"] {
  word-break: normal; /* Browser default breaks at characters for CJK */
  overflow-wrap: break-word; /* Safety for URLs and long strings */
}

/* Korean - word-based breaking with spaces */
[lang="ko"] {
  word-break: normal; /* Standard word boundaries */
  overflow-wrap: break-word; /* Safety for URLs */
}

/* Override existing word-break: keep-all rules for CJK
   The codebase has .card h2 with keep-all to prevent title breaks in Latin text
   But Chinese/Japanese NEED to break at characters to avoid overflow */
[lang="zh"] .card h2,
[lang="zh-CN"] .card h2,
[lang="zh-TW"] .card h2,
[lang="zh-HK"] .card h2,
[lang="ja"] .card h2 {
  word-break: normal !important; /* Allow character-level breaking */
}

/* ===============================================
   UTILITY CLASSES
   =============================================== */

/* Force CJK typography on specific elements regardless of lang attribute
   Use sparingly - language-based selectors are preferred */
.cjk-text {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Noto Sans SC", sans-serif;
  line-height: 1.8;
  letter-spacing: normal !important;
  font-style: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
}