<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
    <?php wp_head(); ?>
</head>

<?php
// Get current layout from Customizer
$blog_over_layout = get_theme_mod('blog_over_menu_layout', 'layout-1');
$blog_over_full_width = get_theme_mod('blog_over_menu_full_width', false);
$container_class = $blog_over_full_width ? 'blog-over-container-full' : 'blog-over-container';
?>

<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>

    <?php 
    // Loading Screen - Controlled via Customizer (Appearance → Customize → Theme Design → Loading Screen)
    if (get_theme_mod('blog_over_loading_screen_enable', true)) :
        // Get settings
        $loader_style = get_theme_mod('blog_over_loader_style', 'spinner');
        $loader_size = get_theme_mod('blog_over_loader_size', 'medium');
        $loader_color = get_theme_mod('blog_over_loader_color', '#ffffff');
        $loader_show_text = get_theme_mod('blog_over_loader_show_text', true);
        $loader_text = get_theme_mod('blog_over_loader_text', esc_html__('Loading', 'blog-over'));
        $loader_show_progress = get_theme_mod('blog_over_loader_show_progress', true);
        $min_duration = get_theme_mod('blog_over_loader_min_duration', 0.5);
        
        // Background
        $bg_type = get_theme_mod('blog_over_loader_bg_type', 'gradient');
        if ($bg_type === 'solid') {
            $bg_color = get_theme_mod('blog_over_loader_bg_color', '#667eea');
            $bg_style = "background: {$bg_color};";
        } else {
            $gradient_start = get_theme_mod('blog_over_loader_gradient_start', '#667eea');
            $gradient_end = get_theme_mod('blog_over_loader_gradient_end', '#764ba2');
            $bg_style = "background: linear-gradient(135deg, {$gradient_start} 0%, {$gradient_end} 100%);";
        }
        
        // Build inline styles
        $inline_style = "--blog-over-loader-color: {$loader_color}; {$bg_style}";
    ?>
    <!-- Loading Screen -->
    <div class="blog-over-loading-screen blog-over-loader-<?php echo esc_attr($loader_size); ?>" 
         data-loader="<?php echo esc_attr($loader_style); ?>"
         data-min-duration="<?php echo esc_attr($min_duration); ?>"
         style="<?php echo esc_attr($inline_style); ?>">
        <div class="blog-over-loader-content">
            <!-- Loader Design 1: Spinner (Default) -->
            <div class="blog-over-loader-spinner">
                <div class="blog-over-spinner-ring"></div>
                <div class="blog-over-spinner-ring"></div>
                <div class="blog-over-spinner-ring"></div>
            </div>

            <!-- Loader Design 2: Bouncing Dots -->
            <div class="blog-over-loader-dots">
                <span></span>
                <span></span>
                <span></span>
            </div>

            <!-- Loader Design 3: Pulse Circle -->
            <div class="blog-over-loader-pulse">
                <span></span>
                <span></span>
                <span></span>
            </div>

            <!-- Loader Design 4: Single Ring -->
            <div class="blog-over-loader-ring"></div>

            <!-- Loader Design 5: Animated Bars -->
            <div class="blog-over-loader-bars">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            <!-- Loader Design 6: 3D Cube -->
            <div class="blog-over-loader-cube">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            <?php if ($loader_show_text && !empty($loader_text)) : ?>
            <div class="blog-over-loader-text"><?php echo esc_html($loader_text); ?></div>
            <?php endif; ?>
            
            <?php if ($loader_show_progress) : ?>
            <div class="blog-over-loader-progress">
                <div class="blog-over-loader-progress-bar"></div>
            </div>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>

    <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e('Skip to content', 'blog-over'); ?></a>

    <?php if (get_theme_mod('blog_over_topbar_show', true)): 
        // Build topbar classes based on settings
        $topbar_classes = array('blog-over-topbar');
        
        // Width
        if (get_theme_mod('blog_over_topbar_width', 'boxed') === 'boxed') {
            $topbar_classes[] = 'blog-over-topbar-boxed';
        }
        
        // Border
        if (get_theme_mod('blog_over_topbar_border_show', false)) {
            $topbar_classes[] = 'blog-over-topbar-border';
        }
        
        // Social Icons Style
        $social_style = get_theme_mod('blog_over_social_icon_style', 'default');
        if ($social_style !== 'default') {
            $topbar_classes[] = 'blog-over-social-' . $social_style;
        }
    ?>
        <div class="<?php echo esc_attr(implode(' ', $topbar_classes)); ?>"><?php // inline style for bg opacity will be output via hooks.php ?>
            <!-- Mobile Top Bar Header Row (visible only on mobile ≤768px) -->
            <div class="blog-over-topbar-mobile-row">
                <span class="blog-over-topbar-mobile-text">
                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                    <?php 
                    $mobile_date_text = get_theme_mod('blog_over_topbar_date_text', '');
                    if (!empty($mobile_date_text)) {
                        echo esc_html($mobile_date_text);
                    } else {
                        echo esc_html(date_i18n(get_option('date_format')));
                    }
                    ?>
                </span>
                <button class="blog-over-topbar-toggle" aria-label="<?php esc_attr_e('Toggle top bar info', 'blog-over'); ?>" aria-expanded="false">
                    <i class="fas fa-info-circle" aria-hidden="true"></i>
                </button>
            </div>

            <!-- Mobile Action Bar: Quick-access icons (visible only on mobile ≤768px) -->
            <div class="blog-over-topbar-mobile-actions">
                <?php if (get_theme_mod('blog_over_dark_mode_toggle', true)): ?>
                    <button class="blog-over-theme-toggle" aria-label="<?php esc_attr_e('Toggle dark mode', 'blog-over'); ?>" aria-pressed="false">
                        <i class="fas fa-moon"></i>
                    </button>
                <?php endif; ?>

                <?php if (get_theme_mod('blog_over_show_search', true)): ?>
                    <?php 
                    $search_style = get_theme_mod('blog_over_search_style', 'popup'); 
                    // Fallback to popup for inline style on mobile
                    $mobile_search_style = ($search_style === 'inline') ? 'popup' : $search_style;
                    ?>
                    <button class="blog-over-search-toggle"
                            data-search-style="<?php echo esc_attr($mobile_search_style); ?>"
                            aria-label="<?php esc_attr_e('Open search', 'blog-over'); ?>"
                            aria-expanded="false">
                        <i class="fas fa-search"></i>
                    </button>
                <?php endif; ?>

                <?php if (get_theme_mod('blog_over_show_subscribe_btn', true)): ?>
                    <a href="<?php echo esc_url(get_theme_mod('blog_over_subscribe_url', '#')); ?>"
                       class="blog-over-subscribe-btn"
                       <?php if ( get_theme_mod( 'blog_over_subscribe_new_tab', true ) ) { echo 'target="_blank" rel="noopener noreferrer"'; } ?>>
                        <i class="fas fa-bell"></i>
                        <span><?php echo esc_html(get_theme_mod('blog_over_subscribe_text', __('Subscribe', 'blog-over'))); ?></span>
                    </a>
                <?php endif; ?>
            </div>
            <!-- Desktop: inline topbar content (hidden on mobile via CSS) -->
            <div class="blog-over-topbar-collapse">
            <?php 
            $topbar_width = get_theme_mod('blog_over_topbar_width', 'boxed');
            $topbar_container_class = ($topbar_width === 'full-width') ? 'blog-over-container-full' : 'blog-over-container';
            ?>
            <div class="<?php echo esc_attr($topbar_container_class); ?>">
                <div class="blog-over-topbar-inner">
                    <div class="blog-over-topbar-left">
                        <span class="blog-over-topbar-date">
                            <i class="far fa-calendar-alt"></i>
                            <?php 
                            $custom_date_text = get_theme_mod('blog_over_topbar_date_text', '');
                            if (!empty($custom_date_text)) {
                                echo esc_html($custom_date_text);
                            } else {
                                echo esc_html(date_i18n(get_option('date_format')));
                            }
                            ?>
                        </span>
                    </div>
                    <div class="blog-over-topbar-right">
                        <?php if (get_theme_mod('blog_over_header_social_show', true)): ?>
                            <div class="blog-over-topbar-social">
                                <?php
                                $social_links = get_theme_mod('blog_over_social_links', array());
                                if (!empty($social_links) && is_array($social_links)):
                                    foreach ($social_links as $link):
                                        if (!empty($link['url'])):
                                ?>
                                        <a href="<?php echo esc_url($link['url']); ?>" target="_blank" rel="noopener noreferrer"
                                            class="blog-over-topbar-social-link" aria-label="<?php echo esc_attr($link['label']); ?>">
                                            <i class="<?php echo esc_attr($link['icon']); ?>"></i>
                                        </a>
                                <?php
                                        endif;
                                    endforeach;
                                endif;
                                ?>
                            </div>
                        <?php endif; ?>

                        <?php if (get_theme_mod('blog_over_dark_mode_toggle', true)): ?>
                            <button class="blog-over-theme-toggle" aria-label="<?php esc_attr_e('Toggle dark mode', 'blog-over'); ?>"
                                aria-pressed="false">
                                <i class="fas fa-moon"></i>
                            </button>
                        <?php endif; ?>

                        <?php if (get_theme_mod('blog_over_show_search', true)): ?>
                            <?php $search_style = get_theme_mod('blog_over_search_style', 'popup'); ?>
                            <div class="blog-over-search-wrapper">
                                <button class="blog-over-search-toggle" 
                                        data-search-style="<?php echo esc_attr($search_style); ?>"
                                        aria-label="<?php esc_attr_e('Open search', 'blog-over'); ?>"
                                        aria-expanded="false">
                                    <i class="fas fa-search"></i>
                                </button>
                                <?php if ($search_style === 'inline'): ?>
                                <!-- Style 2: Inline Expand Search (positioned below icon) -->
                                <div class="blog-over-search-inline" aria-hidden="true">
                                    <?php get_search_form(); ?>
                                </div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <?php if (get_theme_mod('blog_over_show_subscribe_btn', true)): ?>
                            <?php 
                            $subscribe_url = get_theme_mod('blog_over_subscribe_url', '#');
                            $subscribe_text = get_theme_mod('blog_over_subscribe_text', __('Subscribe', 'blog-over'));
                            $subscribe_new_tab = get_theme_mod('blog_over_subscribe_new_tab', true);
                            ?>
                            <a href="<?php echo esc_url($subscribe_url); ?>" 
                               class="blog-over-subscribe-btn"
                               <?php echo $subscribe_new_tab ? 'target="_blank" rel="noopener noreferrer"' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- hardcoded attribute values ?>>
                                <i class="fas fa-bell"></i>
                                <span><?php echo esc_html($subscribe_text); ?></span>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            </div><!-- /.blog-over-topbar-collapse -->

            <!-- Mobile Bottom Popup (hidden on desktop, shown when toggle is clicked on mobile) -->
            <div class="blog-over-topbar-popup" role="dialog" aria-label="<?php esc_attr_e('Site information', 'blog-over'); ?>" aria-hidden="true">
                <div class="blog-over-topbar-popup-overlay"></div>
                <div class="blog-over-topbar-popup-panel">
                    <div class="blog-over-topbar-popup-header">
                        <span class="blog-over-topbar-popup-title"><?php esc_html_e('Quick Links', 'blog-over'); ?></span>
                        <button class="blog-over-topbar-popup-close" aria-label="<?php esc_attr_e('Close panel', 'blog-over'); ?>">
                            <i class="fas fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="blog-over-topbar-popup-body">
                        <?php if (get_theme_mod('blog_over_header_social_show', true)): ?>
                            <div class="blog-over-topbar-popup-section">
                                <span class="blog-over-topbar-popup-label"><?php esc_html_e('Follow Us', 'blog-over'); ?></span>
                                <div class="blog-over-topbar-popup-social">
                                    <?php
                                    if (!empty($social_links) && is_array($social_links)):
                                        foreach ($social_links as $link):
                                            if (!empty($link['url'])):
                                    ?>
                                            <a href="<?php echo esc_url($link['url']); ?>" target="_blank" rel="noopener noreferrer"
                                                class="blog-over-topbar-social-link" aria-label="<?php echo esc_attr($link['label']); ?>">
                                                <i class="<?php echo esc_attr($link['icon']); ?>"></i>
                                            </a>
                                    <?php
                                            endif;
                                        endforeach;
                                    endif;
                                    ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <header id="masthead" class="blog-over-header blog-over-<?php echo esc_attr($blog_over_layout); ?>"><?php echo "\n"; ?>

        <?php if ('layout-1' === $blog_over_layout): ?>
            <!-- Layout 1: Classic (Logo Left, Menu Right) -->
            <div class="<?php echo esc_attr($container_class); ?>">
                <div class="blog-over-header-inner">
                    <div class="blog-over-site-branding">
                        <?php blog_over_site_branding(); ?>
                    </div>

                    <nav id="site-navigation" class="blog-over-header-nav main-navigation"
                        aria-label="<?php esc_attr_e('Main Menu', 'blog-over'); ?>">
                        <div class="blog-over-primary-menu-container">
                            <?php blog_over_primary_menu(); ?>
                        </div>
                        <?php blog_over_mobile_toggle(); ?>
                    </nav>
                </div>
            </div>

        <?php elseif ('layout-2' === $blog_over_layout): ?>
            <!-- Layout 2: Centered (Logo Center, Menu Below) -->
            <div class="<?php echo esc_attr($container_class); ?>">
                <div class="blog-over-header-inner">
                    <div class="blog-over-site-branding">
                        <?php blog_over_site_branding(); ?>
                    </div>
                </div>
            </div>
            <nav id="site-navigation" class="blog-over-header-nav main-navigation"
                aria-label="<?php esc_attr_e('Main Menu', 'blog-over'); ?>">
                <div class="<?php echo esc_attr($container_class); ?>">
                    <div class="blog-over-primary-menu-container">
                        <?php blog_over_primary_menu(); ?>
                    </div>
                    <?php blog_over_mobile_toggle(); ?>
                </div>
            </nav>

        <?php elseif ('layout-3' === $blog_over_layout): ?>
            <!-- Layout 3: Split (Menu-Logo-Menu) -->
            <nav id="site-navigation" class="blog-over-header-nav main-navigation"
                aria-label="<?php esc_attr_e('Main Menu', 'blog-over'); ?>">
                <div class="<?php echo esc_attr($container_class); ?>">
                    <div class="blog-over-header-inner">
                        <div class="blog-over-menu-left">
                            <?php blog_over_split_menu('left'); ?>
                        </div>
                        <div class="blog-over-site-branding">
                            <?php blog_over_site_branding(); ?>
                        </div>
                        <div class="blog-over-menu-right">
                            <?php blog_over_split_menu('right'); ?>
                        </div>
                        <?php blog_over_mobile_toggle(); ?>
                    </div>
                </div>
            </nav>

        <?php elseif ('layout-4' === $blog_over_layout): ?>
            <!-- Layout 4: Minimal (Hamburger Always) -->
            <div class="<?php echo esc_attr($container_class); ?>">
                <div class="blog-over-header-inner">
                    <div class="blog-over-site-branding">
                        <?php blog_over_site_branding(); ?>
                    </div>
                    <nav id="site-navigation" class="blog-over-header-nav main-navigation"
                        aria-label="<?php esc_attr_e('Main Menu', 'blog-over'); ?>">
                        <?php blog_over_mobile_toggle(); ?>
                    </nav>
                </div>
            </div>

        <?php endif; ?>

    </header>

    <?php do_action('blog_over_after_header'); ?>

    <!-- Mobile Menu Panel -->
    <div class="blog-over-mobile-menu" aria-hidden="true">
        <button class="blog-over-mobile-close" aria-label="<?php esc_attr_e('Close menu', 'blog-over'); ?>">
            <span aria-hidden="true">&times;</span>
        </button>
        <?php blog_over_primary_menu(); ?>
    </div>

    <?php if (get_theme_mod('blog_over_show_search', true)): ?>
        <?php $search_style = get_theme_mod('blog_over_search_style', 'popup'); ?>
        
        <!-- Style 1: Popup Modal Search -->
        <?php if ($search_style === 'popup' || $search_style === 'inline'): ?>
        <div class="blog-over-search-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('Search', 'blog-over'); ?>">
            <div class="blog-over-search-modal-overlay"></div>
            <div class="blog-over-search-modal-content">
                <button type="button" class="blog-over-search-close" aria-label="<?php esc_attr_e('Close search', 'blog-over'); ?>">
                    <span aria-hidden="true">&times;</span>
                </button>
                <?php get_search_form(); ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Style 3: Slide Panel Search (Left to Right) -->
        <?php if ($search_style === 'slide-panel'): ?>
        <div class="blog-over-search-panel blog-over-search-panel-ltr" aria-hidden="true" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('Search', 'blog-over'); ?>">
            <div class="blog-over-search-panel-overlay"></div>
            <div class="blog-over-search-panel-inner">
                <button type="button" class="blog-over-search-close" aria-label="<?php esc_attr_e('Close search', 'blog-over'); ?>">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="blog-over-search-panel-content">
                    <h3 class="blog-over-search-panel-title"><?php esc_html_e('Search', 'blog-over'); ?></h3>
                    <?php get_search_form(); ?>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Style 4: Slide Panel Search (Right to Left) -->
        <?php if ($search_style === 'slide-panel-rtl'): ?>
        <div class="blog-over-search-panel blog-over-search-panel-rtl" aria-hidden="true" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('Search', 'blog-over'); ?>">
            <div class="blog-over-search-panel-overlay"></div>
            <div class="blog-over-search-panel-inner">
                <button type="button" class="blog-over-search-close" aria-label="<?php esc_attr_e('Close search', 'blog-over'); ?>">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="blog-over-search-panel-content">
                    <h3 class="blog-over-search-panel-title"><?php esc_html_e('Search', 'blog-over'); ?></h3>
                    <?php get_search_form(); ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
    <?php endif; ?>

    <div class="blog-over-header-placeholder"></div>

    <div id="page" class="blog-over-site-content">