<?php
/**
 * Template part for displaying the custom header image
 */

if (!has_header_image()) {
    return;
}

$show_title = get_theme_mod('blog_over_custom_header_show_title', true);

?>
<div class="blog-over-custom-header" style="background-image: url('<?php echo esc_url(get_header_image()); ?>'); position: relative; background-size: cover; background-position: center;">
    <div class="blog-over-custom-header-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
    
    <div class="blog-over-custom-header-content blog-over-container" style="position: relative; z-index: 1;">
        <?php if ($show_title): ?>
            <?php if (is_front_page() && is_home()): ?>
                <h1 class="blog-over-custom-header-title" style="color: #<?php echo esc_attr(get_header_textcolor()); ?>; font-size: clamp(2rem, 5vw, 4rem); font-weight: bold; margin-bottom: 0.5rem;"><?php bloginfo('name'); ?></h1>
            <?php else: ?>
                <p class="blog-over-custom-header-title h1" style="color: #<?php echo esc_attr(get_header_textcolor()); ?>; font-size: clamp(2rem, 5vw, 4rem); font-weight: bold; margin-bottom: 0.5rem;"><?php bloginfo('name'); ?></p>
            <?php endif; ?>
            
            <?php $description = get_bloginfo('description', 'display'); ?>
            <?php if ($description || is_customize_preview()): ?>
                <p class="blog-over-custom-header-description" style="color: #<?php echo esc_attr(get_header_textcolor()); ?>; opacity: 0.9; font-size: clamp(1rem, 2vw, 1.25rem);"><?php echo esc_html($description); ?></p>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</div>
