/**
 * Category Navigation Menu - Warm Luxury Style
 * Supports infinite level hierarchy with Flyout (Desktop) and Accordion (Mobile)
 */

/* ============================================
 * CSS Custom Properties (Design Tokens)
 * ============================================ */
:root {
  --nav-primary: #1C1917;
  --nav-accent: #C9A962;
  --nav-accent-gold: #C9A962;
  --nav-bg: #ffffff;
  --nav-bg-hover: #FAFAF9;
  --nav-text: #44403C;
  --nav-text-muted: #78716C;
  --nav-border: #D6D3D1;
  --nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --nav-transition: 200ms ease;
}

/* ============================================
 * Base Category Navigation
 * ============================================ */
.category-nav {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  z-index: 100;
}

/* ============================================
 * Level 1 - Top Level Menu (Horizontal)
 * ============================================ */
.category-list.level-1 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--nav-bg);
}

.category-list.level-1 > .category-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.category-list.level-1 > .category-item > .category-link {
  display: block;
  padding: 15px 20px;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--nav-transition);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.category-list.level-1 > .category-item > .category-link:hover {
  background: var(--nav-bg-hover);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

/* 当前选中的菜单项 */
.category-list.level-1 > .category-item.active > .category-link,
.category-list.level-1 > .category-item.current > .category-link {
  background: var(--nav-bg-hover);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

/* 有子菜单展开时 */
.category-list.level-1 > .category-item:hover > .category-link {
  border-bottom-color: var(--nav-accent);
}

/* ============================================
 * Flyout Submenu (Desktop) - Infinite Levels
 * ============================================ */
.category-item.has-children {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--nav-bg);
  box-shadow: var(--nav-shadow);
  border: 1px solid var(--nav-border);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--nav-transition);
  z-index: 200;
}

.category-item:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu Links */
.submenu .category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: all var(--nav-transition);
  cursor: pointer;
}

.submenu .category-link:hover {
  background: var(--nav-bg-hover);
  color: var(--nav-accent);
}

.submenu .category-item:last-child .category-link {
  border-bottom: none;
}

/* Nested Submenu (Level 3+) - Flyout to Right */
.submenu .has-children {
  position: relative;
}

.submenu .submenu {
  top: -8px;
  left: 100%;
  margin-left: 2px;
  transform: translateX(-8px);
  opacity: 0;
  visibility: hidden;
}

.submenu .category-item:hover > .submenu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Deep Level Styling (Level 4+) */
.submenu .submenu .submenu {
  top: -8px;
  left: 100%;
}

/* Level Indicator - Gold Dot for Deep Levels */
.submenu .submenu .category-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nav-accent-gold);
  margin-right: 10px;
  flex-shrink: 0;
}

/* ============================================
 * External Link Styling
 * ============================================ */
.category-link.external {
  color: var(--nav-accent);
}

.category-link.external::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C9A962'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E");
  background-size: contain;
  vertical-align: middle;
}

.category-link.external:hover {
  color: var(--nav-primary);
}

/* ============================================
 * Dropdown Arrow Indicator (Chevron)
 * ============================================ */
.has-children > .category-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform var(--nav-transition);
}

.category-list.level-1 > .has-children > .category-link::after {
  border-top: 4px solid currentColor;
}

/* Submenu Arrow Points Right */
.submenu .has-children > .category-link::after {
  margin-left: auto;
  margin-top: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  border-right: none;
}

.has-children:hover > .category-link::after {
  transform: rotate(180deg);
}

.submenu .has-children:hover > .category-link::after {
  transform: translateX(3px);
}

/* ============================================
 * Responsive Design (Mobile) - Accordion Style
 * ============================================ */
@media (max-width: 1023px) {
  .category-list.level-1 {
    flex-direction: column;
    border-bottom: none;
  }

  .category-list.level-1 > .category-item {
    border-bottom: 1px solid var(--nav-border);
  }

  .category-list.level-1 > .category-item > .category-link {
    padding: 14px 16px;
    border-bottom: none;
  }

  /* Mobile Accordion Submenu */
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--nav-accent-gold);
    margin-left: 16px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: var(--nav-bg-hover);
  }

  .category-item.active > .submenu,
  .category-item.expanded > .submenu {
    max-height: 2000px; /* Allow for deep nesting */
  }

  .submenu .category-link {
    padding: 12px 16px;
    font-size: 13px;
    justify-content: flex-start;
  }

  /* Nested Accordion Levels */
  .submenu .submenu {
    margin-left: 16px;
    border-left-color: var(--nav-accent);
    background: #f5f5f4;
  }

  .submenu .submenu .submenu {
    background: #EEEEEC;
    border-left-color: var(--nav-text-muted);
  }

  /* Mobile Arrow Points Down */
  .submenu .has-children > .category-link::after {
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: none;
    margin-left: auto;
  }

  .submenu .has-children.expanded > .category-link::after {
    transform: rotate(180deg);
  }
}

/* ============================================
 * Loading State
 * ============================================ */
.category-nav.loading {
  opacity: 0.6;
  pointer-events: none;
}

