<?php
$hero_image = HERO_IMG;
$bgStyle = '';
$bgUrl = !empty(HERO_BG)
    ? HERO_BG
    : 'templates/webengine/assets/img/hero-bg.webp';
$overlayPercent = defined('HERO_BG_OVERLAY') ? (int)HERO_BG_OVERLAY : 50;

// Keep safe range
if ($overlayPercent < 0) $overlayPercent = 0;
if ($overlayPercent > 90) $overlayPercent = 90;

$opacity = $overlayPercent / 100;

if (HERO_BG_OVERLAY_ACCENT == 1) {
    $overlay = "rgba(var(--we-accent-rgb), $opacity)";
} else {
    $overlay = "rgba(0,0,0, $opacity)";
}

$bgStyle = "background-image: linear-gradient($overlay, $overlay), url('" . htmlspecialchars($bgUrl, ENT_QUOTES, 'UTF-8') . "');"
          . "background-size:cover;"
          . "background-repeat:no-repeat;"
          . "background-position:top center;";
?>
<section id="headerbar"
         class="headerbar d-flex align-items-center justify-content-center text-center"
         style="<?= $bgStyle ?>">

  <div class="container">
    <h2 class="m-0">Optional Permanent Header for all pages</h2>
  </div>

</section>