<?php
// header_4.html 全宽色带：主色满宽背景、白色导航、LOGO 左、电话按钮右
$h4_nav = isset($nav) && is_array($nav) ? $nav : array();
$h4_active = isset($active) ? (string)$active : 'home';
$h4_logo = trim(site_config('logo', ''));
$h4_name = site_config('company_name', '炎酷CMS');
$h4_phone = site_config('phone', '');
?>
<style>
.yk-header4{background:var(--yk-nav-bg,linear-gradient(90deg,#c2410c 0%,#ea580c 60%,#f97316 100%));position:relative;z-index:50;box-shadow:0 2px 10px rgba(194,65,12,.3)}
.yk-h4-in{max-width:1200px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between}
.yk-h4-logo{display:flex;align-items:center;text-decoration:none;flex:none;background:rgba(255,255,255,.12);border-radius:6px;padding:6px 14px}
.yk-h4-logo img{max-height:36px;max-width:180px;display:block}
.yk-h4-logo .yk-h4-name{font-size:20px;font-weight:700;color:#fff;letter-spacing:1px}
.yk-h4-right{display:flex;align-items:center;gap:20px}
.yk-header4 .yk-nav{display:flex;list-style:none;margin:0;padding:0}
.yk-header4 .yk-nav a{display:block;padding:0 16px;height:64px;line-height:64px;font-size:15px;color:var(--yk-nav-color,rgba(255,255,255,.85));text-decoration:none;transition:background .2s,color .2s}
.yk-header4 .yk-nav a:hover{background:rgba(255,255,255,.14);color:var(--yk-nav-active,#fff)}
.yk-header4 .yk-nav a.on{background:var(--yk-nav-active-bg,rgba(0,0,0,.18));color:var(--yk-nav-active,#fff);font-weight:700;box-shadow:inset 0 -3px 0 #fff}
.yk-h4-phone{display:flex;align-items:center;gap:8px;background:#fff;color:#c2410c;font-weight:700;font-size:15px;border-radius:30px;padding:8px 18px;white-space:nowrap;text-decoration:none}
.yk-header4 .yk-nav-toggle{display:none;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);border-radius:4px;width:40px;height:36px;cursor:pointer}
.yk-header4 .yk-nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:4px auto}
@media (max-width:1199px){
  .yk-h4-in{height:58px}
  .yk-header4 .yk-nav a{padding:0 11px;height:58px;line-height:58px;font-size:14px}
  .yk-h4-phone{font-size:13px;padding:6px 14px}
}
@media (max-width:767px){
  .yk-h4-in{height:52px;padding:0 14px}
  .yk-h4-logo{padding:4px 10px}
  .yk-h4-logo img{max-height:28px}
  .yk-h4-logo .yk-h4-name{font-size:16px}
  .yk-h4-phone{display:none}
  .yk-header4 .yk-nav-toggle{display:block}
  .yk-header4 .yk-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--yk-nav-bg,#c2410c);flex-direction:column}
  .yk-header4 .yk-nav.open{display:flex}
  .yk-header4 .yk-nav a{height:auto;line-height:1.5;padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.15);color:#fff}
  .yk-header4 .yk-nav a.on{box-shadow:none;border-left:4px solid #fff;background:rgba(0,0,0,.15)}
}
</style>
<header class="yk-header4">
  <div class="yk-h4-in">
    <a class="yk-h4-logo" href="<?php echo e(url_home()); ?>">
      <?php if ($h4_logo !== '') { ?><img src="<?php echo e($h4_logo); ?>" alt="<?php echo e($h4_name); ?>"><?php } else { ?><span class="yk-h4-name"><?php echo e($h4_name); ?></span><?php } ?>
    </a>
    <div class="yk-h4-right">
      <ul class="yk-nav">
        <li><a href="<?php echo e(url_home()); ?>"<?php echo $h4_active === 'home' ? ' class="on"' : ''; ?>>首页</a></li>
        <?php foreach ($h4_nav as $h4_n) { ?>
        <li><a href="<?php echo e(isset($h4_n['url']) ? $h4_n['url'] : url_col(isset($h4_n['id']) ? $h4_n['id'] : 0)); ?>"<?php echo (isset($h4_n['key']) && $h4_n['key'] === $h4_active) ? ' class="on"' : ''; ?>><?php echo e(isset($h4_n['name']) ? $h4_n['name'] : ''); ?></a></li>
        <?php } ?>
      </ul>
      <?php /* 导航右侧电话块已按需求移除 */ ?>
      <button type="button" class="yk-nav-toggle" aria-label="菜单"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>
