/* =========================================================
   GLOBAL HEADER
   Rivers of Living Water Organization

   IMPORTANT:
   The header is completely isolated from page-specific CSS.
========================================================= */


/* =========================================================
   HEADER ROOT
========================================================= */

#site-header {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}


    /* =========================================================
   HEADER
========================================================= */

    #site-header .site-header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 70px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(226, 232, 240, 0.85);
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
        overflow: visible;
    }


    /* =========================================================
   NAVBAR
========================================================= */

    #site-header .navbar {
        width: 100%;
        max-width: 1280px;
        height: 70px;
        margin: 0 auto;
        padding: 0 2rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        overflow: hidden;
    }


    /* =========================================================
   LOGO
========================================================= */

    #site-header .logo-container {
        display: flex;
        align-items: center;
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        gap: 11px;
        text-decoration: none;
        flex-shrink: 0;
        min-width: 0;
        box-sizing: border-box;
    }


    /* =========================================================
   LOGO IMAGE WRAPPER
========================================================= */

    #site-header .logo-img-wrapper {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        max-width: 48px;
        max-height: 48px;
        flex: 0 0 48px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.20);
    }


        /* =========================================================
   LOGO IMAGE
========================================================= */

        #site-header .logo-img-wrapper img {
            display: block;
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            max-width: 100%;
            max-height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            object-fit: contain;
            box-sizing: border-box;
            transform: none;
            transition: none;
        }


    /* =========================================================
   LOGO TEXT
========================================================= */

    #site-header .logo-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        min-width: 0;
        box-sizing: border-box;
    }


    /* =========================================================
   LOGO TITLE
========================================================= */

    #site-header .logo-title {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        color: #0f172a;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        box-sizing: border-box;
    }


    /* =========================================================
   LOGO SUBTITLE
========================================================= */

    #site-header .logo-subtitle {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        color: #0284c7;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.4px;
        line-height: 1.3;
        white-space: nowrap;
        box-sizing: border-box;
    }


    /* =========================================================
   NAVIGATION
========================================================= */

    #site-header .nav-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        gap: 0.4rem;
        list-style: none;
        flex-shrink: 1;
        box-sizing: border-box;
    }


    /* =========================================================
   NAV LINK
========================================================= */

    #site-header .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        margin: 0;
        padding: 0 0.75rem;
        box-sizing: border-box;
        border: 0;
        border-radius: 10px;
        text-decoration: none;
        color: #475569;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        flex-shrink: 0;
        transform: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }


        /* =========================================================
   NAV LINK HOVER
========================================================= */

        #site-header .nav-link:hover {
            color: #0284c7;
            background: #e0f2fe;
            transform: none;
        }


        /* =========================================================
   ACTIVE NAV LINK
========================================================= */

        #site-header .nav-link.active {
            color: #0284c7;
            background: #e0f2fe;
            /*
       IMPORTANT:
       Active state MUST NOT change dimensions.
    */

            width: auto;
            height: 38px;
            min-height: 38px;
            max-height: 38px;
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
            border: 0;
            transform: none;
        }


    /* =========================================================
   LANGUAGE BUTTON
========================================================= */

    #site-header .lang-switch-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 92px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        margin: 0;
        padding: 0 0.85rem;
        box-sizing: border-box;
        flex-shrink: 0;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #ffffff;
        color: #0f172a;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
        transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }


        /* =========================================================
   LANGUAGE ICON
========================================================= */

        #site-header .lang-switch-btn i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            margin: 0;
            padding: 0;
            font-size: 0.9rem;
            line-height: 1;
            color: #0284c7;
            box-sizing: border-box;
        }


        /* =========================================================
   LANGUAGE BUTTON TEXT
========================================================= */

        #site-header .lang-switch-btn span {
            display: inline;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            line-height: 1;
            box-sizing: border-box;
        }


        /* =========================================================
   LANGUAGE HOVER
========================================================= */

        #site-header .lang-switch-btn:hover {
            border-color: #0284c7;
            color: #0284c7;
            background: #f8fdff;
            box-shadow: 0 5px 15px rgba(2, 132, 199, 0.15);
        }


        /* =========================================================
   LANGUAGE ACTIVE
========================================================= */

        #site-header .lang-switch-btn:active {
            transform: none;
        }


        /* =========================================================
   FOCUS
========================================================= */

        #site-header .lang-switch-btn:focus,
        #site-header .nav-link:focus,
        #site-header .logo-container:focus {
            outline: none;
        }


        #site-header .lang-switch-btn:focus-visible,
        #site-header .nav-link:focus-visible,
        #site-header .logo-container:focus-visible {
            outline: 3px solid rgba(2, 132, 199, 0.20);
            outline-offset: 2px;
        }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #site-header .site-header {
        height: 62px;
    }


    #site-header .navbar {
        height: 62px;
        padding: 0 1.1rem;
        gap: 0.75rem;
    }


    #site-header .logo-img-wrapper {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        max-width: 42px;
        max-height: 42px;
        flex-basis: 42px;
    }


    #site-header .logo-title {
        font-size: 0.95rem;
    }


    #site-header .logo-subtitle {
        font-size: 0.62rem;
    }


    #site-header .nav-menu {
        gap: 0.15rem;
    }


    #site-header .nav-link {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        padding: 0 0.5rem;
        font-size: 0.78rem;
    }


        #site-header .nav-link.active {
            height: 36px;
            min-height: 36px;
            max-height: 36px;
        }


    #site-header .lang-switch-btn {
        min-width: 82px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        padding: 0 0.65rem;
        font-size: 0.75rem;
    }
}


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

