/**
 * Submenu Images Enhancement
 *
 * Adds vehicle preview images to specific model submenu items in the header navigation
 * Version: 1.0.1
 */

/* ==========================================================================
   MODEL PREVIEW IMAGES
   ==========================================================================
   Displays vehicle images above specific model submenu items
*/

/**
 * EX5 Model Submenu Image
 * Displays EX5 image above the menu item in dropdown
 */
.menu-item.models-ex5 {
  position: relative;
  padding-top: 150px; /* Create space for the image */
  text-align: center; /* Center the text */
}

/* Style the link element directly to ensure proper centering */
.menu-item.models-ex5 > a {
  display: inline-block; /* Allow for proper centering */
  text-align: center; /* Ensure text is centered */
  width: 100%; /* Take full width of parent for proper centering */
}

.menu-item.models-ex5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px; /* Width of the image */
  height: 140px; /* Adjusted height for proper aspect ratio */
  background-image: url('/wp-content/uploads/2025/03/ex5-silver-220.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer; /* Show pointer cursor on hover */
  z-index: 1;
}

/* Clickable area covering the image */
.menu-item.models-ex5::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 140px;
  z-index: 2; /* Place above the image */
  cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .menu-item.models-ex5 {
    padding-top: 120px; /* Smaller padding on mobile */
  }
  
  .menu-item.models-ex5::before,
  .menu-item.models-ex5::after {
    width: 180px; /* Smaller width on mobile */
    height: 110px; /* Adjusted height for aspect ratio */
  }
}

/* ==========================================================================
   MOBILE FLYOUT MENU SPECIFIC STYLES
   ==========================================================================
   Special handling for submenu images in the mobile flyout menu
*/

/**
 * EX5 Model Image in Mobile Flyout Menu
 * Adjusts position and styling for the mobile slide-out menu
 */
.fl-menu-mobile-flyout .menu-item.models-ex5 {
  position: relative;
  padding-top: 100px; /* Reduced padding for mobile flyout */
  text-align: center; /* Center the text below the image */
  margin-bottom: 15px; /* Add space below this menu item */
}

.fl-menu-mobile-flyout .menu-item.models-ex5::before {
  width: 140px; /* Smaller width for mobile flyout */
  height: 90px; /* Adjusted height for aspect ratio */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%);
  top: 5px; /* Position closer to top */
  background-position: center;
}

.fl-menu-mobile-flyout .menu-item.models-ex5::after {
  width: 140px; /* Match the width of the image */
  height: 90px; /* Match the height of the image */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%);
  top: 5px; /* Match the top position */
}

/* Ensure the submenu link text is visible and well-positioned */
.fl-menu-mobile-flyout .menu-item.models-ex5 > a {
  display: block;
  padding-top: 10px; /* Space between image and text */
  text-align: center; /* Center the text */
  font-weight: 500; /* Make text slightly bolder */
}