/* dynamic.css - Dynamic Theme Variables Controlled by Admin UI */

/* 
This file contains CSS custom properties (variables) that are dynamically 
updated through admin interface controllers. These variables control the 
appearance of header, footer, logo, and background layers.

Controllers that update this file:
- /admin/includes/brand-logo-api.php (Logo settings)
- /admin/includes/header-controller-api.php (Header & navigation)
- /admin/includes/footer-controller-api.php (Footer)
- /admin/includes/background-controller-api.php (3-layer background system)

=== BACKUP SYSTEM ARCHITECTURE ===

Problem Solved: When switching between solid/gradient background modes in admin UI,
previous settings would be lost because both modes use the same CSS variable.

Solution: 4-variable backup system per section (header, footer):

1. --[section]-bg: ACTIVE display variable (what live pages use)
2. --[section]-mode: Current mode ("solid" or "gradient")  
3. --[section]-solid-backup: Preserves last solid settings
4. --[section]-gradient-backup: Preserves last gradient settings

Rules for Implementation:
- Live pages ONLY read the active --[section]-bg variable
- Admin UI manages all 4 variables
- When switching modes, load from appropriate backup
- When saving, update both active and backup variables
*/

:root {
    /* === LOGO SETTINGS === */
    --logo-url: url(../images/UI/navbar-logo-1757118128-68bb7eb0568a1.svg);
    --logo-width: 300px;
    --logo-height: auto;
    --logo-position: flex-start;
    --menu-alignment: flex-end;
    
    /* === HEADER & NAVIGATION STYLES === */
    --header-bg: linear-gradient(to right, rgba(30, 37, 41, 1), rgba(69, 86, 96, 1));
    --header-mode: gradient;
    --header-solid-backup: rgba(11, 193, 72, 1);
    --header-gradient-backup: linear-gradient(to right, rgba(30, 37, 41, 1), rgba(69, 86, 96, 1));
    --header-text: #f5f5f5;
    --header-border: none;
    --header-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --navbar-border: none;
    --nav-link-color: #f5f5f5;
    --nav-link-hover: #ffffff;
    --nav-link-active: #f5f5f5;
    --nav-link-hover-bg: #00a2ff;
    --nav-link-active-bg: #455660;
    --nav-link-focus: #586d79;
    --nav-link-focus-bg: rgba(255, 102, 0, 0.05);
    --nav-link-disabled: #586d79;
    --nav-link-disabled-bg: transparent;
    --navbar-toggler-color: #e9ecef;
    --navbar-toggler-border: #e9ecef;
    --navbar-toggler-bg: #586d79;
    
    /* === FOOTER STYLES === */
    --footer-bg: rgba(223, 231, 228, 1);
    --footer-mode: solid;
    --footer-solid-backup: rgba(223, 231, 228, 1);
    --footer-gradient-backup: linear-gradient(to top, rgba(0, 255, 85, 1), rgba(0, 255, 85, 1));
    --footer-text: #000000;
    --footer-link: #333333;
    --footer-link-hover: #00a693;
    --footer-border: #e0e0e0;
    --footer-shadow: none;
    
    /* ============================================================================ */
    /* === BACKGROUND SYSTEM - 3-LAYER ARCHITECTURE ===                        */
    /* ============================================================================ */
    /* Controlled by: /admin/includes/testBG-controller-api.php                   */
    /* JSON Source: /data/ui-config.json > background                             */
    /* ============================================================================ */
    
    /* --- LAYER CONTROL STATES --- */
    /* Global enable/disable switches for each background layer */
    --layer1-enabled: 1;    /* background.layerStates.layer1 (true=1, false=0) */
    --layer2-enabled: 1;    /* background.layerStates.layer2 (true=1, false=0) */
    --layer3-enabled: 0;    /* background.layerStates.layer3 (true=1, false=0) */
    
    /* --- LAYER 1: BASE BACKGROUND LAYER --- */
    /* Foundation layer - solid colors and gradients (z-index: -3) */
    /* Frontend Mode: background.layer1FrontendMode (solid/gradient) */
    --body-layer1-color: transparent;     /* background.layer1.solid.color + opacity */
    --body-layer1-opacity: 1;                    /* background.layer1.solid.opacity */
    --body-layer1-gradient: linear-gradient(to bottom right, rgba(69, 86, 96, 1), rgba(223, 231, 228, 1));                   /* Generated from background.layer1.gradient when active */
    
    /* --- LAYER 2: BACKGROUND IMAGES LAYER --- */
    /* Layer 2 enable/disable control only - all image styling moved to custom.css */
    --body-layer2-opacity: 0.2;              /* background.layer2.globalOpacity */
    
    /* --- LAYER 3: OVERLAY EFFECTS LAYER --- */
    /* Top layer - overlay colors/gradients with blend modes (z-index: -1) */
    /* Frontend Mode: background.layer3FrontendMode (solid/gradient) */
    --body-layer3-color: transparent;               /* background.layer3.gradient - transparent when in gradient mode */
    --body-layer3-opacity: 1;                      /* background.layer3.gradient.gradientOpacity */
    --body-layer3-gradient: linear-gradient(to bottom, rgba(69, 86, 96, 0.2), rgba(255, 255, 255, 0)); /* Generated from background.layer3.gradient when active */
    --body-layer3-blend-mode: overlay;               /* background.layer3.[mode].blendMode */
}

