<style>
/* =========================================================
   DSWD GLOBAL FOOTER
   LOGIN: FIXED BOTTOM + RESERVED LAYOUT SPACE
   PHPRUNNER 11.3
   ========================================================= */

:root {
    --dswd-login-footer-height: 56px;
}


/* =========================================================
   NORMAL / GLOBAL FOOTER
   ========================================================= */

#dswdGlobalFooter {
    --dswd-footer-push: 0px;

    position: relative !important;
    display: block !important;
    clear: both !important;

    width: calc(100% - 30px) !important;
    max-width: 1900px !important;

    margin:
        calc(22px + var(--dswd-footer-push))
        auto
        12px
        auto !important;

    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #969696 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    font-family: Arial, Helvetica, sans-serif !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 100 !important;
}


#dswdGlobalFooter .dswd-footer-red-line {
    display: block !important;

    width: 100% !important;
    height: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ed1c24 !important;
}


#dswdGlobalFooter .dswd-footer-content {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    gap: 22px !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


#dswdGlobalFooter .dswd-footer-left {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 24px !important;
}


#dswdGlobalFooter .dswd-footer-agency-logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 150px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    flex: 0 0 auto !important;
}


#dswdGlobalFooter .dswd-footer-hashtag {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #2e3192 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
}


#dswdGlobalFooter .dswd-footer-socials {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 18px !important;
}


#dswdGlobalFooter .dswd-footer-link {
    display: inline-flex !important;

    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;

    color: #2e3192 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}


#dswdGlobalFooter .dswd-footer-link:hover,
#dswdGlobalFooter .dswd-footer-link:focus {
    color: #ed1c24 !important;
    text-decoration: none !important;
}


#dswdGlobalFooter .dswd-social-icon {
    display: block !important;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    max-width: 17px !important;

    min-height: 17px !important;
    max-height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    flex: 0 0 17px !important;
}


/* =========================================================
   LOGIN PAGE
   FIXED FOOTER WITH RESERVED SPACE
   ========================================================= */

