<!--##################################################################
    EVERYDAY SAINTS
    MASTER APPLICATION FILE

    Version:
    V9.5 - Unified Feed and Search Preparation

    Purpose:
    Content aggregation and discovery platform for
    Latter-day Saint content.

    Philosophy:
    The code is organized for long-term maintenance.
    Every major feature has a designated location.
    Working systems are documented according to their current
    behavior rather than their original development version.
##################################################################

====================================================================
00. PROJECT DOCUMENTATION
====================================================================

TABLE OF CONTENTS
====================================================================

00. Project Documentation
    00.1 Purpose
    00.2 Development Status
    00.3 Roadmap

01. Document Setup
    01.1 HTML Declaration
    01.2 Head Information

02. CSS Styling
    02.1 Theme Variables
    02.2 Base Page Styling
    02.3 Header Styling
    02.4 Navigation Styling
    02.5 Feed Styling
    02.6 Load More Styling
    02.7 Advertisement Styling
    02.8 Responsive Design

03. HTML Body Structure
    03.1 Header
    03.2 Navigation
    03.3 Advertisement Containers
    03.4 Feed Container

04. JavaScript Configuration
    04.1 Global Variables
    04.2 RSS Source List

05. Logo System
    05.1 Rotate Logo
    05.2 Initialize Logo System

06. RSS Feed Retrieval
    06.1 Clean RSS Text
    06.2 Detect Feed Type
    06.3 YouTube Thumbnail Fallback
    06.4 Fetch Individual Feed

07. Feed Processing
    07.1 Feed State
    07.2 Load All Feeds

08. Feed Card Rendering
    08.1 Escape Display Text
    08.2 Format Publication Date
    08.3 Automatic Tag Rules
    08.4 Generate Automatic Tags
    08.5 Source Type Display
    08.6 Render Single Feed Card
    08.7 Render Initial Feed
    08.8 Render Article Batch
    08.9 Load More Control

09. Load More / Progressive Feed

10. Search System

11. Category and Tag System

12. Advertisement System

13. User Submission System

14. Admin Review Tools

15. Utility Functions

16. Debugging Tools

17. Application Initialization

====================================================================
00.1 PURPOSE
====================================================================

Everyday Saints is designed as a content aggregation and discovery
platform for Latter-day Saint content.

Current focus:

- Gather content from approved sources.
- Standardize content from different feed types.
- Display newest content first.
- Present content through a unified feed-card system.
- Provide summaries, source identification, and automatic tags.
- Provide a smooth user-controlled progressive feed experience.
- Establish controlled advertisement placement.
- Prepare the feed architecture for search and filtering.
- Expand beyond the initial YouTube source set.

Long-term focus:

- Search and interactive tag filtering.
- External source registry.
- Additional YouTube, blog, and podcast sources.
- Source and topic filtering.
- Improved feed retrieval and caching.
- Full advertising integration.
- User submissions and administrative review tools.

====================================================================
00.2 DEVELOPMENT STATUS
====================================================================

IMPLEMENTED:

✔ Basic page structure
✔ Fixed responsive header
✔ Fixed responsive navigation
✔ Rotating Christus and temple branding
✔ RSS feed retrieval through RSS2JSON
✔ Standardized feed-item structure
✔ Multi-source feed aggregation
✔ Newest-first feed sorting
✔ Unified feed-card system
✔ Source-type identification
✔ Feed thumbnails
✔ Feed summaries
✔ Publication-date display
✔ Automatic topic-tag generation
✔ Progressive feed loading
✔ 30-item feed batches
✔ LOAD MORE control
✔ Advertisement placeholders
✔ In-feed advertisement placement
✔ Responsive desktop, portrait, and landscape layouts

CURRENT:

► Search system implementation
► Interactive tag filtering
► Navigation functionality
► External source-registry preparation
► Additional source integration
► Feed and responsive presentation refinement
► Advertisement system development
► Code organization and documentation

PLANNED:

□ External source registry
□ Additional YouTube sources
□ Blog feed integration
□ Podcast feed integration
□ Expanded automatic tagging
□ Source and topic filtering
□ Cloudflare Worker/API feed retrieval
□ Google AdSense integration
□ User submission system
□ Administrative review tools

====================================================================
00.3 ROADMAP
====================================================================

IMMEDIATE:

□ Implement search across titles, sources, summaries, and tags
□ Make feed tags interactive
□ Connect primary navigation
□ Complete V9.1 search and navigation functionality

NEXT:

□ Move source configuration to external registry
□ Expand approved content sources
□ Add blog and podcast feeds
□ Expand filtering and topic organization
□ Refine responsive feed behavior

LATER:

□ Replace RSS2JSON with controlled Cloudflare Worker/API
□ Integrate production advertising
□ Add user submissions
□ Add administrative review workflow
□ Expand platform features as content and usage grow

====================================================================
END PROJECT DOCUMENTATION
====================================================================
-->


<!--
====================================================================
01. DOCUMENT SETUP
====================================================================

01.1 HTML DECLARATION
====================================================================
-->

<!DOCTYPE html>
<html lang="en">

<head>

<!--
====================================================================
01.2 HEAD INFORMATION
====================================================================

Purpose:
Defines document metadata and initializes the HTML head.

Current Components:
- Character encoding (UTF-8)
- Responsive viewport
- Browser page title
- Beginning of embedded CSS

Future Considerations:
- Favicon
- SEO metadata
- Open Graph metadata
- External CSS stylesheet(s), if adopted
- External JavaScript file(s), if adopted

====================================================================
-->

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Everyday Saints</title>

<style>

/*##################################################################
    02. CSS STYLING
##################################################################*/

/*==================================================================
    02.1 THEME VARIABLES
====================================================================

Purpose:

Central location for colors and visual design choices.

Future:

- Additional themes.
- User customization.

==================================================================*/

:root {
  --bg: #f5f3ef;
  --header: #1c2a3a;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --accent: #3f5f7a;
  --border: rgba(0,0,0,0.08);
}


/*==================================================================
    02.2 BASE PAGE STYLING
====================================================================
Purpose:
Defines the default appearance of the page.
==================================================================*/
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/*==================================================================
    02.3 HEADER STYLING
====================================================================
V7.6.2 - Three Equal Header Fields
==================================================================*/

.site-header {
  padding-top: 175px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 175px;
  min-height: 175px;
  background: var(--header);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  box-sizing: border-box;
}

.brand {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}

