/**
 * @file
 * Mega Menu Component Styles
 *
 * WARN-inspired mega menu with dark background and white text.
 * Matches international.warn.com design as reference.
 *
 * Uses plain CSS instead of @apply for imported files.
 */

/* ==========================================================================
   Mega Menu Wrapper & Top-Level Navigation
   ========================================================================== */

.mega-menu-wrapper {
  position: relative;
  height: 100%;
}

.mega-menu-list {
  display: flex;
  height: 100%;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.mega-menu-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151; /* gray-700 */
  transition: color 200ms ease-in-out;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover state for top-level links */
.mega-menu-link:hover {
  color: #111827; /* gray-900 */
}

/* Active trail styling */
.mega-menu-item.is-active-trail > .mega-menu-link {
  color: #E13A3E; /* fdm-red */
}

/* Focus states for accessibility */
.mega-menu-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px #9ABD97; /* fdm-cambridge-blue */
  box-shadow: 0 0 0 2px #9ABD97, 0 0 0 4px white;
  border-radius: 0.25rem;
}

/* ==========================================================================
   Mega Menu Dropdown Panel - WARN Style Dark Background
   ========================================================================== */

.mega-menu-dropdown {
  /* Full viewport width - fixed positioning for screen-centered layout */
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;

  /* Position will be set by JavaScript based on header border */
  /* Fallback top position */
  top: var(--header-height, 137px);

  /* Dark background like WARN */
  background-color: #1f2937; /* gray-800 */

  /* Shadow for depth */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;

  /* Smooth transition */
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}

/* Open state - controlled by JavaScript since dropdown is moved to body */
.mega-menu-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Mega Menu Container & Grid Layout
   ========================================================================== */

.mega-menu-container {
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .mega-menu-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.mega-menu-grid {
  /* Responsive grid - centered columns */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  justify-content: center;
}

@media (min-width: 1024px) {
  .mega-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 280px));
  }
}

@media (min-width: 1280px) {
  .mega-menu-grid {
    grid-template-columns: repeat(4, minmax(0, 280px));
  }
}

/* ==========================================================================
   Category Card Styling - WARN Style
   ========================================================================== */

.mega-menu-card {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Category Image - Prominent Display
   ========================================================================== */

.mega-menu-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  /* Larger image area */
  aspect-ratio: 16 / 10;
}

.mega-menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms ease-in-out, filter 300ms ease-in-out;

  /* Subtle grayscale on default */
  filter: grayscale(30%);
}

/* Hover: full color and slight scale */
.mega-menu-card:hover .mega-menu-card-image img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ==========================================================================
   Category Title - WARN Style Uppercase White
   ========================================================================== */

.mega-menu-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: white;
}

.mega-menu-card-title a {
  color: white;
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

.mega-menu-card-title a:hover {
  color: #d1d5db; /* gray-300 */
}

/* ==========================================================================
   Category Description - Light Gray
   ========================================================================== */

.mega-menu-card p {
  font-size: 0.875rem;
  color: #9ca3af; /* gray-400 */
  margin-bottom: 0.75rem;
  line-height: 1.625;
}

/* ==========================================================================
   Product Links List - WARN Style
   ========================================================================== */

.mega-menu-card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mega-menu-card-links li {
  list-style: none;
}

.mega-menu-card-links a {
  font-size: 0.875rem;
  color: #d1d5db; /* gray-300 */
  transition: color 200ms ease-in-out;
  text-decoration: none;
  display: block;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

/* Link hover - lighter color */
.mega-menu-card-links a:hover {
  color: white;
}

/* ==========================================================================
   "View All" CTA - Hidden (WARN doesn't show these prominently)
   ========================================================================== */

.mega-menu-card-cta {
  display: none;
}

/* ==========================================================================
   Featured Category Enhancement
   ========================================================================== */

.mega-menu-card.is-featured .mega-menu-card-title {
  color: #E13A3E; /* fdm-red */
}

/* ==========================================================================
   Regular Dropdown (for non-mega menu items)
   ========================================================================== */

.regular-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background-color: #1f2937; /* gray-800 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 200ms ease-in-out;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  z-index: 50;
}

.mega-menu-item:hover .regular-dropdown,
.mega-menu-item:focus-within .regular-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.regular-dropdown li {
  list-style: none;
}

.regular-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #d1d5db; /* gray-300 */
  border-radius: 0.25rem;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
  text-decoration: none;
}

.regular-dropdown a:hover {
  background-color: #374151; /* gray-700 */
  color: white;
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

.mega-menu-card a:focus {
  outline: none;
  box-shadow: 0 0 0 2px #9ABD97, 0 0 0 4px #1f2937;
  border-radius: 0.25rem;
}

.mega-menu-wrapper:focus-within .mega-menu-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Hide mega menu on mobile (< 1024px) */
@media (max-width: 1023px) {
  .mega-menu-wrapper {
    display: none;
  }
}

/* ==========================================================================
   Performance Optimization
   ========================================================================== */

.mega-menu-card-image img,
.mega-menu-dropdown {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu-dropdown,
  .mega-menu-card-image img,
  .mega-menu-card,
  .mega-menu-link,
  .mega-menu-card-links a {
    transition-duration: 0.01ms !important;
  }
}