/* ============================================================
   ReviewsAZ — Mega Menu CSS
   الملف: /wp-content/themes/blocksy-child/assets/css/mega-menu.css
   الهوية البصرية: متطابقة مع ألوان وخطوط الموقع
   ============================================================ */

/* ============================================================
   CSS Variables — نفس متغيرات page-standard.php
   ============================================================ */
:root {
    --ra-blue:        #264377;
    --ra-blue-dark:   #1a2e52;
    --ra-blue-light:  #f8fbff;
    --ra-gold:        #F6B319;
    --ra-gold-light:  #fffdf4;
    --ra-neon:        #39FF14;
    --ra-white:       #ffffff;
    --ra-text:        #2c2c2c;
    --ra-muted:       #5a6372;
    --ra-border:      #e1e8f0;
    --ra-font-head:   'Sora', 'Inter', sans-serif;
    --ra-font-body:   'DM Sans', 'Inter', sans-serif;
    --ra-shadow:      0 20px 60px rgba(38,67,119,0.15);
    --ra-radius:      10px;
    --ra-transition:  0.25s ease;
}


/* ============================================================
   NAV WRAPPER — الحاوية الخارجية للقائمة
   ============================================================ */
.ra-mega-nav {
    position: relative;
    z-index: 9999;
    width: 100%;
}

.ra-mega-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ============================================================
   TOP-LEVEL ITEMS — عناصر القائمة الرئيسية
   ============================================================ */
.ra-menu-item {
    position: static;   /* ← static لا relative — لأن الـ panel يمتد لعرض الشاشة */
    list-style: none;
}

/* الرابط أو الـ span في المستوى الأول */
.ra-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-family: var(--ra-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ra-blue);
    text-decoration: none;
    border-radius: 6px;
    transition: color var(--ra-transition), background var(--ra-transition);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    letter-spacing: 0.2px;
}

.ra-menu-link:hover,
.ra-menu-item:hover > .ra-menu-link,
.ra-menu-item.ra-open > .ra-menu-link {
    color: var(--ra-gold);
    background: rgba(246,179,25,0.08);
}

/* Chevron icon */
.ra-chevron {
    transition: transform var(--ra-transition);
    flex-shrink: 0;
    stroke: currentColor;
}

.ra-menu-item.ra-open > .ra-menu-link .ra-chevron,
.ra-menu-item:hover > .ra-menu-link .ra-chevron {
    transform: rotate(180deg);
}

/* خط ذهبي أسفل العنصر النشط */
.ra-menu-item.current-menu-ancestor > .ra-menu-link,
.ra-menu-item.current-menu-item > .ra-menu-link {
    color: var(--ra-blue);
    position: relative;
}

.ra-menu-item.current-menu-ancestor > .ra-menu-link::after,
.ra-menu-item.current-menu-item > .ra-menu-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--ra-gold);
    border-radius: 2px;
}


/* ============================================================
   MEGA PANEL — اللوحة المنسدلة الرئيسية
   ============================================================ */
.ra-mega-panel {
    position: absolute;
    top: calc(100% + 8px);  /* مسافة بسيطة تحت القائمة */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(1200px, 96vw);
    background: var(--ra-white);
    border-radius: var(--ra-radius);
    box-shadow: var(--ra-shadow);
    border: 1px solid var(--ra-border);
    border-top: 3px solid var(--ra-gold);   /* ← خط ذهبي فوق اللوحة */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--ra-transition),
        transform var(--ra-transition),
        visibility var(--ra-transition);
    z-index: 9998;
    pointer-events: none;
}

/* فتح اللوحة عند hover أو عبر JS */
.ra-menu-item:hover .ra-mega-panel,
.ra-menu-item.ra-open .ra-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* الحاوية الداخلية */
.ra-mega-inner {
    padding: 28px 32px 24px;
}

/* خط أخضر نيوني أعلى المحتوى الداخلي */
.ra-mega-inner::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--ra-neon) 0%, transparent 100%);
    opacity: 0.4;
    margin-bottom: 24px;
    border-radius: 2px;
}


/* ============================================================
   COLUMNS GRID — شبكة الأعمدة داخل اللوحة
   ============================================================ */