.brand-word {
  position: static;
  transform: none;
  width: 100%;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

.brand-everyday {
  grid-column: 1;
  text-align: right;
  padding-right: 75px;
  box-sizing: border-box;
  transform: translateX(-20px) scaleX(0.97);
  transform-origin: right center;  
}

.brand-saints {
  grid-column: 3;
  text-align: left;
  padding-left: 40px;
  box-sizing: border-box;
  letter-spacing: 12px;
  transform: scaleX(1.08);
  transform-origin: left center;
}

.logo {
  grid-column: 2;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  border-radius: 5px;
}
/*==================================================================
    02.4 NAVIGATION STYLING
====================================================================
V9.5 - Primary Navigation and Search Field

Current:
- Fixed navigation field below the branding header.
- Functional page links.
- Topics control.
- Integrated search input.
- Version display.
==================================================================*/

nav {
  position: fixed;
  top: 175px;
  left: 0;
  right: 0;

  height: 56px;

  background: var(--header);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  font-size: 16px;

  opacity: 0.9;

  box-sizing: border-box;

  z-index: 999;
}


/*==================================================================
    NAVIGATION LINKS
==================================================================*/

nav a,
.nav-button {
  display: inline-flex;

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

  padding: 7px 9px;

  border: 0;
  border-radius: 4px;

  background: transparent;

  color: white;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;
}

nav a:visited {
  color: white;
}

nav a:hover,
.nav-button:hover {
  background: rgba(255,255,255,0.08);
}

nav a:active,
.nav-button:active {
  background: rgba(255,255,255,0.14);
}


/*==================================================================
    NAVIGATION SEARCH
==================================================================*/

.nav-search {
  display: flex;

  align-items: center;

  width: 190px;
}

#searchInput {
  width: 100%;
  height: 32px;

  padding: 5px 10px;

  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 5px;

  background: rgba(255,255,255,0.12);

  color: white;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;

  box-sizing: border-box;

  outline: none;
}

#searchInput::placeholder {
  color: rgba(255,255,255,0.75);
}

#searchInput:focus {
  border-color: rgba(255,255,255,0.85);

  background: rgba(255,255,255,0.18);
}


/*==================================================================
    VERSION DISPLAY
==================================================================*/

.controls {
  font-size: 14px;

  opacity: 0.75;

  margin-left: 10px;

  white-space: nowrap;
}

/*==================================================================
    02.5 FEED STYLING
====================================================================
V9 - Unified Feed Cards

Current:
- Unified card layout for YouTube, blog, and podcast content.
- Thumbnail/media area on the left for desktop.
- Source icon and source name above the title.
- Summary appears only when available.
- Automatically generated tags display beneath the summary.
- Publication date and duration appear in the footer when available.
- OPEN button remains the deliberate source-opening action.
- Missing fields collapse cleanly without placeholder text.

Future:
- Additional source-specific refinements.
- V10 interactive search and tag behavior.
==================================================================*/

main {
  max-width: 980px;
  margin: 100px auto 120px auto;
  padding: 0 16px;
}

#feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/*==================================================================
    CARD SHELL
==================================================================*/

.feed-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;

  padding: 16px;

  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);

  gap: 22px;

  align-items: stretch;

  box-shadow:
    0 3px 10px
    rgba(0, 0, 0, 0.08);
}


/*==================================================================
    THUMBNAIL
==================================================================*/

.feed-thumbnail-wrap {
  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 10px;

  background: #e8edf2;
}

.feed-item .thumbnail {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/*==================================================================
    CARD CONTENT
==================================================================*/

.feed-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


/*==================================================================
    SOURCE LINE
==================================================================*/

.source {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 6px;

  font-size: 13px;
  font-style: normal;
  font-weight: 700;

  color: var(--muted);
}

.source-icon {
  display: inline-flex;

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

  flex-shrink: 0;

  width: 26px;
  height: 22px;

  border-radius: 6px;

  font-size: 12px;
  font-weight: 700;
}

.source-icon-youtube {
  background: #e62117;
  color: white;
}

.source-icon-blog {
  background: #5d7fa3;
  color: white;
}

.source-icon-podcast {
  background: #76549a;
  color: white;
}

.source-icon-generic {
  background: #6c7885;
  color: white;
}

.source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*==================================================================
    TITLE
==================================================================*/

.title {
  margin: 0 0 8px 0;

  font-size: 20px;
  line-height: 1.2;

  font-weight: 700;

  color: var(--text);
}


/*==================================================================
    SUMMARY
==================================================================*/

.summary {
  margin: 0 0 12px 0;

  font-size: 14px;
  line-height: 1.45;

  color: var(--text);
}


/*==================================================================
    TAGS
==================================================================*/

.feed-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin: 0 0 14px 0;
}

.feed-tag {
  border: 0;

  border-radius: 999px;

  padding: 6px 11px;

  background: #dcecff;

  color: #314b67;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.feed-tag:hover {
  filter: brightness(0.97);
}

.feed-tag:active {
  transform: translateY(1px);
}


/*==================================================================
    CARD FOOTER
==================================================================*/

.feed-card-footer {
  margin-top: auto;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;
}


/*==================================================================
    META
==================================================================*/

.meta {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  color: var(--muted);
}

.meta-separator {
  opacity: 0.7;
}


/*==================================================================
    OPEN BUTTON
==================================================================*/

.open-button {
  display: inline-flex;

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

  gap: 5px;

  flex-shrink: 0;

  padding: 9px 15px;

  border: 1px solid var(--accent);
  border-radius: 7px;

  background: var(--accent);

  color: white;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.3px;

  text-decoration: none;
}

.open-external {
  font-size: 11px;
}

.open-button:visited {
  background: #6b4c8a;
  border-color: #6b4c8a;
}

.open-button:hover {
  background: #527895;
  border-color: #527895;
}

.open-button:active {
  background: #304b61;
  border-color: #304b61;
}

.open-button:visited:hover {
  background: #80609f;
  border-color: #80609f;
}

.open-button:visited:active {
  background: #54376f;
  border-color: #54376f;
}


/*==================================================================
    SOURCE-TYPE CARD HOOKS
==================================================================*/

.feed-item-youtube {
}

.feed-item-blog {
}

.feed-item-podcast {
}

.feed-item-generic {
}


/*==================================================================
    MOBILE
==================================================================*/

