/* =========================================================
   KOTTURU SRI SUBRAMANYA SWAMY TEMPLE
   LANGUAGE CSS
   File: global/language.css
   ========================================================= */


/* =========================================================
   01. DEFAULT LANGUAGE
   English is default
   ========================================================= */

.lang-en {
    display: block;
}

.lang-te {
    display: none;
}


/* =========================================================
   02. TELUGU MODE
   ========================================================= */

body.lang-te-active .lang-en {
    display: none !important;
}

body.lang-te-active .lang-te {
    display: block;
}


/* =========================================================
   03. INLINE LANGUAGE ELEMENTS
   ========================================================= */

span.lang-en,
a.lang-en,
button.lang-en {
    display: inline;
}

span.lang-te,
a.lang-te,
button.lang-te {
    display: none;
}

body.lang-te-active span.lang-en,
body.lang-te-active a.lang-en,
body.lang-te-active button.lang-en {
    display: none !important;
}

body.lang-te-active span.lang-te,
body.lang-te-active a.lang-te,
body.lang-te-active button.lang-te {
    display: inline !important;
}


/* =========================================================
   04. FLEX LANGUAGE ELEMENTS
   ========================================================= */

div.lang-en,
nav.lang-en,
ul.lang-en {
    display: block;
}

div.lang-te,
nav.lang-te,
ul.lang-te {
    display: none;
}

body.lang-te-active div.lang-en,
body.lang-te-active nav.lang-en,
body.lang-te-active ul.lang-en {
    display: none !important;
}

body.lang-te-active div.lang-te,
body.lang-te-active nav.lang-te,
body.lang-te-active ul.lang-te {
    display: block;
}


/* =========================================================
   05. FLEX NAVIGATION
   ========================================================= */

ul.nav-list.lang-en {
    display: flex;
}

ul.nav-list.lang-te {
    display: none;
}

body.lang-te-active ul.nav-list.lang-en {
    display: none !important;
}

body.lang-te-active ul.nav-list.lang-te {
    display: flex;
}


/* =========================================================
   06. TELUGU TYPOGRAPHY
   ========================================================= */

.lang-te,
body.lang-te-active {
    font-family: var(--font-te);
}

.lang-te h1,
.lang-te h2,
.lang-te h3,
.lang-te h4,
.lang-te h5,
.lang-te h6,
.lang-te p,
.lang-te a,
.lang-te button,
.lang-te span,
.lang-te li {
    font-family: var(--font-te);
}


/* =========================================================
   07. TELUGU LINE HEIGHT
   ========================================================= */

.lang-te h1,
.lang-te h2,
.lang-te h3,
.lang-te h4,
.lang-te h5,
.lang-te h6 {
    line-height: 1.45;
}

.lang-te p,
.lang-te li {
    line-height: 1.85;
}


/* =========================================================
   08. TELUGU NAVIGATION
   ========================================================= */

body.lang-te-active .nav-link {
    font-family: var(--font-te);
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   09. TELUGU HEADER BRAND
   ========================================================= */

body.lang-te-active .brand-title {
    font-family: var(--font-te);
    letter-spacing: 0;
    text-transform: none;
}

body.lang-te-active .brand-name {
    font-family: var(--font-te);
    line-height: 1.5;
}

body.lang-te-active .brand-location {
    font-family: var(--font-te);
}


/* =========================================================
   10. TELUGU BUTTONS
   ========================================================= */

body.lang-te-active .btn {
    font-family: var(--font-te);
    line-height: 1.5;
}


/* =========================================================
   11. TELUGU FORM ELEMENTS
   ========================================================= */

body.lang-te-active input,
body.lang-te-active textarea,
body.lang-te-active select,
body.lang-te-active button {
    font-family: var(--font-te);
}


/* =========================================================
   12. LANGUAGE SWITCHER ACTIVE STATE
   ========================================================= */

.language-btn[data-language="en"].active {
    color: var(--primary);
    font-weight: 700;
}

.language-btn[data-language="te"].active {
    color: var(--primary);
    font-weight: 700;
}

body.lang-te-active
.language-btn[data-language="en"] {
    color: var(--text-secondary);
    font-weight: 500;
}

body.lang-te-active
.language-btn[data-language="te"] {
    color: var(--primary);
    font-weight: 700;
}


/* =========================================================
   13. TELUGU DEMO NOTICE
   ========================================================= */

body.lang-te-active .demo-notice {
    font-family: var(--font-te);
}


/* =========================================================
   14. LANGUAGE TRANSITION
   ========================================================= */

.language-content {
    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}


/* =========================================================
   15. RTL IS NOT USED
   Telugu remains LTR
   ========================================================= */

html[lang="te"] {
    direction: ltr;
}


/* =========================================================
   END OF LANGUAGE CSS
   ========================================================= */