/*
============================================================
SREE JK DEVELOPERS — GLOBAL LANGUAGE CSS
File: global/language.css
============================================================
*/


/* ============================================================
   LANGUAGE TYPOGRAPHY
   ============================================================ */

[data-lang="en"] {

    font-family:
        var(--font-primary, "Inter", sans-serif);

}


[data-lang="te"] {

    font-family:
        var(--font-telugu, "Noto Sans Telugu", sans-serif);

    line-height: 1.75;

}


html.lang-te,
html.lang-te body {

    font-family:
        var(--font-telugu, "Noto Sans Telugu", sans-serif);

}


html.lang-te h1,
html.lang-te h2,
html.lang-te h3,
html.lang-te h4,
html.lang-te h5,
html.lang-te h6 {

    font-family:
        var(--font-telugu, "Noto Sans Telugu", sans-serif);

    line-height: 1.35;

}


html.lang-te p {

    line-height: 1.85;

}


html.lang-te button,
html.lang-te input,
html.lang-te textarea,
html.lang-te select {

    font-family:
        var(--font-telugu, "Noto Sans Telugu", sans-serif);

}


/* ============================================================
   GLOBAL LANGUAGE SWITCHER
   ============================================================ */

.language-switcher {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px;

    background:
        var(--color-background-soft, #F7F9FC);

    border:
        1px solid
        var(--color-border, #E2E8F0);

    border-radius: 999px;

}


.language-switcher button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    min-height: 34px;

    padding: 6px 12px;

    border: 0;

    border-radius: 999px;

    background: transparent;

    color:
        var(--color-text-secondary, #475569);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease;

}


.language-switcher button:hover {

    color:
        var(--color-primary, #0B1F3A);

}


.language-switcher button.active,
.language-switcher button.is-active,
.language-switcher button[aria-pressed="true"] {

    background:
        var(--color-primary, #0B1F3A);

    color:
        #FFFFFF;

}


/* ============================================================
   HEADER LANGUAGE BUTTONS
   ============================================================ */

[data-language-switch] {

    cursor: pointer;

}


[data-language-switch].is-active,
[data-language-switch].active {

    font-weight: 800;

}


/* ============================================================
   LANGUAGE TRANSITION
   ============================================================ */

.language-content {

    transition:
        opacity 180ms ease;

}


.language-switching
.language-content {

    opacity: 0.65;

}


/* ============================================================
   TELUGU SPACING
   ============================================================ */

html.lang-te .section-label {

    letter-spacing: normal;

    text-transform: none;

}


html.lang-te .btn {

    line-height: 1.4;

}


html.lang-te .form-label {

    line-height: 1.6;

}


/* ============================================================
   MIXED ENGLISH BRAND / PROJECT NAMES
   ============================================================ */

.brand-text,
.project-name,
.english-text {

    font-family:
        var(--font-primary, "Inter", sans-serif);

}


/* ============================================================
   DIRECTION
   ============================================================ */

html[lang="en"],
html[lang="te"] {

    direction: ltr;

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.language-switcher button:focus-visible,
[data-language-switch]:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(21, 89, 166, 0.20);

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .language-switcher {

        gap: 2px;

        padding: 3px;

    }


    .language-switcher button {

        min-width: 40px;

        min-height: 32px;

        padding: 5px 9px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .language-content,
    .language-switcher button,
    [data-language-switch] {

        transition: none;

    }

}