================================================================================
FRANCISCAN SOCIETY - NEW PAGES AND MENU STRUCTURE GUIDE
================================================================================

OVERVIEW:
This file contains:
1. New Menu Structure with Submenus
2. Menu Styles (CSS)
3. Menu JavaScript
4. List of new inner pages to create
5. Content templates for each page

================================================================================
PART 1: NEW MENU STRUCTURE WITH SUBMENUS
================================================================================

LOCATION: Add to all HTML pages (index, about, gallery, ministries, community, news, contact)
REPLACE: The mobile-nav-drawer section in the header

HTML CODE FOR MOBILE MENU WITH SUBMENUS:
--------------------------------------------

<!-- Mobile Menu with Submenus -->
<div class="mobile-nav-drawer" style="position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; overflow-y: auto; background: #0c1727; color: #fff; z-index: 9999; padding: 2rem 2rem; transition: right 0.4s ease; display: flex; flex-direction: column; gap: 1.5rem; box-sizing: border-box;">
    <div class="drawer-nav">
        <div style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1rem;">
            <button class="drawer-close" type="button" aria-label="Close menu" onclick="document.querySelector('.mobile-nav-drawer').classList.remove('active'); document.body.classList.remove('menu-open');" style="background: #ffffff; border: none; color: #0c1727; width: 45px; height: 45px; border-radius: 8px; font-size: 1.5rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center;">&times;</button>
        </div>

        <a href="index.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Home</a>
        <a href="about.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">About Us</a>
        <a href="gallery.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Gallery</a>

        <!-- MINISTRIES SUBMENU -->
        <div style="display: flex; flex-direction: column;">
            <button class="submenu-toggle" data-target="ministries-submenu" style="background: none; border: none; color: #fff; font-weight: 600; font-size: 1.1rem; text-align: left; padding: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%;">
                Ministries
                <span class="submenu-arrow" style="display: inline-block; margin-left: 0.5rem; transition: transform 0.3s ease;">▶</span>
            </button>
            <div id="ministries-submenu" class="submenu" style="display: none; flex-direction: column; gap: 0.5rem; padding-left: 1.5rem; margin-top: 0.8rem;">
                <a href="ministries.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Overview</a>
                <a href="ministries-pastoral.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Pastoral Ministry</a>
                <a href="ministries-formation.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Formation Ministry</a>
                <a href="ministries-education.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Education Ministry</a>
            </div>
        </div>

        <!-- COMMUNITY SUBMENU -->
        <div style="display: flex; flex-direction: column;">
            <button class="submenu-toggle" data-target="community-submenu" style="background: none; border: none; color: #fff; font-weight: 600; font-size: 1.1rem; text-align: left; padding: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%;">
                Community
                <span class="submenu-arrow" style="display: inline-block; margin-left: 0.5rem; transition: transform 0.3s ease;">▶</span>
            </button>
            <div id="community-submenu" class="submenu" style="display: none; flex-direction: column; gap: 0.5rem; padding-left: 1.5rem; margin-top: 0.8rem;">
                <a href="community.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Overview</a>
                <a href="community-history.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Our History</a>
                <a href="community-rule.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Third Order Rule</a>
                <a href="community-leadership.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Leadership</a>
                <a href="community-friars.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Our Friars</a>
                <a href="community-friaries.html" style="color: #d6d3d1; font-weight: 500; text-decoration: none; font-size: 0.95rem;">Our Friaries</a>
            </div>
        </div>

        <a href="news.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">News</a>
        <a href="contact.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Contact Us</a>
    </div>

    <!-- Right-hand video panel (hidden on phones) -->
    <div class="drawer-media" aria-hidden="true">
        <video data-src="assets/videos/menu-panel.mp4" loop muted playsinline preload="none"></video>
    </div>
</div>

================================================================================
PART 2: MENU STYLES (CSS)
================================================================================

LOCATION: Add to <style> section in <head> or to css/styles.css

CSS CODE:
--------------------------------------------

/* Menu item consistency - all items same size and hover effect */
.mobile-nav-drawer .drawer-nav > a,
.mobile-nav-drawer .drawer-nav .submenu-toggle {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    display: block !important;
    transition: color 0.2s ease !important;
}

/* Hover color for all menu items */
.mobile-nav-drawer .drawer-nav > a:hover,
.mobile-nav-drawer .drawer-nav > a:focus,
.mobile-nav-drawer .drawer-nav .submenu-toggle:hover,
.mobile-nav-drawer .drawer-nav .submenu-toggle:focus {
    color: #e6c888 !important;
}

/* Remove arrows from regular links */
.mobile-nav-drawer .drawer-nav > a::after {
    content: none !important;
    display: none !important;
}

/* Submenu styles */
.submenu {
    display: none !important;
}

.submenu.open {
    display: flex !important;
}

.submenu-toggle {
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
}

.submenu-toggle.active .submenu-arrow {
    transform: rotate(90deg);
}