.category-nav.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--nav-border);
  border-top-color: var(--nav-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
 * Hover Effects Enhancement
 * ============================================ */
.category-item {
  transition: all var(--nav-transition);
}

/* Smooth transitions */
* {
  box-sizing: border-box;
}

.category-nav a {
  transition: color var(--nav-transition), background-color var(--nav-transition);
}

/* ============================================
 * Accessibility Enhancements
 * ============================================ */
.category-link:focus {
  outline: 2px solid var(--nav-accent);
  outline-offset: -2px;
}

.category-link:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

/* Keyboard Navigation Support */
.category-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================
 * Header Flyout Menu (Infinite Level Support)
 * Uses pure CSS hover for reliable submenu display
 * ============================================ */

/* Flyout item container */
.flyout-item {
  position: relative;
}

/* Flyout link styles */
.flyout-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #374151; /* gray-700 */
  white-space: nowrap;
  overflow: hidden;
}

.flyout-link:hover {
  color: #C9A962;
  background-color: #FAFAF9;
}

/* Flyout submenu - hidden by default */
.flyout-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0;
  margin-top: -8px;
  min-width: 220px;
  max-width: 280px;
  padding: 8px 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 150ms ease;
}

/* Ensure all nested submenus have proper styling */
.flyout-submenu .flyout-submenu {
  background: #ffffff;
}

/* Flyout submenu links - ensure text is visible */
.flyout-submenu .flyout-link {
  padding: 12px 20px;
  font-size: 14px;
  color: #374151;
  background: transparent;
}

/* Flyout link text - truncate long names */
.flyout-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flyout-submenu .flyout-link:hover {
  color: #C9A962;
  background-color: #FAFAF9;
}

/* Transparent bridge to prevent hover gap */
.flyout-bridge {
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 16px;
}

/* Show submenu on hover */
.flyout-item:hover > .flyout-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Arrow animation on hover */
.flyout-item:hover > .flyout-link > .flyout-arrow {
  transform: translateX(2px);
}

/* Ensure nested flyout menus work correctly */
.flyout-submenu .flyout-item:hover > .flyout-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Deep nested submenus (level 3+) */
.flyout-submenu .flyout-submenu .flyout-link {
  color: #374151;
  background: transparent;
}

.flyout-submenu .flyout-submenu .flyout-link:hover {
  color: #C9A962;
  background-color: #FAFAF9;
}

/* ============================================
 * Mega Menu Styles (Full-width Dropdown)
 * Warm Luxury Design for B2B E-commerce
 * ============================================ */

/* 让 nav-item 不再是定位上下文，让 mega-menu 相对于 Navigation Row 定位 */
.nav-item {
  position: static !important;
}

/* Mega menu container - 相对于 Navigation Row (relative) 定位 */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  transform-origin: top center;
  overflow: hidden;
}

/* ============================================
 * Alpine.js Transition Classes for Mega Menu
 * ============================================ */

/* Enter transition - 回弹效果 */
.mega-menu-enter {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega-menu-enter-start {
  opacity: 0;
  transform: translateY(-15px) scaleY(0.95);
}

.mega-menu-enter-end {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

/* Leave transition - 折叠消失效果 */
.mega-menu-leave {
  transition: all 0.25s ease-in;
}

.mega-menu-leave-start {
  opacity: 1;
  transform: scaleY(1);
}

.mega-menu-leave-end {
  opacity: 0;
  transform: scaleY(0);
}


/* Column styling - 交错回弹动画 */
.mega-menu-column {
  min-width: 160px;
  opacity: 0;
  transform: translateY(12px);
  animation: columnBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mega-menu-column:nth-child(1) { animation-delay: 0.06s; }
.mega-menu-column:nth-child(2) { animation-delay: 0.1s; }
.mega-menu-column:nth-child(3) { animation-delay: 0.14s; }
.mega-menu-column:nth-child(4) { animation-delay: 0.18s; }
.mega-menu-column:nth-child(5) { animation-delay: 0.22s; }
.mega-menu-column:nth-child(6) { animation-delay: 0.26s; }

@keyframes columnBounce {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Category title (level 2) - 简洁样式 */
.mega-menu-title {
  position: relative;
}

/* Subcategory links (level 3) - 简洁悬停效果 */
.mega-menu-link {
  display: block;
  padding: 6px 0;
  position: relative;
  transition: padding-left 0.25s ease, color 0.2s ease;
}

.mega-menu-link:hover {
  padding-left: 10px;
}

/* 右侧 Featured 区域 */
.mega-menu .flex-shrink-0 > div {
  position: relative;
}

/* ============================================
 * Print Styles
 * ============================================ */
@media print {
  .submenu {
    display: none !important;
  }
  .flyout-submenu {
    display: none !important;
  }
  .mega-menu {
    display: none !important;
  }
}

/* ============================================
 * Nav Overflow "More" Dropdown
 * Shows overflowed navigation items in a flyout-style dropdown
 * ============================================ */

/* More wrapper - needs positioning context for dropdown */
.nav-more-wrapper {
  position: relative !important;
  flex-shrink: 0;
}

/* More dropdown panel */
.nav-more-dropdown {
  max-height: 70vh;
  overflow-y: auto;
}

/* Scrollbar styling for More dropdown */
.nav-more-dropdown::-webkit-scrollbar {
  width: 4px;
}
.nav-more-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.nav-more-dropdown::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 2px;
}

/* Flyout submenus inside More dropdown need adjusted positioning */
.nav-more-dropdown .flyout-submenu {
  top: 0;
  left: 100%;
  margin-top: 0;
}