<!-- Header Image from customizer api settings -->
<?php if (get_header_image()) : ?>
  <div class="custom-header position-relative text-center d-flex align-items-center justify-content-center"
    style="
      background-color:transparent;
      min-height:150px;
      overflow:hidden;
    ">

    <!-- Use an actual <img> tag for better LCP tracking -->
    <img 
      src="<?php echo esc_url(get_header_image()); ?>" 
      alt="<?php bloginfo('name'); ?>" 
      decoding="async"
      loading="lazy"
      fetchpriority="high"
      class="position-absolute w-100 h-100"
      style="object-fit:cover; object-position:center; z-index:0;"
    />
<?php 
  if(get_theme_mod('hero_img_text_on')){
?>
    <!-- Overlay -->
    <div class="position-relative text-center py-3 px-2" style="z-index:2;">
      <h1 class="mt-3" style="
        font-size:30px;
        border-bottom:3px solid #fff;
        color:<?php echo esc_attr(get_theme_mod('howcan_header_img_text_color')); ?>;
      ">
        <?php bloginfo('title'); ?>
      </h1>

      <h2 style="
        font-size:20px;
        color:<?php echo esc_attr(get_theme_mod('howcan_header_img_text_color')); ?>;
      ">
        <?php bloginfo('description'); ?>
      </h2>

      <?php if (get_theme_mod('howcan_headerimg_button_enable')) : ?>
        <a class="btn mt-2" style="
          background:<?php echo esc_attr(get_theme_mod('header_img_button_bg_color')); ?>;
          color:<?php echo esc_attr(get_theme_mod('header_img_button_text_color')); ?>;
        " href="<?php echo esc_url(get_theme_mod('howcan_header_img_button_link')); ?>">
          <?php echo esc_html(get_theme_mod('howcan_header_img_button_text')); ?>
        </a>
      <?php endif; ?>
    </div>
    <?php 
  }
    ?>
  </div>
<?php endif; ?>