/* ============================================================================
 * i18n.css — Language-aware typography layer
 * ----------------------------------------------------------------------------
 * The base design (mk-layout.css) is tuned for Latin display type: uppercase
 * eyebrows/nav/buttons with wide letter-spacing (0.18–0.32em). That idiom
 * overflows and reads awkwardly in Korean (Hangul) and Vietnamese (stacked
 * diacritics). This layer corrects ONLY ko/vi — English is left as-authored.
 *
 * Load AFTER mk-layout.css / customs.css. `!important` is intentional here:
 * this is an override layer that must beat component rules and media queries.
 * ========================================================================== */

/* ── 1. Script-level line-height & wrapping ───────────────────────────────── */
/* Korean: never break inside a word; wrap at spaces (keeps labels compact). */
html[lang="ko"] body { line-height: 1.72; word-break: keep-all; overflow-wrap: break-word; }
/* Vietnamese: diacritics stack tall — give text room so marks aren't clipped. */
html[lang="vi"] body { line-height: 1.7; overflow-wrap: break-word; }

html[lang="ko"] h1, html[lang="ko"] .h1,
html[lang="ko"] h2, html[lang="ko"] .h2,
html[lang="ko"] h3, html[lang="ko"] .h3 { line-height: 1.32; letter-spacing: -0.01em; }
html[lang="vi"] h1, html[lang="vi"] .h1,
html[lang="vi"] h2, html[lang="vi"] .h2,
html[lang="vi"] h3, html[lang="vi"] .h3 { line-height: 1.24; }

/* Big Cormorant display titles: add headroom so Vietnamese marks clear. */
html[lang="vi"] .mk-hero-title,
html[lang="vi"] .mk-page-title { line-height: 1.16; padding-top: 0.04em; }
html[lang="ko"] .mk-hero-title,
html[lang="ko"] .mk-page-title { line-height: 1.28; }

/* ── 2. Uppercase-eyebrow / label / nav tracking normalisation ────────────── */
/* One grouped selector list covers every wide-tracked label idiom in the app. */
html[lang="ko"] .mk-header-nav a,
html[lang="ko"] .mk-nav-group > button.mk-nav-trigger,
html[lang="ko"] h6, html[lang="ko"] .h6,
html[lang="ko"] [class*="eyebrow"],
html[lang="ko"] [class*="section-title"],
html[lang="ko"] [class*="stat-label"],
html[lang="ko"] .mk-data thead th,
html[lang="ko"] .mk-user .name,
html[lang="ko"] .mk-mall-badge-text small {
    letter-spacing: 0.02em !important;
    word-break: keep-all;
}
html[lang="vi"] .mk-header-nav a,
html[lang="vi"] .mk-nav-group > button.mk-nav-trigger,
html[lang="vi"] h6, html[lang="vi"] .h6,
html[lang="vi"] [class*="eyebrow"],
html[lang="vi"] [class*="section-title"],
html[lang="vi"] [class*="stat-label"],
html[lang="vi"] .mk-data thead th,
html[lang="vi"] .mk-user .name,
html[lang="vi"] .mk-mall-badge-text small {
    letter-spacing: 0.08em !important;
}

/* Buttons: dial tracking down so ko/vi labels fit the same padding as EN. */
html[lang="ko"] .btn, html[lang="ko"] .btn-lg, html[lang="ko"] .btn-sm { letter-spacing: 0.02em !important; }
html[lang="vi"] .btn, html[lang="vi"] .btn-lg, html[lang="vi"] .btn-sm { letter-spacing: 0.08em !important; }

/* Eyebrows may wrap to two short lines rather than overflow their container. */
html[lang="ko"] [class*="eyebrow"],
html[lang="vi"] [class*="eyebrow"] { white-space: normal; }

/* ── 3. Header nav: keep it on one row for the longer ko/vi labels ────────── */
/* Slightly tighter padding/gap buys the horizontal room they need at ≥992px. */
@media (min-width: 992px) {
    html[lang="ko"] .mk-header-nav a,
    html[lang="vi"] .mk-header-nav a,
    html[lang="ko"] .mk-nav-group > button.mk-nav-trigger,
    html[lang="vi"] .mk-nav-group > button.mk-nav-trigger { padding-left: 12px; padding-right: 12px; }
    html[lang="ko"] .mk-header-nav,
    html[lang="vi"] .mk-header-nav { gap: 2px; }
}

/* Vietnamese labels are the longest of the three languages; collapse the top
 * nav to the burger drawer a step earlier (≤1199px) so it can never bleed into
 * the logo or the right-hand cluster on smaller laptops. EN/KO keep 991px. */
@media (max-width: 1199px) {
    html[lang="vi"] .mk-header-nav { display: none; }
    html[lang="vi"] .mk-burger    { display: inline-flex; align-items: center; justify-content: center; }
    html[lang="vi"] .mk-lang-pill { display: none; }
    html[lang="vi"] .mk-lang-drop { display: inline-block; }
}

/* ── 4. Korean serif display: Noto Serif KR reads better than Cormorant       */
/*        fallback for pure-Hangul headings. Latin brand words still resolve   */
/*        to Cormorant first, so mixed "MISO 코리아" stays consistent.          */
html[lang="ko"] h1, html[lang="ko"] .h1,
html[lang="ko"] h2, html[lang="ko"] .h2,
html[lang="ko"] .mk-hero-title,
html[lang="ko"] .mk-page-title {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', var(--mk-font-ko), serif;
}