.ra-mega-columns {
    display: grid;
    /* يتكيف تلقائياً: من 2 إلى 7 أعمدة حسب عدد التصنيفات */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0 24px;
}


/* ============================================================
   COLUMN — العمود الواحد (التصنيف الابن)
   ============================================================ */
.ra-mega-col {
    padding: 0 0 16px 0;
    border-right: 1px solid var(--ra-border);
}

.ra-mega-col:last-child {
    border-right: none;
}


/* ============================================================
   COLUMN TITLE — عنوان العمود (التصنيف الابن)
   ============================================================ */
.ra-mega-col-title {
    display: block;
    font-family: var(--ra-font-head);
    font-size: 13px;
    font-weight: 800;
    color: var(--ra-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ra-border);
    position: relative;
    transition: color var(--ra-transition);
    line-height: 1.3;
}

/* الخط الذهبي الصغير فوق عنوان العمود */
.ra-col-title-bar {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--ra-gold);
    border-radius: 2px;
    margin-bottom: 8px;
}

.ra-mega-col-title:hover {
    color: var(--ra-gold);
}

/* خط ذهبي يمتد عند الـ hover */
.ra-mega-col-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ra-gold);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.ra-mega-col-title:hover::after {
    width: 100%;
}


/* ============================================================
   GRANDCHILD LINKS — روابط التصنيفات الحفيدة
   ============================================================ */
.ra-mega-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ra-mega-links li {
    margin: 0;
    padding: 0;
}

.ra-mega-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 4px;
    font-family: var(--ra-font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ra-muted);
    text-decoration: none;
    border-radius: 5px;
    transition:
        color var(--ra-transition),
        background var(--ra-transition),
        padding-left var(--ra-transition);
    line-height: 1.4;
}

.ra-mega-links a:hover {
    color: var(--ra-blue);
    background: var(--ra-blue-light);
    padding-left: 10px;  /* ← تأثير تحريك للأمام عند الـ hover */
}

/* النقطة الخضراء الصغيرة أمام كل رابط */
.ra-link-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ra-border);
    transition: background var(--ra-transition), transform var(--ra-transition);
}

.ra-mega-links a:hover .ra-link-dot {
    background: var(--ra-neon);
    transform: scale(1.3);
}


/* ============================================================
   FOOTER BAR داخل اللوحة (اختياري — يمكن إزالته)
   ============================================================ */
.ra-mega-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px;
    background: var(--ra-blue-light);
    border-top: 1px solid var(--ra-border);
    border-radius: 0 0 var(--ra-radius) var(--ra-radius);
}

.ra-mega-footer-text {
    font-family: var(--ra-font-body);
    font-size: 12px;
    color: var(--ra-muted);
}

.ra-mega-footer-link {
    font-family: var(--ra-font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--ra-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--ra-gold);
    padding-bottom: 1px;
    transition: color var(--ra-transition);
}

.ra-mega-footer-link:hover {
    color: var(--ra-gold);
}


/* ============================================================
   OVERLAY — طبقة شفافة خلف اللوحة (تعتيم خفيف)
   ============================================================ */
.ra-mega-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,46,82,0.15);
    backdrop-filter: blur(2px);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ra-transition), visibility var(--ra-transition);
    pointer-events: none;
}

.ra-mega-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   MOBILE MENU — القائمة على الموبايل والتابلت
   ============================================================ */
@media (max-width: 1024px) {

    /* إخفاء الـ Mega Menu وإظهار قائمة Blocksy الافتراضية */
    .ra-mega-nav {
        display: none;
    }
}

/* على الديسكتوب الكبير: توسيع اللوحة */
@media (min-width: 1400px) {
    .ra-mega-panel {
        width: min(1320px, 96vw);
    }
}


/* ============================================================
   ACCESSIBILITY — إمكانية الوصول
   ============================================================ */

/* Focus visible للتنقل بالكيبورد */
.ra-menu-link:focus-visible,
.ra-mega-col-title:focus-visible,
.ra-mega-links a:focus-visible {
    outline: 2px solid var(--ra-gold);
    outline-offset: 2px;
}

/* تقليل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
    .ra-mega-panel,
    .ra-menu-link,
    .ra-mega-links a,
    .ra-mega-col-title,
    .ra-chevron {
        transition: none;
    }
}