/* === BODY BACKGROUND LAYERS IMPLEMENTATION === */

/* 
=== MOBILE BACKGROUND FIX IMPLEMENTATION GUIDE ===

PROBLEM: On mobile devices (iOS Safari, Android Chrome), background images "jump" 
when scrolling because:
- Mobile browsers show/hide address bar during scrolling
- Viewport height changes when address bar appears/disappears  
- Background images resize to fit new viewport dimensions
- Creates jarring visual jump effect

SOLUTION: Enhanced JavaScript Implementation (Production-Tested)

REQUIRED HTML STRUCTURE FOR LIVE TEMPLATES:
- Add <div id="bg-container"></div> immediately after <body> tag
- Add <div class="body-overlay"></div> for Layer 3 blend mode support

REQUIRED JAVASCRIPT FOR LIVE TEMPLATES:
Add this function to main.js and call on page load:

```javascript
function fixMobileBackgroundHeight() {
    // Only apply to mobile devices (1024px and below)
    if (window.innerWidth > 1024) {
        return;
    }
    
    const bgContainer = document.getElementById('bg-container');
    if (!bgContainer) {
        return;
    }
    
    function resizeBackground() {
        // Use screen.height for stable height, add buffer for address bar
        const mobileHeight = Math.max(window.innerHeight, screen.height) + 60;
        bgContainer.style.height = mobileHeight + 'px';
        console.log('Mobile background height set to:', mobileHeight + 'px');
    }
    
    // Set initial height
    resizeBackground();
    
    // Handle orientation changes and resize events
    window.addEventListener('resize', resizeBackground);
    window.addEventListener('orientationchange', function() {
        setTimeout(resizeBackground, 500);
    });
    
    // Handle scroll to maintain fixed position
    let ticking = false;
    window.addEventListener('scroll', function() {
        if (!ticking) {
            requestAnimationFrame(function() {
                bgContainer.style.top = '0px';
                ticking = false;
            });
            ticking = true;
        }
    });
}

// Call on page load
fixMobileBackgroundHeight();
```
*/

/* Container for all background layers with mobile fix support */
body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 
Background container for mobile height fix 
CRITICAL: This element must exist in live templates for mobile fix to work
Add to HTML: <div id="bg-container"></div> immediately after <body> tag
*/
#bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -3;
    pointer-events: none;
}

/* Layer 1 - Base Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -3;
    pointer-events: none;
    
    /* Layer enable/disable control */
    opacity: calc(var(--layer1-enabled, 0) * var(--body-layer1-opacity, 1));
    
    /* Dynamic background - solid color or gradient */
    background: var(--body-layer1-color);
    background-image: var(--body-layer1-gradient);
}

/* Layer 2 - Background Images (moved to custom.css) */
/* Layer 2 implementation moved to custom.css for JavaScript control */