@media (max-width: 700px) {

  main {
    margin-top: 90px;
    padding: 0 12px;
  }

  #feed {
    gap: 14px;
  }

  .feed-item {
    grid-template-columns: 1fr;

    gap: 12px;

    padding: 12px;
  }

  .feed-thumbnail-wrap {
    width: 100%;
  }

  .title {
    font-size: 18px;
  }

  .summary {
    font-size: 14px;
  }

  .feed-card-footer {
    align-items: center;
  }

}


/*==================================================================
    VERY SMALL MOBILE
==================================================================*/

@media (max-width: 430px) {

  .feed-card-footer {
    align-items: flex-start;
  }

  .open-button {
    padding: 8px 12px;
  }

}


/*==================================================================
    02.6 LOAD MORE STYLING
====================================================================

V5:

Styles the LOAD MORE control used by the progressive feed.

Current:

- Centered below the available feed items.
- User-controlled loading of additional articles.

Future:

- Additional visual states.
- Loading indicator.
- End-of-feed message.

==================================================================*/

#loadMore {
  display: block;
  margin: 20px auto 10px auto;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  cursor: pointer;
}

#loadMore:hover {
  background: var(--bg);
}


/*==================================================================
    02.7 ADVERTISEMENT STYLING
====================================================================

Current:

Placeholder advertising locations.

Future:

- Google AdSense.
- In-feed advertisements.
- Advertisement rotation.

==================================================================*/

#ad-right {
  position: fixed;
  right: 0;
  top: 90px;
  width: 160px;
  height: 600px;
  background: rgba(0,0,0,0.03);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  z-index: 900;
}

#ad-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  z-index: 900;
}


/*==================================================================
    02.8 RESPONSIVE DESIGN
====================================================================
V7.6.3 - Responsive Fixed Header and Navigation
==================================================================*/

@media (max-width: 700px) {

  .site-header {
    padding-top: 150px;
  }

  header {
    height: 150px;
    min-height: 150px;
    padding: 8px 10px;
  }

  .brand {
    max-width: 700px;
    grid-template-columns: repeat(3, 1fr);
  }

  .brand-word {
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.5px;
  }

 .brand-everyday {
    padding-right: 10px;
    transform: none;
    text-align: right;
  }

  .brand-saints {
    padding-left: 10px;
    letter-spacing: 0.5px;
    transform: none;
    text-align: left;
  }

  .logo {
    width: 80px;
    height: 125px;
  }

  nav {
    top: 150px;
    height: 48px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  nav span {
    white-space: nowrap;
  }

  nav span:hover {
    padding: 4px 5px;
  }

  .controls {
    display: none;
  }

  main {
    margin: 20px auto 80px auto;
    padding: 0 10px;
  }

  #feed {
    gap: 10px;
  }

  .feed-item {
    padding: 12px 13px;
    border-radius: 8px;
  }

  .title {
    font-size: 15px;
  }

  .source {
    font-size: 12px;
  }

  #ad-right {
    display: none;
  }

  #ad-bottom {
    height: 50px;
  }
}


/*==================================================================
    PORTRAIT PHONE
==================================================================*/

@media (max-width: 480px) {

  .site-header {
    padding-top: 120px;
  }

  header {
    height: 120px;
    min-height: 120px;
    padding: 6px 6px;
  }

  .brand {
    max-width: 480px;
  }

  .brand-word {
    font-size: 24px;
    letter-spacing: 0.3px;
  }

 .brand-everyday {
    padding-right: 6px;
  }

  .brand-saints {
    padding-left: 6px;
    letter-spacing: 0.3px;
  }

  .logo {
    width: 58px;
    height: 96px;
  }

  nav {
    top: 120px;
    height: 44px;
    gap: 7px;
    font-size: 11px;
  }

  main {
    margin: 48px auto 70px auto;
    padding: 0 8px;
  }

  .feed-item {
    padding: 11px 12px;
  }

  .title {
    font-size: 14px;
  }
}

/*==================================================================
    V7.7 - MOBILE LANDSCAPE
==================================================================*/

@media (max-width: 900px) and (orientation: landscape) {

  .site-header {
    padding-top: 129px;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 87px;
    min-height: 87px;
    padding: 0 6px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .brand {
    width: 100%;
    max-width: 900px;
    height: 87px;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .brand-word {
    font-size: 34.5px;
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    white-space: nowrap;
  }

 .brand-everyday {
    padding-right: 10px;
    transform: none;
    text-align: right;
  }

  .brand-saints {
    padding-left: 10px;
    letter-spacing: 0.2px;
    transform: none;
    text-align: left;
  }

  .logo {
    width: 75px;
    height: 78px;
    justify-self: center;
    align-self: center;
  }

  .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  nav {
    position: fixed;
    top: 87px;
    left: 0;
    right: 0;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0;
    gap: 7px;
    font-size: 11px;
    box-sizing: border-box;
    overflow: hidden;
  }

  main {
    margin: 0 auto 70px auto;
    padding: 0 8px;
    padding-right: 108px;
  }

  #ad-right {
    display: flex;
    top: 129px;
    right: 0;
    width: 90px;
    height: 250px;
  }

  #ad-bottom {
    height: 50px;
  }
}

</style>
</head>
<body>


<!--##################################################################
    03. HTML BODY STRUCTURE
##################################################################-->

<!--==================================================================
    03.1 HEADER
====================================================================
V9.5 - Header and Primary Navigation Structure

Current:
- Three-element branding layout with EVERYDAY, Christus/temple logo,
  and SAINTS.
- Primary navigation is contained within the site-header structure.
- Logo artwork rotates through the current branding assets.
- Navigation provides direct page links and controls for feed
  discovery features.
==================================================================-->

<div class="site-header">

  <header>
    <div class="brand">

      <div class="brand-word brand-everyday">
        EVERYDAY
      </div>

      <div class="logo" id="logoBox">
        <img
          src="images/christus.png"
          alt="Everyday Saints"
        >
      </div>

      <div class="brand-word brand-saints">
        SAINTS
      </div>

    </div>
  </header>

  <nav>

    <a href="index.html">
      Home
    </a>

    <a href="index.html#feed">
      Feed
    </a>

    <button
      type="button"
      id="topicsButton"
      class="nav-button"
    >
      Topics
    </button>

    <a href="about.html">
      About
    </a>

    <div class="nav-search">
      <input
        type="search"
        id="searchInput"
        placeholder="Search"
        aria-label="Search Everyday Saints"
        autocomplete="off"
      >
    </div>

    <div class="controls">
      V9.5 • RSS Stream
    </div>

  </nav>

</div>

<!--==================================================================
    03.2 NAVIGATION
====================================================================

Purpose:

Documents the primary navigation and discovery controls.

