/* ============================================================
   站点统一头部样式 —— 前台所有页面（首页 index.php 与 blog/*）共用
   只要引入本文件并使用 inc/site-header.php，头部风格即完全一致。
   改头部样式请只改这里，所有页面同步生效。
   ============================================================ */

/* 中英文切换（整站通用：靠 body.lang-zh / body.lang-en 控制显隐） */
body.lang-zh .en{display:none!important}
body.lang-en .zh{display:none!important}

/* ---------- 顶栏容器 ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .3s,box-shadow .3s}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h,76px);max-width:1160px;margin:0 auto;padding:0 4%}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:11px;color:#fff;transition:color .3s}
.logo-mark{width:42px;height:42px;flex:none;filter:drop-shadow(0 4px 10px rgba(4,42,58,.35));object-fit:contain;border-radius:10px;background:#fff;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.18}
.logo-text b{font-size:1.06rem;font-weight:800;letter-spacing:.02em}
.logo-text i{font-style:normal;font-size:.66rem;letter-spacing:.16em;opacity:.75}

/* ---------- 主导航 ---------- */
.main-nav{display:flex;gap:34px}
.main-nav a{position:relative;color:rgba(255,255,255,.92);font-weight:600;font-size:.98rem;padding:6px 0;transition:color .3s}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral,#ff6b57);border-radius:2px;transition:width .25s}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}

/* ---------- 右侧操作区 ---------- */
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-btn{border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;border-radius:999px;padding:6px 15px;font-size:.88rem;font-weight:700;cursor:pointer;letter-spacing:.04em;transition:.25s;text-decoration:none;display:inline-block}
.lang-btn:hover{background:var(--coral,#ff6b57);border-color:var(--coral,#ff6b57);color:#fff}

/* ---------- 滚动后 / 常驻实底（无 hero 的页面加 .solid） ---------- */
.site-header.scrolled,.site-header.solid{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(6,54,74,.08)}
.site-header.scrolled .logo,.site-header.solid .logo{color:var(--ink,#17313f)}
.site-header.scrolled .main-nav a,.site-header.solid .main-nav a{color:var(--ink,#17313f)}
.site-header.scrolled .main-nav a.active,.site-header.solid .main-nav a.active{color:var(--ocean-700,#0e6b85)}
.site-header.scrolled .lang-btn,.site-header.solid .lang-btn{border-color:var(--ocean-600,#1291ad);color:var(--ocean-700,#0e6b85)}
.site-header.scrolled .lang-btn:hover,.site-header.solid .lang-btn:hover{background:var(--ocean-700,#0e6b85);border-color:var(--ocean-700,#0e6b85);color:#fff}

/* ---------- 移动端汉堡菜单 ---------- */
.menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;border:none;background:transparent;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:.3s}
.site-header.scrolled .menu-btn span,.site-header.solid .menu-btn span{background:var(--ink,#17313f)}
.site-header.menu-open .menu-btn span{background:var(--ink,#17313f)}
.site-header.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.menu-open .menu-btn span:nth-child(2){opacity:0}
.site-header.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:var(--header-h,76px);left:0;right:0;display:none;flex-direction:column;background:#fff;box-shadow:0 12px 32px rgba(6,54,74,.14);padding:8px 4% 14px;z-index:999}
.site-header.menu-open .mobile-menu{display:flex}
.mobile-menu a{display:block;padding:15px 10px;border-bottom:1px solid #eef4f6;color:var(--ink,#17313f);font-weight:600}
.mobile-menu a:last-child{border-bottom:none}

/* ---------- 响应式 ---------- */
@media (max-width:960px){ .site-header{--header-h:66px} }
@media (max-width:820px){
  .main-nav{display:none}
  .menu-btn{display:flex}
}
@media (max-width:640px){ .logo-text i{display:none} }
@media (prefers-reduced-motion:reduce){ .site-header{transition:none} }