/* 
 * i18n-custom.css 
 * Language-specific CSS adjustments to prevent layout breaks.
 * Loaded globally via i18n.css import or directly in HTML.
 */

/* Arabic RTL layout fixes — scoped to html[lang="ar"] only */
@import url("ar-rtl-fixes.css");

/* ========================================================
   JAPANESE (JA) & CHINESE (ZH) - CJK Fonts & Spacing
   ======================================================== */
html[lang="ja"] body,
html[lang="zh"] body {
    font-family: "Noto Sans JP", "Noto Sans SC", "Hiragino Sans", "Meiryo", "Microsoft YaHei", sans-serif;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Fix navbar overlap for JA/ZH */
html[lang="ja"] .header-navigation ul li a,
html[lang="zh"] .header-navigation ul li a,
html[lang="ja"] .main-menu ul li a,
html[lang="zh"] .main-menu ul li a {
    font-size: 15px; /* Slightly smaller to fit long translations */
    letter-spacing: 0;
    padding: 10px 12px; /* Reduce horizontal padding */
    white-space: nowrap; /* Prevent wrapping in navbar */
}

/* Ensure proper spacing between text and dropdown icons */
html[lang="ja"] .header-navigation ul li a i,
html[lang="zh"] .header-navigation ul li a i,
html[lang="ja"] .main-menu ul li a i,
html[lang="zh"] .main-menu ul li a i {
    margin-left: 6px;
}

/* ========================================================
   GERMAN (DE) & RUSSIAN (RU) - Long Word Handling
   ======================================================== */
html[lang="de"] .header-navigation ul li a,
html[lang="ru"] .header-navigation ul li a,
html[lang="de"] .main-menu ul li a,
html[lang="ru"] .main-menu ul li a {
    font-size: 14px; /* DE/RU words are long */
    letter-spacing: -0.2px;
    padding: 10px 10px;
    white-space: nowrap;
}

/* ========================================================
   FRENCH (FR) & SPANISH (ES) - Romance Languages
   ======================================================== */
html[lang="fr"] .header-navigation ul li a,
html[lang="es"] .header-navigation ul li a,
html[lang="fr"] .main-menu ul li a,
html[lang="es"] .main-menu ul li a {
    font-size: 15px;
    padding: 10px 12px;
    white-space: nowrap;
}

/* ========================================================
   ARABIC (AR) - RTL & Typography
   ======================================================== */
html[lang="ar"] body {
    font-family: "Cairo", "Tajawal", "Almarai", Arial, sans-serif;
}

/* Flip margins for dropdown arrows in RTL */
html[lang="ar"] .header-navigation ul li a i,
html[lang="ar"] .main-menu ul li a i {
    margin-right: 6px;
    margin-left: 0;
}

/* Adjust dropdown alignment */
html[lang="ar"] .header-navigation ul li ul,
html[lang="ar"] .main-menu ul li ul {
    text-align: right;
    left: auto;
    right: 0;
}

/* ========================================================
   HINDI (HI) - Devanagari Typography
   ======================================================== */
html[lang="hi"] body {
    font-family: "Mukta", "Hind", "Noto Sans Devanagari", sans-serif;
}
html[lang="hi"] .header-navigation ul li a,
html[lang="hi"] .main-menu ul li a {
    font-size: 16px; /* Hindi text often needs to be slightly larger */
    white-space: nowrap;
    padding: 10px 12px;
}

/* ========================================================
   GENERAL FIXES FOR ALL LANGUAGES
   ======================================================== */
/* Prevent dropdown menus from causing horizontal scroll */
.header-navigation ul li ul,
.main-menu ul li ul {
    min-width: 220px; /* Ensure dropdowns have enough width for long words */
}

/* Make sure text doesn't overlap icons in buttons globally */
.orbit-btn, .btn, .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Safe spacing between text and icons */
}