Current:

Navigation is structurally contained within the site-header
structure defined in Section 03.1.

The navigation field contains:

- Home link.
- Feed link.
- Topics control.
- About link.
- Search input field.
- Version display.

Navigation behavior:

- Home opens the main Everyday Saints page.
- Feed opens the main page at the feed.
- Topics will provide interactive topic/tag filtering.
- About opens the About page.
- Search accepts text directly from the navigation field.
- Search will operate across titles, sources, summaries, and tags.

Additional supporting pages include:

- Sources directory.
- FAQ.
- What's Next.
- Privacy.
- Terms.

These supporting pages do not need to occupy the primary navigation
tray and may be linked through secondary navigation or footer areas.

Future:

- Complete Topics interaction.
- Complete search interaction.
- Additional navigation refinements as site features expand.

==================================================================-->


<!--==================================================================
    03.3 ADVERTISEMENT CONTAINERS
====================================================================

Current:

Placeholder advertisement containers.

Future:

- Google AdSense
- House advertisements
- Rotating advertisements
- Responsive advertisement layouts

==================================================================-->

<div id="ad-right">
  AD SPACE
</div>

<div id="ad-bottom">
  AD SPACE
</div>


<!--==================================================================
    03.4 FEED CONTAINER
====================================================================

Purpose:

Primary container for rendered RSS articles.

Current:

Displays feed items after JavaScript processing.

Future:

- Infinite scrolling
- Pagination
- In-feed advertisements
- Category filtering

==================================================================-->

<main>

  <div id="feed">
    Loading feed...
  </div>

</main>

<!--##################################################################
    04. JAVASCRIPT CONFIGURATION
##################################################################-->
<script>
//==================================================================
// 04.1 GLOBAL VARIABLES
//==================================================================
//
// Shared application variables.
//
// Current:
//
// Stores the available header logo options and the currently
// selected logo.
//
// The logo system supports the V7 alternating header treatment.
//
// Future:
//
// Additional application settings will be centralized here.
//
//==================================================================

const logos = [
  "images/christus.png",
  "images/temple.png"
];

let currentLogo =
  logos[Math.floor(Math.random() * logos.length)];


//==================================================================
// 04.2 RSS SOURCE LIST
//==================================================================
//
// Current:
//
// Stores approved YouTube RSS feed sources.
//
// The application retrieves new content from these sources
// and processes them through the feed system.
//
// Future:
//
// Move sources into external configuration.
//
// Add:
// - Source names
// - Channel descriptions
// - Categories
// - Source images
// - Source management tools
//
//==================================================================

const rssFeeds = [

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCh1W-CtmEfxf0bS_aChaKlw",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCFNi-bt0oFbPvWvv5UmmAVQ",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCCVNFLUX8St8pSF1-kStOGQ",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UC8kOn6wIHfSo3Kj7l7hHhiQ",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCwJySRiyFIE2w99_bHvfmRA",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCn5VMWkt48I4xZLqWZ8E0fw",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UC7gSP30IlaFEn6UQhBFSKZg",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCVFMSQbMVD4wyiDZsQrLZ5g",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCJJ4TYPZCKbZonuWVpA5XLg",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UC-3WFOCWkUFQcX_1W3NjqAQ",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCpumfWNEXE5YbL5QMjg5agA",

  "https://www.youtube.com/feeds/videos.xml?channel_id=UCnmsAFGrFuGe0obW6tkEY6w",

// ================================================================
  // END OF ORIGINAL 12 SOURCES
  // ================================================================

  // New sources added after V6.3.1:
 

];

//##################################################################
// 05. LOGO SYSTEM
//##################################################################
//
//
// Purpose:
//
// Provides the rotating visual identity system for the application.
//
// Current:
//
// - Random logo selected on page load.
// - Christus and temple artwork alternate as the logo.
// - Logo transition animation.
// - Automatic rotation every two minutes.
//
// Future:
//
// - Additional logo artwork.
// - Expanded visual identity system.
//
//##################################################################


//==================================================================
// 05.1 ROTATE LOGO
//==================================================================
//
// Purpose:
//
// Changes the currently displayed logo.
//
// Current:
//
// The initial logo is selected randomly when the page loads.
// After the initial selection, the logos alternate in sequence
// at the established rotation interval.
//
//==================================================================
function rotateLogo() {
  const box = document.getElementById("logoBox");

  currentLogo =
    currentLogo === logos[0]
      ? logos[1]
      : logos[0];

  box.style.opacity = 0;

  setTimeout(() => {
    box.innerHTML = `
      <img
        src="${currentLogo}"
        alt="Everyday Saints"
      >
    `;
    box.style.opacity = 1;
  }, 200);
}

//==================================================================
// 05.2 INITIALIZE LOGO SYSTEM
//==================================================================

//
// Purpose:
//
// Starts the logo system after the page loads.
//
// Current:
//
// - Sets the initial logo.
// - Makes the logo clickable.
// - Opens the current artwork in a new browser tab.
// - Starts the two-minute rotation timer.
//
//==================================================================
document.addEventListener("DOMContentLoaded", () => {

  const box = document.getElementById("logoBox");

  box.innerHTML = `
    <img
      src="${currentLogo}"
      alt="Everyday Saints"
    >
  `;

  box.addEventListener("click", () => {
    window.open(currentLogo, "_blank");
  });

  setInterval(
    rotateLogo,
    2 * 60 * 1000
  );

});


//##################################################################
// 06. RSS FEED RETRIEVAL
//##################################################################
//
// Current:
//
// Uses RSS2JSON to convert RSS XML into JSON.
//
// Each feed item is converted into a standardized Everyday Saints
// content object.
//
// Standard object may contain:
//
// - Type
// - Title
// - Link
// - Publication date
// - Source
// - Thumbnail
// - Summary
// - Categories
// - Duration
//
// Missing information is returned as an empty value rather than
// displaying placeholder text.
//
// Future:
//
// Replace RSS2JSON with a Cloudflare Worker/API.
// This will improve reliability, control, caching, and scalability.
//
//##################################################################


//==================================================================
// 06.1 CLEAN RSS TEXT
//==================================================================
//
// RSS descriptions frequently contain HTML.
//
// Converts HTML into plain readable text for cards and search.
//
//==================================================================
function cleanRSSText(value) {
  if (!value) {
    return "";
  }

  const doc = new DOMParser().parseFromString(value, "text/html");

  return (doc.body.textContent || "")
    .replace(/\s+/g, " ")
    .trim();
}


