/**
 * ============================================================
 * 江苏志博电气 — 布局样式（页头、页脚、导航、移动端菜单）
 * Zhibo Electric — Layout Styles (Header, Footer, Nav, Mobile Menu)
 * ============================================================
 *
 * 本文件包含：
 * 1. 网站页头（固定导航栏 + 滚动效果）
 * 2. 语言切换器
 * 3. 移动端汉堡菜单 + 侧滑导航
 * 4. WhatsApp 浮动按钮
 * 5. 网站页脚
 */

/* ============================================================
   网站页头 (SITE HEADER)
   固定在页面顶部的导航栏，滚动后变为毛玻璃效果
   ============================================================ */
.site-header {
  position: fixed;                     /* 固定定位，始终在视口顶部 */
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);           /* 确保导航在大多数元素上方 */
  padding: 0.875rem 0;
  /* 滚动时平滑过渡背景、阴影和模糊效果 */
  transition: background-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
  background-color: transparent;       /* 初始透明，滚动后变为毛玻璃 */
}

/* 滚动状态：添加毛玻璃背景和阴影 */
.site-header.scrolled {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);  /* Safari 兼容 */
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid var(--glass-border);
}

/* 页头内部使用 flex 布局：logo 左、导航右 */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

/* ============================================================
   LOGO 区域
   ============================================================ */
.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;                    /* 防止 logo 被压缩 */
  transition: transform var(--transition-spring);
}

.header-logo:hover { transform: scale(1.03); }

.header-logo img {
  height: 48px;
  width: auto;
}

/* Logo 文字：默认白色（在深色 hero 背景上） */
.header-logo span {
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
  white-space: nowrap;
  transition: all var(--transition-base);
}

/* 滚动后 Logo 文字变为渐变色 */
.site-header.scrolled .header-logo span {
  background: var(--color-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   主导航 (HEADER NAV)
   ============================================================ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* 导航链接：默认白色半透明，滚动后变深色 */
.header-nav a {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.header-nav a:hover { transform: translateY(-1px); }

.site-header.scrolled .header-nav a { color: var(--color-text); }

/* 导航下划线动画：从右侧滑入 */
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-gradient);
  border-radius: 2px;
  transform: scaleX(0);              /* 默认隐藏（宽度为0） */
  transform-origin: right;           /* 从右侧开始展开 */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 悬停或激活时显示下划线 */
.header-nav a:hover::after,
.header-nav a.active::after {
  transform: scaleX(1);              /* 展开到完整宽度 */
  transform-origin: left;            /* 从左侧开始展开 */
}

/* 激活/悬停状态颜色 */
.header-nav a:hover,
.header-nav a.active { color: #fff; }

.site-header.scrolled .header-nav a:hover,
.site-header.scrolled .header-nav a.active { color: var(--color-primary); }

/* ============================================================
   语言切换器 (LANGUAGE SWITCHER)
   中英文切换按钮组
   ============================================================ */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.7);
  margin-left: 0.5rem;
  padding: 0.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);  /* 左侧分隔线 */
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);                  /* 胶囊形状 */
}

/* 滚动后切换为浅色主题 */
.site-header.scrolled .lang-switch {
  color: var(--color-text-muted);
  border-left-color: var(--color-border);
  background: var(--color-bg);
}

