/* Shared locale fonts; reading sizes apply only to the grammar lesson.
 * Sizes use rem so browser font preferences and zoom remain effective.
 * Narrow !important boundaries override existing legacy locale/utility styles.
 */
:root {
    --locale-font-body: "Fira Sans", system-ui, -apple-system, sans-serif;
    --locale-font-heading: "Space Grotesk", "Fira Sans", system-ui, sans-serif;
    --locale-font-source: "Fira Sans", system-ui, -apple-system, sans-serif;
    --lesson-body-size: clamp(1.07143rem, 1rem + 0.2vw, 1.13096rem);
    --lesson-support-size: 1.07143rem;
    --lesson-label-size: 0.89286rem;
    --lesson-button-size: 1rem;
    --lesson-body-leading: 1.75;
    --lesson-heading-leading: 1.4;
    --lesson-letter-spacing: normal;
    --lesson-reading-width: 68ch;
}

html:lang(ar) {
    --locale-font-body: "IBM Plex Sans Arabic", Tahoma, sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-arabic: var(--locale-font-body);
    --lesson-body-size: clamp(1.07143rem, 1rem + 0.25vw, 1.19048rem);
    --lesson-body-leading: 1.85;
    --lesson-heading-leading: 1.5;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 62ch;
}

html:lang(fa) {
    --locale-font-body: "Vazirmatn", "Noto Sans Arabic", Tahoma, sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-persian: var(--locale-font-body);
    --lesson-body-size: clamp(1.07143rem, 1rem + 0.25vw, 1.19048rem);
    --lesson-body-leading: 1.85;
    --lesson-heading-leading: 1.5;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 62ch;
}

html:lang(hi) {
    --locale-font-body: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-devanagari: var(--locale-font-body);
    --lesson-body-size: clamp(1.07143rem, 1rem + 0.25vw, 1.19048rem);
    --lesson-body-leading: 1.85;
    --lesson-heading-leading: 1.5;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 62ch;
}

html:lang(ja) {
    --locale-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-japanese: var(--locale-font-body);
    --lesson-body-leading: 1.9;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 42em;
}

html:lang(ko) {
    --locale-font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-korean: var(--locale-font-body);
    --lesson-body-leading: 1.85;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 42em;
}

html:lang(zh) {
    --locale-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --locale-font-heading: var(--locale-font-body);
    --sl-font-chinese: var(--locale-font-body);
    --lesson-body-leading: 1.85;
    --lesson-letter-spacing: 0;
    --lesson-reading-width: 42em;
}

/* All shared layouts use the same script-aware stack. Latin display headings
 * retain the existing Space Grotesk style. Explicit English stays isolated.
 */
html[lang][dir] .sl-home {
    --home-font: var(--locale-font-body);
    --home-display: var(--locale-font-heading);
}

html[lang]:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) body,
html[lang]:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) :where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea, label, select, .font-sans) {
    font-family: var(--locale-font-body) !important;
}

html [data-grammar-editorial][lang][dir],
html [data-grammar-editorial][lang][dir] :where(p, a, span, li, button, input, textarea, label, select, summary, th, td, .font-sans) {
    font-family: var(--locale-font-body) !important;
}

html [data-grammar-editorial][lang][dir] :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--locale-font-heading) !important;
    letter-spacing: var(--lesson-letter-spacing) !important;
    line-height: var(--lesson-heading-leading) !important;
    font-weight: 700 !important;
}

html [data-grammar-editorial][lang][dir] :where(h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

html [data-grammar-editorial][lang][dir] :where([data-grammar-prose], [data-grammar-lead], .grammar-v3-hook, .grammar-v3-verdict-text, .grammar-v3-gate h2 + p) {
    max-inline-size: min(100%, var(--lesson-reading-width));
    font-size: var(--lesson-body-size) !important;
    line-height: var(--lesson-body-leading) !important;
    letter-spacing: var(--lesson-letter-spacing) !important;
    font-weight: 400 !important;
    text-align: start;
}

html [data-grammar-editorial][lang][dir] :where(.grammar-v3-translation, .grammar-v3-note, [data-lesson-example-translation], [data-lesson-example-note], .grammar-v3-prose-stack .leading-7, .grammar-v3-wrong-card p:not(.grammar-v3-wrong-label)) {
    font-size: var(--lesson-support-size) !important;
    line-height: var(--lesson-body-leading) !important;
    letter-spacing: var(--lesson-letter-spacing) !important;
    font-weight: 400 !important;
}

html [data-grammar-editorial][lang][dir] :where(.grammar-v3-eyebrow, .grammar-v3-verdict-label, .grammar-v3-wrong-label, .grammar-v3-gate-meta, .grammar-v3-member-start) {
    font-size: var(--lesson-label-size) !important;
    line-height: 1.65 !important;
    letter-spacing: var(--lesson-letter-spacing) !important;
}

html [data-grammar-editorial][lang][dir] :where(.grammar-v3-gate-actions a, .grammar-v3-checkpoint-options button, .grammar-v3-practice-options button) {
    font-size: var(--lesson-button-size) !important;
    font-weight: 700 !important;
}

html [data-grammar-editorial][lang][dir] .grammar-v3-path small {
    font-family: var(--locale-font-body) !important;
    font-size: var(--lesson-label-size) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: var(--lesson-letter-spacing) !important;
}

/* Descendants need their own boundary because legacy rules address spans and
 * strong elements directly. Direction comes from the semantic HTML attributes.
 */
html[lang]:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) [lang="en"],
html[lang]:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) [lang="en"] :where(:not([lang])),
html [data-grammar-editorial][lang][dir] [lang="en"],
html [data-grammar-editorial][lang][dir] [lang="en"] :where(:not([lang])) {
    font-family: var(--locale-font-source) !important;
}

html [data-grammar-editorial][lang][dir] [lang="en"] {
    letter-spacing: normal !important;
}

html [data-grammar-editorial][lang][dir] [lang="en"] :where(strong, b),
html [data-grammar-editorial][lang][dir] :where(strong, b)[lang="en"] {
    font-weight: 600 !important;
}

@media (max-width: 639px) {
    html [data-grammar-editorial][lang][dir] :where(.grammar-v3-section, .grammar-v3-checkpoint, .grammar-v3-gate, .grammar-v3-practice, .grammar-v3-related) h2 {
        font-size: 1.42857rem !important;
    }
}