/* 
Layer 3 - Overlay System with Photoshop-Style Blend Modes
CRITICAL: Requires <div class="body-overlay"></div> element in live templates
Add to HTML: <div class="body-overlay"></div> immediately after #bg-container div

Supported Blend Modes (16 Photoshop-compatible modes):
- normal, multiply, screen, overlay
- soft-light, hard-light, color-dodge, color-burn  
- darken, lighten, difference, exclusion
- hue, saturation, color, luminosity

Layer 3 uses mix-blend-mode to blend with Layer 1 and Layer 2 below
*/
body .body-overlay {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    
    /* Layer enable/disable control */
    opacity: calc(var(--layer3-enabled, 0) * var(--body-layer3-opacity, 1));
    
    /* Dynamic overlay background - solid color or gradient */
    background: var(--body-layer3-color);
    background-image: var(--body-layer3-gradient);
    
    /* Photoshop-style blend mode - controlled by admin blend mode selector */
    mix-blend-mode: var(--body-layer3-blend-mode);
}


/* 
=== MOBILE OPTIMIZATION FOR ALL 3 BACKGROUND LAYERS ===

CRITICAL FOR LIVE TEMPLATES:
Mobile devices require special handling to prevent background jumping.
These styles work in conjunction with fixMobileBackgroundHeight() JavaScript function.

Mobile Issues Addressed:
1. Address bar show/hide causes viewport height changes
2. Background layers resize and "jump" during scroll
3. Performance issues with background-attachment: fixed
4. Touch device height calculation inconsistencies
*/
@media screen and (max-width: 1024px) {
    /* 
    Mobile-specific height adjustments for all 3 layers
    Heights will be overridden by fixMobileBackgroundHeight() JavaScript
    These min-heights serve as fallbacks
    */
    body::before,        /* Layer 1 - Base Background */
    body .body-overlay,  /* Layer 3 - Overlay with Blend Modes */
    #bg-container {      /* Mobile Fix Container */
        min-height: 100vh;
    }
    
    /* Layer 2 mobile fixes moved to custom.css */
}

/* Accessibility and performance optimizations */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    body .body-overlay {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body::before,
    body::after,
    body .body-overlay {
        filter: contrast(1.2);
    }
}

/* 
=== 3-LAYER BACKGROUND SYSTEM IMPLEMENTATION NOTES ===

ADMIN UI CONTROLLER:
- All variables controlled by admin interface controllers
- Settings saved to /data/ui-config.json for persistence  
- Real-time preview with JavaScript in admin interface

CSS VARIABLES SYSTEM:
Dynamic variables can be updated via:
- Admin interface (automatic via API)
- JavaScript: document.documentElement.style.setProperty('--variable-name', 'value');

3-LAYER ARCHITECTURE:
┌─────────────────────────────────────────────────────────────┐
│ Layer 3: Overlay (.body-overlay element)                   │ z-index: -1
│ • Photoshop-style blend modes (16 modes)                   │
│ • Solid color or gradient                                   │  
│ • mix-blend-mode blends with layers below                  │
├─────────────────────────────────────────────────────────────┤
│ Layer 2: Background Images (body::after)                   │ z-index: -2
│ • Up to 7 images maximum                                   │
│ • Image positioning, sizing, repeat controls               │
├─────────────────────────────────────────────────────────────┤
│ Layer 1: Base Background (body::before)                    │ z-index: -3  
│ • Solid color or gradient                                   │
│ • Foundation layer for entire site                         │
└─────────────────────────────────────────────────────────────┘

LIVE TEMPLATE INTEGRATION REQUIREMENTS:
1. HTML Structure:
   <body>
       <div id="bg-container"></div>          <!-- Mobile fix container -->
       <div class="body-overlay"></div>       <!-- Layer 3 blend mode element -->
       <!-- Rest of page content -->
   </body>

2. JavaScript Requirements:
   - Include fixMobileBackgroundHeight() function in main.js  
   - Call function on page load for mobile background fix

3. CSS Integration:
   - This dynamic.css file contains all layer definitions
   - CSS variables automatically updated by admin controller
   - Mobile optimizations included for all layers

STATUS:
✅ Layer 1: Complete (solid/gradient backgrounds)
✅ Layer 2: Complete (image upload system)  
✅ Layer 3: Complete (solid/gradient + 16 blend modes)
✅ Mobile Fix: Complete implementation guide included
✅ Admin Interface: Fully functional with real-time preview
*/




























































































































































































































































































































































































