/* =========================================================================
   全站共享样式 —— 头部 / 页脚 / 移动端菜单
   所有页面在自身 <style> 之后引入本文件，因此这里的规则是头部与页脚的
   唯一权威来源。页面专属的头部差异（如白皮书页的毛玻璃背景）仍留在该页。
   依赖页面已定义的设计 token（--brand-*、--gray-*、--space-* 等）。
   ========================================================================= */

/* ---------- 头部 ---------- */
#site-header{position:sticky;top:0;z-index:60;background:var(--bg-section);box-shadow:var(--ring)}
.header-inner{max-width:var(--container);height:64px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:var(--space-6)}

/* logo：浅蓝方块 + 双行文案 */
.header-logo{display:flex;align-items:center;gap:var(--space-3);color:var(--text-title);white-space:nowrap;flex-shrink:0}
.header-logo-mark{width:32px;height:32px;border-radius:var(--radius-md);background:transparent;box-shadow:none;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.header-logo-mark img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.header-logo-copy{display:flex;flex-direction:column;gap:1px}
.header-logo-name{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:0}
.header-logo-desc{font-size:12px;font-weight:400;line-height:1.4;color:var(--text-caption)}

/* 导航：当前项浅蓝药丸底 + 下方指示条 */
.header-nav{display:flex;align-items:center;gap:var(--space-1);margin-left:auto;height:100%}
.header-nav a{position:relative;display:flex;align-items:center;justify-content:center;height:36px;padding:0 var(--space-4);border-radius:var(--radius-md);font-size:15px;font-weight:500;color:var(--text-secondary)}
.header-nav a:hover{background:var(--gray-1);color:var(--brand-6)}
.header-nav a.active{background:var(--brand-1);color:var(--brand-6)}
.header-nav a.active::after{content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:-14px;height:2px;background:var(--brand-6);border-radius:var(--radius-pill)}

/* 联系按钮 + 二维码浮层 */
.header-contact{position:relative;height:100%;display:flex;align-items:center;padding-left:var(--space-3)}
.header-contact::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line)}
.btn-header-cta{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-5);border:0;border-radius:var(--radius-md);background:var(--brand-6);color:var(--text-on-dark);font:500 15px/1.4 var(--font-sans);cursor:pointer;box-shadow:var(--shadow-sm)}
.btn-header-cta:hover{background:var(--brand-7);box-shadow:var(--shadow-brand)}
.btn-header-cta:active{background:var(--brand-8)}
.btn-header-cta svg{width:18px;height:18px;flex:0 0 auto}
.contact-qr-popup{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:200;width:184px;padding:var(--space-4);border-radius:var(--radius-md);background:var(--bg-card);box-shadow:var(--shadow-lg);text-align:center;opacity:0;pointer-events:none;transform:translateY(-6px)}
.header-contact:hover .contact-qr-popup{opacity:1;pointer-events:auto;transform:translateY(0)}
.contact-qr-popup p{margin-top:var(--space-3);font-size:13px;line-height:1.6;color:var(--text-secondary)}
.contact-qr-popup small{display:block;margin-top:var(--space-1);font-size:12px;line-height:1.5;color:var(--text-caption)}
.qr-image{width:136px;height:136px;display:block;margin:0 auto;border-radius:var(--radius-sm);object-fit:cover;box-shadow:var(--ring)}

/* ---------- 页脚 ---------- */
#site-footer{background:var(--bg-section);box-shadow:var(--ring)}
.footer-inner{max-width:var(--container);margin:0 auto;padding:var(--space-7) var(--gutter) var(--space-6)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:var(--space-7);margin-bottom:var(--space-7)}
.footer-col,.footer-contact{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col-title,.footer-contact-title{font-size:15px;font-weight:600;color:var(--text-title);margin-bottom:var(--space-1)}
.footer-col a,.footer-bottom-row a,.footer-contact-desc,.footer-contact-email{font-size:13px;line-height:1.6;color:var(--text-secondary)}
.footer-col a:hover,.footer-bottom-row a:hover,.footer-contact-email a{color:var(--brand-6)}
.footer-qr-row{display:flex;gap:var(--space-4);margin:var(--space-2) 0}
.footer-qr{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.footer-qr-image{width:88px;height:88px;display:block;border-radius:var(--radius-sm);object-fit:cover;box-shadow:var(--ring)}
.footer-qr small{font-size:13px;color:var(--text-caption)}
.footer-bottom{padding-top:var(--space-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-3)}
.footer-bottom-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5)}
.footer-logo{font-size:17px;font-weight:600;color:var(--text-title)}
.footer-copyright{font-size:13px;line-height:1.6;color:var(--text-caption)}

/* ---------- 移动端菜单（≤640px 显示，替代被隐藏的 header-nav） ---------- */
.nav-toggle{display:none}
.mobile-nav{display:none}

/* ---------- 过渡 ---------- */
@media (prefers-reduced-motion:no-preference){
  .header-nav a,.btn-header-cta,.contact-qr-popup,.footer-col a,.footer-bottom-row a{
    transition:color 200ms var(--ease),background 200ms var(--ease),box-shadow 200ms var(--ease),transform 200ms var(--ease),opacity 200ms var(--ease);
  }
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  /* 平板：头部换行，导航独占一行 */
  .header-inner{height:auto;min-height:64px;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .header-nav{order:3;width:100%;height:44px;margin-left:0;overflow-x:auto}
  .header-nav a.active::after{bottom:0}
  .header-contact{margin-left:auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}

@media (max-width:640px){
  .header-inner{padding-right:60px}
  .header-logo-name{font-size:17px}
  .header-logo-desc{display:none}
  .header-nav{display:none}
  .header-contact{margin-left:auto;padding-left:0}
  .header-contact::before{display:none}
  .btn-header-cta{padding:0 var(--space-4)}
  .footer-grid{grid-template-columns:1fr}

  .nav-toggle{
    position:absolute;top:50%;right:8px;transform:translateY(-50%);
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:0;border-radius:var(--radius-md,10px);
    background:transparent;color:var(--gray-8,#5F6366);cursor:pointer;
  }
  .nav-toggle svg{width:24px;height:24px}
  .nav-toggle[aria-expanded="true"]{background:var(--gray-2,#F1F2F3);color:var(--gray-10,#0F1419)}
  .mobile-nav{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--bg-section,#FFFFFF);
    box-shadow:0 12px 32px rgba(15,20,25,0.08),0 0 0 1px rgba(15,20,25,0.04);
    padding:var(--space-2,8px) 0;
  }
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{
    display:block;padding:14px var(--gutter,16px);
    font-size:15px;line-height:1.4;color:var(--gray-9,#393E42);text-decoration:none;
  }
  .mobile-nav a:active{background:var(--gray-2,#F1F2F3)}
  .mobile-nav a.active{color:var(--brand-6,#3370FF);font-weight:500}
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle,.mobile-nav{animation:none!important;transition:none!important}
}