/* Submenu items styling */
.submenu a {
    margin-bottom: 0.5rem !important;
    display: block !important;
    font-size: 0.95rem !important;
    color: #d6d3d1 !important;
    transition: color 0.2s ease !important;
}

.submenu a:hover,
.submenu a:focus {
    color: #e6c888 !important;
}

/* Fix for bottom sticky bar - hide widgets near footer */
@media (max-width: 991px) {
    body.menu-open #bottom-widgets-container,
    body.menu-open #welcome-scroll-bible-container {
        display: none !important;
    }
}

/* Ensure footer doesn't get overlapped by widgets */
footer {
    position: relative;
    z-index: 10 !important;
}

================================================================================
PART 3: MENU JAVASCRIPT
================================================================================

LOCATION: Add to <script> section before closing </body> tag

JAVASCRIPT CODE:
--------------------------------------------

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Submenu toggle functionality
    const toggles = document.querySelectorAll('.submenu-toggle');
    toggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('data-target');
            const submenu = document.getElementById(targetId);
            submenu.classList.toggle('open');
            this.classList.toggle('active');
        });
    });
});
</script>

================================================================================
PART 4: NEW PAGES TO CREATE
================================================================================

Create these 8 new HTML files in the backup/main project folder:

1. ministries-pastoral.html
2. ministries-formation.html
3. ministries-education.html
4. community-history.html
5. community-rule.html
6. community-leadership.html
7. community-friars.html
8. community-friaries.html

Each file should:
- Use the same header from index.html
- Include the new menu structure above
- Include the menu styles and JavaScript
- Have the footer with contact modal
- Follow the responsive design pattern

================================================================================
PART 5: INNER PAGES CONTENT
================================================================================

TEMPLATE STRUCTURE FOR ALL INNER PAGES:
All pages follow this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[PAGE TITLE]</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Phudu:wght@400..900&family=DM+Sans:wght@400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/design-system.css">
    <link rel="stylesheet" href="css/styles.css?v=3">
    <style>
        * { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; }
        main { width: 100%; overflow-x: hidden; }
        .header__logo, .header__logo-text { position: relative; z-index: 101; }

        .hero { padding: clamp(6rem, 15vw, 10rem) 2rem; background: linear-gradient(135deg, rgba(12,11,10,0.85), rgba(74,42,24,0.7)), url('assets/images/church-bg.jpg') center/cover; }
        .hero h1 { font-family: 'Phudu', sans-serif; font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 900; color: #fff; margin: 0; }
        .hero p { font-family: 'Instrument Sans', sans-serif; font-size: clamp(1rem, 2.5vw, 1.3rem); color: rgba(255,255,255,0.95); margin-top: 1.5rem; }

        .content { max-width: 950px; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) 2rem; }
        h2 { font-family: 'Phudu', sans-serif; font-size: 2.2rem; font-weight: 900; color: #1c1917; margin-bottom: 1.5rem; }
        h3 { font-family: 'Phudu', sans-serif; font-size: 1.5rem; font-weight: 700; color: #4a2a18; margin-top: 2.5rem; margin-bottom: 1rem; }
        p { font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.9; margin-bottom: 1.2rem; }

        footer { background: #0c1727; color: #fff; padding: 3rem 2rem; text-align: center; }
    </style>
</head>
<body style="background:#fff; margin:0;">

<!-- COPY HEADER FROM index.html HERE -->

<main style="padding-top: 0;">
    <!-- Hero Section -->
    <section class="hero">
        <div style="max-width: 950px; margin: 0 auto; position: relative; z-index: 2;">
            <h1>[PAGE TITLE]</h1>
            <p>[TAGLINE]</p>
        </div>
    </section>

    <!-- Back Link -->
    <div style="padding: 2rem; background: #f5f3ec; text-align: center;">
        <a href="[BACK PAGE].html" style="color: #4a2a18; text-decoration: none; font-weight: 600;">← Back to [SECTION]</a>
    </div>

    <!-- Main Content -->
    <div class="content">
        [PAGE CONTENT HERE]
    </div>

    <footer>
        <p style="font-family: 'Instrument Sans', sans-serif; margin: 0;">© 2026 Franciscan Society. All rights reserved.</p>
    </footer>
</main>

<!-- COPY CONTACT MODAL FROM index.html HERE -->

<!-- COPY MENU JAVASCRIPT FROM PART 3 HERE -->

</body>
</html>

================================================================================
SUMMARY: Files to Create in Backup Folder
================================================================================

1. Copy from index.html (header + footer + modal + menu JS)
2. Use template structure above
3. Fill in unique content for each page
4. Update title, h1, p tags for each page
5. Update back link href for each page
6. All styling is inherited from styles.css

Total new pages: 8
Each page: ~3-5 KB when complete
Design: Consistent with existing backup files

================================================================================
END OF GUIDE
================================================================================