/* Logo Center Positioning - Simplified */
.navbar-center-logo .container-fluid {
    justify-content: space-between !important;
}

.navbar-center-logo .navbar-nav {
    margin-left: auto;
}

/* Stacked layout when both logo and menu are centered - Desktop only (1025px and up) */
@media (min-width: 1025px) {
    .navbar-center-logo .navbar-stacked-layout {
        width: 100%;
    }
    
    .navbar-center-logo .navbar-stacked-layout .logo-col {
        text-align: center;
        margin-bottom: 6px; /* Reduced from 1rem to account for navbar-brand-wrapper margin */
    }
    
    .navbar-center-logo .navbar-stacked-layout .menu-col {
        text-align: center;
        position: static; /* Ensure proper positioning context */
    }
    
    .navbar-center-logo .navbar-stacked-layout .navbar-brand-wrapper {
        display: inline-block;
        margin-top: 10px; /* Add top margin to logo wrapper */
    }
    
    .navbar-center-logo .navbar-stacked-layout .navbar-collapse {
        display: flex !important;
        justify-content: center;
        width: 100%;
        position: static !important; /* Reset position */
        overflow: visible !important; /* Allow dropdown to overflow */
    }
    
    .navbar-center-logo .navbar-stacked-layout .navbar-nav {
        position: static;
        width: 100%;
        justify-content: center !important;
        overflow: visible !important; /* Allow dropdown to overflow */
    }
}

/* Force left/right layout for 1024px and below (ignore centering settings) */
@media (max-width: 1024px) {
    .navbar-center-logo .container-fluid {
        justify-content: space-between !important;
    }
    
    .navbar-center-logo .navbar-nav {
        position: static;
        margin-left: auto;
    }
    
    /* Disable grid behavior for stacked layout below 1025px */
    .navbar-center-logo .navbar-stacked-layout {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    .navbar-center-logo .navbar-stacked-layout .col-12 {
        flex: none !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .navbar-center-logo .navbar-stacked-layout .logo-col {
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-center-logo .navbar-stacked-layout .menu-col {
        margin-left: auto !important;
        text-align: right !important;
    }
    
    .navbar-center-logo .navbar-stacked-layout .navbar-brand-wrapper {
        display: block !important;
    }
}

/* === NAVIGATION MENU ALIGNMENT === */
.navbar-nav-center {
    justify-content: center;
    width: 100%;
}

.navbar-nav-right {
    justify-content: flex-end;
    margin-left: auto;
}

/* Default left alignment (no additional styles needed - Bootstrap default) */
.navbar-nav {
    justify-content: var(--menu-alignment, flex-start);
}

/* When both logo and menu are centered, handle layout */
.navbar-center-logo .navbar-nav-center {
    position: static;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

/* When logo is centered and menu is right-aligned */
.navbar-center-logo .navbar-nav-right {
    position: static;
    margin-left: auto;
    margin-right: 0;
}


/* Mobile menu alignment */
@media (max-width: 992px) {
    .navbar-nav-center {
        justify-content: flex-start;
        text-align: center;
    }
    
    .navbar-nav-center .nav-item {
        text-align: center;
    }
    
    .navbar-nav-right {
        justify-content: flex-start;
        margin-left: 0;
    }
    
    .navbar-nav-right .nav-item {
        text-align: left;
    }
}













































































































































































































































































































































































































































































































































































































/* LOGO STYLES START */
.navbar-brand img {
    display: block;
    max-width: 100%;
    width: var(--logo-width);
    height: var(--logo-height);
}

.navbar-brand {
    display: flex;
    justify-content: var(--logo-position);
}

@media (max-width: 768px) {
    .navbar-brand img {
        max-width: min(300px, 150px);
        width: auto;
        height: auto;
    }
}

/* LOGO STYLES END */