@media (max-width: 600px) {

    #site-header .site-header {
        height: 52px;
        position: sticky;
        top: 0;
    }


    #site-header .navbar {
        width: 100%;
        height: 52px;
        padding: 0 0.65rem;
        gap: 0.45rem;
        overflow: hidden;
    }


    /* -------------------------
       LOGO
    ------------------------- */

    #site-header .logo-container {
        height: 52px;
        gap: 7px;
    }


    #site-header .logo-img-wrapper {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        flex-basis: 36px;
    }


    #site-header .logo-title {
        font-size: 0.75rem;
        line-height: 1.1;
    }


    #site-header .logo-subtitle {
        font-size: 0.52rem;
        line-height: 1.2;
    }


    /* -------------------------
       NAVIGATION
    ------------------------- */

    #site-header .nav-menu {
        flex: 1;
        min-width: 0;
        height: 52px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.12rem;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }


        #site-header .nav-menu::-webkit-scrollbar {
            display: none;
        }


    #site-header .nav-link {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 0 0.42rem;
        border-radius: 8px;
        font-size: 0.67rem;
    }


        #site-header .nav-link.active {
            height: 34px;
            min-height: 34px;
            max-height: 34px;
            padding-top: 0;
            padding-bottom: 0;
        }


    /* -------------------------
       LANGUAGE
    ------------------------- */

    #site-header .lang-switch-btn {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        padding: 0;
        border-radius: 50%;
        gap: 0;
    }


        #site-header .lang-switch-btn i {
            width: 100%;
            height: 100%;
            font-size: 0.9rem;
        }


        #site-header .lang-switch-btn span {
            display: none;
        }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #site-header .site-header {
        height: 48px;
    }


    #site-header .navbar {
        height: 48px;
        padding: 0 0.5rem;
        gap: 0.3rem;
    }


    #site-header .logo-container {
        height: 48px;
    }


    #site-header .logo-img-wrapper {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        flex-basis: 32px;
    }


    #site-header .logo-title {
        font-size: 0.68rem;
    }


    #site-header .logo-subtitle {
        font-size: 0.48rem;
    }


    #site-header .nav-menu {
        height: 48px;
    }


    #site-header .nav-link {
        height: 31px;
        min-height: 31px;
        max-height: 31px;
        padding: 0 0.35rem;
        font-size: 0.62rem;
    }


        #site-header .nav-link.active {
            height: 31px;
            min-height: 31px;
            max-height: 31px;
        }


    #site-header .lang-switch-btn {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
    }


        #site-header .lang-switch-btn i {
            font-size: 0.8rem;
        }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    #site-header .nav-link:hover {
        background: transparent;
        color: #475569;
        transform: none;
    }


    #site-header .nav-link.active {
        background: #e0f2fe;
        color: #0284c7;
        transform: none;
    }


    #site-header .lang-switch-btn:hover {
        background: #ffffff;
        color: #0f172a;
        border-color: #e2e8f0;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
    }
}
/* =========================================================
   PAGE TRANSITION
   KEEP HEADER VISUALLY STABLE BETWEEN PAGES
========================================================= */

@view-transition {
    navigation: auto;
}


/* =========================================================
   HEADER VIEW TRANSITION
========================================================= */

.site-header {
    view-transition-name: site-header;
}


/* =========================================================
   KEEP HEADER FROM FADING / MOVING
========================================================= */

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none !important;
    mix-blend-mode: normal;
}


/* =========================================================
   KEEP THE PAGE ITSELF STABLE
========================================================= */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0s !important;
}


/* =========================================================
   HEADER ABOVE TRANSITION LAYER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
}