html body.function-login {
    --dswd-login-footer-height: 56px;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    box-sizing: border-box !important;

    padding:
        0
        0
        var(--dswd-login-footer-height)
        0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* The shell fills the usable viewport above the fixed footer. */
html body.function-login
.wings-login-flex-shell {
    flex: 1 0 auto !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;

    min-height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
        24px
        16px
        24px
        16px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* Card uses horizontal centering only. */
html body.function-login
.wings-login-card,

html body.function-login
.bs-pagepanel.wings-login-card {
    flex: 0 0 auto !important;

    margin:
        0
        auto !important;
}


/* =========================================================
   LOGIN FIXED FOOTER
   12px red + 44px white = 56px total
   ========================================================= */

html body.function-login
#dswdGlobalFooter {
    --dswd-footer-push: 0px !important;

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: none !important;

    height:
        var(--dswd-login-footer-height) !important;

    min-height:
        var(--dswd-login-footer-height) !important;

    max-height:
        var(--dswd-login-footer-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    transform: none !important;

    z-index: 99999 !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-red-line {
    display: block !important;

    width: 100% !important;

    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ed1c24 !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;

    padding:
        0
        28px !important;

    gap: 18px !important;

    background: #ffffff !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-agency-logo {
    display: none !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-left {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-hashtag {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #2e3192 !important;

    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-socials {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 18px !important;

    overflow: hidden !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-socials
.dswd-footer-link:nth-child(n+4) {
    display: inline-flex !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-footer-link {
    display: inline-flex !important;

    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 5px !important;

    color: #2e3192 !important;

    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


html body.function-login
#dswdGlobalFooter
.dswd-social-icon {
    display: block !important;

    width: 14px !important;
    height: 14px !important;

    min-width: 14px !important;
    max-width: 14px !important;

    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 14px !important;

    object-fit: contain !important;
}


/* =========================================================
   NORMAL PAGE RESPONSIVE RULES ONLY
   Browser zoom on login will not trigger these.
   ========================================================= */

@media screen and (max-width: 1200px) {

    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-content {
        padding: 9px 15px !important;
        gap: 15px !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-left {
        gap: 15px !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-agency-logo {
        max-width: 125px !important;
        max-height: 37px !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-socials {
        flex-wrap: wrap !important;

        gap:
            9px
            14px !important;
    }
}


@media screen and (max-width: 768px) {

    body:not(.function-login)
    #dswdGlobalFooter {
        --dswd-footer-push: 0px !important;

        width:
            calc(100% - 16px) !important;

        margin:
            16px
            auto
            8px
            auto !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-content {
        flex-direction: column !important;
        align-items: flex-start !important;

        min-height: auto !important;

        padding: 12px 14px !important;

        gap: 11px !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-left {
        width: 100% !important;

        gap: 13px !important;
    }


    body:not(.function-login)
    #dswdGlobalFooter
    .dswd-footer-socials {
        width: 100% !important;

        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap:
            10px
            14px !important;
    }
}


/* =========================================================
   REAL TOUCH MOBILE LOGIN ONLY
   This does not trigger from desktop browser zoom.
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    html body.function-login {
        --dswd-login-footer-height: 84px;
    }


    html body.function-login
    #dswdGlobalFooter
    .dswd-footer-red-line {
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
    }


    html body.function-login
    #dswdGlobalFooter
    .dswd-footer-content {
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px !important;

        flex-direction: column !important;

        justify-content: center !important;

        padding: 8px 12px !important;

        gap: 7px !important;
    }


    html body.function-login
    #dswdGlobalFooter
    .dswd-footer-left,

    html body.function-login
    #dswdGlobalFooter
    .dswd-footer-socials {
        width: 100% !important;

        justify-content: center !important;
    }


    html body.function-login
    #dswdGlobalFooter
    .dswd-footer-socials {
        flex-wrap: wrap !important;

        gap:
            7px
            11px !important;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    #dswdGlobalFooter {
        --dswd-footer-push: 0px !important;

        position: static !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 15px 0 0 0 !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    html body.function-login {
        padding-bottom: 0 !important;
    }
}
</style>


<footer
    id="dswdGlobalFooter"
    role="contentinfo"
    aria-label="DSWD official website and social media accounts">

    <div class="dswd-footer-red-line"></div>

    <div class="dswd-footer-content">

        <div class="dswd-footer-left">

            <img
                src="images/dswd-bp.png"
                class="dswd-footer-agency-logo"
                alt="Department of Social Welfare and Development and Bagong Pilipinas">

            <span class="dswd-footer-hashtag">
                #BawatBuhayMahalagaSaDSWD
            </span>

        </div>


        <div class="dswd-footer-socials">

            <a
                href="https://www.dswd.gov.ph/"
                target="_blank"
                rel="noopener noreferrer"
                class="dswd-footer-link"
                aria-label="Visit the official DSWD website">

                <img
                    src="dswd-footer/website.png"
                    class="dswd-social-icon"
                    alt="">

                <span>www.dswd.gov.ph</span>

            </a>


            <a
                href="https://www.facebook.com/dswdserves/"
                target="_blank"
                rel="noopener noreferrer"
                class="dswd-footer-link"
                aria-label="Visit DSWD on Facebook">

                <img
                    src="dswd-footer/facebook.png"
                    class="dswd-social-icon"
                    alt="">

                <span>dswdserves</span>

            </a>


            <a
                href="https://x.com/dswdserves"
                target="_blank"
                rel="noopener noreferrer"
                class="dswd-footer-link"
                aria-label="Visit DSWD on X">

                <img
                    src="dswd-footer/x.png"
                    class="dswd-social-icon"
                    alt="">

                <span>@dswdserves</span>

            </a>

        </div>

    </div>

</footer>


<script>
(function () {

    "use strict";


    var FOOTER_ID =
        "dswdGlobalFooter";


    var MOBILE_WIDTH =
        768;


    var BOTTOM_GAP =
        12;


    var footer =
        document.getElementById(
            FOOTER_ID
        );


    var scheduledFrame =
        null;


    var scheduledTimer =
        null;


    if (!footer) {
        return;
    }


    function isLoginPage() {

        var body =
            document.body;


        var pathname =
            window.location.pathname
                .toLowerCase();


        return (
            (
                body &&
                body.classList.contains(
                    "function-login"
                )
            ) ||

            (
                body &&
                body.getAttribute(
                    "data-pageid"
                ) ===
                "login"
            ) ||

            pathname.indexOf(
                "login.php"
            ) !==
                -1
        );
    }


    function prepareLoginFooter() {

        if (
            !footer ||
            !isLoginPage()
        ) {
            return;
        }


        footer.style.setProperty(
            "--dswd-footer-push",
            "0px",
            "important"
        );


        /*
         * Put the fixed footer directly under BODY so no
         * PHPRunner positioned or transformed ancestor can
         * change its fixed positioning reference.
         */
        if (
            footer.parentElement !==
            document.body
        ) {

            document.body.appendChild(
                footer
            );
        }
    }


    function updateNormalFooterPosition() {

        if (
            !footer ||
            isLoginPage()
        ) {
            return;
        }


        if (
            window.innerWidth <=
            MOBILE_WIDTH
        ) {

            footer.style.setProperty(
                "--dswd-footer-push",
                "0px"
            );


            return;
        }


        footer.style.setProperty(
            "--dswd-footer-push",
            "0px"
        );


        if (
            scheduledFrame !==
            null
        ) {

            window.cancelAnimationFrame(
                scheduledFrame
            );
        }


        scheduledFrame =
            window.requestAnimationFrame(
                function () {

                    var footerRectangle =
                        footer
                            .getBoundingClientRect();


                    var footerDocumentBottom =
                        footerRectangle.bottom +
                        window.pageYOffset;


                    var viewportHeight =
                        window.innerHeight;


                    if (
                        window.visualViewport &&
                        window.visualViewport.height
                    ) {

                        viewportHeight =
                            window
                                .visualViewport
                                .height;
                    }


                    var unusedSpace =
                        viewportHeight -
                        BOTTOM_GAP -
                        footerDocumentBottom;


                    var requiredPush =
                        Math.max(
                            0,
                            Math.floor(
                                unusedSpace
                            )
                        );


                    footer.style.setProperty(
                        "--dswd-footer-push",
                        requiredPush +
                        "px"
                    );


                    scheduledFrame =
                        null;
                }
            );
    }


    function updateFooter() {

        if (isLoginPage()) {

            prepareLoginFooter();

            return;
        }


        updateNormalFooterPosition();
    }


    function scheduleFooterUpdate(
        delay
    ) {

        window.clearTimeout(
            scheduledTimer
        );


        scheduledTimer =
            window.setTimeout(
                updateFooter,
                typeof delay ===
                    "number"
                    ? delay
                    : 50
            );
    }


    if (
        document.readyState ===
        "loading"
    ) {

        document.addEventListener(
            "DOMContentLoaded",
            function () {

                prepareLoginFooter();

                scheduleFooterUpdate(
                    20
                );
            }
        );

    } else {

        prepareLoginFooter();

        scheduleFooterUpdate(
            20
        );
    }


    window.addEventListener(
        "load",
        function () {

            prepareLoginFooter();

            scheduleFooterUpdate(
                20
            );
        }
    );


    window.addEventListener(
        "resize",
        function () {

            /*
             * Browser zoom fires resize.
             * Login footer size/position remains controlled by
             * CSS and is not recalculated into another layout.
             */
            scheduleFooterUpdate(
                30
            );
        }
    );


    window.addEventListener(
        "orientationchange",
        function () {

            scheduleFooterUpdate(
                100
            );
        }
    );

})();
</script>
