/* Tiếng Việt (vi) overrides.
 *
 * Loaded by header.php only when the page is in this language, so no other visitor
 * downloads it. Everything is scoped to html[lang="vi"] and cannot leak.
 *
 * Vietnamese. Latin letters carry stacked diacritics (ế ở ữ), served by the vietnamese
 * subset of Inter.
 * Measured against the English: the median string is 106% of the English length.
 */

/* Longer labels wrap inside their box instead of widening it. */
html[lang="vi"] :is(.nav-link, .btn, .pot-lang-name, .accordion-title, td, th, li,
        h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

/* Stacked diacritics need vertical room; the theme's tight Latin line heights and negative
   headline tracking clip and crowd them. */
/* Small headings set with a size utility (an h3 at fs-20) keep the theme's 50px line: it is what
   spaces them. main.js tightens them only when they wrap. */
html[lang="vi"] :is(h1, h2, h3, h4, h5, h6):not(.fs-12, .fs-13, .fs-14, .fs-15, .fs-16, .fs-17, .fs-18, .fs-19, .fs-20, .fs-22, .fs-24, .fs-26, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6) { line-height: 1.35; }
html[lang="vi"] :is(h1, h2, .ls-minus-1px, .ls-minus-2px) { letter-spacing: 0; }
html[lang="vi"] :is(body, p, li) { line-height: 1.75; }

/* Buttons whose English label is one word and whose translation is two or three. */
html[lang="vi"] :is(.btn.btn-switch-text.btn-small, .btn.btn-switch-text.btn-very-small, .btn.btn-medium) > span {
    white-space: normal;
    line-height: 1.3;
}

/* The main nav carries the longest labels on the page; give it room on the widths where
   it is tightest, before it wraps to a second row. */
@media (min-width: 992px) and (max-width: 1399px) {
    html[lang="vi"] .navbar .navbar-nav .nav-link {
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Plan cards keep each feature on one line; translated feature names need a second
   line rather than an ellipsis. */
html[lang="vi"] :is(#vps-features-list li, .pot-plan-feature) {
    white-space: normal;
    line-height: 1.5;
}
