/* ==========================================================================
   MEGA MENU & NAVIGATION - Luxury By Meem
   ========================================================================== */

/* 1. BASE NAVIGATION */
.main-navigation {
    padding: 0px;
    position: relative;
    z-index: 1000;
}

.primary-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.primary-menu > li {
    position: relative;
}

.primary-menu > li.has-mega-menu {
    position: static !important;
}

/* 2. LEVEL 1 LINKS */
.primary-menu > li > a {
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color var(--theme--transition);
    position: relative;
    display: inline-block;
    padding: 8px 0 20px 0;
}

.primary-menu > li > a::after {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #767474;
    transition: width var(--theme--transition);
}

.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after {
    width: 100%;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
    color: #333;
}

/* 3. MEGA MENU WRAPPER */
.mega-menu-wrapper {
    position: absolute;
    /* تعديل: جعل القائمة تبدأ تماماً من حافة الرابط أو استخدام مساحة حماية */
    top: 100%; 
    left: 0;
    right: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--wp--preset--color--primary);
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    box-shadow: 0 15px 35px var(--theme--shadow-color);
    border-top: 1px solid var(--theme--border-light);
    transform: translateY(0); /* إلغاء الـ translate الذي يسبب الفجوة أحياناً */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* منطقة حماية (Invisible Bridge) لمنع انغلاق القائمة عند تحريك الماوس */
.mega-menu-wrapper::before {
    content: "";
    position: absolute;
    top: -20px; /* يغطي الفجوة بين الرابط والقائمة */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* تحسين الـ Hover في الديسكتوب */
@media (min-width: 769px) {
    .primary-menu > li.has-mega-menu:hover > .mega-menu-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ضمان بقاء الرابط في حالة Active أثناء التواجد داخل القائمة */
    .primary-menu > li.has-mega-menu:hover > a {
        color: #333;
    }
}

/* 4. MEGA MENU GRID */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 40px 80px; /* تقليل البادينج قليلاً لراحة العين */
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}

.mega-menu-grid:has(.mega-menu-image-side) {
    grid-template-columns: repeat(3, 1fr) 2fr;
}

.mega-column-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 12px;
    color: var(--wp--preset--color--contrast);
    border-bottom: 2px solid var(--theme--border-light);
    display: block;
    transition: all var(--theme--transition);
}

.mega-sub-links {
    list-style: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega-sub-links li a {
    font-size: var(--wp--preset--font-size--small);
    color: var(--theme--contrast-75);
    text-decoration: none;
    transition: all var(--theme--transition);
}

.mega-sub-links li a:hover {
    color: #333;
    padding-left: 8px;
}

/* 5. MEGA MENU IMAGE SIDE */
.mega-menu-image-side {
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--theme--shadow-color);
    transition: transform 0.5s ease;
}

.mega-menu-image-side:hover {
    transform: scale(1.02);
}


/* 7. PERFORMANCE & UTILS */
.mega-menu-wrapper, .mega-menu-image-side {
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}