/* =========================================================
   KOTTURU SRI SUBRAMANYA SWAMY TEMPLE
   GLOBAL RESPONSIVE CSS
   File: global/responsive.css
   ========================================================= */


/* =========================================================
   01. LARGE DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --container-padding: 20px;
    }

    .header-container {
        gap: 16px;
    }

    .nav-link {
        padding-inline: 7px;
        font-size: 12px;
    }

    .brand-name {
        font-size: 15px;
    }

    .brand-location {
        font-size: 9px;
    }

    .header-actions {
        gap: 8px;
    }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --container-padding: 18px;
        --header-height: 78px;
    }

    .header-container {
        gap: 12px;
    }

    .temple-logo {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-location {
        display: none;
    }

    .nav-link {
        padding-inline: 5px;
        font-size: 11px;
    }

    .header-actions {
        gap: 7px;
    }

}


/* =========================================================
   03. TABLET PORTRAIT
   Navigation becomes mobile menu
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       Header
       ----------------------------------------- */

    .header-container {
        min-height: 72px;
    }


    /* -----------------------------------------
       Desktop Navigation
       ----------------------------------------- */

    .main-navigation {
        display: none;
    }


    /* -----------------------------------------
       Mobile Menu Button
       ----------------------------------------- */

    .mobile-menu-toggle {
        display: inline-flex;
    }


    /* -----------------------------------------
       Header Login
       Hide desktop login
       ----------------------------------------- */

    .desktop-login {
        display: none !important;
    }


    /* -----------------------------------------
       Mobile Navigation Panel
       ----------------------------------------- */

    .site-header.menu-open .main-navigation {

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        display: block;

        padding: 8px 18px 0;

        background: var(--color-white);

        border-top: 1px solid var(--color-border);

        box-shadow: var(--shadow-lg);

        max-height: calc(100vh - 72px);

        overflow-y: auto;
    }


    /* -----------------------------------------
       Navigation Lists
       ----------------------------------------- */

    .site-header.menu-open
    .main-navigation
    .nav-list {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;
    }


    .site-header.menu-open
    .main-navigation
    .nav-list.lang-te {

        display: none;
    }


    body.lang-te-active
    .site-header.menu-open
    .main-navigation
    .nav-list.lang-en {

        display: none;
    }


    body.lang-te-active
    .site-header.menu-open
    .main-navigation
    .nav-list.lang-te {

        display: flex;
    }


    /* -----------------------------------------
       Mobile Navigation Links
       ----------------------------------------- */

    .site-header.menu-open
    .main-navigation
    .nav-link {

        width: 100%;

        min-height: 48px;

        justify-content: flex-start;

        padding: 10px 14px;

        border-bottom: 1px solid var(--color-border);

        color: var(--color-text);

        font-size: 13px;
    }


    .site-header.menu-open
    .main-navigation
    .nav-link::after {

        display: none;
    }


    .site-header.menu-open
    .main-navigation
    .nav-link.active {

        color: var(--color-primary);

        background: var(--color-ivory);

        border-left: 3px solid var(--color-gold);
    }


    /* -----------------------------------------
       Mobile Login
       ----------------------------------------- */

    .site-header.menu-open
    .mobile-login-wrapper {

        position: absolute;

        top: calc(100% - 1px);

        left: 0;

        width: 100%;

        display: block;

        padding: 0 18px 12px;

        background: var(--color-white);

        border-top: 0;

        box-shadow: var(--shadow-lg);

        /*
         * This wrapper is positioned after the
         * navigation panel visually.
         */
    }


    /*
     * Keep login below the navigation.
     */

    .mobile-login-wrapper
    .mobile-login-link {

        display: flex;

        width: 100%;
    }


    .mobile-login-wrapper
    .mobile-login-link.lang-te {

        display: none;
    }


    body.lang-te-active
    .mobile-login-wrapper
    .mobile-login-link.lang-en {

        display: none;
    }


    body.lang-te-active
    .mobile-login-wrapper
    .mobile-login-link.lang-te {

        display: flex;
    }

}


/* =========================================================
   04. MOBILE LANDSCAPE / LARGE MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
    }

    .header-container {
        min-height: 70px;
    }

    .temple-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .temple-brand {
        gap: 9px;
    }

    .brand-title {
        font-size: 9px;
    }

    .brand-name {
        font-size: 13px;
    }

    .brand-te .brand-title {
        font-size: 10px;
    }

    .brand-te .brand-name {
        font-size: 13px;
    }

    /* Language remains visible */

    .language-switcher {
        padding: 3px 6px;
    }

    .language-btn {
        padding: 3px 5px;
        font-size: 10px;
    }

    /* Login is already hidden from header */

    .desktop-login {
        display: none !important;
    }

    /* Menu */

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }

    /* Sections */

    .section {
        padding: 65px 0;
    }

    .section-heading {
        margin-bottom: 36px;
    }

}


/* =========================================================
   05. STANDARD MOBILE
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --container-padding: 14px;
    }

    .header-container {
        min-height: 66px;
        gap: 7px;
    }

    .temple-logo {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .temple-brand {
        gap: 7px;
    }

    .brand-title {
        font-size: 8px;
    }

    .brand-name {
        font-size: 11px;
        line-height: 1.35;
    }

    .brand-te .brand-name {
        font-size: 11px;
        line-height: 1.5;
    }

    /* Language always visible */

    .language-switcher {
        padding: 2px 4px;

        border-radius: var(--radius-pill);
    }

    .language-btn {
        padding: 3px 4px;
        font-size: 9px;
    }

    .language-divider {
        font-size: 9px;
    }

    /* Mobile menu */

    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }

    .menu-line {
        width: 18px;
    }

    /* Demo notice */

    .demo-notice {
        min-height: 26px;

        padding: 4px 10px;

        font-size: 8px;
    }

    /* Sections */

    .section {
        padding: 55px 0;
    }

    .section-title {
        font-size: 27px;
    }

    .section-description {
        font-size: 13px;
    }

    /* Buttons */

    .btn {
        min-height: 44px;

        padding: 9px 16px;

        font-size: 13px;
    }

}


/* =========================================================
   06. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .header-container {
        min-height: 64px;
    }

    .temple-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    /*
     * Hide the small English subtitle only.
     * Temple name remains visible.
     */

    .brand-title {
        display: none;
    }

    .brand-name {
        font-size: 10px;
    }

    .brand-te .brand-name {
        font-size: 10px;
    }

    .language-btn {
        padding-inline: 3px;
        font-size: 8px;
    }

    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
    }

    .mobile-login-link {
        min-height: 46px;

        padding: 9px 14px;

        font-size: 12px;
    }

    .section {
        padding: 48px 0;
    }

    .section-title {
        font-size: 24px;
    }

}


/* =========================================================
   07. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .header-container {
        gap: 4px;
    }

    .temple-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-name {
        font-size: 9px;
    }

    .brand-te .brand-name {
        font-size: 9px;
    }

    .language-btn {
        padding-inline: 2px;
        font-size: 8px;
    }

    .mobile-menu-toggle {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   08. MOBILE LANDSCAPE
   ========================================================= */

@media (
    max-height: 500px
) and (
    orientation: landscape
) {

    .header-container {
        min-height: 60px;
    }

    .temple-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .site-header.menu-open
    .main-navigation {

        max-height: calc(100vh - 60px);

        overflow-y: auto;
    }

}


/* =========================================================
   09. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}


/* =========================================================
   END OF GLOBAL RESPONSIVE CSS
   ========================================================= */