/**
 * Mega Menu Component Styles
 *
 * Claroty-style mega menu with smooth transitions
 * and responsive behavior.
 */
@reference "tailwindcss";

/* Base mega menu container */
.mega-menu {
  @apply relative;
}

/* Full-width mode: parent handles styling, mega-menu is transparent */
.mega-menu.bg-transparent {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hover bridge to prevent menu from closing */
.mega-menu::before {
  content: '';
  @apply absolute -top-2 left-0 right-0 h-2;
}

/* Link item hover states */
.mega-menu a {
  @apply outline-none;
}

.mega-menu a:focus-visible {
  @apply ring-2 ring-purple-500 ring-offset-2 rounded;
}

/* Line clamp utilities for descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth image transitions */
.mega-menu img {
  @apply transition-transform duration-300;
}

/* Icon hover effects */
.mega-menu .group:hover svg {
  @apply scale-110;
}

/* Mask-based icons: use currentColor so text-color classes control the icon color */
.mega-menu .menu-icon-mask {
  background-color: currentColor;
  transition: background-color 0.15s ease;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Featured card shadow on hover */
.mega-menu .group:hover .shadow-sm {
  @apply shadow-md;
}

/* Responsive width adjustments */
@media (max-width: 1024px) {
  .mega-menu {
    max-width: 97vw !important;
  }
}

/**
 * Mega Menu Popover Positioning
 *
 * Forces mega-menu to align from the left edge of the main navigation.
 * The popover is positioned using CSS anchor with a fixed left offset.
 */
#main-nav-items {
  anchor-name: --main-nav-anchor;
}

.mega-menu-popover {
  /* Rechtsbündige Positionierung - Menü startet von rechts */
  right: 0;
  left: auto;
  margin-top: 20px;
}

/* Fallback für ältere Browser */
@supports not (anchor-name: --test) {
  .mega-menu-popover {
    right: 0 !important;
    left: auto !important;
  }
}

/* Ensure mega-menu content doesn't overflow viewport */
.mega-menu-popover .mega-menu {
  max-width: calc(100vw - 2rem);
}

/* Feste Spaltenbreite für alle Spalten */
.mega-menu [style*="grid-template-columns"] > div {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

/* Whitespace nowrap für Spaltenüberschriften */
.mega-menu .uppercase.tracking-wide {
  white-space: nowrap;
}

/**
 * Tesla Curtain Dropdown
 * Full-width white panel that slides from under the header.
 */
.tesla-curtain {
  /* Smooth slide animation handled by Alpine x-transition */
  will-change: transform, opacity;
}

/* Tesla layout: product grid items shouldn't have fixed column widths */
.mega-menu [style*="grid-template-columns"] .group {
  width: auto;
  min-width: auto;
  max-width: none;
}

/* Tesla product images: smooth blend for transparent PNGs */
.mega-menu .mix-blend-multiply {
  mix-blend-mode: multiply;
}

/* Reduced motion: disable slide animation */
@media (prefers-reduced-motion: reduce) {
  .tesla-curtain {
    transition: opacity 0.1s ease !important;
    transform: none !important;
  }
}