//==================================================================
// 06.2 DETECT FEED TYPE
//==================================================================
//
// Temporary type detection.
//
// Once feeds are loaded from the external Everyday Saints registry,
// the registry's TYPE field will become authoritative.
//
//==================================================================
function detectFeedType(url) {
  const value = (url || "").toLowerCase();

  if (
    value.includes("youtube.com") ||
    value.includes("youtu.be")
  ) {
    return "youtube";
  }

  return "unknown";
}


//==================================================================
// 06.3 YOUTUBE THUMBNAIL FALLBACK
//==================================================================
//
// YouTube RSS normally supplies thumbnail information through the
// feed conversion.
//
// If RSS2JSON does not return a thumbnail, attempt to construct one
// from the YouTube video ID contained in the item link.
//
//==================================================================
function getYouTubeThumbnail(link) {
  if (!link) {
    return "";
  }

  try {
    const parsed = new URL(link);

    let videoID = "";

    if (parsed.hostname.includes("youtu.be")) {
      videoID = parsed.pathname.replace("/", "");
    }

    if (parsed.hostname.includes("youtube.com")) {
      videoID = parsed.searchParams.get("v") || "";
    }

    if (!videoID) {
      return "";
    }

    return `https://i.ytimg.com/vi/${videoID}/hqdefault.jpg`;

  } catch (e) {
    return "";
  }
}


//==================================================================
// 06.4 FETCH INDIVIDUAL FEED
//==================================================================
//
// Input:
//
// RSS URL
//
// Output:
//
// Standard Everyday Saints content object.
//
// Thumbnail:
//
// Uses the thumbnail supplied by RSS2JSON when available.
//
// For YouTube, attempts to create the thumbnail URL from the video
// ID if RSS2JSON does not supply one.
//
// Summary:
//
// Uses description when available.
// Falls back to content.
// HTML is removed.
//
// Categories:
//
// Preserves categories supplied by RSS2JSON when available.
// These may contribute to automatic tagging and future filtering.
//
// Duration:
//
// Reserved now so every content object has the same structure.
// RSS2JSON does not reliably provide YouTube duration, so it remains
// blank unless duration data becomes available from another source.
//
//==================================================================
async function fetchFeed(url) {
  try {

    const res = await fetch(
      "https://api.rss2json.com/v1/api.json?rss_url=" +
      encodeURIComponent(url)
    );

    const data = await res.json();

    if (!data.items) {
      return [];
    }

    const channelName =
      data.feed?.title ||
      "RSS FEED ERROR";

    const feedType = detectFeedType(url);

    return data.items.map(item => {

      let thumbnail =
        item.thumbnail ||
        item.enclosure?.link ||
        "";

      if (
        !thumbnail &&
        feedType === "youtube"
      ) {
        thumbnail =
          getYouTubeThumbnail(item.link);
      }

      const summary = cleanRSSText(
        item.description ||
        item.content ||
        ""
      );

      const categories =
        Array.isArray(item.categories)
          ? item.categories
          : [];

      return {
        type: feedType,

        title:
          cleanRSSText(item.title || ""),

        link:
          item.link || "",

        pubDate:
          item.pubDate || "",

        source:
          channelName,

        thumbnail:
          thumbnail,

        summary:
          summary,

        categories:
          categories,

        duration:
          ""
      };

    });

  } catch (e) {

    console.error(
      "Everyday Saints feed retrieval failed:",
      url,
      e
    );

    return [];
  }
}


//##################################################################
// 07. FEED PROCESSING
//##################################################################
//
// STATUS:
// V10 - Feed Processing / Search Integration
//
// Current:
//
// - Retrieves all configured RSS feeds.
// - Combines all returned feed items.
// - Sorts newest first.
// - Preserves all standardized data supplied by Section 06.
// - Stores the complete sorted feed set.
// - Maintains an active feed set for Search and filtering.
// - Controls the number of items initially displayed.
//
// Feed Architecture:
//
// allFeedItems:
//
// Stores the complete processed feed.
// This remains the master feed collection.
//
// activeFeedItems:
//
// Stores the collection currently available for display.
//
// During normal browsing:
//
// activeFeedItems contains the complete feed.
//
// During Search:
//
// activeFeedItems will contain only matching feed items.
//
// Future:
//
// - Load feed sources from external JSON registry.
// - Tag and Topic filtering.
// - Additional feed controls.
//
//##################################################################


//==================================================================
// 07.1 FEED STATE
//==================================================================
//
// Stores:
//
// - Complete processed feed.
// - Active display feed.
// - Number of items currently displayed.
//
// allFeedItems:
//
// The complete sorted collection of retrieved feed items.
//
// activeFeedItems:
//
// The collection currently available for display.
//
// Initially this is a copy of allFeedItems.
//
// Search and future filtering systems may replace its contents
// without modifying the complete allFeedItems collection.
//
// displayedCount:
//
// Controls progressive feed display in batches of 30.
//
//==================================================================
let allFeedItems = [];
let activeFeedItems = [];
let displayedCount = 30;


//==================================================================
// 07.2 LOAD ALL FEEDS
//==================================================================
//
// Retrieves the unified ES feed from the server-side feed engine.
//
// The feed engine:
//
// 1. Reads the external source registry.
// 2. Retrieves current YouTube uploads.
// 3. Standardizes source and video data.
// 4. Adds video durations.
// 5. Combines all returned items.
// 6. Sorts them newest first.
//
// Section 07:
//
// 1. Retrieves the completed unified feed.
// 2. Stores the complete result in allFeedItems.
// 3. Establishes the complete feed as activeFeedItems.
// 4. Resets the displayed item count to 30.
// 5. Sends the first 30 active items to Section 08.
//
// Search will later replace activeFeedItems with matching results
// while preserving allFeedItems as the complete master feed.
//
//==================================================================
async function loadFeed() {

  const feed =
    document.getElementById("feed");

  try {

    const response =
      await fetch("/feed");

    if (!response.ok) {
      throw new Error(
        "Could not retrieve ES feed."
      );
    }

    const data =
      await response.json();

    if (!data.success) {
      throw new Error(
        data.error ||
        "ES feed returned an error."
      );
    }

    allFeedItems =
      (data.videos || [])
        .sort((a, b) =>
          new Date(b.published) -
          new Date(a.published)
        );

    activeFeedItems =
      [...allFeedItems];

    displayedCount = 30;

    renderFeed(
      activeFeedItems.slice(
        0,
        displayedCount
      )
    );

  } catch (error) {

    console.error(
      "Feed loading error:",
      error
    );

    if (feed) {
      feed.innerHTML =
        "<p>Unable to load the feed.</p>";
    }
  }
}

