/**
 * Mega Menu Styles - 大型菜单样式
 * 全宽度大型菜单系统，支持多级层次结构和特色内容
 *
 * 设计规范：
 * - 相对于 .header-wrapper 的全宽度布局（width: 100%）
 * - 左侧菜单区域（65%）+ 右侧特色内容（35%）
 * - 支持1-3级菜单层次
 * - 响应式设计（移动端转换为手风琴）
 * - 完整的可访问性支持
 */

/* ========================================
   大型菜单容器 - Mega Menu Container
   ======================================== */

/*
 * 最终方案：使用 position: fixed 相对于视口定位
 * 优点：
 * 1. 菜单宽度可以是整个视口宽度
 * 2. 不受父元素定位的影响
 * 3. 可以使用 JavaScript 动态计算 top 值
 *
 * 缺点：
 * 1. 需要 JavaScript 来设置 top 值
 * 2. 滚动时需要重新计算位置
 */

/* 大型菜单主容器 - 使用 fixed 定位 */
.header-wrapper .navbar-nav .mega-menu-item > .mega-menu-container.dropdown-menu,
.header-wrapper .navbar-nav .mega-menu-item > .mega-menu-container,
.navbar-nav .mega-menu-item > .mega-menu-container.dropdown-menu,
.navbar-nav .mega-menu-item > .mega-menu-container,
.mega-menu-item > .mega-menu-container.dropdown-menu,
.mega-menu-item > .mega-menu-container,
.mega-menu-container.dropdown-menu,
.mega-menu-container {
  position: fixed !important;
  left: 40px !important;  /* 与 container-fluid 的左内边距对齐 */
  right: 40px !important;  /* 与 container-fluid 的右内边距对齐 */
  top: var(--mega-menu-top, 100px) !important;  /* 紧贴头部底部 */
  margin: 0 !important;
  width: auto !important;  /* 由 left 和 right 决定 */
  min-width: auto !important;
  max-width: none !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;  /* 减少阴影 */
  padding: 0 !important;
  z-index: 9999 !important;  /* 提高 z-index */
  display: none;  /* 移除 !important，允许 JavaScript 控制 */
  transform: none !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* 大型菜单显示状态 - 由 JavaScript 控制，这里只是备用 */
.navbar-nav .mega-menu-item.show > .mega-menu-container,
.mega-menu-item.show > .mega-menu-container {
  display: block !important;
}

/* 大型菜单包装器 - 用于内容居中和对齐 */
.mega-menu-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 大型菜单内容区域 */
.mega-menu-content {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;  /* 移除间隙 */
  padding: 0 !important;  /* 移除内边距 */
  min-height: 500px !important;  /* 增加最小高度，和列一致 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ========================================
   左侧菜单区域 - Menu Links Area (60% - 水平三栏布局)
   ======================================== */

.mega-menu-left {
  flex: 0 0 60% !important;
  max-width: 60% !important;
  display: flex !important;
  flex-direction: row !important;  /* 水平排列 - 从左到右 */
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  align-items: stretch !important;  /* 改为stretch，让子元素填充高度 */
  position: relative !important;
  min-height: 500px !important;  /* 设置最小高度 */
}

/* 左侧菜单标题 - 一级菜单标题 - 在第一列内部显示 */
.mega-menu-heading {
  font-size: 16px !important;  /* 减少字体大小 */
  font-weight: 700 !important;
  color: #333333 !important;  /* 深灰色，和菜单项一致 */
  margin: 0 !important;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  border-bottom: 1px solid #e8eaed !important;  /* 浅色下划线 */
  text-transform: uppercase !important;
  background-color: #f5f6f7 !important;  /* 和第一列背景色一致 */
  box-sizing: border-box !important;
  display: block !important;
}

/* 三列容器 - JavaScript重组后的结构 */
.mega-column {
  width: 33.33%;
  flex: 0 0 33.33%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8eaed;
  height: 100% !important;  /* 设置为100%高度 */
  min-height: 500px;  /* 增加最小高度 */
  padding: 0 !important;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #ffffff;  /* 默认白色背景 */
}

/* 第一列背景颜色 - 浅灰色 */
.mega-column-1 {
  background-color: #f5f6f7 !important;
}

/* 第二列背景颜色 - 更浅的灰色 */
.mega-column-2 {
  background-color: #fafbfc !important;
}

/* 第二列顶部占位空间 - 和PRODUCT标题对齐 */
.mega-column-2::before {
  content: '';
  display: block;
  height: 45px;  /* 和PRODUCT标题高度一致 */
  background-color: #fafbfc;
  border-bottom: 1px solid #e8eaed;
  flex-shrink: 0;
}

/* 第三列保持白色背景 */
.mega-column-3 {
  background-color: #ffffff !important;
}

/* 第三列顶部占位空间 - 和PRODUCT标题对齐 */
.mega-column-3::before {
  content: '';
  display: block;
  height: 45px;  /* 和PRODUCT标题高度一致 */
  background-color: #ffffff;
  border-bottom: 1px solid #e8eaed;
  flex-shrink: 0;
}

.mega-column-2,
.mega-column-3 {
  display: none;  /* 默认隐藏，悬停时显示 */
}

/* 二级菜单列表容器 - 第一列（旧结构兼容） */
.mega-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.mega-column .mega-menu-list {
  padding: 0 !important;  /* 在column内时不需要额外padding */
}

/* 第一列的标题样式 */
.mega-column-1 > .mega-menu-heading {
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* 第一列的菜单项在标题下方显示 */
.mega-column-1 .mega-menu-list {
  padding-bottom: 20px !important;  /* 底部留白 */
  flex: 1 !important;
}

/* 二级菜单列表项 */
.mega-menu-list > li,
.mega-submenu > li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

/* 所有菜单项 li 元素的通用样式 */
.mega-menu-level-1,
.mega-menu-level-2,
.mega-menu-level-3,
.mega-menu-level-4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

/* 菜单链接项通用样式 */
.mega-menu-link {
  position: relative;
  margin-bottom: 0;
}

.mega-menu-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  color: #333333;
  text-decoration: none;
  font-size: 14px;  /* 减少字体大小 */
  font-weight: 400;
  transition: all 0.2s ease;
  border-left: none;
  position: relative;
  background-color: transparent;  /* 透明背景，显示列的背景色 */
  border-bottom: 1px solid #e8eaed;
  box-sizing: border-box;
}

.mega-menu-link-item:hover {
  background-color: rgba(220, 53, 69, 0.05);  /* 统一悬停背景 */
  color: #dc3545;
  text-decoration: none;
}

/* 当前活动菜单项 */
.mega-menu-link.active > .mega-menu-link-item,
.mega-menu-link.current-menu-item > .mega-menu-link-item {
  background-color: #fff5f5;
  color: #dc3545;
  font-weight: 600;
}

/* ========================================
   多级菜单层次样式 - Menu Hierarchy
   ======================================== */

/* 第1级菜单（二级菜单 - 第一列） */
.mega-menu-level-1 {
  background-color: transparent;
  border-bottom: none;
}

.mega-menu-level-1 > .mega-menu-link-item {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  background-color: transparent;  /* 透明背景，显示列的背景色 */
  border-left: none;
  border-bottom: 1px solid #e8eaed;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mega-menu-level-1 > .mega-menu-link-item:hover {
  background-color: rgba(220, 53, 69, 0.05);  /* 轻微红色背景 */
  color: #dc3545;
}

/* 第2级菜单（三级菜单 - 第二列） */
.mega-menu-level-2 {
  background-color: transparent;
  padding-left: 0;
}

.mega-menu-level-2 > .mega-menu-link-item {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  background-color: transparent;  /* 透明背景，显示列的背景色 */
  border-left: none;
  border-bottom: 1px solid #e8eaed;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mega-menu-level-2 > .mega-menu-link-item:hover {
  background-color: rgba(220, 53, 69, 0.05);  /* 轻微红色背景 */
  color: #dc3545;
}

/* 第3级菜单（四级菜单 - 第三列） */
.mega-menu-level-3 {
  background-color: transparent;
  padding-left: 0;
}

.mega-menu-level-3 > .mega-menu-link-item {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  background-color: transparent;  /* 透明背景，显示列的背景色 */
  border-left: none;
  border-bottom: 1px solid #e8eaed;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mega-menu-level-3 > .mega-menu-link-item:hover {
  background-color: rgba(220, 53, 69, 0.05);  /* 轻微红色背景 */
  color: #dc3545;
}

/* 第4级菜单（五级菜单 - 如果有更深层级） */
.mega-menu-level-4 {
  background-color: transparent;
  padding-left: 0;
}

.mega-menu-level-4 > .mega-menu-link-item {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  padding: 0 20px !important;  /* 左右20px，上下由height和line-height控制 */
  height: 45px !important;  /* 统一高度45px */
  line-height: 45px !important;  /* 行高等于高度，实现垂直居中 */
  background-color: transparent;  /* 透明背景，显示列的背景色 */
  border-left: none;
  border-bottom: 1px solid #e8eaed;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mega-menu-level-4 > .mega-menu-link-item:hover {
  background-color: rgba(220, 53, 69, 0.05);  /* 轻微红色背景 */
  color: #dc3545;
}

/* ========================================
   子菜单容器 - Submenu Containers
   ======================================== */

/* 桌面端：子菜单样式（被JavaScript重组到不同列中） */
@media (min-width: 992px) {
  .mega-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 在column内的子菜单 */
  .mega-column .mega-submenu {
    width: 100%;
    padding: 0;
  }
  
  /* 子菜单列表项 */
  .mega-submenu > li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
  }
}

/* 移动端：默认隐藏子菜单，点击展开 */
@media (max-width: 991px) {
  .mega-submenu {
    display: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  /* 移动端点击展开子菜单 */
  .mega-submenu.show {
    display: block;
    max-height: 2000px;
    opacity: 1;
  }
}

.mega-submenu-level-1 {
  padding-left: 0;
}

.mega-submenu-level-2 {
  padding-left: 0;
}

/* ========================================
   菜单项图标和箭头 - Icons & Arrows
   ======================================== */

.mega-menu-link-item i {
  margin-right: 10px;
  font-size: 14px;
  color: inherit;
  transition: all 0.3s ease;
}

.mega-menu-arrow {
  margin-left: auto;
  margin-right: 0 !important;
  font-size: 10px !important;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.mega-menu-link-item:hover .mega-menu-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* 注意：箭头图标通过 PHP (bootstrap-nav-walker.php) 添加 <i class="fas fa-chevron-right mega-menu-arrow"></i>
   不需要使用 ::after 伪元素，避免重复显示 */

/* ========================================
   菜单项标题和描述 - Title & Description
   ======================================== */

.mega-menu-title {
  display: inline-block;
  flex: 1;
}

.mega-menu-description {
  display: block;
  font-size: 12px;
  color: #95a5a6;
  margin-top: 3px;
  line-height: 1.4;
  font-weight: 400;
}

/* ========================================
   右侧特色内容区域 - Featured Content (40%)
   ======================================== */

.mega-menu-right {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 30px !important;
  background-color: #f8f9fa;  /* 浅灰色背景 */
}

.mega-menu-featured {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;  /* 移除圆角 */
  overflow: hidden;
  box-shadow: none;  /* 移除阴影 */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu-featured:hover {
  box-shadow: none;
  transform: none;  /* 移除悬停动画 */
}

.mega-menu-featured-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.mega-menu-featured-link:hover {
  text-decoration: none;
}

.mega-menu-featured-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;  /* 增加最小高度 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu-featured-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 450px;  /* 限制最大高度 */
  object-fit: contain;  /* 保持图片比例 */
  transition: transform 0.3s ease;
}

.mega-menu-featured-link:hover .mega-menu-featured-image img {
  transform: scale(1.02);  /* 轻微放大效果 */
}


/* ========================================
   顶级菜单项样式 - Top Level Menu Items
   ======================================== */

/* 大型菜单触发器 */
.mega-menu-toggle {
  position: relative;
}

.mega-menu-toggle::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.mega-menu-item:hover .mega-menu-toggle::after,
.mega-menu-item.show .mega-menu-toggle::after {
  transform: rotate(180deg);
}

/* ========================================
   可访问性支持 - Accessibility
   ======================================== */

/* 焦点状态 */
.mega-menu-link-item:focus,
.mega-menu-toggle:focus,
.mega-menu-featured-link:focus {
  outline: 2px solid #e74c3c;
  outline-offset: 2px;
}

/* 跳过链接（屏幕阅读器） */
.mega-menu-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mega-menu-skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 10px 15px;
  background-color: #e74c3c;
  color: #ffffff;
  text-decoration: none;
  z-index: 9999;
}

/* 键盘导航高亮 */
.mega-menu-link-item:focus-visible {
  background-color: #fff5f5;
  border-left-color: #e74c3c;
}

/* ========================================
   动画效果 - Animations
   ======================================== */

/* 大型菜单淡入动画 */
@keyframes megaMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-menu-item:hover > .mega-menu-container,
.mega-menu-item.show > .mega-menu-container {
  animation: megaMenuFadeIn 0.3s ease-in-out forwards;
}

/* 菜单项滑入动画 */
@keyframes menuItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mega-menu-link {
  animation: menuItemSlideIn 0.3s ease-in-out;
}

/* 为不同层级添加延迟 */
.mega-menu-level-1:nth-child(1) { animation-delay: 0.05s; }
.mega-menu-level-1:nth-child(2) { animation-delay: 0.1s; }
.mega-menu-level-1:nth-child(3) { animation-delay: 0.15s; }
.mega-menu-level-1:nth-child(4) { animation-delay: 0.2s; }
.mega-menu-level-1:nth-child(5) { animation-delay: 0.25s; }

/* ========================================
   性能优化 - Performance
   ======================================== */

/* 使用 GPU 加速 */
.mega-menu-container,
.mega-menu-featured-image img,
.mega-menu-link-item {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 图片懒加载占位符 */
.mega-menu-featured-image img[loading="lazy"] {
  background-color: #f0f0f0;
}

/* ========================================
   响应式设计 - Responsive Design
   ======================================== */

/* 平板设备 (768px - 991px) */
@media (max-width: 991px) {
  /* 大型菜单转换为全屏模式 */
  .mega-menu-container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  .mega-menu-wrapper {
    padding: 20px;
    max-width: 100%;
  }

  .mega-menu-content {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    min-height: auto;
  }

  .mega-menu-left,
  .mega-menu-right {
    flex: 1 1 100%;
  }

  /* 特色内容在移动端显示在顶部 */
  .mega-menu-right {
    order: -1;
  }

  .mega-menu-featured-image {
    min-height: 200px;
  }

  /* 调整菜单项间距 */
  .mega-menu-link-item {
    padding: 14px 15px;
    font-size: 15px;
    min-height: 44px; /* 触摸目标最小尺寸 */
  }

  .mega-menu-level-2 > .mega-menu-link-item {
    padding-left: 30px;
  }

  .mega-menu-level-3 > .mega-menu-link-item {
    padding-left: 45px;
  }
}

/* 移动设备 (< 768px) */
@media (max-width: 767px) {
  /* 大型菜单转换为手风琴模式 */
  .mega-menu-container {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    background-color: #1a1a1a !important;
    margin-top: 0 !important;
  }

  .mega-menu-wrapper {
    padding: 0;
  }

  .mega-menu-content {
    padding: 0;
  }

  .mega-menu-left {
    background-color: #1a1a1a;
  }

  /* 手风琴样式的菜单项 */
  .mega-menu-link-item {
    color: #ffffff;
    background-color: #1a1a1a;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
  }

  .mega-menu-link-item:hover {
    background-color: #2a2a2a;
    color: #e74c3c;
    padding-left: 15px;
  }

  .mega-menu-level-1 > .mega-menu-link-item {
    background-color: #2a2a2a;
    padding-left: 15px;
  }

  .mega-menu-level-2 > .mega-menu-link-item {
    background-color: #1a1a1a;
    padding-left: 25px;
  }

  .mega-menu-level-3 > .mega-menu-link-item {
    background-color: #0a0a0a;
    padding-left: 35px;
  }

  /* 子菜单默认隐藏，点击展开 */
  .mega-submenu {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  .mega-submenu.show {
    display: block;
    max-height: 2000px;
  }

  /* 特色内容在移动端样式调整 */
  .mega-menu-right {
    padding: 15px;
    background-color: #0a0a0a;
  }

  .mega-menu-featured {
    border-radius: 4px;
  }

  .mega-menu-featured-image {
    min-height: 180px;
  }

  .mega-menu-featured-overlay {
    padding: 15px;
  }

  .mega-menu-featured-title {
    font-size: 16px;
  }

  .mega-menu-featured-desc {
    font-size: 12px;
  }
}

/* 小屏幕移动设备 (< 576px) */
@media (max-width: 575px) {
  .mega-menu-link-item {
    font-size: 14px;
    padding: 12px;
  }

  .mega-menu-level-2 > .mega-menu-link-item {
    padding-left: 20px;
    font-size: 13px;
  }

  .mega-menu-level-3 > .mega-menu-link-item {
    padding-left: 30px;
    font-size: 12px;
  }

  .mega-menu-featured-image {
    min-height: 150px;
  }
}

/* ========================================
   打印样式 - Print Styles
   ======================================== */

@media print {
  .mega-menu-container {
    display: none !important;
  }
}

/* ========================================
   深色模式支持 - Dark Mode (可选)
   ======================================== */

@media (prefers-color-scheme: dark) {
  .mega-menu-container {
    background-color: #1a1a1a !important;
  }

  .mega-menu-link-item {
    color: #ffffff;
  }

  .mega-menu-level-1 > .mega-menu-link-item {
    background-color: #2a2a2a;
  }

  .mega-menu-link-item:hover {
    background-color: #2a2a2a;
  }
}


.mega-menu-featured:hover .mega-menu-featured-image img {
  transform: scale(1.05);
}

/* 特色内容覆盖层 - 根据设计图隐藏 */
.mega-menu-featured-overlay {
  display: none;  /* 设计图中不显示覆盖层 */
}

.mega-menu-featured-title {
  display: none;  /* 设计图中不显示标题 */
}

.mega-menu-featured-desc {
  display: none;  /* 设计图中不显示描述 */
}