<?php
/**
 * Golpo Theme Customizer CSS output.
 *
 * @package Golpo
 */

function golpo_customizer_css() {
    // Color Palettes
    $color_scheme = get_theme_mod( 'golpo_color_scheme', 'default' );
    
    // Palettes Definition
    $palettes = array(
        // 1. Default (Classic Navy)
        // 1. Default (Modern Corporate)
        'default' => array(
            'primary' => '#0f172a', 'secondary' => '#3b82f6', 'text' => '#334155', 'link' => '#3b82f6', 'link_hover' => '#0f172a', 
            'btn_bg' => '#3b82f6', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#2563eb', 'btn_hover_text' => '#ffffff'
        ),
        // 2. Ocean Blue
        'ocean' => array(
            'primary' => '#006994', 'secondary' => '#00a8e8', 'text' => '#333333', 'link' => '#006994', 'link_hover' => '#002a40', // Very dark blue hover
            'btn_bg' => '#006994', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#004e6e', 'btn_hover_text' => '#ffffff'
        ),
        // 3. Midnight Blue
        'midnight' => array(
            'primary' => '#1a1a2e', 'secondary' => '#16213e', 'text' => '#e94560', 'link' => '#16213e', 'link_hover' => '#e94560', 
            'btn_bg' => '#16213e', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#e94560', 'btn_hover_text' => '#ffffff'
        ),
        // 4. Forest Green
        'forest' => array(
            'primary' => '#2e4a33', 'secondary' => '#7ea172', 'text' => '#3a3a3a', 'link' => '#2e4a33', 'link_hover' => '#0c160e', // Almost black green
            'btn_bg' => '#2e4a33', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#142518', 'btn_hover_text' => '#ffffff'
        ),
        // 5. Emerald City
        'emerald' => array(
            'primary' => '#0F5132', 'secondary' => '#198754', 'text' => '#212529', 'link' => '#0F5132', 'link_hover' => '#052c1a', // Deep emerald black
            'btn_bg' => '#198754', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#0F5132', 'btn_hover_text' => '#ffffff'
        ),
        // 6. Sunset Orange
        'sunset' => array(
            'primary' => '#c0392b', 'secondary' => '#e67e22', 'text' => '#444444', 'link' => '#c0392b', 'link_hover' => '#7b241c', // Dark red hover
            'btn_bg' => '#e67e22', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#d35400', 'btn_hover_text' => '#ffffff'
        ),
        // 7. Coral Reef
        'coral' => array(
            'primary' => '#FF7F50', 'secondary' => '#FF4500', 'text' => '#2F4F4F', 'link' => '#FF4500', 'link_hover' => '#8b2500', // Dark rust hover
            'btn_bg' => '#FF7F50', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#FF4500', 'btn_hover_text' => '#ffffff'
        ),
        // 8. Berry Red
        'berry' => array(
            'primary' => '#8e44ad', 'secondary' => '#d2b4de', 'text' => '#555555', 'link' => '#8e44ad', 'link_hover' => '#4a235a', // Deep purple hover
            'btn_bg' => '#8e44ad', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#6c3483', 'btn_hover_text' => '#ffffff'
        ),
        // 9. Dusty Rose
        'rose' => array(
            'primary' => '#b76e79', 'secondary' => '#d8a1a8', 'text' => '#4a4a4a', 'link' => '#b76e79', 'link_hover' => '#754048', // Dark rose hover
            'btn_bg' => '#b76e79', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#8f565e', 'btn_hover_text' => '#ffffff'
        ),
        // 10. Charcoal & Gold (Dark)
        'charcoal' => array(
            'primary' => '#36454F', 'secondary' => '#D4AF37', 'text' => '#1C1C1C', 'link' => '#36454F', 'link_hover' => '#000000', // Black hover
            'btn_bg' => '#36454F', 'btn_text' => '#D4AF37', 'btn_hover_bg' => '#1C1C1C', 'btn_hover_text' => '#D4AF37'
        ),
        // 11. Slate & Teal
        'slate' => array(
            'primary' => '#37474F', 'secondary' => '#009688', 'text' => '#263238', 'link' => '#009688', 'link_hover' => '#004d40', // Dark teal hover
            'btn_bg' => '#37474F', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#263238', 'btn_hover_text' => '#ffffff'
        ),
        // 12. Coffee & Cream
        'coffee' => array(
            'primary' => '#6F4E37', 'secondary' => '#A07855', 'text' => '#3E2723', 'link' => '#6F4E37', 'link_hover' => '#3e2723', // Dark brown hover
            'btn_bg' => '#6F4E37', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#3e2723', 'btn_hover_text' => '#ffffff'
        ),
        // 13. Royal Gold (Dark)
        'royal' => array(
            'primary' => '#2c3e50', 'secondary' => '#f1c40f', 'text' => '#2c3e50', 'link' => '#faa61a', 'link_hover' => '#ffffff', // Gold to White hover
            'btn_bg' => '#2c3e50', 'btn_text' => '#f1c40f', 'btn_hover_bg' => '#f1c40f', 'btn_hover_text' => '#2c3e50'
        ),
        // 14. Soft Lavender
        'lavender' => array(
            'primary' => '#9575CD', 'secondary' => '#B39DDB', 'text' => '#512DA8', 'link' => '#673AB7', 'link_hover' => '#311b92', // Deep purple hover
            'btn_bg' => '#9575CD', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#5e35b1', 'btn_hover_text' => '#ffffff'
        ),
        // 15. Fresh Mint
        'mint' => array(
            'primary' => '#20B2AA', 'secondary' => '#66CDAA', 'text' => '#006400', 'link' => '#20B2AA', 'link_hover' => '#004d40', // Dark green hover
            'btn_bg' => '#20B2AA', 'btn_text' => '#ffffff', 'btn_hover_bg' => '#008b8b', 'btn_hover_text' => '#ffffff'
        ),
    );

    // Apply Palette overrides if not 'custom'
    if ( 'custom' !== $color_scheme && isset( $palettes[ $color_scheme ] ) ) {
        $primary_color    = $palettes[ $color_scheme ]['primary'];
        $secondary_color  = $palettes[ $color_scheme ]['secondary'];
        $text_color       = $palettes[ $color_scheme ]['text'];
        $link_color       = $palettes[ $color_scheme ]['link'];
        $link_hover_color = $palettes[ $color_scheme ]['link_hover'];
        // Also override buttons to match palette
        $btn_bg_color     = $palettes[ $color_scheme ]['btn_bg'];
        $btn_text_color   = $palettes[ $color_scheme ]['btn_text'];
        $btn_hover_bg_color   = $palettes[ $color_scheme ]['btn_hover_bg'];
        $btn_hover_text_color = $palettes[ $color_scheme ]['btn_hover_text'];
    } else {
        // Fallback to individual customizer settings (Custom Mode)
        $primary_color    = get_theme_mod( 'golpo_primary_color', '#030120' );
        $secondary_color  = get_theme_mod( 'golpo_secondary_color', '#a156b4' );
        $text_color       = get_theme_mod( 'golpo_text_color', '#555555' );
        $link_color       = get_theme_mod( 'golpo_link_color', '#030120' );
        $link_hover_color = get_theme_mod( 'golpo_link_hover_color', '#595777' );
    }

    $body_font        = get_theme_mod( 'golpo_body_font', 'Raleway' );
    $logo_width       = get_theme_mod( 'golpo_logo_width', 150 );
    
    // Buttons (Defaults if not set by palette)
    if ( ! isset( $btn_bg_color ) ) {
        $btn_bg_color     = get_theme_mod( 'golpo_btn_bg_color', '#030120' );
        $btn_text_color   = get_theme_mod( 'golpo_btn_text_color', '#ffffff' );
        // We'll assume a calculated hover if not set, or let CSS fallback
        $btn_hover_bg_color = 'var(--golpo-secondary-color)'; // default fallback
        $btn_hover_text_color = '#ffffff';
    }
    $btn_radius       = get_theme_mod( 'golpo_btn_radius', '5' );

    // Layout
    // Layout
    $layout = get_theme_mod( 'golpo_global_layout', 'full-width' );
    $custom_width = get_theme_mod( 'golpo_container_width', 1140 );
    
    $container_max_width = $custom_width . 'px';
    
    // Optional: Force narrower preset if 'narrow' layout is specifically meant to be fixed, 
    // but user asked for "User can change the page custom width", so prioritizing the slider makes sense.
    if ( 'narrow' === $layout ) {
        // We can respect the slider, or set a lower default if they switch to narrow? 
        // For now, let's honor the slider as the primary width control.
        // But if we want 'narrow' to mean "small", we could cap it. 
        // Let's stick to the slider for flexibility.
    } elseif ( 'boxed' === $layout ) {
         // Boxed usually implies a specific max-width, but the slider handles that too.
    }
    // Grid Columns
    $grid_columns = get_theme_mod( 'golpo_grid_columns', 1 );

    // Sidebar Width
    $sidebar_width_percent = get_theme_mod( 'golpo_sidebar_width', 30 );
    // Ensuring a small gap logic isn't strictly needed if we use calc() in the stylesheet, 
    // but here we just provide the raw basis.
    ?>
    <style type="text/css">
        :root {
            --golpo-sidebar-width: <?php echo absint( $sidebar_width_percent ); ?>%;
            --golpo-content-width: <?php echo ( 100 - absint( $sidebar_width_percent ) ); ?>%;

            --golpo-grid-columns: <?php echo absint( $grid_columns ); ?>;
            --golpo-primary-color: <?php echo esc_attr( $primary_color ); ?>;
            --golpo-secondary-color: <?php echo esc_attr( $secondary_color ); ?>;
            --golpo-text-color: <?php echo esc_attr( $text_color ); ?>;
            --golpo-link-color: <?php echo esc_attr( $link_color ); ?>;
            --golpo-link-hover-color: <?php echo esc_attr( $link_hover_color ); ?>;
            
            --golpo-btn-bg-color: <?php echo esc_attr( $btn_bg_color ); ?>;
            --golpo-btn-text-color: <?php echo esc_attr( $btn_text_color ); ?>;
            --golpo-btn-hover-bg-color: <?php echo esc_attr( $btn_hover_bg_color ); ?>;
            --golpo-btn-hover-text-color: <?php echo esc_attr( $btn_hover_text_color ); ?>;
            --golpo-btn-radius: <?php echo esc_attr( $btn_radius ); ?>px;

            
            /* Typography Variables */
            --golpo-font-body: '<?php echo esc_attr( $body_font ); ?>', sans-serif;
            --golpo-body-font-size: <?php echo absint( get_theme_mod('golpo_body_font_size', 16) ); ?>px;
            --golpo-site-title-font-size: <?php echo absint( get_theme_mod('golpo_site_title_font_size', 32) ); ?>px;
            
            <?php for($i=1; $i<=6; $i++): ?>
            --golpo-h<?php echo $i; ?>-font-size: <?php echo absint( get_theme_mod('golpo_h'.$i.'_font_size', (40 - ($i * 4))) ); ?>px;
            <?php endfor; ?>
            
            --golpo-sidebar-heading-size: <?php echo absint( get_theme_mod('golpo_sidebar_heading_font_size', 20) ); ?>px;
            --golpo-sidebar-link-size: <?php echo absint( get_theme_mod('golpo_sidebar_link_font_size', 14) ); ?>px;
        }

        /* -------------------------------------------------------------
         * Post Grid System
         * ------------------------------------------------------------- */
        .golpo-post-grid {
            display: grid;
            grid-template-columns: repeat(var(--golpo-grid-columns), minmax(0, 1fr));
            gap: 30px;
            width: 100%; /* Ensure it fits in parent */
        }
        
        .golpo-post-grid > article {
             min-width: 0; /* Flexbox/Grid overflow fix */
             word-wrap: break-word; 
        }
        
        /* Mobile Fallback: Always 1 column on small screens */
        @media screen and (max-width: 768px) {
            .golpo-post-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Tablet Fallback: Max 2 columns if set to 3 or 4 */
        @media screen and (min-width: 769px) and (max-width: 1024px) {
            .golpo-post-grid {
                 /* If user selected 3 or 4, force 2. If 1, keep 1. */
                 grid-template-columns: repeat(min(2, var(--golpo-grid-columns)), 1fr);
            }
        }

        body {
            font-family: var(--golpo-font-body);
            font-size: var(--golpo-body-font-size);
            color: var(--golpo-text-color);
        }

        /* Headings */
        h1 { font-size: var(--golpo-h1-font-size); }
        h2 { font-size: var(--golpo-h2-font-size); }
        h3 { font-size: var(--golpo-h3-font-size); }
        h4 { font-size: var(--golpo-h4-font-size); }
        h5 { font-size: var(--golpo-h5-font-size); }
        h6 { font-size: var(--golpo-h6-font-size); }
        
        .site-title {
            font-size: var(--golpo-site-title-font-size);
        }

        /* Sidebar Typography */
        .widget .widget-title, .widget .title {
            font-size: var(--golpo-sidebar-heading-size);
        }
        .widget a, .widget li, .widget, .widget p {
            font-size: var(--golpo-sidebar-link-size);
        }

        a {
            color: var(--golpo-link-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        a:hover, a:focus,
        .entry-content a:hover,
        .widget a:hover {
            color: var(--golpo-link-hover-color) !important;
        }

        /* Fix: Main Menu Hover Color */
        /* Ensure menu links use the secondary color (or a visible contrast) on hover, 
           overriding the general link hover which might match the menu background. */
        .main-navigation a:hover,
        .main-navigation li.current-menu-item > a,
        .main-navigation li.current_page_item > a,
        .main-navigation li:hover > a,
        .main-navigation li.focus > a {
            color: var(--golpo-secondary-color) !important;
        }

        /* Navigation / Pagination */
        .navigation.pagination .nav-links .page-numbers,
        .navigation.posts-navigation .nav-links a,
        .navigation.post-navigation .nav-links a {
             color: var(--golpo-primary-color);
             border-color: var(--golpo-primary-color);
        }
        
        .navigation.pagination .nav-links .page-numbers.current,
        .navigation.pagination .nav-links .page-numbers:hover,
        .navigation.posts-navigation .nav-links a:hover,
        .navigation.post-navigation .nav-links a:hover {
             background-color: var(--golpo-btn-hover-bg-color);
             color: var(--golpo-btn-hover-text-color) !important;
             border-color: var(--golpo-btn-hover-bg-color);
        }

        button, input[type="button"], input[type="reset"], input[type="submit"], .btn, .button {
            background-color: var(--golpo-btn-bg-color);
            color: var(--golpo-btn-text-color);
            border-radius: var(--golpo-btn-radius);
            border: none;
            padding: 10px 20px;
            transition: 0.3s;
        }

        button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .btn:hover, .button:hover, .btn-primary:hover, .read-more-btn:hover {
            background-color: var(--golpo-btn-hover-bg-color) !important;
            color: #ffffff !important; /* Force white text on hover to avoid background blend */
        }

        /* Smart Button Text Contrast in Dark Mode */
        body.golpo-dark-mode button, 
        body.golpo-dark-mode input[type="button"], 
        body.golpo-dark-mode input[type="submit"], 
        body.golpo-dark-mode .btn, 
        body.golpo-dark-mode .button {
            /* If the button text is set to dark (like classic black), invert it for dark mode visibility */
             /* We use a brighter text color by default in dark mode if the user hasn't forced a specific light color */
             color: #ffffff; 
        }
        
        body.golpo-dark-mode button:hover, 
        body.golpo-dark-mode .btn:hover, 
        body.golpo-dark-mode .button:hover {
             color: #ffffff;
             opacity: 0.9; /* Add slight transparency for better hover indication on top of color change */
        }
        
        .container {
            max-width: <?php echo esc_html( $container_max_width ); ?>;
        }

        /* Boxed Layout Specifics */
        <?php if ( 'boxed' === $layout ) : ?>
        body.golpo-layout-boxed {
            background-color: #e0e0e0;
        }
        body.golpo-layout-boxed #page {
            max-width: 1200px;
            margin: 40px auto;
            background: #fff;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        <?php endif; ?>

        /* Dark Mode Styles */
        body.golpo-dark-mode {
            background-color: #121212 !important;
            color: #d1d1d1 !important;
        }
        
        body.golpo-dark-mode #page {
            background-color: #121212;
        }

        /* Header */
        body.golpo-dark-mode .site-header {
             background-color: #1a1a1a;
             border-bottom: 1px solid #333;
        }
        body.golpo-dark-mode .site-title a,
        body.golpo-dark-mode .site-description {
            color: #ffffff !important;
        }

        /* Cards / Content Areas */
        body.golpo-dark-mode article.post, 
        body.golpo-dark-mode .widget, 
        body.golpo-dark-mode .comments-area,
        body.golpo-dark-mode article.page,
        body.golpo-dark-mode .site-footer {
            background-color: #1e1e1e;
            color: #c7c7c7;
            border-color: #333;
            box-shadow: none; /* remove light shadows */
        }
        
        /* Typography */
        body.golpo-dark-mode h1, body.golpo-dark-mode h2, body.golpo-dark-mode h3, 
        body.golpo-dark-mode h4, body.golpo-dark-mode h5, body.golpo-dark-mode h6,
        body.golpo-dark-mode .widget-title,
        body.golpo-dark-mode article.post .entry-title a {
            color: #ffffff !important;
        }
        
        body.golpo-dark-mode a {
            color: var(--golpo-secondary-color);
        }
        body.golpo-dark-mode a:hover {
            color: var(--golpo-link-hover-color);
        }

        /* Inputs & Meta */
        body.golpo-dark-mode input, 
        body.golpo-dark-mode textarea,
        body.golpo-dark-mode select {
            background-color: #2c2c2c !important;
            color: #fff !important;
            border-color: #444 !important;
        }
        
        body.golpo-dark-mode .entry-meta,
        body.golpo-dark-mode .entry-footer,
        body.golpo-dark-mode .entry-meta a, 
        body.golpo-dark-mode .entry-footer a {
            color: #888;
        }
        
        /* Submenu in Dark Mode */
        body.golpo-dark-mode .main-navigation ul ul {
            background-color: #2c2c2c;
            border: 1px solid #444;
        }
        
        /* Menu Toggle */
        body.golpo-dark-mode .menu-toggle {
            border-color: #444;
            color: #fff;
        }

        /* Dark Mode Navigation/Pagination */
        body.golpo-dark-mode .navigation.pagination .nav-links .page-numbers,
        body.golpo-dark-mode .navigation.posts-navigation .nav-links a,
        body.golpo-dark-mode .navigation.post-navigation .nav-links a {
             color: #ffffff;
             border-color: #444;
        }
        
        body.golpo-dark-mode .navigation.pagination .nav-links .page-numbers.current,
        body.golpo-dark-mode .navigation.pagination .nav-links .page-numbers:hover,
        body.golpo-dark-mode .navigation.posts-navigation .nav-links a:hover,
        body.golpo-dark-mode .navigation.post-navigation .nav-links a:hover {
             background-color: var(--golpo-btn-hover-bg-color);
             border-color: var(--golpo-btn-hover-bg-color);
             color: var(--golpo-btn-hover-text-color);
        }

        /* Dark Mode Toggle Button */
        body.golpo-dark-mode #golpo-dark-mode-toggle {
            background: #333;
            color: #fff;
            border-color: #555;
        }
        
        /* Boxed Layout in Dark Mode */
        body.golpo-dark-mode.golpo-layout-boxed {
             background-color: #000;
        }
        body.golpo-dark-mode.golpo-layout-boxed #page {
            background-color: #121212;
            box-shadow: 0 0 20px rgba(255,255,255,0.05);
        }

        /* Logo Width */
        .site-branding .custom-logo-link img {
            max-width: <?php echo absint( $logo_width ); ?>px;
            width: 100%;
            height: auto;
        }

        /* -------------------------------------------------------------
         * Floating Buttons (Dark Mode & Back to Top)
         * ------------------------------------------------------------- */
        .golpo-float-btn {
            position: fixed;
            right: 30px;
            z-index: 999;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            font-size: 18px;
            border: 1px solid rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            padding: 0; /* Fix alignment */
        }
        .golpo-float-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        }

        /* Back to Top */
        #golpo-back-to-top {
            bottom: 30px;
            display: none; /* JS toggles this */
            background-color: var(--golpo-primary-color);
            color: #fff;
            border: none;
        }
        #golpo-back-to-top:hover {
            background-color: var(--golpo-secondary-color);
        }

        /* Dark Mode Toggle */
        #golpo-dark-mode-toggle {
            bottom: 90px; /* Stacked above back-to-top */
            background-color: #fff;
            color: #333;
        }

        /* Dark Mode State for Toggle */
        body.golpo-dark-mode #golpo-dark-mode-toggle {
            background-color: #333;
            color: #fff;
            border-color: #555;
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }

        <?php 
        $sidebar_layout = get_theme_mod( 'golpo_sidebar_layout', 'right' );
        if ( 'no-sidebar' !== $sidebar_layout ) : ?>
        @media (min-width: 768px) {
            #primary {
                flex: 0 0 var(--golpo-content-width);
                max-width: var(--golpo-content-width);
            }
            #secondary {
                flex: 0 0 var(--golpo-sidebar-width);
                max-width: var(--golpo-sidebar-width);
            }
        }
        <?php endif; ?>
    </style>
    <?php
}
add_action( 'wp_head', 'golpo_customizer_css' );

function golpo_add_layout_body_classes( $classes ) {
    $layout = get_theme_mod( 'golpo_global_layout', 'full-width' );
    $classes[] = 'golpo-layout-' . $layout;
    return $classes;
}
add_filter( 'body_class', 'golpo_add_layout_body_classes' );
