/* =============================================================================
   Premium Desktop Megamenu — Dynamic Zero-Configuration Dropdowns
   Discount Fabrics Ltd — Theme Overrides
   @package WoodmartChildNew
   ============================================================================= */

/* ── Typography & Base Defaults ────────────────────────────────────────── */
.dfl-menu-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    text-align: left !important;
    color: #333333 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── Auto-Adjusting Subcategory Grid ───────────────────────── */
.dfl-menu-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Forces columns side-by-side in a single row */
    gap: 32px !important;
    /* Premium 32px horizontal spacing between columns */
    width: 100% !important;
}

.dfl-menu-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 200px !important;
    /* Premium minimum width per column */
    max-width: 280px !important;
    /* Prevents text from stretching excessively */
    box-sizing: border-box !important;
}

/* ── Subcategory Column Headers (Level 2) ─────────────────────────────── */
.dfl-col-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    /* Increased from 15px for readability */
    text-transform: uppercase !important;
    /* Forces uppercase for category headers with subcategories */
    color: #0E1B4D !important;
    /* Secondary brand navy/blue */
    border-bottom: 2.5px solid #E4003B !important;
    /* Primary brand pink/red underline */
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.dfl-col-title svg {
    color: #E4003B !important;
    transition: transform 0.3s ease !important;
}

.dfl-menu-col:hover .dfl-col-title svg {
    transform: rotate(10deg) scale(1.1) !important;
}

/* ── 3rd Level Category Links ──────────────────────────────────────────── */
.dfl-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.dfl-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.dfl-link {
    display: block !important;
    padding: 4px 8px !important;
    /* Tighter padding for elegant spacing */
    margin: 0 !important;
    margin-left: -8px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    /* Increased from 14px for premium readability */
    font-weight: 500 !important;
    color: #555555 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    /* Tight elegant line-height */
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-transform: none !important;
}

/* Style for category list items that have subcategories */
.dfl-link.dfl-has-subcats {
    text-transform: uppercase !important;
    /* Capitalize subcategories that act as headers for deeper levels */
    font-weight: 700 !important;
    font-size: 14.5px !important;
    color: #111111 !important;
    letter-spacing: 0.4px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}

/* Premium Semantic Nested Menu Layout styling */
.dfl-sub-menu-list {
    list-style: none !important;
    padding: 0 0 0 12px !important;
    margin: 4px 0 6px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    border-left: 1.5px solid rgba(228, 0, 59, 0.12) !important;
    /* Premium brand-red vertical hierarchy thread */
    transition: border-color 0.25s ease !important;
}

.dfl-sub-menu-list:hover {
    border-left-color: rgba(228, 0, 59, 0.4) !important;
    /* Subtle interactive glow */
}

/* ── Recursive Subcategory Hierarchy Sizing ─────────────────────────── */
/* Level 3 items (default list items, depth 1) */
.dfl-depth-1>.dfl-link:not(.dfl-has-subcats) {
    font-size: 15px !important;
}

/* Level 4 items (depth 2) */
.dfl-depth-2>.dfl-link {
    font-size: 14px !important;
    color: #555555 !important;
    font-weight: 500 !important;
}

/* Level 5+ items (depth 3+) */
.dfl-depth-3>.dfl-link,
.dfl-depth-4>.dfl-link {
    font-size: 13px !important;
    color: #777777 !important;
}

/* Premium micro-interactions on hover */
.dfl-link:hover {
    background-color: rgba(228, 0, 59, 0.05) !important;
    /* Very light brand red tint */
    color: #E4003B !important;
    /* Brand red text */
    padding-left: 12px !important;
    font-weight: 600 !important;
}

/* ── Dropdown Hover Transition Support (Integrates with WoodMart) ──────── */
.dfl-desktop-megamenu-dropdown {
    width: max-content !important;
    /* Snugly fits the active columns perfectly! */
    max-width: 95vw !important;
    /* Responsive safety fallback */
    box-shadow: 0 10px 40px rgba(14, 27, 77, 0.12) !important;
    border: 1px solid rgba(14, 27, 77, 0.06) !important;
    border-radius: 0 0 16px 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Change main menu image on hover */
/* .wd-nav:where(:not(.wd-dis-hover))>li:where(.wd-opened,:hover)>a>img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(89%) saturate(5697%) hue-rotate(336deg) brightness(85%) contrast(114%);
} */


/* Center the main header menu perfectly on desktop */
@media (min-width: 1025px) {
    .whb-header-bottom-inner .whb-col-left {
        grid-column: 2 !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .whb-header-bottom-inner .whb-col-center {
        display: none !important;
    }

    .whb-header-bottom-inner .whb-col-right {
        grid-column: 3 !important;
        justify-content: flex-end !important;
    }
}