/*
 * i18n.css — International pages CSS overrides
 *
 * Loaded by all non-Japanese pages.
 * Handles:
 *   - Font stacks for non-Latin scripts
 *   - RTL support (Arabic, Urdu)
 *   - CTA suppression for .no-cta pages
 *   - Language selector styles
 */

/* ==========================================================================
   1. CTA SUPPRESSION — Non-Japan pages never show CTAs
   ========================================================================== */
.no-cta .floating-cta-bar,
.no-cta .sticky-cta-btn,
.no-cta .category-hook-cta,
.no-cta [data-cta-block],
.no-cta .cta-section {
  display: none !important;
}
.no-cta body {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   2. INTERNATIONAL FONT STACKS
   ========================================================================== */

/* Override Japanese hand-drawn fonts with clean international fonts */
html:not([lang="ja"]) {
  --font-hand: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-accent: 'Caveat', cursive;
}

/* Devanagari (Hindi, Marathi) */
html[lang="hi"], html[lang="mr"] {
  --font-body: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
}

/* Bengali */
html[lang="bn"] {
  --font-body: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;
}

/* Telugu */
html[lang="te"] {
  --font-body: 'Noto Sans Telugu', 'Inter', system-ui, sans-serif;
}

/* Tamil */
html[lang="ta"] {
  --font-body: 'Noto Sans Tamil', 'Inter', system-ui, sans-serif;
}

/* Gujarati */
html[lang="gu"] {
  --font-body: 'Noto Sans Gujarati', 'Inter', system-ui, sans-serif;
}

/* Kannada */
html[lang="kn"] {
  --font-body: 'Noto Sans Kannada', 'Inter', system-ui, sans-serif;
}

/* Korean */
html[lang="ko"] {
  --font-body: 'Noto Sans KR', 'Inter', system-ui, sans-serif;
}

/* Chinese */
html[lang="zh"] {
  --font-body: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
}

/* Thai */
html[lang="th"] {
  --font-body: 'Noto Sans Thai', 'Inter', system-ui, sans-serif;
}

/* Myanmar */
html[lang="my"] {
  --font-body: 'Noto Sans Myanmar', 'Inter', system-ui, sans-serif;
}

/* Khmer */
html[lang="km"] {
  --font-body: 'Noto Sans Khmer', 'Inter', system-ui, sans-serif;
}

/* Lao */
html[lang="lo"] {
  --font-body: 'Noto Sans Lao', 'Inter', system-ui, sans-serif;
}

/* Amharic (Ethiopic) */
html[lang="am"] {
  --font-body: 'Noto Sans Ethiopic', 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   3. RTL SUPPORT — Arabic, Urdu
   ========================================================================== */

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

/* Urdu needs Nastaliq */
html[lang="ur"] {
  --font-body: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', system-ui, sans-serif;
}

/* Arabic */
html[lang="ar"] {
  --font-body: 'Noto Sans Arabic', system-ui, sans-serif;
}

html[dir="rtl"] .header-inner {
  flex-direction: row-reverse;
}

html[dir="rtl"] .header-nav {
  flex-direction: row-reverse;
}

html[dir="rtl"] .column-toc ol {
  padding-right: 20px;
  padding-left: 0;
}

html[dir="rtl"] .column-author {
  flex-direction: row-reverse;
}

/* ==========================================================================
   4. LANGUAGE SELECTOR (Root landing page)
   ========================================================================== */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}

.country-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--ink, #1a1a1a);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-size: 0.95rem;
}

.country-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.country-card .flag {
  font-size: 1.6rem;
  line-height: 1;
}

.country-card .name {
  font-weight: 500;
}

.country-card .lang-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-muted, #666);
  background: var(--gray-50, #f5f5f5);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Multi-language country sub-selector */
.lang-sub-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lang-sub-list a {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--green-light, #e8f5e9);
  color: var(--green-deep, #2d7a3e);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s;
}

.lang-sub-list a:hover {
  background: var(--green, #4a9e5c);
  color: white;
}

/* Group headers on selector page */
.country-group-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-light, #333);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--green-light, #e8f5e9);
}

/* ==========================================================================
   5. OVERRIDE JAPANESE UI LABELS
   ========================================================================== */

/* 結論ボックスの「結論」ラベルを英語に */
html:not([lang="ja"]) .column-conclusion::before {
  content: "Key Point";
}
html[lang="hi"] .column-conclusion::before,
html[lang="mr"] .column-conclusion::before { content: "निष्कर्ष"; }
html[lang="bn"] .column-conclusion::before { content: "সিদ্ধান্ত"; }
html[lang="te"] .column-conclusion::before { content: "నిర్ణయం"; }
html[lang="ta"] .column-conclusion::before { content: "முடிவு"; }
html[lang="gu"] .column-conclusion::before { content: "નિષ્કર્ષ"; }
html[lang="ur"] .column-conclusion::before { content: "نتیجہ"; }
html[lang="kn"] .column-conclusion::before { content: "ತೀರ್ಮಾನ"; }
html[lang="ko"] .column-conclusion::before { content: "결론"; }
html[lang="zh"] .column-conclusion::before { content: "结论"; }
html[lang="de"] .column-conclusion::before { content: "Fazit"; }
html[lang="fr"] .column-conclusion::before { content: "Conclusion"; }
html[lang="es"] .column-conclusion::before { content: "Conclusión"; }
html[lang="pt"] .column-conclusion::before { content: "Conclusão"; }
html[lang="it"] .column-conclusion::before { content: "Conclusione"; }
html[lang="ru"] .column-conclusion::before { content: "Вывод"; }
html[lang="ar"] .column-conclusion::before { content: "الخلاصة"; }
html[lang="tr"] .column-conclusion::before { content: "Sonuç"; }
html[lang="th"] .column-conclusion::before { content: "สรุป"; }
html[lang="vi"] .column-conclusion::before { content: "Kết luận"; }
html[lang="id"] .column-conclusion::before { content: "Kesimpulan"; }

/* ==========================================================================
   6. INTERNATIONAL PAGE ADJUSTMENTS
   ========================================================================== */

/* Slightly larger line-height for complex scripts */
html[lang="hi"] .column-body,
html[lang="bn"] .column-body,
html[lang="mr"] .column-body,
html[lang="te"] .column-body,
html[lang="ta"] .column-body,
html[lang="gu"] .column-body,
html[lang="kn"] .column-body,
html[lang="th"] .column-body,
html[lang="my"] .column-body,
html[lang="km"] .column-body,
html[lang="lo"] .column-body,
html[lang="am"] .column-body {
  line-height: 2.0;
}