<style>
.footer {
    background: #fff;
    padding: 60px 0 30px;
    font-size: 15px;
}

.footer a {
    text-decoration: none;
    color: #555;
}

.footer a:hover {
    color: #000;
}

.footer-title {
    font-weight: 600;
    margin-bottom: 15px;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul li {
    margin-bottom: 8px;
}

.footer .accordion-button {
    background: transparent;
    padding: 15px 0;
    font-weight: 600;
    box-shadow: none;
}

.footer .accordion-button:not(.collapsed) {
    color: #000;
    background: transparent;
}

.footer .accordion-item {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.footer-social a {
    font-size: 20px;
    margin-right: 15px;
    color: #666;
}

.footer-social a:hover {
    color: #000;
}

.footer-bottom {
    border-top: 1px solid #e5e5e5;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 14px;
}

@media (min-width: 992px) {
    .footer .accordion-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
    .footer .accordion-button::after {
        display: none;
    }
}
</style>
<footer class="footer">
<div class="container">

    <!-- Accordion Wrapper -->
    <div class="accordion row" id="footerAccordion" style="display:none;">

        <!-- Column 1 -->
        <div class="col-lg-3 accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#guidelines">
                    Guidelines
                </button>
            </h2>
            <div id="guidelines" class="accordion-collapse collapse">
                <div class="accordion-body p-0 pt-2">
                    <ul>
                        <li><a href="#">Author guidelines</a></li>
                        <li><a href="#">Services for authors</a></li>
                        <li><a href="#">Policies and publication ethics</a></li>
                        <li><a href="#">Editor guidelines</a></li>
                        <li><a href="#">Fee policy</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Column 2 -->
        <div class="col-lg-3 accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#explore">
                    Explore
                </button>
            </h2>
            <div id="explore" class="accordion-collapse collapse">
                <div class="accordion-body p-0 pt-2">
                    <ul>
                        <li><a href="#">Articles</a></li>
                        <li><a href="#">Research Topics</a></li>
                        <li><a href="#">Journals</a></li>
                        <li><a href="#">How we publish</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Column 3 -->
        <div class="col-lg-3 accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#outreach">
                    Outreach
                </button>
            </h2>
            <div id="outreach" class="accordion-collapse collapse">
                <div class="accordion-body p-0 pt-2">
                    <ul>
                        <li><a href="#">Communeglobal Forum</a></li>
                        <li><a href="#">Communeglobal Policy Labs</a></li>
                        <li><a href="#">Communeglobal for Young Minds</a></li>
                        <li><a href="#">Communeglobal Planet Prize</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Column 4 -->
        <div class="col-lg-3 accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#connect">
                    Connect
                </button>
            </h2>
            <div id="connect" class="accordion-collapse collapse">
                <div class="accordion-body p-0 pt-2">
                    <ul>
                        <li><a href="#">Help center</a></li>
                        <li><a href="#">Emails and alerts</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Submit</a></li>
                        <li><a href="#">Career opportunities</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Social -->
    <div class="mt-5" style="display:none;">
        <div class="fw-semibold mb-3">Follow us</div>
        <div class="footer-social">
            <a href="#"><i class="bi bi-facebook"></i></a>
            <a href="#"><i class="bi bi-twitter-x"></i></a>
            <a href="#"><i class="bi bi-linkedin"></i></a>
            <a href="#"><i class="bi bi-instagram"></i></a>
        </div>
    </div>

    <!-- Bottom -->
    <div class="footer-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center">
        <div>© 2026 Communeglobal. All rights reserved.</div>
        <div>
            <a href="https://communeglobal.com/privacy-policy.php">Privacy policy</a> |
            <a href="https://communeglobal.com/terms-and-conditions.php">Terms and conditions</a> |
            <a href="https://communeglobal.com/refund-policy.php">Refund policy</a>
        </div>
    </div>

</div>
</footer>



<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
/* ════════════════════════════════
   CLICK DROPDOWN ENGINE
   Manages: ddAboutUs, ddSections (mega), ddAboutJournal
════════════════════════════════ */
const megaMenu    = document.getElementById('megaMenu');
const ddSections  = document.getElementById('ddSections');
const ddAboutUs   = document.getElementById('ddAboutUs');
const ddAboutJournal = document.getElementById('ddAboutJournal');
const globalOverlay  = document.getElementById('globalOverlay');

// Track all managed dropdowns
const allDropdowns = [ddAboutUs, ddAboutJournal];

function closeAll(except) {
  allDropdowns.forEach(dd => { if (dd && dd !== except) dd.classList.remove('open'); });
  if (except !== 'mega') { megaMenu.classList.remove('open'); ddSections && ddSections.classList.remove('open'); }
  globalOverlay.classList.remove('active');
}

function anyOpen() {
  return megaMenu.classList.contains('open') || allDropdowns.some(d => d && d.classList.contains('open'));
}

// Wire up each click-dd trigger
allDropdowns.forEach(dd => {
  if (!dd) return;
  const trigger = dd.querySelector('.click-trigger, .j-trigger');
  trigger.addEventListener('click', e => {
    e.stopPropagation();
    const wasOpen = dd.classList.contains('open');
    closeAll(dd);
    if (!wasOpen) {
      dd.classList.add('open');
      globalOverlay.classList.add('active');
    }
  });
});

// Sections (mega menu)
if (ddSections) {
  ddSections.querySelector('.j-trigger').addEventListener('click', e => {
    e.stopPropagation();
   const wasOpen = megaMenu.classList.contains('open');
closeAll(null);
if (!wasOpen) {
      megaMenu.classList.add('open');
      ddSections.classList.add('open');
      globalOverlay.classList.add('active');
    }
  });
}

// Global overlay / Escape close
globalOverlay.addEventListener('click', () => closeAll(null));
document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeAll(null); closeDrawer(); } });

/* ════════════════════════════════
   MOBILE DRAWER
════════════════════════════════ */
const burgerBtn     = document.getElementById('burgerBtn');
const drawer        = document.getElementById('drawer');
const drawerOverlay = document.getElementById('drawerOverlay');
const drawerClose   = document.getElementById('drawerClose');

const openDrawer  = () => { drawer.classList.add('open'); drawerOverlay.classList.add('open'); document.body.style.overflow = 'hidden'; };
const closeDrawer = () => { drawer.classList.remove('open'); drawerOverlay.classList.remove('open'); document.body.style.overflow = ''; };

burgerBtn.addEventListener('click', openDrawer);
drawerClose.addEventListener('click', closeDrawer);
drawerOverlay.addEventListener('click', closeDrawer);

// Accordion
document.querySelectorAll('.drawer-toggle').forEach(btn => {
  btn.addEventListener('click', () => {
    const body = document.getElementById(btn.dataset.target);
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    document.querySelectorAll('.drawer-body.open').forEach(b => { if (b !== body) b.classList.remove('open'); });
    document.querySelectorAll('.drawer-toggle[aria-expanded="true"]').forEach(b => { if (b !== btn) b.setAttribute('aria-expanded','false'); });
    body.classList.toggle('open', !expanded);
    btn.setAttribute('aria-expanded', String(!expanded));
  });
});
</script>
</body>
</html>