2026-01-28 03:48:03 +00:00
13 changed files with 4657 additions and 2586 deletions
--- a/docs/README.md
+++ b/docs/README.md
@@ -10,7 +10,7 @@
 INGROUP: Moko-Cassiopeia.Documentation
 REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
 FILE: docs/README.md
- VERSION: 01.00.00
+ VERSION: 03.05.00
 BRIEF: Documentation index for Moko-Cassiopeia template
 PATH: /docs/README.md
 -->
@@ -40,6 +40,12 @@ This directory contains comprehensive documentation for the Moko-Cassiopeia Joom
  * Joomla extension packaging
  * Multi-version testing

+* **[Roadmap](ROADMAP.md)** - Version-specific roadmap
+  * Current features (v03.05.00)
+  * Feature evolution timeline
+  * Planned enhancements
+  * Development priorities
+
 ### User Documentation

 For end-user documentation, installation instructions, and feature guides, see the main [README.md](../README.md) in the repository root.
@@ -52,7 +58,8 @@ moko-cassiopeia/
 │   ├── README.md           # This file - documentation index
 │   ├── QUICK_START.md      # Quick start guide for developers
 │   ├── WORKFLOW_GUIDE.md   # Development workflow guide
-│   └── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide
+│   ├── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide
+│   └── ROADMAP.md          # Version-specific roadmap
 ├── src/                     # Template source code
 │   ├── templates/          # Joomla template files
 │   └── media/              # Assets (CSS, JS, images)
@@ -98,7 +105,7 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M
 * Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
 * Path: /docs/README.md
 * Owner: Moko Consulting
-* Version: 01.00.00
+* Version: 03.05.00
 * Status: Active
 * Effective Date: 2026-01-09

@@ -107,3 +114,4 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M
 | Date       | Change Summary                                        | Author          |
 | ---------- | ----------------------------------------------------- | --------------- |
 | 2026-01-09 | Initial documentation index created for MokoStandards compliance. | GitHub Copilot |
