/* 实现工作项 #17 — 全局导航栏与页脚样式
   依赖 #16 的设计变量（variables.css）与公共样式（base.css）。
   产出全站复用的 header / footer，供各栏目（#18–#22）嵌入其间。 */

/* ===================== 顶部导航栏 ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--ease);
}
/* 滚动后加投影（由 nav.js 切换 .is-scrolled） */
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.nav__brand { display: flex; align-items: center; }
.nav__brand img { height: 40px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav__link {
  color: #42526b;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: color var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--color-blue); }

/* 业务系统登录：高亮按钮 */
.nav__cta {
  background: var(--color-deep);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  transition: background var(--ease);
}
.nav__cta:hover,
.nav__cta:focus-visible { background: var(--color-blue); color: #fff; }

/* 汉堡按钮：PC 隐藏，手机显示 */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--color-deep);
  font-size: 26px;
  border-radius: var(--radius-sm);
}
.nav__toggle:hover { background: var(--color-soft); }

/* 移动菜单遮罩 */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 48, .35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
  z-index: calc(var(--z-header) - 1);
}
.nav__overlay.is-open { opacity: 1; visibility: visible; }

/* ===================== 页脚 ===================== */
.site-footer {
  background: var(--color-deep-2);
  color: var(--color-on-dark);
  padding: var(--space-16) 0 var(--space-8);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.footer__brand img { height: 42px; margin-bottom: var(--space-4); }
.footer__brand p {
  color: #93aac6;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
  max-width: 34ch;
}
.footer__col h4 {
  color: #fff;
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
  letter-spacing: .5px;
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col li, .footer__col a { color: #93aac6; font-size: var(--fs-sm); }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--color-blue); }
.footer__contact li { display: flex; align-items: flex-start; gap: var(--space-2); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: var(--space-5);
  text-align: center;
  color: var(--color-gray-2);
  font-size: var(--fs-sm);
}

/* ===================== 响应式 ===================== */
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    top: var(--header-h);
    right: 0;
    height: calc(100vh - var(--header-h));
    width: 260px;
    max-width: 80vw;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-8) var(--space-6);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .08);
    transform: translateX(100%);
    transition: transform var(--ease);
    overflow-y: auto;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__cta { width: 100%; text-align: center; }
}

@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}