/**
 * Megamenu Custom Styles
 * Additional styling for the custom megamenu layout
 */

/* Ensure megamenu dropdowns have proper z-index and positioning */
.navigation .z-10 {
    z-index: 50;
}

/* Megamenu container styling - Make it wide and viewport-aware */
.navigation [id$="-menu"] {
    max-height: 80vh;
    overflow-y: auto;
    min-width: 800px !important;
    width: auto;
    max-width: calc(100vw - 2rem);
    padding: 2rem 2.5rem !important;
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.125rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    will-change: transform;
    transition: none !important;
}

/* Special wider styling for Hydraulic Seals (4 columns: Inch/Metric each split) */
.navigation #seals-menu {
    min-width: 1200px !important;
    max-width: min(1600px, calc(100vw - 4rem));
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    position: absolute !important;
}

/* Ensure menu items are positioned correctly */
.navigation li[class*="level-0"] {
    position: relative !important;
}

/* Prevent any transform transitions that cause jumping */
.navigation [id$="-menu"][x-show] {
    transition: opacity 0.2s ease !important;
}

.navigation [id$="-menu"][x-show="true"] {
    transform: translateX(-50%) !important;
}

/* Container for proper centering - full width */
.navigation > div {
    width: 100%;
    position: relative;
    overflow: visible;
}

.navigation > div > nav {
    position: relative;
    width: 100%;
    overflow: visible;
}

.navigation > div > nav > ul {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

/* Make sure the first menu item (Seals) can position its dropdown correctly */
.navigation li[class*="level-0"]:first-child {
    position: relative;
}

/* Position Seals menu relative to the nav container, not the menu item */
.navigation li[class*="level-0"]:first-child > div[id$="-menu"] {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: fit-content !important;
    min-width: 1200px !important;
    max-width: 1600px !important;
}

/* For second menu item (Hydraulic Cylinders), ensure it doesn't go off left */
.navigation li[class*="level-0"]:nth-child(2) [id$="-menu"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 1rem !important;
}

/* For Pumps menu - prevent jumping */
.navigation li[class*="level-0"]:nth-child(3) [id$="-menu"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* For Valves menu - prevent jumping */
.navigation li[class*="level-0"]:nth-child(4) [id$="-menu"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* For Other Products menu */
.navigation li[class*="level-0"]:last-child [id$="-menu"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Column headers for Inch/Metric */
.navigation h3 {
    color: #1f2937;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #3b82f6;
}

/* Category links in megamenu */
.navigation [id$="-menu"] a {
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.9375rem;
    padding: 0.625rem 1rem !important;
    display: block;
    border-radius: 0.375rem;
}

.navigation [id$="-menu"] a:hover {
    background-color: #eff6ff;
    color: #1e40af;
}

/* Ensure proper spacing for two-column layouts - reduced gap */
.navigation .grid.grid-cols-2 {
    gap: 1rem;
}

/* Ensure proper spacing for four-column layouts (Seals) - reduced gap */
.navigation .grid.grid-cols-4 {
    gap: 1rem;
}

/* Column styling */
.navigation [id$="-menu"] > div > div {
    min-width: 0;
}

/* List styling in columns */
.navigation [id$="-menu"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navigation [id$="-menu"] ul li {
    margin-bottom: 0.25rem;
}

/* Make sure megamenu doesn't overflow on smaller screens */
@media (max-width: 1024px) {
    .navigation [id$="-menu"] {
        min-width: auto !important;
        width: 90vw;
        max-width: 95vw;
        padding: 1.5rem 1rem !important;
    }
    
    .navigation .grid.grid-cols-2 {
        gap: 1.5rem;
    }
}

/* Ensure dropdown appears below menu item */
.navigation li[class*="level-0"] {
    position: relative;
}

/* Better shadow and border for megamenu */
.navigation [id$="-menu"] {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
}

/* Custom scrollbar styling - grey instead of blue */
.navigation [id$="-menu"]::-webkit-scrollbar {
    width: 8px;
}

.navigation [id$="-menu"]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.navigation [id$="-menu"]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.navigation [id$="-menu"]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar styling */
.navigation [id$="-menu"] {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Filter Modal Styles */
.filter-modal {
    z-index: 9999;
}

.filter-modal .bg-opacity-50 {
    backdrop-filter: blur(2px);
}

.filter-modal input[type="text"] {
    font-size: 1rem;
}

.filter-modal .grid-cols-3 {
    gap: 1rem;
}

.filter-modal a {
    transition: color 0.2s ease;
}

/* Ensure modal items are properly styled */
.filter-item {
    min-height: 2rem;
}

/* Subcategory Grid Styles */
.subcategories-grid {
    margin-top: 2rem;
}

.subcategory-item {
    text-decoration: none;
}

.subcategory-icon {
    min-height: 150px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subcategory-item:hover .subcategory-icon {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subcategory-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subcategory-icon img {
    transition: transform 0.2s ease;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    /* Minimum display size - images smaller than this will be scaled up */
    min-width: 120px;
    min-height: 120px;
}

/* Scale up small images using CSS transform */
.subcategory-icon img.subcategory-image-small {
    transform: scale(1.5);
    transform-origin: center;
}

/* Better image rendering for scaled images */
.subcategory-icon img {
    image-rendering: auto;
}

/* Styling for scaled images */
.subcategory-icon img.subcategory-image-scaled {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}