/* Start custom CSS for html, class: .elementor-element-16372cd */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO & Meta Tags START -->
    <title>MLCC Growth Track: In-Person & Online Classes | Maranatha Delaware</title>
    <meta name="description" content="Explore your spiritual journey with MLCC's Growth Track classes in Dover, DE. Join in-person or complete online to follow Jesus, connect, discover your gifts, and serve your purpose.">
    <meta name="keywords" content="growth track, MLCC, Maranatha Life Changing Church, spiritual growth, online classes, in-person classes, Dover DE, church classes, discipleship, Christian education, discover purpose, serve, join church">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="[YOUR_CANONICAL_URL_HERE]"> <!-- IMPORTANT: Replace with the actual URL of this page -->

    <!-- Open Graph / Facebook / LinkedIn / Pinterest Meta Tags -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="[YOUR_CANONICAL_URL_HERE]"> <!-- IMPORTANT: Replace with the actual URL of this page -->
    <meta property="og:title" content="MLCC Growth Track: In-Person & Online Classes">
    <meta property="og:description" content="Explore your spiritual journey with MLCC's Growth Track classes in Dover, DE. Join in-person or complete online to follow Jesus, connect, discover your gifts, and serve your purpose.">
    <meta property="og:image" content="https://www.maranathadelaware.org/hp_wordpress/wp-content/uploads/2024/10/missions.png"> <!-- IMPORTANT: Use a relevant, high-quality image -->
    <meta property="og:image:width" content="1200"> 
    <meta property="og:image:height" content="630">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@[YourChurchTwitterHandle]"> <!-- Optional: Replace with your church's Twitter handle -->
    <meta name="twitter:creator" content="@[YourPersonalTwitterHandle]"> <!-- Optional: Replace with a relevant personal Twitter handle -->
    <meta name="twitter:url" content="[YOUR_CANONICAL_URL_HERE]"> <!-- IMPORTANT: Replace with the actual URL of this page -->
    <meta name="twitter:title" content="MLCC Growth Track: In-Person & Online Classes">
    <meta name="twitter:description" content="Explore your spiritual journey with MLCC's Growth Track classes in Dover, DE. Join in-person or complete online to follow Jesus, connect, discover your gifts, and serve your purpose.">
    <meta name="twitter:image" content="https://www.maranathadelaware.org/hp_wordpress/wp-content/uploads/2024/10/missions.png"> <!-- IMPORTANT: Use the same relevant, high-quality image as for Open Graph -->

    <!-- Favicon Links -->
    <link rel="icon" href="[PATH_TO_YOUR_FAVICON.ICO]" type="image/x-icon"> <!-- IMPORTANT: Replace with your actual favicon path -->
    <link rel="apple-touch-icon" href="[PATH_TO_YOUR_APPLE_TOUCH_ICON.PNG]"> <!-- IMPORTANT: For iOS home screen icon, replace with your actual path -->
    <!-- SEO & Meta Tags END -->
    
    <!-- Font Awesome Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    <style>
        /* Define your base colors for consistency */
        :root {
            --color-primary: #00AEB9; /* Teal */
            --color-secondary: #7A287A; /* Purple */
            --color-accent-blue: #2575fc; /* From carousel CSS for gradients */
            --color-dark-text: #2c3e50;
            --color-medium-text: #555;
            --color-light-text: #ffffff;
            --color-background-light: #f4f7f6;
            --color-white: #ffffff;
            --color-border-light: #e0e0e0;

            /* Online Track Specific Colors (kept for consistency, though not fully used) */
            --online-card-gradient-start: #2575fc; /* Blue */
            --online-card-gradient-end: #00AEB9; /* Teal */
            --online-line-gradient-start: #00AEB9;
            --online-line-gradient-end: #2575fc;
            --online-neutral-card-bg: #f0f0f0;
            --online-neutral-card-text: #555;
        }

        /* Base Body Styles from new CSS */
        body {
            font-family: 'Inter', sans-serif; /* Primary font */
            margin: 0;
            padding: 0; /* Ensures no default padding */
            background-color: var(--color-background-light);
            color: var(--color-dark-text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: border-box;
        }

        /* Header styles adapted from new CSS conventions */
        header {
            background-color: var(--color-dark-text); /* Using a dark color from the new palette */
            color: var(--color-light-text);
            padding: 40px 0; /* More padding, similar to site-header */
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Soft shadow */
            margin-bottom: 30px; /* Space before content */
        }

        header h1 {
            font-family: 'Roboto', sans-serif; /* Specific font for headings */
            font-size: 42px; /* Large title */
            font-weight: 900;
            margin: 0;
            line-height: 1.1;
            text-transform: uppercase;
            color: var(--color-light-text); /* Ensures it's white against dark background */
        }

        /* Main Content Area */
        main {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        /* Search Bar Container - Now with relative positioning for suggestions */
        .search-bar-container {
            text-align: center;
            margin-bottom: 30px;
            padding: 0 20px;
            position: relative; /* Crucial for positioning suggestions */
            z-index: 100; /* Ensure suggestions appear on top */
        }

        .search-bar-container input[type="search"] {
            width: 100%;
            max-width: 600px;
            padding: 15px 20px;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            border: 2px solid var(--color-primary);
            border-radius: 30px;
            background-color: var(--color-white);
            color: var(--color-dark-text);
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

        .search-bar-container input[type="search"]::placeholder {
            color: var(--color-medium-text);
            opacity: 0.8;
        }

        .search-bar-container input[type="search"]:focus {
            border-color: var(--color-accent-blue);
            box-shadow: 0 4px 15px rgba(37, 117, 252, 0.2);
        }

        /* NEW: Search Suggestions Styling */
        .search-suggestions {
            position: absolute;
            width: calc(100% - 40px); /* Adjust for padding on search-bar-container */
            max-width: 600px;
            left: 50%;
            transform: translateX(-50%);
            top: calc(100% + 5px); /* Position below the search input */
            background-color: var(--color-white);
            border: 1px solid var(--color-border-light);
            border-radius: 8px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            list-style: none;
            padding: 10px 0;
            margin: 0;
            display: none; /* Hidden by default */
            overflow: hidden; /* Ensures border-radius applies to content */
        }

        .search-suggestions .suggestion-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid var(--color-border-light);
            transition: background-color 0.2s ease;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: var(--color-dark-text);
            text-align: left; /* Ensure text alignment */
        }

        .search-suggestions .suggestion-item:last-child {
            border-bottom: none;
        }

        .search-suggestions .suggestion-item:hover {
            background-color: var(--color-background-light); /* Light background on hover */
        }

        .search-suggestions .suggestion-item img {
            width: 48px; /* Standard thumbnail size */
            height: 36px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 10px;
            flex-shrink: 0; /* Prevent image from shrinking */
        }

        .search-suggestions .suggestion-item span {
            white-space: nowrap; /* Prevent title from wrapping */
            overflow: hidden;
            text-overflow: ellipsis; /* Add ellipsis if title is too long */
            flex-grow: 1; /* Allow title to take remaining space */
        }


        /* Language Selector Buttons - Now two separate buttons with gap */
        .track-switcher {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            /* Removed border, border-radius, overflow, box-shadow from container */
            gap: 20px; /* **This creates the visible gap between buttons** */
            max-width: 500px; 
            margin-left: auto;
            margin-right: auto;
        }

        .track-switch-button {
            flex: 1; /* Each button takes half the available width */
            padding: 12px 40px; /* Increased horizontal padding for internal spacing */
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease; /* Smooth transitions for all relevant properties */
            text-transform: uppercase;
            letter-spacing: 0.5px;
            
            /* Individual button styling */
            border: 2px solid var(--color-primary); /* Each button has its own border */
            border-radius: 8px; /* MODIFIED: Set to 8px roundness */
            box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Each button has its own shadow */

            /* Default/Inactive state (white background, primary text) */
            background-color: var(--color-white);
            color: var(--color-primary);
        }
        
        /* Active state (primary background, white text) */
        .track-switch-button.active {
            background-color: var(--color-primary);
            color: var(--color-light-text);
            border-color: var(--color-primary); /* Ensure border color matches background when active */
            box-shadow: 0 6px 15px rgba(0,174,185,0.3); /* Stronger shadow for active state */
        }

        /* Hover states */
        .track-switch-button:hover:not(.active) {
            background-color: #f0f0f0; /* Subtle grey on hover for inactive */
            color: var(--color-primary); /* Text remains primary */
            box-shadow: 0 6px 15px rgba(0,0,0,0.12); /* Stronger shadow on hover */
        }
        .track-switch-button.active:hover {
            background-color: #009DA6; /* Slightly darker primary on hover for active */
            color: var(--color-light-text); /* Text remains white */
            box-shadow: 0 8px 20px rgba(0,174,185,0.4); /* Even stronger shadow on active hover */
        }


        /* Most Recent Sermon Display */
        .sermon-main-player {
            background-color: var(--color-white);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            margin-bottom: 50px;
        }

        .sermon-main-player h2 {
            font-family: 'Roboto', sans-serif;
            text-align: center;
            color: var(--color-dark-text);
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }

        .sermon-main-player h3 {
            font-family: 'Roboto', sans-serif;
            font-size: 2rem;
            color: var(--color-dark-text);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .sermon-main-player p {
            font-family: 'Inter', sans-serif;
            color: var(--color-medium-text);
            font-size: 1.1rem;
            /* Added this for spacing when the "Read More" button appears */
            margin-bottom: 20px; 
        }

        /* --- NEW: Read More/Less Button and Description Styles --- */
        .read-more-btn {
            background: none;
            border: none;
            color: var(--color-primary); /* Use your primary theme color for links */
            cursor: pointer;
            padding: 0;
            margin-left: 5px;
            font-size: inherit; /* Keep the same font size as description */
            text-decoration: underline;
            font-weight: bold; /* Make it stand out a bit */
            transition: color 0.2s ease;
        }

        .read-more-btn:hover {
            color: var(--color-accent-blue); /* A slightly different color on hover, like your accent blue */
            text-decoration: none; /* Remove underline on hover for a subtle effect */
        }

        /* You might want to define styles for these spans, even if display is controlled by JS */
        /* .truncated-text, .full-text {
            display: inline;
        } */
        /* If you need them on new lines or different styling, you can add here */
        /* --- END NEW STYLES --- */


        /* Horizontal Sermon Lists */
        .playlist-section {
            margin-bottom: 50px;
        }

        .playlist-section h2 {
            font-family: 'Roboto', sans-serif;
            color: var(--color-dark-text);
            margin-bottom: 25px;
            font-size: 2rem;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
        }

        .sermon-list {
            display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 15px;
            scroll-snap-type: x mandatory;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .sermon-list::-webkit-scrollbar {
            height: 8px;
        }

        .sermon-list::-webkit-scrollbar-thumb {
            background: var(--color-primary);
            border-radius: 10px;
        }

        .sermon-list::-webkit-scrollbar-track {
            background: #e0e0e0;
            border-radius: 10px;
        }

        /* Hide scrollbar for Firefox */
        .sermon-list {
            scrollbar-width: thin;
            scrollbar-color: var(--color-primary) #e0e0e0;
        }

        .sermon-item {
            flex: 0 0 auto;
            width: 280px;
            margin-right: 25px;
            background-color: var(--color-white);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            scroll-snap-align: start;
        }

        .sermon-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }

        .sermon-item img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            display: block;
        }

        .sermon-item-details {
            padding: 15px;
        }

        .sermon-item h3 {
            font-family: 'Roboto', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--color-dark-text);
            margin-top: 0;
            margin-bottom: 10px;
            height: 3.3em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .sermon-item p {
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: var(--color-medium-text);
            height: 3em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 60px;
            background-color: var(--color-dark-text);
            color: var(--color-light-text);
            font-size: 0.95rem;
            font-family: 'Inter', sans-serif;
        }

        /* Responsive Design (adjusted to match new breakpoints and mobile behavior) */
        @media (max-width: 768px) {
            header {
                padding: 30px 0;
            }
            header h1 {
                font-size: 32px;
            }

            .search-bar-container {
                margin-bottom: 20px;
            }

            .search-suggestions {
                width: calc(100% - 30px); /* Adjust for 15px padding on main */
            }

            /* Mobile styling for individual gapped buttons */
            .track-switcher {
                flex-direction: column; /* Stack vertically on mobile */
                max-width: 90%; 
                /* Each button is now responsible for its own border/radius/shadow */
                border: none; /* Removed container border */
                border-radius: 0; /* Removed container border-radius */
                box-shadow: none; /* Removed container shadow */
                overflow: visible; /* Allow individual button shadows to show */
                gap: 15px; /* Adjust gap for mobile vertical stack */
            }
            .track-switch-button {
                padding: 12px 25px; /* Adjust padding for mobile */
                border-radius: 8px; /* MODIFIED: Keep 8px roundness for each button on mobile */
                border: 2px solid var(--color-primary); /* Each button retains its own border */
                box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Each button retains its own shadow */
            }
            /* No specific :first-child / :last-child border rules needed here due to gap */


            .sermon-main-player {
                padding: 20px;
            }

            .sermon-main-player h2 {
                font-size: 1.8rem;
            }

            .sermon-main-player h3 {
                font-size: 1.6rem;
            }

            .playlist-section h2 {
                font-size: 1.8rem;
            }

            .sermon-item {
                width: 250px;
                margin-right: 20px;
            }
        }

        @media (max-width: 480px) {
            header h1 {
                font-size: 28px;
            }

            main {
                padding: 0 15px;
            }

            .search-bar-container input[type="search"] {
                padding: 12px 18px;
                font-size: 0.9rem;
            }
            .search-suggestions {
                width: calc(100% - 30px); /* Adjust for 15px padding on main */
            }
            .search-suggestions .suggestion-item {
                padding: 8px 10px;
                font-size: 0.85rem;
            }
            .search-suggestions .suggestion-item img {
                width: 40px;
                height: 30px;
            }


            .sermon-main-player {
                padding: 15px;
            }

            .sermon-main-player h3 {
                font-size: 1.4rem;
            }

            .sermon-list {
                padding-bottom: 10px;
            }

            .sermon-item {
                width: 220px;
                margin-right: 15px;
            }

            .sermon-item img {
                height: 120px;
            }

            .sermon-item h3 {
                font-size: 1.1rem;
            }

            .sermon-item p {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Sermon Library</h1>
    </header>

    <main>
        <!-- Search Bar Section -->
        <div class="search-bar-container">
            <input type="search" id="sermonSearch" placeholder="Search sermons by title, speaker, or series...">
            <ul id="sermonSuggestions" class="search-suggestions">
                <!-- Suggestions will be populated by JavaScript -->
            </ul>
        </div>

        <!-- Language Selector Buttons (In-Person/Online equivalent) -->
        <div class="track-switcher">
            <button class="track-switch-button active" data-lang="english">English Sermons</button>
            <button class="track-switch-button" data-lang="spanish">Spanish Sermons</button>
        </div>

        <!-- Most Recent Sermon Display -->
        <section class="sermon-main-player">
            <h2>Most Recent Sermon</h2>
            <div class="video-container">
                <iframe id="mainSermonVideo" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=abcdefg" title="Most Recent Sermon" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
            </div>
            <h3 id="mainSermonTitle">The Power of Forgiveness</h3>
            <p id="mainSermonDescription">
                <span class="truncated-text">In this powerful message, Pastor John Doe delves into the profound concept of forgiveness, both as a divine gift and a personal journey. Learn how releasing past hurts can unlock spiritual freedom and renewal. Discover practical steps to embrace forgiveness in your own life...</span>
                <span class="full-text" style="display: none;">This sermon explores the theological foundations of forgiveness, its psychological benefits, and its role in fostering healthy relationships within the church and beyond. Pastor Doe shares personal anecdotes and biblical examples to illustrate the transformative power of a forgiving heart. Whether you are struggling to forgive others or yourself, this message offers hope and guidance for finding peace.</span>
                <button class="read-more-btn">Read More</button>
            </p>
        </section>

        <!-- Horizontal Sermon Lists -->
        <section class="playlist-section" id="englishSermons">
            <h2>English Sermon Series</h2>
            <div class="sermon-list">
                <!-- Example English Sermon Item -->
                <div class="sermon-item" data-title="The Power of Forgiveness" data-speaker="Pastor John Doe" data-series="Spiritual Growth" data-id="dQw4w9WgXcQ">
                    <img src="https://via.placeholder.com/280x160/00AEB9/FFFFFF?text=Sermon+Thumbnail+1" alt="Sermon Thumbnail">
                    <div class="sermon-item-details">
                        <h3>The Power of Forgiveness</h3>
                        <p>Discover how releasing past hurts can unlock spiritual freedom and renewal.</p>
                    </div>
                </div>
                <div class="sermon-item" data-title="Foundations of Faith" data-speaker="Pastor Jane Smith" data-series="Core Beliefs" data-id="anotherVideoId">
                    <img src="https://via.placeholder.com/280x160/7A287A/FFFFFF?text=Sermon+Thumbnail+2" alt="Sermon Thumbnail">
                    <div class="sermon-item-details">
                        <h3>Foundations of Faith</h3>
                        <p>A deep dive into the fundamental principles of Christian belief and doctrine.</p>
                    </div>
                </div>
                 <div class="sermon-item" data-title="Living a Purposeful Life" data-speaker="Pastor John Doe" data-series="Life Application" data-id="yetAnotherVideoId">
                    <img src="https://via.placeholder.com/280x160/2575fc/FFFFFF?text=Sermon+Thumbnail+3" alt="Sermon Thumbnail">
                    <div class="sermon-item-details">
                        <h3>Living a Purposeful Life</h3>
                        <p>Explore God's unique plan for your life and how to walk in His calling daily.</p>
                    </div>
                </div>
                <!-- Add more sermon items here -->
            </div>
        </section>

        <section class="playlist-section" id="spanishSermons" style="display: none;">
            <h2>Sermones en Español</h2>
            <div class="sermon-list">
                <!-- Example Spanish Sermon Item -->
                <div class="sermon-item" data-title="El Poder del Perdón" data-speaker="Pastor Juan Pueblo" data-series="Crecimiento Espiritual" data-id="spanishVideo1">
                    <img src="https://via.placeholder.com/280x160/00AEB9/FFFFFF?text=Sermon+Español+1" alt="Spanish Sermon Thumbnail">
                    <div class="sermon-item-details">
                        <h3>El Poder del Perdón</h3>
                        <p>Descubre cómo perdonar puede liberar tu espíritu y renovar tu vida.</p>
                    </div>
                </div>
                <div class="sermon-item" data-title="Fundamentos de la Fe" data-speaker="Pastora Maria Lopez" data-series="Creencias Centrales" data-id="spanishVideo2">
                    <img src="https://via.placeholder.com/280x160/7A287A/FFFFFF?text=Sermon+Español+2" alt="Spanish Sermon Thumbnail">
                    <div class="sermon-item-details">
                        <h3>Fundamentos de la Fe</h3>
                        <p>Una exploración profunda de los principios básicos de la fe cristiana.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2023 Maranatha Life Changing Church. All rights reserved.</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sermonSearch = document.getElementById('sermonSearch');
            const sermonSuggestions = document.getElementById('sermonSuggestions');
            const mainSermonVideo = document.getElementById('mainSermonVideo');
            const mainSermonTitle = document.getElementById('mainSermonTitle');
            const mainSermonDescription = document.getElementById('mainSermonDescription');
            const allSermonItems = document.querySelectorAll('.sermon-item');
            const readMoreBtn = mainSermonDescription.querySelector('.read-more-btn');
            const truncatedText = mainSermonDescription.querySelector('.truncated-text');
            const fullText = mainSermonDescription.querySelector('.full-text');

            // Initial full sermon data (for search and display)
            const fullSermonData = Array.from(allSermonItems).map(item => ({
                title: item.dataset.title,
                speaker: item.dataset.speaker,
                series: item.dataset.series,
                id: item.dataset.id,
                description: item.querySelector('p').textContent, // Use the initially visible description
                fullDescription: item.querySelector('p').textContent + ' (Full text example, expand this for real data)' // Placeholder for actual full text
            }));
            
            // --- Read More/Less Toggle Logic ---
            if (readMoreBtn && truncatedText && fullText) {
                // Store initial content to handle toggling
                mainSermonDescription.dataset.truncated = truncatedText.textContent;
                mainSermonDescription.dataset.full = fullText.textContent;

                readMoreBtn.addEventListener('click', function() {
                    if (fullText.style.display === 'none') {
                        truncatedText.style.display = 'none';
                        fullText.style.display = 'inline';
                        readMoreBtn.textContent = 'Read Less';
                    } else {
                        truncatedText.style.display = 'inline';
                        fullText.style.display = 'none';
                        readMoreBtn.textContent = 'Read More';
                    }
                });
            }


            // --- Search Functionality ---
            sermonSearch.addEventListener('input', function() {
                const query = this.value.toLowerCase();
                sermonSuggestions.innerHTML = ''; // Clear previous suggestions

                if (query.length > 2) { // Start suggesting after 2 characters
                    const filteredSermons = fullSermonData.filter(sermon =>
                        sermon.title.toLowerCase().includes(query) ||
                        sermon.speaker.toLowerCase().includes(query) ||
                        sermon.series.toLowerCase().includes(query)
                    );

                    if (filteredSermons.length > 0) {
                        filteredSermons.forEach(sermon => {
                            const li = document.createElement('li');
                            li.classList.add('suggestion-item');
                            // Placeholder for real image if available
                            li.innerHTML = `<img src="https://via.placeholder.com/48x36/eee/bbb?text=Vid" alt="Video Thumbnail"><span>${sermon.title} - ${sermon.speaker}</span>`;
                            li.dataset.id = sermon.id; // Store video ID
                            li.dataset.title = sermon.title;
                            li.dataset.description = sermon.description;
                            li.dataset.fullDescription = sermon.fullDescription; // Pass full description
                            li.addEventListener('click', () => {
                                loadMainSermon(sermon.id, sermon.title, sermon.description, sermon.fullDescription);
                                sermonSearch.value = ''; // Clear search bar
                                sermonSuggestions.style.display = 'none'; // Hide suggestions
                            });
                            sermonSuggestions.appendChild(li);
                        });
                        sermonSuggestions.style.display = 'block';
                    } else {
                        sermonSuggestions.style.display = 'none';
                    }
                } else {
                    sermonSuggestions.style.display = 'none';
                }
            });

            // Hide suggestions when clicking outside
            document.addEventListener('click', function(event) {
                if (!sermonSearch.contains(event.target) && !sermonSuggestions.contains(event.target)) {
                    sermonSuggestions.style.display = 'none';
                }
            });

            // --- Load Main Sermon Player ---
            function loadMainSermon(videoId, title, description, fullDesc) {
                mainSermonVideo.src = `https://www.youtube.com/embed/${videoId}?si=abcdefg`;
                mainSermonTitle.textContent = title;
                
                // Reset description state to truncated
                truncatedText.textContent = description;
                fullText.textContent = fullDesc;
                truncatedText.style.display = 'inline';
                fullText.style.display = 'none';
                readMoreBtn.textContent = 'Read More';
            }

            // Load sermon into main player when clicked from list
            allSermonItems.forEach(item => {
                item.addEventListener('click', function() {
                    const videoId = this.dataset.id;
                    const title = this.dataset.title;
                    const description = this.dataset.description;
                    // For demo, we'll use a slightly longer version for 'fullDescription'
                    const fullDescription = this.dataset.fullDescription || (description + ' (This is the expanded content for ' + title + ').');
                    loadMainSermon(videoId, title, description, fullDescription);
                });
            });

            // --- Language Switcher Logic ---
            const langButtons = document.querySelectorAll('.track-switch-button');
            const englishSermons = document.getElementById('englishSermons');
            const spanishSermons = document.getElementById('spanishSermons');

            langButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove 'active' class from all buttons
                    langButtons.forEach(btn => btn.classList.remove('active'));
                    // Add 'active' class to the clicked button
                    this.classList.add('active');

                    // Show/hide sermon lists based on data-lang attribute
                    if (this.dataset.lang === 'english') {
                        englishSermons.style.display = 'block';
                        spanishSermons.style.display = 'none';
                    } else if (this.dataset.lang === 'spanish') {
                        englishSermons.style.display = 'none';
                        spanishSermons.style.display = 'block';
                    }
                });
            });

            // Initial load: ensure English sermons are visible and button is active
            document.querySelector('.track-switch-button[data-lang="english"]').click();
        });
    </script>
</body>
</html>/* End custom CSS */