/* Unified Mega Menu Styles - Aligned with GNB */

/* Position context for mega menu */
.navbar-collapse {
  position: relative;
}

/* Navbar alignment */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.navbar .navbar-nav {
  gap: 75px;
  margin-left: 8rem !important;
}

/* Mega Menu Container - matches navbar width */
.unified-mega-menu {
  position: absolute;
  top: 100%;
  left: 4rem;
  right: 0;
  width: 102%;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  opacity: 1;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  padding: 40px 0;
  pointer-events: none;
  margin-top: 0;
  padding-left: 5%;
  border-bottom-right-radius:1.2rem;
  border-bottom-left-radius:1.2rem;
}

/* Show mega menu when hovering over trigger items or the menu itself */
.navbar-collapse:hover .unified-mega-menu,
.unified-mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Remove default container behavior */
.unified-mega-menu .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Row uses grid to match navbar items */
.unified-mega-menu .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  width: 100%;
}

/* Menu columns - equal width */
.mega-menu-column {
  padding: 0 30px;
  transition: all 0.3s ease;
  position: relative;
}

/* First column no left padding */
.mega-menu-column[data-menu="home"] {
  padding-left: 0;
}

/* Last column no right padding */
.mega-menu-column:last-child {
  padding-right: 0;
}

/* Column titles */
.mega-menu-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0E0E0F;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #0E0E0F;
  padding-bottom: 12px;
  display: block;
}

/* Reset list styles */
.mega-menu-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu-column ul li {
  margin-bottom: 8px;
  list-style: none;
}

/* Menu links */
.mega-menu-column ul li a {
  color: #222;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 6px 0;
  transition: all 0.25s ease;
  position: relative;
}

.mega-menu-column ul li a:hover {
  color: #0E0E0F;

}

.mega-menu-column ul li a::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: #0E0E0F;
  transition: width 0.25s ease;
}

.mega-menu-column ul li a:hover::before {
  width: 6px;
}

/* Subsection titles */
.mega-menu-column p.fw-semibold {
  font-size: 13px;
  font-weight: 600;
  color: #0E0E0F;
  margin-bottom: 10px;
  margin-top: 20px;
}

.mega-menu-column .mb-3:first-child p.fw-semibold {
  margin-top: 0;
}

/* Column separators */
.mega-menu-column[data-menu="home"],
.mega-menu-column[data-menu="features"],
.mega-menu-column[data-menu="collections"] {
  border-right: 1px solid #e5e5e5;
}

.mega-menu-column[data-menu="trending"] {
  border-right: none;
}

/* Hover effect on menu trigger items */
.navbar-nav .nav-item.mega-menu-trigger {
  position: relative;
  flex: 1;
  text-align: center;
}

.navbar-nav .nav-item.mega-menu-trigger .nav-link {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.navbar-nav .nav-item.mega-menu-trigger:hover .nav-link {
  color: #0E0E0F;
}

/* Column highlight on corresponding menu hover */
.navbar-nav .nav-item.mega-menu-trigger:hover~.unified-mega-menu,
.navbar-nav .nav-item.mega-menu-trigger:focus-within~.unified-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Collections column specific styles */
.mega-menu-column[data-menu="collections"] .article {
  margin-bottom: 0;
}

.mega-menu-column[data-menu="collections"] .card-body {
  padding: 8px 0;
}

.mega-menu-column[data-menu="collections"] .card-title {
  font-size: 13px;
  line-height: 1.5;
}

.mega-menu-column[data-menu="collections"] .thumbnail {
  overflow: hidden;
  border-radius: 8px;
}

/* Dark mode support */
[data-bs-theme="dark"] .unified-mega-menu {
  background: #1a1a1a;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .mega-menu-title {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

[data-bs-theme="dark"] .mega-menu-column ul li a {
  color: #555;
}

[data-bs-theme="dark"] .mega-menu-column ul li a:hover {
  color: #ffffff;
}

[data-bs-theme="dark"] .mega-menu-column ul li a::before {
  background: #ffffff;
}

[data-bs-theme="dark"] .mega-menu-column p.fw-semibold {
  color: #ffffff;
}

[data-bs-theme="dark"] .mega-menu-column[data-menu="home"],
[data-bs-theme="dark"] .mega-menu-column[data-menu="features"],
[data-bs-theme="dark"] .mega-menu-column[data-menu="collections"] {
  border-right-color: #333;
}

/* Responsive */
@media (max-width: 991px) {
  .unified-mega-menu {
    display: none !important;
  }
}

/* Ensure proper stacking - navbar should be below sidebar */
.navbar {
  position: relative;
  z-index: 10;
}