/* ============================================================
   BNU mega menu — Sharjah-university style 3-zone panel:
   [ info: big title + intro ] | [ main links + circle arrows ] | [ sub links of active item ]
   LTR + RTL via logical properties. Navy #0F4C81 / Gold #E6C229.
   ============================================================ */

/* NOTE: .header is position:absolute in bnu*.css (floats over the hero with a
   translucent navy bg) — that already makes it the positioning context for the
   mega panel, so we must NOT override its position here. */

#cssmenu > ul > li.has-mega { position: static; }

#cssmenu > ul > li.has-mega > .bnu-mega {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    z-index: 999;
    background: #fff;
    border-top: 3px solid #E6C229;
    box-shadow: 0 24px 50px rgba(10, 35, 60, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

#cssmenu > ul > li.has-mega:hover > .bnu-mega,
#cssmenu > ul > li.has-mega:focus-within > .bnu-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bnu-mega-wrap {
    display: flex;
    align-items: stretch;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 320px;
}

/* ---------- zone 1: info ---------- */
.bnu-mega-info {
    flex: 0 0 32%;
    padding: 44px 40px;
    border-inline-end: 1px solid #e8edf3;
}
.bnu-mega-info h2 {
    font-size: 34px;
    font-weight: 700;
    color: #1c2b3a;
    margin: 0 0 18px;
    line-height: 1.25 !important;
}
.bnu-mega-info p {
    font-size: 15px;
    line-height: 1.8;
    color: #5b6b7c;
    margin: 0;
}

/* ---------- zone 2: main links ---------- */
.bnu-mega-nav {
    flex: 0 0 40%;
    padding: 28px 0;
    border-inline-end: 1px solid #e8edf3;
    display: flex;
    flex-direction: column;
}
.bnu-mega-nav .bnu-mega-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 34px !important;
    font-size: 19px;
    font-weight: 600;
    color: #1c2b3a !important;
    text-decoration: none;
    line-height: 1.4 !important;
    transition: background .15s ease, color .15s ease;
}
.bnu-mega-nav .bnu-mega-item i {
    font-size: 22px;
    color: #E6C229;
    transition: transform .15s ease;
}
.bnu-mega-nav .bnu-mega-item:hover,
.bnu-mega-nav .bnu-mega-item.active {
    background: #fdf6dd;            /* soft gold tint like UoS mint row */
    color: #0F4C81 !important;
}
.bnu-mega-nav .bnu-mega-item:hover i,
.bnu-mega-nav .bnu-mega-item.active i { transform: translateX(0) scale(1.08); }

/* ---------- zone 3: sub links of active item ---------- */
.bnu-mega-side {
    flex: 1 1 auto;
    padding: 40px 36px;
}
.bnu-mega-side .bnu-mega-sub { display: none; list-style: none; margin: 0; padding: 0; }
.bnu-mega-side .bnu-mega-sub.active { display: block; }
.bnu-mega-side .bnu-mega-sub li a {
    display: block;
    padding: 12px 2px;
    font-size: 17px;
    color: #2b3a4a !important;
    text-decoration: none;
    line-height: 1.5 !important;
    border-radius: 8px;
    transition: color .15s ease, padding-inline-start .15s ease;
}
.bnu-mega-side .bnu-mega-sub li a:hover {
    color: #0F4C81 !important;
    padding-inline-start: 10px;
}

/* keep parent link highlighted while panel is open */
#cssmenu > ul > li.has-mega:hover > a { color: #E6C229; }

/* ------------------------------------------------------------
   Neutralize the template dropdown rules inside the mega panel.
   menu/styles*.css targets `#cssmenu ul ul` (ID specificity):
   position:absolute; left:9999px / li height:0 / gold link bg —
   which hid the side-panel links. Reset them here.
   ------------------------------------------------------------ */
#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub {
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub.active { display: block !important; }

#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub li {
    height: auto !important;
    float: none !important;
    display: block !important;
    background: none !important;
    width: auto !important;
}

#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub li a {
    display: block !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 12px 2px !important;
    font-size: 17px !important;
    color: #2b3a4a !important;
    line-height: 1.5 !important;
    border-radius: 8px;
    transition: color .15s ease, padding-inline-start .15s ease;
}
#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub li a:hover,
#cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub li:hover > a {
    background: transparent !important;
    color: #0F4C81 !important;
    padding-inline-start: 10px !important;
}

/* ---------- mobile: collapsed accordion ---------- */
@media (max-width: 991px) {
    #cssmenu > ul > li.has-mega { position: relative; }

    /* collapsed by default — tapping the parent item toggles .bnu-open (JS) */
    #cssmenu > ul > li.has-mega > .bnu-mega {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top-width: 2px;
    }
    #cssmenu > ul > li.has-mega.bnu-open > .bnu-mega { display: block; }

    .bnu-mega-wrap { flex-direction: column; min-height: 0; }

    /* keep the mobile menu compact: no big title/description */
    .bnu-mega-info { display: none; }

    .bnu-mega-nav { border-inline-end: none; flex: 1 1 auto; padding: 4px 0; }
    .bnu-mega-nav .bnu-mega-item { padding: 13px 18px !important; font-size: 16px; }
    .bnu-mega-nav .bnu-mega-item i { font-size: 18px; }

    .bnu-mega-side { padding: 6px 18px 12px; }
    #cssmenu ul li.has-mega .bnu-mega ul.bnu-mega-sub li a {
        padding: 10px 2px !important;
        font-size: 15px !important;
    }
}