/**
 * Customizer Preview Script
 * Handles live preview updates in the WordPress Customizer
 */

(function($) {
    // Handle Primary Color changes
    wp.customize('rosea_primary_color', function(value) {
        value.bind(function(to) {
            // Update CSS variable
            $(':root').css('--rosea-primary-color', to);

            // Global Header Gradient: only first color changes
            $('.global-header').css('background', 'linear-gradient(135deg, ' + to + ', #764ba2)');

            // Blog Pagination Current
            $('.blog-pagination .current, .blog-pagination span.current').css({
                'background-color': to,
                'border-color': to
            });

            // Blog card readmore link
            $('.blog-card-readmore').css('color', to);

            // All link hover colors (note: may not work for :hover pseudo dynamically)
            // Better: update CSS variable and use it in CSS
            $('a').hover(
                function() {
                    $(this).css('color', to);
                },
                function() {
                    $(this).css('color', '');
                }
            );

            // Form submit hover
            $('.form-submit').hover(
                function() {
                    $(this).css('background-color', to);
                },
                function() {
                    $(this).css('background-color', '');
                }
            );

            // Blog post meta links
            $('.blog-post .post-meta a').css('color', to);

            // Post navigation icons
            $('.post-navigation .nav-next i, .post-navigation .nav-previous a, .post-navigation .nav-previous i').css('color', to);


            // Update logo text color
            $('.site-logo-text, .navbar-brand.site-logo-text, .logo.site-logo-text').css('color', to);
        });
    });

    // Handle Sidebar Background Color changes
    wp.customize('rosea_sidebar_bg_color', function(value) {
        value.bind(function(to) {
            // Update CSS variable
            $(':root').css('--rosea-sidebar-bg', to);

            // Update sidebar background
            $('.blog-sidebar').css('background-color', to);
        });
    });

    // Handle Body Font Size changes
    wp.customize('rosea_body_font_size', function(value) {
        value.bind(function(to) {
            $('body').css('font-size', to + 'px');
        });
    });

    // Handle Container Width changes
    wp.customize('rosea_container_width', function(value) {
        value.bind(function(to) {
            $('.blog-homepage-container, .blog-page-container').css('max-width', to + 'px');
        });
    });
})(jQuery);