<?php
// header_3.html 深色科技：深色背景、青色高亮、导航下划线滑入动画
$h3_nav = isset($nav) && is_array($nav) ? $nav : array();
$h3_active = isset($active) ? (string)$active : 'home';
$h3_logo = trim(site_config('logo', ''));
$h3_name = site_config('company_name', '炎酷CMS');
$h3_phone = site_config('phone', '');
?>
<style>
.yk-header3{background:var(--yk-nav-bg,#0b1220);border-bottom:1px solid #1c2a44;position:relative;z-index:50}
.yk-h3-in{max-width:1200px;margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between}
.yk-h3-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.yk-h3-logo img{max-height:42px;max-width:190px;display:block}
.yk-h3-logo .yk-h3-mark{width:10px;height:26px;background:linear-gradient(180deg,#22d3ee,#3b82f6);border-radius:2px}
.yk-h3-logo .yk-h3-name{font-size:21px;font-weight:700;color:#e8eefc;letter-spacing:2px}
.yk-h3-right{display:flex;align-items:center;gap:24px}
.yk-header3 .yk-nav{display:flex;list-style:none;margin:0;padding:0}
.yk-header3 .yk-nav a{display:block;padding:0 16px;height:70px;line-height:70px;font-size:15px;color:var(--yk-nav-color,#93a4c4);text-decoration:none;position:relative;transition:color .25s}
.yk-header3 .yk-nav a::before{content:'';position:absolute;left:16px;right:16px;bottom:14px;height:2px;background:linear-gradient(90deg,#22d3ee,#3b82f6);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.yk-header3 .yk-nav a:hover{color:var(--yk-nav-active,#22d3ee)}
.yk-header3 .yk-nav a:hover::before{transform:scaleX(1)}
.yk-header3 .yk-nav a.on{color:var(--yk-nav-active,#22d3ee)}
.yk-header3 .yk-nav a.on::before{transform:scaleX(1)}
.yk-h3-phone{font-size:14px;color:#22d3ee;border:1px solid #23405e;border-radius:20px;padding:6px 16px;white-space:nowrap}
.yk-header3 .yk-nav-toggle{display:none;background:none;border:1px solid #2a3b5e;border-radius:4px;width:40px;height:36px;cursor:pointer}
.yk-header3 .yk-nav-toggle span{display:block;width:20px;height:2px;background:#22d3ee;margin:4px auto}
@media (max-width:1199px){
  .yk-h3-in{height:62px}
  .yk-header3 .yk-nav a{padding:0 11px;height:62px;line-height:62px;font-size:14px}
  .yk-h3-phone{display:none}
}
@media (max-width:767px){
  .yk-h3-in{height:54px;padding:0 14px}
  .yk-h3-logo img{max-height:32px}
  .yk-h3-logo .yk-h3-name{font-size:17px}
  .yk-header3 .yk-nav-toggle{display:block}
  .yk-header3 .yk-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--yk-nav-bg,#0e1730);flex-direction:column;border-top:1px solid #1c2a44}
  .yk-header3 .yk-nav.open{display:flex}
  .yk-header3 .yk-nav a{height:auto;line-height:1.5;padding:14px 20px;border-bottom:1px solid #16223c}
  .yk-header3 .yk-nav a::before{display:none}
  .yk-header3 .yk-nav a.on{color:#22d3ee;background:rgba(34,211,238,.06);border-left:3px solid #22d3ee}
}
</style>
<header class="yk-header3">
  <div class="yk-h3-in">
    <a class="yk-h3-logo" href="<?php echo e(url_home()); ?>">
      <?php if ($h3_logo !== '') { ?><img src="<?php echo e($h3_logo); ?>" alt="<?php echo e($h3_name); ?>"><?php } else { ?><span class="yk-h3-mark"></span><span class="yk-h3-name"><?php echo e($h3_name); ?></span><?php } ?>
    </a>
    <div class="yk-h3-right">
      <ul class="yk-nav">
        <li><a href="<?php echo e(url_home()); ?>"<?php echo $h3_active === 'home' ? ' class="on"' : ''; ?>>首页</a></li>
        <?php foreach ($h3_nav as $h3_n) { ?>
        <li><a href="<?php echo e(isset($h3_n['url']) ? $h3_n['url'] : url_col(isset($h3_n['id']) ? $h3_n['id'] : 0)); ?>"<?php echo (isset($h3_n['key']) && $h3_n['key'] === $h3_active) ? ' class="on"' : ''; ?>><?php echo e(isset($h3_n['name']) ? $h3_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>