//##################################################################
// 08. FEED CARD RENDERING
//##################################################################
//
//  Unified Feed Card System
//
// Current:
//
// - Renders standardized Everyday Saints feed cards.
// - Supports source-type identification.
// - Displays thumbnails when available.
// - Displays summaries only when available.
// - Generates tags automatically from feed-item content.
// - Displays publication date when available.
// - Displays duration when available.
// - Displays an OPEN control for the original source.
// - Missing fields are simply omitted.
// - Each feed batch contains 30 items.
// - An advertisement placeholder is inserted after item 15
//   and before item 16 of each batch.
// - Additional items are appended through LOAD MORE.
//
// Future:
//
// - Blog-specific refinements.
// - Podcast-specific refinements.
// - Expanded automatic tagging.
//
//##################################################################


//==================================================================
// 08.1 ESCAPE DISPLAY TEXT
//==================================================================
//
// Prevents text retrieved from external feeds from being interpreted
// as page HTML.
//
//==================================================================
function escapeHTML(value) {
  return String(value || "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}


//==================================================================
// 08.2 FORMAT PUBLICATION DATE
//==================================================================
//
// Converts feed dates into a cleaner Everyday Saints display date.
//
// Example:
//
// Sep 10, 2026
//
//==================================================================
function formatFeedDate(value) {

  if (!value) {
    return "";
  }

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return date.toLocaleDateString(
    "en-US",
    {
      month: "short",
      day: "numeric",
      year: "numeric"
    }
  );
}


//==================================================================
// 08.3 AUTOMATIC TAG RULES
//==================================================================
//
// Tags are generated automatically.
//
// No tags need to be manually entered into the feed registry.
//
// Tag rules can be expanded and refined as search and filtering
// features develop.
//
//==================================================================
const ES_TAG_RULES = [

  {
    tag: "Book of Mormon",
    pattern: /\bbook of mormon\b/i
  },

  {
    tag: "Bible",
    pattern: /\bbible\b/i
  },

  {
    tag: "Jesus Christ",
    pattern: /\bjesus\b|\bjesus christ\b|\bchrist\b/i
  },

  {
    tag: "Faith",
    pattern: /\bfaith\b/i
  },

  {
    tag: "Prayer",
    pattern: /\bprayer\b|\bpray\b|\bpraying\b/i
  },

  {
    tag: "Scripture",
    pattern: /\bscripture\b|\bscriptures\b/i
  },

  {
    tag: "Temple",
    pattern: /\btemple\b|\btemples\b/i
  },

  {
    tag: "Discipleship",
    pattern: /\bdisciple\b|\bdisciples\b|\bdiscipleship\b/i
  },

  {
    tag: "Restoration",
    pattern: /\brestoration\b/i
  },

  {
    tag: "Joseph Smith",
    pattern: /\bjoseph smith\b/i
  },

  {
    tag: "Church History",
    pattern: /\bchurch history\b/i
  },

  {
    tag: "General Conference",
    pattern: /\bgeneral conference\b|\bconference talk\b/i
  },

  {
    tag: "Missionary Work",
    pattern: /\bmissionary\b|\bmissionaries\b|\bmission\b/i
  },

  {
    tag: "Revelation",
    pattern: /\brevelation\b|\brevelations\b/i
  },

  {
    tag: "Prophets",
    pattern: /\bprophet\b|\bprophets\b/i
  },

  {
    tag: "Atonement",
    pattern: /\batonement\b/i
  },

  {
    tag: "Resurrection",
    pattern: /\bresurrection\b|\bresurrected\b/i
  },

  {
    tag: "Salvation",
    pattern: /\bsalvation\b|\bsaved\b/i
  },

  {
    tag: "Grace",
    pattern: /\bgrace\b/i
  },

  {
    tag: "Priesthood",
    pattern: /\bpriesthood\b/i
  },

  {
    tag: "Covenants",
    pattern: /\bcovenant\b|\bcovenants\b/i
  },

  {
    tag: "Family",
    pattern: /\bfamily\b|\bfamilies\b/i
  },

  {
    tag: "Church",
    pattern: /\bchurch\b/i
  }

];


//==================================================================
// 08.4 GENERATE AUTOMATIC TAGS
//==================================================================
//
// Uses:
//
// - Title
// - Summary
// - RSS categories
//
// Maximum:
//
// Six displayed tags per feed item.
//
//==================================================================
function generateFeedTags(item) {

  const categoryText =
    Array.isArray(item.categories)
      ? item.categories.join(" ")
      : "";

  const searchableText = [
    item.title || "",
    item.summary || "",
    categoryText
  ].join(" ");

  const tags = ES_TAG_RULES
    .filter(rule =>
      rule.pattern.test(searchableText)
    )
    .map(rule =>
      rule.tag
    );

  return [...new Set(tags)]
    .slice(0, 6);
}


//==================================================================
// 08.5 SOURCE TYPE DISPLAY
//==================================================================
//
// Returns the source icon/class information used by feed cards.
//
// Blog and podcast support is included now so the card structure
// will not need to be rebuilt when those feeds are added.
//
//==================================================================
function getSourceDisplay(type) {

  switch (type) {

    case "youtube":
      return {
        icon: "▶",
        className: "youtube"
      };

    case "blog":
      return {
        icon: "▤",
        className: "blog"
      };

    case "podcast":
      return {
        icon: "◉",
        className: "podcast"
      };

    default:
      return {
        icon: "•",
        className: "generic"
      };
  }
}


//==================================================================
// 08.6 RENDER SINGLE FEED CARD
//==================================================================
//
// Same basic card structure for all content types.
//
// Uses the standardized data supplied by the ES feed engine.
//
// Missing information is omitted rather than replaced with
// placeholder text.
//
//==================================================================
function renderFeedCard(item) {

  const tags =
    generateFeedTags(item);

  const sourceDisplay =
    getSourceDisplay(item.type);

  const formattedDate =
    formatFeedDate(item.published);

  const metaParts = [];

  if (formattedDate) {
    metaParts.push(formattedDate);
  }

  if (item.duration) {
    metaParts.push(
      escapeHTML(item.duration)
    );
  }

  const thumbnailHTML =
    item.thumbnail
      ? `
        <div class="feed-thumbnail-wrap">
          <img
            class="thumbnail"
            src="${escapeHTML(item.thumbnail)}"
            alt=""
            loading="lazy"
          >
        </div>
      `
      : "";

  const summaryHTML =
    item.description
      ? `
        <div class="summary">
          ${escapeHTML(item.description)}
        </div>
      `
      : "";

  const tagsHTML =
    tags.length
      ? `
        <div class="feed-tags">
          ${tags.map(tag => `
            <button
              type="button"
              class="feed-tag"
              data-tag="${escapeHTML(tag)}"
            >
              ${escapeHTML(tag)}
            </button>
          `).join("")}
        </div>
      `
      : "";

  const metaHTML =
    metaParts.length
      ? `
        <div class="meta">
          ${metaParts.join(
            '<span class="meta-separator">•</span>'
          )}
        </div>
      `
      : "";

  return `
    <article
      class="
        feed-item
        feed-item-${sourceDisplay.className}
      "
    >

      ${thumbnailHTML}

      <div class="feed-content">

        <div class="source">

          <span
            class="
              source-icon
              source-icon-${sourceDisplay.className}
            "
            aria-hidden="true"
          >
            ${sourceDisplay.icon}
          </span>

          <span class="source-name">
            ${escapeHTML(item.source)}
          </span>

        </div>

        <div class="title">
          ${escapeHTML(item.title)}
        </div>

        ${summaryHTML}

        ${tagsHTML}

        <div class="feed-card-footer">

          ${metaHTML}

          <a
            class="open-button"
            href="${escapeHTML(item.url)}"
            target="_blank"
            rel="noopener noreferrer"
          >
            OPEN
            <span
              class="open-external"
              aria-hidden="true"
            >
              ↗
            </span>
          </a>

        </div>

      </div>

    </article>
  `;
}


//==================================================================
// 08.7 RENDER INITIAL FEED
//==================================================================
//
// Displays the first feed batch.
//
// If additional feed items remain, initializes the LOAD MORE
// control after the rendered batch.
//
//==================================================================
function renderFeed(items) {

  const feed =
    document.getElementById("feed");

  if (!items.length) {

    feed.innerHTML = `
      <div class="feed-item">
        <div class="feed-content">

          <div class="source">
            RSS FEED ERROR
          </div>

          <div class="title">
            Unable to load feed items.
          </div>

        </div>
      </div>
    `;

    return;
  }

  feed.innerHTML =
    renderArticleBatch(items);

  renderLoadMore();
}


//==================================================================
// 08.8 RENDER ARTICLE BATCH
//==================================================================
//
// Renders a feed-item batch.
//
// Inserts an advertisement placeholder between items 15 and 16
// when the batch contains enough items.
//
//==================================================================
function renderArticleBatch(items) {

  return items.map(
    (item, index) => `

      ${index === 15 ? `
        <div class="in-feed-ad">
          AD SPACE
        </div>
      ` : ""}

      ${renderFeedCard(item)}

    `
  ).join("");
}


//==================================================================
// 08.9 LOAD MORE CONTROL
//==================================================================
//
// Each selection reveals the next 30 active feed items.
//
// activeFeedItems represents the feed collection currently
// available for display.
//
// During normal browsing:
//
// activeFeedItems contains the complete feed.
//
// During Search:
//
// activeFeedItems will contain only matching feed items.
//
// Each 30-item batch contains an advertisement placeholder
// between items 15 and 16.
//
// Existing feed content remains visible.
//
//==================================================================
function renderLoadMore() {

  const existingButton =
    document.getElementById("loadMore");

  if (existingButton) {
    existingButton.remove();
  }

  if (
    displayedCount >=
    activeFeedItems.length
  ) {
    return;
  }

  const feed =
    document.getElementById("feed");

  const button =
    document.createElement("button");

  button.id =
    "loadMore";

  button.textContent =
    "LOAD MORE";

  button.addEventListener(
    "click",
    () => {

      const previousCount =
        displayedCount;

      displayedCount += 30;

      const newItems =
        activeFeedItems.slice(
          previousCount,
          displayedCount
        );

      feed.insertAdjacentHTML(
        "beforeend",
        renderArticleBatch(newItems)
      );

      renderLoadMore();
    }
  );

  feed.appendChild(button);
}


//##################################################################
// 09. LOAD MORE / PROGRESSIVE FEED
//##################################################################
//
// Purpose:
//
// Allow users to continue browsing the aggregated feed without
// traditional page-by-page navigation or automatic infinite scroll.
//
// Current:
//
// - Initial feed displays 30 items.
// - Additional batches contain 30 items.
// - Each batch places an advertisement placeholder between
//   items 15 and 16.
// - Additional items are appended to the existing feed.
// - The complete sorted feed-item set remains available in memory.
//
// Feed behavior:
//
// - No numbered pages.
// - No automatic infinite scrolling.
// - User controls when additional content is loaded.
// - LOAD MORE reveals the next batch without replacing existing
//   feed content.
//
// Advertisement behavior:
//
// - One advertisement placeholder is inserted per 30-item batch.
// - Placement occurs after item 15 and before item 16.
//
// Future:
//
// - Improved retrieval and caching through the Cloudflare
//   Worker/API.
// - Optional visible end-of-feed message.
//
//##################################################################


//##################################################################
// 10. SEARCH SYSTEM
//##################################################################
//
// STATUS:
// V10 - Search / Active Feed Integration
//
// Purpose:
//
// Allows users to search the complete aggregated feed.
//
// Current:
//
// - Uses the existing navigation Search input.
// - Searches the complete allFeedItems collection.
// - Searches:
//
//   - Feed-item title.
//   - Source name.
//   - Summary text.
//   - Automatically generated tags.
//
// - Search is case-insensitive.
// - Results update as the user types.
// - Search results use the same 30-item progressive display
//   system as the normal feed.
// - Clearing Search restores the complete active feed.
//
// Feed Architecture:
//
// allFeedItems:
//
// The complete master feed collection.
//
// activeFeedItems:
//
// The collection currently available for display.
//
// During normal browsing:
//
// activeFeedItems contains the complete feed.
//
// During Search:
//
// activeFeedItems contains only matching feed items.
//
// displayedCount:
//
// Controls how many active feed items are currently displayed.
//
//##################################################################


//==================================================================
// 10.1 SEARCH STATE
//==================================================================
//
// Stores the current normalized Search query.
//
//==================================================================
let searchQuery = "";


//==================================================================
// 10.2 BUILD SEARCHABLE TEXT
//==================================================================
//
// Creates one searchable text string for a feed item.
//
// Search includes:
//
// - Title.
// - Source.
// - Summary.
// - Automatically generated tags.
//
//==================================================================
function getSearchableFeedText(item) {

  const tags =
    generateFeedTags(item);

  return [
    item.title || "",
    item.source || "",
    item.summary || "",
    ...tags
  ]
    .join(" ")
    .toLowerCase();
}


//==================================================================
// 10.3 FIND SEARCH RESULTS
//==================================================================
//
// Searches the complete allFeedItems collection.
//
// Search always begins with the complete master feed rather than
// the currently active or displayed feed.
//
// An empty query returns the complete feed.
//
//==================================================================
function getSearchResults(query) {

  const normalizedQuery =
    String(query || "")
      .trim()
      .toLowerCase();

  if (!normalizedQuery) {
    return [...allFeedItems];
  }

  return allFeedItems.filter(item =>
    getSearchableFeedText(item)
      .includes(normalizedQuery)
  );
}


//==================================================================
// 10.4 APPLY SEARCH
//==================================================================
//
// Applies the current Search query to the complete master feed.
//
// Matching items become the active feed.
//
// Each new Search:
//
// - Rebuilds activeFeedItems from allFeedItems.
// - Resets progressive display to 30 items.
// - Displays the first 30 matching items.
// - Uses the existing LOAD MORE control when more than 30
//   matching items are available.
//
// Clearing Search:
//
// - Restores allFeedItems as the active feed.
// - Resets the display to the first 30 items.
// - Restores normal LOAD MORE behavior.
//
//==================================================================
function applySearch() {

  const feed =
    document.getElementById("feed");

  activeFeedItems =
    getSearchResults(searchQuery);

  displayedCount = 30;

  if (!activeFeedItems.length) {

    const existingButton =
      document.getElementById("loadMore");

    if (existingButton) {
      existingButton.remove();
    }

    feed.innerHTML = `
      <div class="feed-item">
        <div class="feed-content">

          <div class="source">
            SEARCH
          </div>

          <div class="title">
            No matching feed items found.
          </div>

        </div>
      </div>
    `;

    return;
  }

  renderFeed(
    activeFeedItems.slice(
      0,
      displayedCount
    )
  );
}


//==================================================================
// 10.5 SEARCH INPUT CONTROL
//==================================================================
//
// Watches the existing navigation Search field.
//
// Search results update immediately as the user types.
//
// Each Search operates on allFeedItems and sends its results into
// activeFeedItems.
//
// Clearing the Search field restores the complete feed.
//
//==================================================================
const searchInput =
  document.getElementById("searchInput");

if (searchInput) {

  searchInput.addEventListener(
    "input",
    event => {

      searchQuery =
        event.target.value
          .trim()
          .toLowerCase();

      applySearch();
    }
  );
}


//##################################################################
// 11. CATEGORY AND TAG SYSTEM
//##################################################################
//
// Purpose:
//
// Provides organizational tools for grouping and filtering content
// across the Everyday Saints platform.
//
// Current:
//
// - Automatic topic tags are generated from feed-item content.
// - Tag generation uses titles, summaries, and RSS categories.
// - Up to six tags may be displayed on each feed card.
//
// Planned behavior:
//
// - Tags become interactive filtering controls.
// - Search and tag filtering work together.
// - Topic organization can expand as additional content sources
//   are added.
//
// Future:
//
// - Additional automatic tag rules.
// - Broader category organization.
// - Additional content-classification tools.
//
//##################################################################


//##################################################################
// 12. ADVERTISEMENT SYSTEM
//##################################################################
//
// Purpose:
//
// Provides the framework for advertising and monetization features
// within the Everyday Saints platform.
//
// Current:
//
// - Placeholder advertisement containers exist.
// - Desktop and bottom advertisement locations are established.
// - In-feed advertisement placeholders are implemented.
// - In-feed advertisements appear once per 30-item batch,
//   between items 15 and 16.
//
// Advertising strategy:
//
// - Maintain controlled advertisement frequency.
// - Avoid excessive interruption of the feed experience.
// - Keep advertisement placement consistent across feed batches.
//
// Future:
//
// - Google AdSense integration.
// - Advertisement placement optimization.
// - Additional responsive advertisement layouts.
//
//##################################################################

//##################################################################
// 13. USER SUBMISSION SYSTEM
//##################################################################
//
// Purpose:
//
// Provides a future method for users to contribute content to the
// Everyday Saints platform.
//
// Future:
//
// Allow submissions:
//
// - Spiritual experiences.
// - Testimonies.
// - Conversion stories.
// - Mission experiences.
//
// Requires:
//
// - Content storage.
// - Review workflow.
// - Approval process.
// - User submission management.
//
//##################################################################


//##################################################################
// 14. ADMIN REVIEW TOOLS
//##################################################################
//
// Purpose:
//
// Provides future administrative tools for managing submitted
// content and maintaining platform quality.
//
// Future:
//
// Administrative tools:
//
// - Review submissions.
// - Approve content.
// - Reject content.
// - Edit content.
//
// Requires:
//
// - User submission system.
// - Administrative access controls.
// - Content management workflow.
//
//##################################################################


//##################################################################
// 15. UTILITY FUNCTIONS
//##################################################################
//
// Purpose:
//
// Documents reusable helper functions shared across application
// features.
//
// Current:
//
// Reusable helper functions are located within the functional
// sections where they are currently used.
//
// Existing helpers include:
//
// - RSS text cleanup.
// - Feed-type detection.
// - YouTube thumbnail fallback.
// - Display-text escaping.
// - Publication-date formatting.
// - Source-type display handling.
//
// Future:
//
// - Additional shared error handling.
// - Additional reusable helpers as application features expand.
// - Functions may be centralized here if future architecture
//   makes that organization useful.
//
//##################################################################


//##################################################################
// 16. DEBUGGING TOOLS
//##################################################################
//
// Purpose:
//
// Provides development tools for monitoring, testing, and
// troubleshooting application behavior.
//
// Future:
//
// Development tools:
//
// - Console logging.
// - Feed testing tools.
// - Error reporting.
// - Diagnostic information.
//
//##################################################################


//##################################################################
// 17. APPLICATION INITIALIZATION
//##################################################################
//
// Purpose:
//
// Starts the Everyday Saints application after all required
// functions and configuration have been loaded.
//
// Current:
//
// - Initiates feed loading.
// - Begins the RSS retrieval, processing, and rendering workflow.
//
//##################################################################

loadFeed();

</script>

</body>
</html>