<div class="container mt-auto">
    <footer class="pt-4">
        <!-- Footer Toggle Button (Visible on Small Screens) -->
        <div class="text-center border-top context-main-border">
            <button class="d-md-none my-3 btn btn-lg context-main context-main-border" type="button" data-bs-toggle="collapse" data-bs-target="#footerMenu" aria-controls="footerMenu" aria-expanded="false" aria-label="Toggle footer navigation">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- Collapsible Footer Content -->
        <div class="collapse d-md-block my-4" id="footerMenu">
            <div class="row">
                {FOOTER_LEFT}
                {FOOTER_CENTER}
                {FOOTER_RIGHT}
            </div>
        </div>

        <!-- Copy & Social (Always Visible) -->
        <div class="d-flex flex-column flex-md-row justify-content-md-between py-3 border-top context-main-border">
            {COPY}
            {SOCIAL}
        </div>
    </footer>
</div>