.lang-switch a {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.lang-switch a:hover {
  background: rgba(255, 255, 255, 0.18);
}

.site-header.scrolled .lang-switch a:hover {
  background: var(--color-primary-light);
}

/* 当前激活语言：蓝色高亮 */
.lang-switch a.active-lang {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.site-header.scrolled .lang-switch a.active-lang {
  background: var(--color-primary-gradient);
  color: #fff;
}

/* ============================================================
   汉堡菜单按钮 (HAMBURGER)
   移动端显示，桌面端隐藏
   ============================================================ */
.hamburger {
  display: none;                     /* 默认隐藏，移动端显示 */
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.hamburger:hover { background: rgba(255,255,255,0.1); }
.site-header.scrolled .hamburger:hover { background: var(--color-bg); }

/* 汉堡菜单的三条横线 */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all var(--transition-base);
}

.site-header.scrolled .hamburger span { background-color: var(--color-dark); }

/* ============================================================
   移动端侧滑导航 (MOBILE NAV)
   从右侧滑入的菜单面板
   ============================================================ */
.mobile-nav {
  display: none;                     /* 默认隐藏 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: var(--z-modal);
  padding: 5rem 2rem 2rem;          /* 顶部留空给关闭按钮 */
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
  transform: translateX(100%);       /* 默认隐藏在右侧 */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 1px solid var(--glass-border);
}

/* 打开状态：滑入视图 */
.mobile-nav.open { transform: translateX(0); }

/* 移动端导航链接 */
.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mobile-nav a:hover { color: var(--color-primary); padding-left: 0.5rem; }

/* 移动端语言切换器 */
.mobile-nav .lang-switch-mobile {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
}

.mobile-nav .lang-switch-mobile a {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  border: none;
  background: var(--color-bg);
  transition: all var(--transition-fast);
}

.mobile-nav .lang-switch-mobile a.active-lang {
  background: var(--color-primary-gradient);
  color: #fff;
  font-weight: var(--fw-bold);
}

/* 移动端遮罩层 */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,12,20,0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-overlay.open { display: block; opacity: 1; }

/* ============================================================
   WHATSAPP 浮动按钮 (FLOATING WHATSAPP)
   固定在右下角的 WhatsApp 联系按钮，带呼吸动画
   ============================================================ */
.floating-whatsapp {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 绿色发光阴影 */
  box-shadow: 0 4px 16px rgba(37,211,102,0.35), 0 0 0 4px rgba(37,211,102,0.08);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  animation: wa-float 3s ease-in-out infinite;  /* 浮动动画 */
}

.floating-whatsapp:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 0 0 8px rgba(37,211,102,0.06);
  animation: none;                   /* 悬停时停止浮动动画 */
}

/* 脉冲光环（伪元素实现扩散效果） */
.floating-whatsapp::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.35);
  animation: wa-ring 2s ease-out infinite;  /* 光环扩散动画 */
}

/* WhatsApp 按钮上下浮动 */
@keyframes wa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* WhatsApp 光环扩散 */
@keyframes wa-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 移动端适配：缩小按钮尺寸 */
@media (max-width: 640px) {
  .floating-whatsapp {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
  }
  .floating-whatsapp svg { width: 24px; height: 24px; }
}

/* ============================================================
   网站页脚 (SITE FOOTER)
   深色背景，三栏布局，渐变顶边
   ============================================================ */
.site-footer {
  background-color: var(--color-dark-800);
  color: #CBD5E1;
  padding: 5rem 0 0;
  position: relative;
}

/* 顶部渐变装饰线（蓝 → 绿 → 蓝） */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
}

/* 页脚三栏网格：品牌信息 | 快速链接 | 联系方式 */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;  /* 第一栏最宽，第二栏最窄 */
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-col h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  font-weight: var(--fw-semibold);
}

/* 页脚 Logo */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-logo img {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);   /* 将 Logo 变为白色 */
}

.footer-logo span {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

/* 页脚链接样式 */
.footer-col p {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: #CBD5E1;
  padding: 0.3rem 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* 悬停时链接右移 + 变绿色 */
.footer-col a:hover {
  color: var(--color-secondary);
  transform: translateX(4px);
}

/* 页脚底部版权栏 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-dark);
  padding: 1.25rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: #64748B;
}

/* ============================================================
   响应式断点 (RESPONSIVE)
   ============================================================ */

/* 平板/手机：页脚单栏，隐藏桌面导航，显示汉堡菜单 */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;      /* 页脚三栏 → 一栏 */
    gap: 2rem;
  }
  /* 隐藏桌面端导航和语言切换器 */
  .site-header .header-nav,
  .site-header .lang-switch {
    display: none;
  }
  /* 显示汉堡菜单按钮 */
  .hamburger {
    display: flex;
  }
  /* 启用移动端侧滑导航 */
  .mobile-nav {
    display: block;
  }
}

/* 桌面端：完全隐藏移动端导航（防止残留显示） */
@media (min-width: 769px) {
  .mobile-nav, .mobile-nav.open, .mobile-overlay, .mobile-overlay.open {
    display: none;
  }
}