+| 2026-01-27 | Updated with roadmap link and version to 03.05.01.   | GitHub Copilot  |
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -0,0 +1,849 @@
+<!--
+ Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
+
+ This file is part of a Moko Consulting project.
+
+ SPDX-License-Identifier: GPL-3.0-or-later
+
+ # FILE INFORMATION
+ DEFGROUP: Joomla.Template.Site
+ INGROUP: Moko-Cassiopeia.Documentation
+ REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
+ FILE: docs/ROADMAP.md
+ VERSION: 03.05.00
+ BRIEF: Version-specific roadmap for Moko-Cassiopeia template
+ PATH: /docs/ROADMAP.md
+-->
+
+# Moko-Cassiopeia Roadmap (VERSION: 03.05.00)
+
+This document provides a comprehensive, version-specific roadmap for the Moko-Cassiopeia Joomla template, tracking feature evolution, current capabilities, and planned enhancements.
+
+## Table of Contents
+
+- [Version Timeline](#version-timeline)
+  - [Past Releases](#past-releases)
+  - [Future Roadmap (5-Year Plan)](#future-roadmap-5-year-plan)
+- [Current Release (v03.05.00)](#current-release-v030500)
+- [Implemented Features](#implemented-features)
+- [Planned Features](#planned-features)
+- [Development Priorities](#development-priorities)
+- [Long-term Vision](#long-term-vision)
+- [External Resources](#external-resources)
+
+---
+
+## Version Timeline
+
+### Past Releases
+
+### v03.05.01 (2026-01-09) - Standards & Security
+**Status**: Released (CHANGELOG entry exists, code files pending version update)
+
+**Added**:
+- Dependency review workflow for vulnerability scanning
+- Standards compliance workflow for MokoStandards validation
+- Dependabot configuration for automated security updates
+- Documentation index (`docs/README.md`)
+
+**Changed**:
+- Removed custom CodeQL workflow (using GitHub's default setup)
+- Enforced repository compliance with MokoStandards
+- Improved security posture with automated scanning
+
+### v03.05.00 (2026-01-04) - Workflow & Governance
+**Status**: Current Release (in code)
+
+**Added**:
+- `.github/workflows` directory structure
+- CODE_OF_CONDUCT.md from MokoStandards
+- CONTRIBUTING.md from MokoStandards
+
+**Changed**:
+- TODO items to be split to separate file (tracked)
+
+### v03.01.00 (2025-12-16) - CI/CD Foundation
+**Added**:
+- Initial GitHub Actions workflows
+
+### v03.00.00 (2025-12-09) - Font Awesome 7 Upgrade
+**Updated**:
+- Copyright headers to MokoCodingDefaults standards
+- Fixed color style injection in `index.php`
+- Upgraded Font Awesome 6 to Font Awesome 7 Free
+- Added Font Awesome 7 Free style fallback
+
+**Removed**:
+- Deprecated CODE_OF_CONDUCT.md
+- Deprecated CONTRIBUTING.md
+
+### v02.01.05 (2025-09-04) - CSS Refinement
+**Fixed**:
+- Removed vmbasic.css
+- Repaired template.css and colors_standard.css
+
+### v02.00.00 (2025-08-30) - Dark Mode & TOC
+**Major Features**:
+- **Dark Mode Toggle System**
+  - Frontend toggle switch with localStorage persistence
+  - Admin-configurable default mode
+  - CSS rules for light/dark themes
+  - JavaScript-powered mode switching
+
+- **Enhanced Template Parameters**
+  - Logo parameter support
+  - GTM container ID configuration
+  - Dark mode defaults in settings
+  - Updated metadata and copyright headers
+
+- **Expanded Table of Contents**
+  - Automatic TOC injection
+  - User-selectable placement (`toc-left` or `toc-right`)
+  - Article options integration
+
+**Improvements**:
+- Cleaned up `index.php` (removed duplicate skip-to-content calls)
+- Consolidated JavaScript asset loading
+- Streamlined CSS for toggle switch
+- Accessibility refinements (typography, color contrast)
+- Fixed missing logo parameter in header
+- Corrected stylesheet inconsistencies
+- Patched redundant script includes
+
+### v01.00.00 - Initial Public Release
+**Core Features**:
+- Font Awesome 6 integration
+- Bootstrap 5 helpers and utilities
+- Automatic Table of Contents (TOC) utility
+- Moko Expansions: Google Tag Manager / GA4 hooks
+- Built on Joomla's Cassiopeia template
+
+---
+
+### Future Roadmap (5-Year Plan)
+
+The following versions represent our planned annual major releases, each building upon the previous version's foundation.
+
+#### v04.00.00 (Q4 2027) - Enhanced Accessibility & Performance
+**Status**: Planned  
+**Target Release**: December 2027
+
+**Major Template Features**:
+- **WCAG 2.1 AA Compliance**
+  - Full accessibility audit and remediation
+  - High-contrast theme options
+  - Screen reader optimizations
+  - Keyboard navigation enhancements
+  - ARIA landmark improvements
+  - Skip navigation enhancements
+
+- **Template Performance Optimizations**
+  - Critical CSS inlining for faster first paint
+  - Lazy loading for images and below-fold content
+  - WebP image support with automatic fallbacks
+  - Advanced asset bundling and minification
+  - Template asset caching (CSS/JS bundles)
+
+- **Enhanced Layout System**
+  - Additional responsive grid layouts
+  - Flexible module position system
+  - Column layout presets (2-col, 3-col, 4-col variations)
+  - Grid/masonry article layouts
+  - Sticky sidebar options
+
+- **Typography Enhancements**
+  - Advanced typography controls in template settings
+  - Additional font pairing presets
+  - Custom font upload support
+  - Line height and letter spacing controls
+  - Responsive typography scaling
+
+- **Developer Experience**
+  - Development mode enablement (unminified assets, debug output)
+  - Live reload during development
+  - Enhanced error logging and diagnostics
+  - Template debugging tools
+  - Style guide generator
+
+- **Content Display Features**
+  - Soft offline mode (category-based access during maintenance)
+  - Enhanced article layouts (grid, masonry, timeline)
+  - Image caption styling options
+  - Quote block styling variations
+  - Enhanced breadcrumb customization
+
+**Template Infrastructure**:
+- Expanded template parameter validation
+- Enhanced template override detection
+- Automated template compatibility testing
+- Template performance profiling tools
+
+---
+
+#### v05.00.00 (Q4 2028) - Advanced Layouts & Template Customization
+**Status**: Planned  
+**Target Release**: December 2028
+
+**Major Template Features**:
+- **Enhanced Layout Builder**
+  - Template-based page layout variations
+  - Configurable layout options via template parameters
+  - Layout presets library (blog, portfolio, business, magazine)
+  - Module position layout manager
+  - Visual layout preview in admin
+
+- **Advanced Styling System**
+  - Extended color palette management (unlimited custom palettes)
+  - CSS variable editor in template settings
+  - Style presets for different site types
+  - Border radius and spacing controls
+  - Box shadow and effect controls
+
+- **Template Component Enhancements**
+  - Enhanced menu styling options (mega menu support)
+  - Advanced header variations (transparent, sticky, minimal)
+  - Footer layout options (column variations, widgets)
+  - Sidebar styling and behavior options
+  - Hero section templates and variations
+
+- **Content Display Options**
+  - Article intro/full text display controls
+  - Category layout variations (grid, list, masonry, cards)
+  - Featured content sections
+  - Related articles display options
+  - Author bio box styling
+
+- **Responsive Design Improvements**
+  - Mobile-first navigation patterns
+  - Tablet-specific layout controls
+  - Responsive image sizing options
+  - Mobile header variations
+  - Touch-friendly interface elements
+
+- **Template Integration Features**
+  - Enhanced VirtueMart template overrides
+  - Contact form styling variations
+  - Search result layout options
+  - Error page customization
+  - Archive page templates
+
+**Template Infrastructure**:
+- Joomla 6.x template compatibility (if released)
+- PHP 8.2+ support
+- Template child theme support
+- Template preset import/export functionality
+
+---
+
+#### v06.00.00 (Q4 2029) - Template Extensions & Advanced Features
+**Status**: Planned  
+**Target Release**: December 2029
+
+**Major Template Features**:
+- **Template Marketplace & Extensions**
+  - Template addon system for modular features
+  - Community-contributed template extensions
+  - Template preset marketplace
+  - Style pack distribution system
+  - Template component library
+
+- **Advanced Module System**
+  - Custom module chrome options
+  - Module animation effects
+  - Module visibility controls (scroll, time-based)
+  - Module group management
+  - Module style inheritance
+
+- **Enhanced Media Handling**
+  - Background image options per page/section
+  - Image overlay controls
+  - Parallax scrolling effects
+  - Video background support
+  - Gallery template variations
+
+- **Template Branding Options**
+  - Multiple logo upload (standard, retina, mobile)
+  - Favicon and app icon management
+  - Custom loading screen/animations
+  - Watermark options
+  - Brand color scheme generator
+
+- **Advanced Header/Footer**
+  - Multiple header layout presets
+  - Sticky header variations and behaviors
+  - Header transparency controls
+  - Footer widget areas expansion
+  - Floating action buttons
+
+- **Content Enhancement Features**
+  - Reading progress indicator
+  - Social sharing buttons (template-integrated)
+  - Print-friendly styles
+  - Reading time estimation display
+  - Content table enhancements
+
+- **Template SEO Features**
+  - Schema markup templates for common types
+  - Open Graph tag management
+  - Twitter Card support
+  - Breadcrumb schema integration
+  - Meta tag template controls
+
+**Template Infrastructure**:
+- Template versioning system
+- Template backup/restore functionality
+- Template A/B testing support
+- Multi-language template variations
+- Template documentation generator
+
+---
+
+#### v07.00.00 (Q4 2030) - Modern Template Standards & Enhancements
+**Status**: Planned  
+**Target Release**: December 2030
+
+**Major Template Features**:
+- **Modern CSS Features**
+  - CSS Grid layout system integration
+  - CSS Container Queries support
+  - CSS Cascade Layers implementation (layered style priority system)
+  - Custom properties (CSS variables) UI
+  - Modern filter and backdrop effects
+
+- **Progressive Template Features**
+  - Offline-capable template assets
+  - Service worker template integration
+  - App manifest generation
+  - Install to home screen support
+  - Template asset preloading strategies
+
+- **Animation & Interaction**
+  - Scroll-triggered animations
+  - Hover effect library
+  - Page transition effects
+  - Micro-interactions for UI elements
+  - Loading animation options
+
+- **Advanced Responsive Features**
+  - Container-based responsive design
+  - Element visibility by viewport
+  - Responsive navigation patterns library
+  - Mobile-optimized interactions
+  - Adaptive image loading
+
+- **Template Accessibility Features**
+  - Focus indicators customization
+  - Reduced motion preferences support
+  - High contrast mode automation
+  - Keyboard navigation patterns
+  - ARIA live regions for dynamic content
+
+- **Content Presentation**
+  - Advanced blockquote styles
+  - Code snippet highlighting themes
+  - Table styling variations
+  - List styling options
+  - Custom content block templates
+
+- **Template Performance**
+  - Resource hints (preconnect, prefetch)
+  - Optimal asset delivery strategies
+  - Image format optimization (AVIF support)
+  - Font loading optimization
+  - Template metrics dashboard
+
+**Template Infrastructure**:
+- Template pattern library
+- Design token system
+- Template component documentation
+- Automated template testing suite
+- Template performance monitoring
+
+---
+
+#### v08.00.00 (Q4 2031) - Next-Generation Template Features
+**Status**: Conceptual  
+**Target Release**: December 2031
+
+**Major Template Features**:
+- **Advanced Layout Systems**
+  - Subgrid support for complex layouts
+  - Multi-column layout variations
+  - Asymmetric grid systems
+  - Dynamic layout switching
+  - Layout constraint system
+
+- **Enhanced Visual Customization**
+  - Real-time style editor
+  - Template style variations manager
+  - Custom CSS injection with validation
+  - Style inheritance and override system
+  - Visual design tokens editor
+
+- **Template Component Library**
+  - Comprehensive UI component set
+  - Reusable template blocks
+  - Component variation system
+  - Template snippet library
+  - Pattern library integration
+
+- **Advanced Typography System**
+  - Variable font support
+  - Advanced typographic scales
+  - Font pairing recommendations
+  - Fluid typography system
+  - Custom font fallback chains
+
+- **Template Integration Features**
+  - Enhanced component overrides
+  - Template hooks system
+  - Event-based template modifications
+  - Custom field rendering templates
+  - Module position API enhancements
+
+- **Responsive & Adaptive Design**
+  - Advanced breakpoint management
+  - Element-specific responsive controls
+  - Adaptive images with art direction
+  - Responsive typography system
+  - Context-aware component rendering
+
+- **Template Ecosystem**
+  - Child template framework
+  - Template derivative system
+  - Community template marketplace
+  - Template rating and review system
+  - Professional template support network
+
+- **Template Quality & Maintenance**
+  - Automated accessibility testing
+  - Template performance auditing
+  - Code quality monitoring
+  - Update notification system
+  - Template health dashboard
+
+**Template Infrastructure**:
+- Template API for extensibility
+- Template package manager
+- Template development CLI tools
+- Template migration utilities
+- Comprehensive template documentation system
+
+---
+
+## Current Release (v03.05.00)
+
+### System Requirements
+- **Joomla**: 4.4.x or 5.x
+- **PHP**: 8.0+
+- **Database**: MySQL/MariaDB compatible
+
+### Architecture
+- **Base Template**: Joomla Cassiopeia
+- **Enhancement Layer**: Non-invasive overrides
+- **Asset Management**: Joomla Web Asset Manager (WAM)
+- **Frontend Framework**: Bootstrap 5
+- **Icon Library**: Font Awesome 7 Free
+
+---
+
+## Implemented Features
+
+### 🎨 Theming & Visual Design
+
+#### Color Palette System
+- **3 Built-in Palettes**: Standard, Alternative, Custom
+- **Dual Mode Support**: Separate light and dark configurations
+- **Custom Palettes**: User-definable via `colors_custom.css`
+- **Location**: `src/media/css/colors/{light|dark}/`
+
+#### Dark Mode System
+- **Toggle Controls**: Switch (Light↔Dark) or Radios (Light/Dark/System)
+- **Default Mode**: Admin-configurable (system, light, or dark)
+- **Persistence**: localStorage for user preferences
+- **Auto-Detection**: Optional system preference detection
+- **Meta Tags**: `color-scheme` and `theme-color` support
+- **ARIA Bridge**: Bootstrap ARIA compatibility
+
+#### Typography
+- **Font Schemes**:
+  - Local: Roboto
+  - Web (Google Fonts): Fira Sans, Roboto + Noto Sans
+- **Admin-Configurable**: Template settings dropdown
+
+#### Branding
+- **Logo Support**: Custom logo upload
+- **Site Title**: Text-based branding option
+- **Site Description**: Tagline/subtitle field
+- **Font Awesome Kit**: Optional custom kit integration
+
+### 📐 Layout & Structure
+
+#### Module Positions (23 Total)
+**Header Area**:
+- topbar, below-topbar, below-logo, menu, search, banner
+
+**Content Area**:
+- top-a, top-b, main-top, main-bottom, breadcrumbs
+- sidebar-left, sidebar-right
+
+**Footer Area**:
+- bottom-a, bottom-b, footer-menu, footer
+
+**Special**:
+- debug, offline-header, offline, offline-footer
+- drawer-left, drawer-right
+
+#### Layout Options
+- **Container Type**: Fluid or Static
+- **Sticky Header**: Optional fixed navigation
+- **Back-to-Top Button**: Scrollable page support
+
+### 📝 Content Features
+
+#### Table of Contents (TOC)
+- **Automatic Generation**: From article headings
+- **Placement Options**: `toc-left` or `toc-right` layouts
+- **Article Integration**: Via Options → Layout dropdown
+- **Responsive**: Mobile-friendly sidebar placement
+
+#### Article Layouts
+- **Default**: Standard Cassiopeia layout
+- **TOC Variants**: Left-sidebar or right-sidebar TOC
+- **Custom Overrides**: Located in `html/com_content/article/`
+
+### 📊 Analytics & Tracking
+
+#### Google Tag Manager (GTM)
+- **Enable/Disable**: Admin toggle
+- **Container ID**: Template parameter field
+- **Implementation**: Head and body script injection
+- **GDPR-Ready**: Configurable consent defaults
+
+#### Google Analytics 4 (GA4)
+- **Enable/Disable**: Admin toggle
+- **Property ID**: Template parameter field
+- **Universal Analytics Fallback**: Legacy UA support
+- **Privacy-First**: Conditional loading based on settings
+
+### 🎛️ Customization & Developer Tools
+
+#### Custom Code Injection
+- **Head Start**: Custom HTML/JS before `</head>`
+- **Head End**: Custom HTML/JS at end of `<head>`
+- **Raw HTML**: Unfiltered code injection for advanced users
+
+#### Drawer System
+- **Left/Right Drawers**: Offcanvas menu areas
+- **Icon Customization**: Font Awesome icon selection
+- **Default Icons**:
+  - Left: `fa-solid fa-chevron-right`
+  - Right: `fa-solid fa-chevron-left`
+
+#### Asset Management
+- **Joomla WAM**: Complete asset registry in `joomla.asset.json`
+- **Development/Production Modes**: Minified and unminified assets
+- **Dependency Management**: Automatic script/style loading
+
+### 🏗️ Template Overrides
+
+#### Component Overrides
+**Content (com_content)**:
+- Article layouts (default, toc-left, toc-right)
+- Category layouts (blog, list)
+- Featured articles
+
+**Contact (com_contact)**:
+- Contact form layouts
+
+**Engage (com_engage)**:
+- Comment system integration
+
+#### Module Overrides
+**Menu (mod_menu)**:
+- Metis dropdown menu
+- Offcanvas navigation
+
+**VirtueMart**:
+- Product display (`mod_virtuemart_product`)
+- Shopping cart (`mod_virtuemart_cart`)
+- Manufacturer display (`mod_virtuemart_manufacturer`)
+- Category display (`mod_virtuemart_category`)
+- Currency selector (`mod_virtuemart_currencies`)
+
+**Other Modules**:
+- Custom HTML (`mod_custom`)
+- GABble social integration (`mod_gabble`)
+
+**Membership System (OS Membership)**:
+- Plan layouts (default, pricing tables)
+- Member management interfaces
+
+### 🔧 Configuration Parameters
+
+#### Theme Tab
+**General**:
+- `theme_enabled` - Enable/disable theme system
+- `theme_control_type` - Toggle UI type (switch/radios/none)
+- `theme_default_choice` - Default mode (system/light/dark)
+- `theme_auto_dark` - Auto-detect system preference
+- `theme_meta_color_scheme` - Inject `color-scheme` meta tag
+- `theme_meta_theme_color` - Inject `theme-color` meta tag
+- `theme_bridge_bs_aria` - Bootstrap ARIA compatibility
+
+**Variables & Palettes**:
+- `colorLightName` - Light mode color scheme
+- `colorDarkName` - Dark mode color scheme
+
+**Typography**:
+- `useFontScheme` - Font selection (local/web)
+
+**Branding & Icons**:
+- `brand` - Show/hide branding
+- `logoFile` - Logo upload path
+- `siteTitle` - Site title text
+- `siteDescription` - Site tagline
+- `fA6KitCode` - Font Awesome kit code
+
+**Header & Navigation**:
+- `stickyHeader` - Fixed navigation
+- `backTop` - Back-to-top button
+
+**Toggle UI**:
+- `theme_fab_enabled` - Floating action button for theme toggle
+- `theme_fab_pos` - FAB position (br/bl/tr/tl)
+
+#### Google Tab
+- `googletagmanager` - Enable GTM
+- `googletagmanagerid` - GTM container ID
+- `googleanalytics` - Enable GA4
+- `googleanalyticsid` - GA4 property ID
+
+#### Custom Code Tab
+- `custom_head_start` - Custom code at head start
+- `custom_head_end` - Custom code at head end
+
+#### Drawers Tab
+- `drawerLeftIcon` - Left drawer icon (Font Awesome class)
+- `drawerRightIcon` - Right drawer icon (Font Awesome class)
+
+#### Advanced Tab
+- `fluidContainer` - Container layout (static/fluid)
+
+### 🛠️ Development Tools
+
+#### Quality Assurance
+- **Codeception**: Automated testing framework
+- **PHPStan**: Static analysis (level 8+)
+- **PHPCS**: Code style validation (PSR-12)
+- **PHPCompatibility**: PHP 8.0+ compatibility checks
+
+#### CI/CD Workflows
+- **Dependency Review**: Vulnerability scanning
+- **Standards Compliance**: MokoStandards validation
+- **CodeQL**: Security analysis (GitHub default)
+- **Dependabot**: Automated dependency updates
+
+#### Documentation
+- **Quick Start**: 5-minute developer setup
+- **Workflow Guide**: Git strategy, branching, releases
+- **Joomla Development**: Testing, packaging, multi-version support
+
+---
+
+## Planned Features
+
+### 🚧 In Development
+
+#### Soft Offline Mode (v2.1.5 - Mentioned)
+**Status**: Planned/In Development  
+**Description**: Keep selected categories accessible during maintenance mode
+**Use Cases**:
+- Legal documents remain viewable during downtime
+- Policy pages accessible for compliance
+- Terms of service always available
+**Configuration**:
+- Admin-selectable categories
+- Per-category offline access control
+
+#### TODO Tracking System
+**Status**: Mentioned in CHANGELOG (v03.05.00)  
+**Description**: Separate TODO tracking file  
+**Purpose**: Centralized issue and feature tracking outside changelog
+
+### 🔮 Future Enhancements
+
+#### Development Mode (Commented Out)
+**Status**: Code exists but disabled  
+**Location**: `templateDetails.xml` line 91  
+**Description**: Comprehensive development mode toggle  
+**Potential Features**:
+- Unminified asset loading
+- Debug output
+- Performance profiling
+- Template cache bypass
+
+#### Potential Features (Community Requested)
+*Note: These are conceptual and not yet officially planned*
+
+**Enhanced Accessibility**:
+- WCAG 2.1 AAA compliance mode
+- High-contrast themes
+- Screen reader optimizations
+- Keyboard navigation improvements
+
+**Template Layout Features**:
+- Advanced responsive grid layouts
+- Multiple column variations
+- Custom module position system
+- Layout preset library
+
+**Template Styling Features**:
+- Extended color palette management
+- Custom font upload support
+- Typography scale controls
+- Visual style editor
+
+---
+
+## Development Priorities
+
+### Immediate Focus (v03.x - 2026)
+1. **TODO Tracking System**: Implement separate file for issue tracking
+2. **Soft Offline Mode**: Complete category-based offline access
+3. **Security Updates**: Maintain Dependabot and CodeQL scans
+4. **Documentation**: Keep docs synchronized with features
+5. **Bug Fixes**: Address reported issues and edge cases
+
+### v04.00.00 Priorities (2027) - Template Foundation
+1. **WCAG 2.1 AA Compliance**: Full template accessibility audit and implementation
+2. **Template Performance**: Critical CSS, lazy loading, WebP support
+3. **Layout System**: Enhanced responsive grid and module positions
+4. **Development Mode**: Enable comprehensive template developer tools
+
+### v05.00.00 Priorities (2028) - Template Customization
+1. **Layout Builder**: Template-based page layout system
+2. **Styling System**: Extended color palettes and CSS variable management
+3. **Template Components**: Enhanced header, footer, and menu variations
+4. **Responsive Design**: Mobile-first navigation and layout improvements
+
+### v06.00.00 Priorities (2029) - Template Extensions
+1. **Template Marketplace**: Addon system and community extensions
+2. **Module System**: Advanced module chrome and animation options
+3. **Media Handling**: Background images, parallax, video backgrounds
+4. **Template SEO**: Schema markup templates and meta tag controls
+
+### v07.00.00+ Priorities (2030+) - Modern Standards
+1. **Modern CSS**: Grid, Container Queries, Cascade Layers
+2. **Progressive Template**: Offline-capable assets and PWA features
+3. **Animation System**: Scroll-triggered effects and micro-interactions
+4. **Template Performance**: Advanced optimization and monitoring
+
+---
+
+## Long-term Vision
+
+### Mission Statement
+Moko-Cassiopeia aims to be the **most developer-friendly, user-customizable, and standards-compliant Joomla template** while maintaining minimal core overrides for maximum upgrade compatibility.
+
+### Core Principles
+1. **Non-Invasive**: Minimal Cassiopeia overrides
+2. **Standards-First**: MokoStandards compliance
+3. **Accessibility**: WCAG 2.1 compliance
+4. **Performance**: Fast, optimized delivery
+5. **Developer Experience**: Clear docs, easy setup, powerful tools
+6. **Template-Focused**: Pure template features without complex external dependencies
+
+### 5-Year Strategic Roadmap (Template Features)
+
+#### 2027 (v04.00.00) - Accessibility & Performance
+- Achieve WCAG 2.1 AA compliance for all template elements
+- Implement critical template performance optimizations
+- Enhance template layout system with flexible grids
+- Enable comprehensive development mode for template developers
+
+#### 2028 (v05.00.00) - Layouts & Customization
+- Launch template-based layout builder system
+- Deploy extended styling and customization options
+- Enhance template component variations (headers, footers, menus)
+- Improve responsive design patterns for all devices
+
+#### 2029 (v06.00.00) - Extensions & Enhancements
+- Introduce template addon and extension system
+- Launch template preset marketplace
+- Deploy advanced module styling and animation features
+- Implement comprehensive template SEO controls
+
+#### 2030 (v07.00.00) - Modern Standards
+- Adopt modern CSS standards (Grid, Container Queries, Cascade Layers)
+- Implement progressive template features (PWA support)
+- Deploy advanced animation and interaction system
+- Enhance template performance monitoring and optimization
+
+#### 2031 (v08.00.00) - Next-Generation Template
+- Advanced layout systems with subgrid support
+- Comprehensive template component library
+- Enhanced visual customization tools
+- Template ecosystem with child themes and derivatives
+
+---
+
+## External Resources
+
+### Official Links
+- **Full Roadmap**: [https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)
+- **Repository**: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
+- **Issue Tracker**: [GitHub Issues](https://github.com/mokoconsulting-tech/moko-cassiopeia/issues)
+- **Changelog**: [CHANGELOG.md](../CHANGELOG.md)
+
+### Community
+- **Email Support**: hello@mokoconsulting.tech
+- **Contributing**: [CONTRIBUTING.md](../CONTRIBUTING.md)
+- **Code of Conduct**: [CODE_OF_CONDUCT.md](../CODE_OF_CONDUCT.md)
+
+### Documentation
+- **Quick Start**: [docs/QUICK_START.md](./QUICK_START.md)
+- **Workflow Guide**: [docs/WORKFLOW_GUIDE.md](./WORKFLOW_GUIDE.md)
+- **Joomla Development**: [docs/JOOMLA_DEVELOPMENT.md](./JOOMLA_DEVELOPMENT.md)
+- **Main README**: [README.md](../README.md)
+
+---
+
+## Contributing to the Roadmap
+
+Have ideas for future features? We welcome community input!
+
+**How to Suggest Features**:
+1. Check the [GitHub Issues](https://github.com/mokoconsulting-tech/moko-cassiopeia/issues) for existing requests
+2. Open a new issue with the `enhancement` label
+3. Provide clear use cases and benefits
+4. Engage in community discussion
+
+**Feature Evaluation Criteria**:
+- Alignment with core principles
+- User demand and use cases
+- Technical feasibility
+- Maintenance burden
+- Performance impact
+- Security implications
+
+---
+
+## Metadata
+
+* Document: docs/ROADMAP.md
+* Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
+* Path: /docs/ROADMAP.md
+* Owner: Moko Consulting
+* Version: 03.05.00
+* Status: Active
+* Last Updated: 2026-01-27
+* Classification: Public Open Source Documentation
+
+## Revision History
+
+| Date       | Change Summary                                        | Author          |
+| ---------- | ----------------------------------------------------- | --------------- |
+| 2026-01-27 | Initial version-specific roadmap generated from codebase scan. | GitHub Copilot |
+| 2026-01-27 | Added 5-year future roadmap with annual major version releases (v04-v08). | GitHub Copilot |
+| 2026-01-27 | Refocused roadmap to concentrate on template-oriented features only. | GitHub Copilot |
--- a/src/language/en-GB/tpl_moko-cassiopeia.ini
+++ b/src/language/en-GB/tpl_moko-cassiopeia.ini
@@ -1,4 +1,4 @@
-; ; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
 ;
 ; This file is part of a Moko Consulting project.
 ;
--- a/src/media/css/colors/dark/colors_alternative.css
+++ b/src/media/css/colors/dark/colors_alternative.css
@@ -185,7 +185,7 @@
 	--dark-border-subtle: #2b323b;

 	/* Typography & layout */
-	--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+	--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--body-font-size: 1rem;
 	--body-font-weight: 400;
 	--body-line-height: 1.5;
--- a/src/media/css/colors/dark/colors_standard.css
+++ b/src/media/css/colors/dark/colors_standard.css
@@ -186,7 +186,7 @@
 	--dark-border-subtle: #2b323b;

 	/* Typography & layout */
-	--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+	--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--body-font-size: 1rem;
 	--body-font-weight: 400;
 	--body-line-height: 1.5;
--- a/src/media/css/colors/light/colors_alternative.css
+++ b/src/media/css/colors/light/colors_alternative.css
@@ -172,7 +172,7 @@
 	--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 	--gradient: linear-gradient(180deg, #ffffff26, #fff0);
-	--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+	--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
 	--body-font-size: 1rem;
 	--body-font-weight: 400;
 	--body-line-height: 1.5;
--- a/src/media/css/colors/light/colors_standard.css
+++ b/src/media/css/colors/light/colors_standard.css
@@ -172,7 +172,7 @@
 	--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 	--gradient: linear-gradient(180deg, #ffffff26, #fff0);
-	--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+	--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
 	--body-font-size: 1rem;
 	--body-font-weight: 400;
 	--body-line-height: 1.5;
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
--- a/src/media/js/template.js
+++ b/src/media/js/template.js
@@ -11,7 +11,7 @@
 VERSION: 03.05.00
 BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
 */
-
+!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);
 (function (win, doc) {
 	"use strict";

--- a/src/media/js/user.js
+++ b/src/media/js/user.js
@@ -0,0 +1,21 @@
+/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+
+ This file is part of a Moko Consulting project.
+
+ SPDX-License-Identifier: GPL-3.0-or-later
+
+ This program is free software; you can redistribute it and/or modify  it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/ .
+
+ # FILE INFORMATION
+ DEFGROUP: Joomla.Template.Site
+ INGROUP: Moko-Cassiopeia
+ REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
+ PATH: ./media/templates/site/moko-cassiopeia/js/user.js
+ VERSION: 03.00.00
+ BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
+ */
--- a/src/templates/component.php
+++ b/src/templates/component.php
@@ -11,76 +11,212 @@
 REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
 PATH: ./templates/moko-cassiopeia/component.php
 VERSION: 03.05.00
- BRIEF: Minimal component-only template file for Moko-Cassiopeia
+ BRIEF: Main template index file for Moko-Cassiopeia rendering site layout
 */

+
 defined('_JEXEC') or die;

 use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Language\Text;
+use Joomla\CMS\Uri\Uri;
+use Joomla\CMS\Component\ComponentHelper;

 /** @var Joomla\CMS\Document\HtmlDocument $this */

 $app   = Factory::getApplication();
-$wa  = $this->getWebAssetManager();
+$input = $app->getInput();
+$document = $app->getDocument();
+$wa    = $document->getWebAssetManager();

-// Color Theme
-$paramsColorName = $this->params->get('colorName', 'colors_standard');
-$assetColorName  = 'theme.' . $paramsColorName;
-$wa->registerAndUseStyle($assetColorName, 'media/templates/site/moko-cassiopeia/css/global/' . $paramsColorName . '.css');
+// Template params
+$params_LightColorName          = (string) $this->params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom

-// Use a font scheme if set in the template style options
-$paramsFontScheme = $this->params->get('useFontScheme', false);
+$params_DarkColorName          = (string) $this->params->get('colorDarkName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
+
+$params_googletagmanager   = $this->params->get('googletagmanager', false);
+$params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
+$params_googleanalytics    = $this->params->get('googleanalytics', false);
+$params_googleanalyticsid  = $this->params->get('googleanalyticsid', null);
+$params_custom_head_start  = $this->params->get('custom_head_start', null);
+$params_custom_head_end    = $this->params->get('custom_head_end', null);
+$params_developmentmode = $this->params->get('developmentmode', false);
+
+// Bootstrap behaviors (assets handled via WAM)
+HTMLHelper::_('bootstrap.framework');
+HTMLHelper::_('bootstrap.alert');
+HTMLHelper::_('bootstrap.button');
+HTMLHelper::_('bootstrap.carousel');
+HTMLHelper::_('bootstrap.collapse');
+HTMLHelper::_('bootstrap.dropdown');
+HTMLHelper::_('bootstrap.modal');
+HTMLHelper::_('bootstrap.offcanvas');
+HTMLHelper::_('bootstrap.popover');
+HTMLHelper::_('bootstrap.scrollspy');
+HTMLHelper::_('bootstrap.tab');
+HTMLHelper::_('bootstrap.tooltip');
+HTMLHelper::_('bootstrap.toast');
+
+// Detecting Active Variables
+$option    = $input->getCmd('option', '');
+$view      = $input->getCmd('view', '');
+$layout    = $input->getCmd('layout', '');
+$task      = $input->getCmd('task', '');
+$itemid    = $input->getCmd('Itemid', '');
+$sitenameR = $app->get('sitename'); // raw for title composition
+$sitename  = htmlspecialchars($sitenameR, ENT_QUOTES, 'UTF-8');
+$menu      = $app->getMenu()->getActive();
+$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';
+
+// Respect “Site Name in Page Titles” (0:none, 1:before, 2:after)
+$mode      = (int) $app->get('sitename_pagetitles', 0);
+$pageTitle = trim($this->getTitle());
+$final     = $pageTitle !== ''
+	? ($mode === 1 ? $sitenameR . ' - ' . $pageTitle
+	   : ($mode === 2 ? $pageTitle . ' - ' . $sitenameR : $pageTitle))
+	: $sitenameR;
+$this->setTitle($final);
+
+// Template/Media path
+$templatePath = 'media/templates/site/moko-cassiopeia';
+
+// Core template CSS
+$wa->useStyle('template.base');   // css/template.css
+$wa->useStyle('template.vendor.social-media-demo');   // css/user.css
+
+// Optional vendor CSS
+$wa->useStyle('vendor.bootstrap-toc');
+
+// Optional demo/showcase CSS (available for use, not loaded by default)
+// To use: Add 'template.global.social-media-demo' to your article/module
+// $wa->useStyle('template.global.social-media-demo');
+
+// Color theme (light + optional dark)
+$colorLightKey  = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
+$colorDarkKey  = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
+$lightKey  = 'template.light.' . $colorLightKey;
+$darkKey   = 'template.dark.' . $colorDarkKey;
+try {
+	$wa->useStyle('template.light.colors_standard');
+} catch (\Throwable $e) {
+	$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
+}
+try {
+	$wa->useStyle('template.dark.colors_standard');
+} catch (\Throwable $e) {
+	$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
+}
+try {
+	$wa->useStyle($lightKey);
+} catch (\Throwable $e) {
+	$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
+}
+try {
+	$wa->useStyle($darkKey);
+} catch (\Throwable $e) {
+	$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css');
+}
+
+// Scripts
+$wa->useScript('template.js');
+$wa->useScript('theme-init.js');
+$wa->useScript('vendor.bootstrap-toc.js');
+
+/**
+ * VirtueMart detection:
+ * - Component must exist and be enabled
+ */
+$isVirtueMartActive = ComponentHelper::isEnabled('com_virtuemart', true);
+
+if ($isVirtueMartActive) {
+    /**
+     * Load a VirtueMart-specific stylesheet defined in your template manifest.
+     * This assumes you defined an asset named "template.virtuemart".
+     */
+    $wa->useStyle('vendor.vm');
+}
+
+// Font scheme (external or local) + CSS custom properties
+$params_FontScheme = $this->params->get('useFontScheme', false);
 $fontStyles = '';

-if ($paramsFontScheme) {
-	if (stripos($paramsFontScheme, 'https://') === 0) {
+if ($params_FontScheme) {
+	if (stripos($params_FontScheme, 'https://') === 0) {
 		$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
 		$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
-		$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
-		$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
+		$this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
+		$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], [
+			'media' => 'print',
+			'rel' => 'lazy-stylesheet',
+			'onload' => 'this.media=\'all\'',
+			'crossorigin' => 'anonymous'
+		]);

-		if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
-			$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
-			--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
-			--font-weight-normal: 400;
-			--font-weight-headings: 700;';
+		if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) {
+			$fontStyles  = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;' . "\n";
+			$fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;' . "\n";
+			$fontStyles .= '--font-weight-normal: 400;' . "\n";
+			$fontStyles .= '--font-weight-headings: 700;';
 		}
 	} else {
-		$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
-		$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
+		$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], [
+			'media' => 'print',
+			'rel' => 'lazy-stylesheet',
+			'onload' => 'this.media=\'all\''
+		]);
+		$this->getPreloadManager()->preload(
+			$wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(),
+			['as' => 'style']
+		);
 	}
 }

-// Enable assets
-$wa->usePreset('template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
-	->useStyle('template.active.language')
-	->useStyle('template.user')
-	->useScript('template.user')
-	->addInlineStyle(":root {
-		--hue: 214;
-		--template-bg-light: #f0f4fb;
-		--template-text-dark: #495057;
-		--template-text-light: #ffffff;
-		--template-link-color: #2a69b8;
-		--template-special-color: #001B4C;
-		$fontStyles
-	}");
+// Meta
+$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

+if ($this->params->get('faKitCode')) {
+	$faKit = "https://kit.fontawesome.com/" . $this->params->get('faKitCode') . ".js";
+	HTMLHelper::_('script', $faKit, ['crossorigin' => 'anonymous']);
+} else {
+		try {
+			if($params_developmentmode){
+				$wa->useStyle('vendor.fa7free.all');
+				$wa->useStyle('vendor.fa7free.brands');
+				$wa->useStyle('vendor.fa7free.fontawesome');
+				$wa->useStyle('vendor.fa7free.regular');
+				$wa->useStyle('vendor.fa7free.solid');
+			} else {
+				$wa->useStyle('vendor.fa7free.all.min');
+				$wa->useStyle('vendor.fa7free.brands.min');
+				$wa->useStyle('vendor.fa7free.fontawesome.min');
+				$wa->useStyle('vendor.fa7free.regular.min');
+				$wa->useStyle('vendor.fa7free.solid.min');
+			}
+	} catch (\Throwable $e) {
+		if($params_developmentmode){
+			$wa->registerAndUseStyle('vendor.fa7free.all.dynamic', $templatePath . '/vendor/fa7free/css/all.css');
+			$wa->registerAndUseStyle('vendor.fa7free.brands.dynamic', $templatePath . '/vendor/fa7free/css/brands.css');
+			$wa->registerAndUseStyle('vendor.fa7free.fontawesome.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.css');
+			$wa->registerAndUseStyle('vendor.fa7free.regular.dynamic', $templatePath . '/vendor/fa7free/css/regular.css');
+			$wa->registerAndUseStyle('vendor.fa7free.solid.dynamic', $templatePath . '/vendor/fa7free/css/solid.css');
+		} else {
+			$wa->registerAndUseStyle('vendor.fa7free.all.min.dynamic', $templatePath . '/vendor/fa7free/css/all.min.css');
+				$wa->registerAndUseStyle('vendor.fa7free.brands.min.dynamic', $templatePath . '/vendor/fa7free/css/brands.min.css');
+				$wa->registerAndUseStyle('vendor.fa7free.fontawesome.min.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.min.css');
+				$wa->registerAndUseStyle('vendor.fa7free.regular.min.dynamic', $templatePath . '/vendor/fa7free/css/regular.min.css');
+				$wa->registerAndUseStyle('vendor.fa7free.solid.min.dynamic', $templatePath . '/vendor/fa7free/css/solid.min.css');
+		}

-// Override 'template.active' asset to set correct ltr/rtl dependency
-$wa->registerStyle('template.active', '', [], [], ['template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
+	}
+}
+$params_leftIcon           = htmlspecialchars($this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), ENT_COMPAT, 'UTF-8');
+$params_rightIcon          = htmlspecialchars($this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), ENT_COMPAT, 'UTF-8');

-// Browsers support SVG favicons
-$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
-$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
-$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
-
-// Defer font awesome
-$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
+$wa->useStyle('template.user');   // css/user.css
 ?>
 <!DOCTYPE html>
-<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
+<html class="component" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
 <head>
 	<jdoc:include type="metas" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
--- a/src/templates/index.php
+++ b/src/templates/index.php
@@ -21,12 +21,14 @@ use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Uri\Uri;
+use Joomla\CMS\Component\ComponentHelper;

 /** @var Joomla\CMS\Document\HtmlDocument $this */

 $app   = Factory::getApplication();
 $input = $app->getInput();
-$wa    = $this->getWebAssetManager();
+$document = $app->getDocument();
+$wa    = $document->getWebAssetManager();

 // Template params
 $params_LightColorName          = (string) $this->params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
@@ -40,10 +42,9 @@ $params_googleanalyticsid  = $this->params->get('googleanalyticsid', null);
 $params_custom_head_start  = $this->params->get('custom_head_start', null);
 $params_custom_head_end    = $this->params->get('custom_head_end', null);
 $params_developmentmode = $this->params->get('developmentmode', false);
-
+/*
 // Bootstrap behaviors (assets handled via WAM)
 HTMLHelper::_('bootstrap.framework');
-HTMLHelper::_('bootstrap.loadCss', true);
 HTMLHelper::_('bootstrap.alert');
 HTMLHelper::_('bootstrap.button');
 HTMLHelper::_('bootstrap.carousel');
@@ -56,7 +57,7 @@ HTMLHelper::_('bootstrap.scrollspy');
 HTMLHelper::_('bootstrap.tab');
 HTMLHelper::_('bootstrap.tooltip');
 HTMLHelper::_('bootstrap.toast');
-
+*/
 // Detecting Active Variables
 $option    = $input->getCmd('option', '');
 $view      = $input->getCmd('view', '');
@@ -80,41 +81,33 @@ $this->setTitle($final);
 // Template/Media path
 $templatePath = 'media/templates/site/moko-cassiopeia';

-// ===========================
-// Web Asset Manager (WAM) — matches your joomla.asset.json
-// ===========================
-
 // Core template CSS
-$wa->useStyle('template.global.base');   // css/template.css
-$wa->useStyle('template.global.social-media-demo');   // css/user.css
-
-// Optional vendor CSS
-$wa->useStyle('vendor.bootstrap-toc');
-
-// Optional demo/showcase CSS (available for use, not loaded by default)
-// To use: Add 'template.global.social-media-demo' to your article/module
-// $wa->useStyle('template.global.social-media-demo');
+$wa->useStyle('template.base');   // css/template.css

 // Color theme (light + optional dark)
 $colorLightKey  = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
 $colorDarkKey  = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
 $lightKey  = 'template.light.' . $colorLightKey;
 $darkKey   = 'template.dark.' . $colorDarkKey;
+
 try {
 	$wa->useStyle('template.light.colors_standard');
 } catch (\Throwable $e) {
 	$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
 }
+
 try {
 	$wa->useStyle('template.dark.colors_standard');
 } catch (\Throwable $e) {
 	$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
 }
+
 try {
 	$wa->useStyle($lightKey);
 } catch (\Throwable $e) {
 	$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
 }
+
 try {
 	$wa->useStyle($darkKey);
 } catch (\Throwable $e) {
@@ -123,9 +116,20 @@ try {

 // Scripts
 $wa->useScript('template.js');
-$wa->useScript('theme-init.js');
-$wa->useScript('darkmode-toggle.js');
-$wa->useScript('vendor.bootstrap-toc.js');
+
+/**
+ * VirtueMart detection:
+ * - Component must exist and be enabled
+ */
+$isVirtueMartActive = ComponentHelper::isEnabled('com_virtuemart', true);
+
+if ($isVirtueMartActive) {
+    /**
+     * Load a VirtueMart-specific stylesheet defined in your template manifest.
+     * This assumes you defined an asset named "template.virtuemart".
+     */
+    $wa->useStyle('vendor.vm');
+}

 // Font scheme (external or local) + CSS custom properties
 $params_FontScheme = $this->params->get('useFontScheme', false);
--- a/src/templates/joomla.asset.json
+++ b/src/templates/joomla.asset.json
@@ -23,13 +23,13 @@
 	},
 	"assets": [
 		{
-      "name": "template.global.base",
+			"name": "template.base",
 			"type": "style",
 			"uri": "media/templates/site/moko-cassiopeia/css/template.css",
 			"attributes": {"media": "all"}
 		},
 		{
-      "name": "template.global.base.min",
+			"name": "template.base.min",
 			"type": "style",
 			"uri": "media/templates/site/moko-cassiopeia/css/template.min.css",
 			"attributes": {"media": "all"}
@@ -58,18 +58,6 @@
 			"uri": "media/templates/site/moko-cassiopeia/css/editor.min.css",
 			"attributes": {"media": "all"}
 		},
-    {
-      "name": "vendor.bootstrap-toc",
-      "type": "style",
-      "uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.css",
-      "attributes": {"media": "all"}
-    },
-    {
-      "name": "vendor.bootstrap-toc.min",
-      "type": "style",
-      "uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.css",
-      "attributes": {"media": "all"}
-    },
 		{
 			"name": "template.light.colors_standard",
 			"type": "style",
@@ -189,18 +177,6 @@
 			"uri": "media/templates/site/moko-cassiopeia/js/gtm.min.js",
 			"attributes": {"defer": true}
 		},
-    {
-      "name": "vendor.bootstrap-toc.js",
-      "type": "script",
-      "uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.js",
-      "attributes": {"defer": true}
-    },
-    {
-      "name": "vendor.bootstrap-toc.js.min",
-      "type": "script",
-      "uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.js",
-      "attributes": {"defer": true}
-    },
 		{
 			"name": "vendor.fa7free.all",
 			"type": "style",
@@ -260,16 +236,10 @@
 			"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/solid.min.css",
 			"attributes": {"media": "all"}
 		},
-    {
-      "name": "template.global.social-media-demo",
-      "type": "style",
-      "uri": "media/templates/site/moko-cassiopeia/css/global/social-media-demo.css",
-      "attributes": {"media": "all"}
-    },
 		{
 			"name": "vendor.vm",
 			"type": "style",
-      "uri": "media/templates/site/moko-cassiopeia/vendor/vm.css",
+			"uri": "media/templates/site/moko-cassiopeia/css/vendor/vm.css",
 			"attributes": {"media": "all"}
 		}
 	]