/* ============================================================
 * SCOPED SHOWCASE MEGA MENU — PREMIUM & ISOLATED CSS
 * ============================================================ */

.navbar__mega-menu {
    /* Dimensions and spacing */
    width: 680px !important;
    max-width: calc(100vw - 40px) !important;
    
    /* Premium frosted glass unified backdrop */
    background: var(--color-bg-deep) !important;
    background: var(--mega-menu-bg) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    
    /* Fine gold border */
    border: 1px solid rgba(255, 184, 0, 0.16) !important;
    
    /* Drop shadows for premium depth */
    box-shadow: var(--mega-menu-shadow) !important;
    
    /* Interaction state transitions */
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    pointer-events: none;
    transition: 
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
        opacity 0.25s ease, 
        backdrop-filter 0.3s ease !important;
}

/* Active state triggered by Javascript */
.navbar__mega-menu.is-active {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
    pointer-events: auto !important;
}

/* Chevron transition rotation based on button ARIA state */
#nav-academy-trigger[aria-expanded="true"] .lucide-chevron-down,
#nav-academy-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg) !important;
}

#nav-academy-trigger .lucide-chevron-down,
#nav-academy-trigger svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Responsive dimensions for tablets & intermediate breakpoints */
@media (max-width: 1120px) {
    .navbar__mega-menu {
        width: 620px !important;
        padding: 1.75rem 2rem !important;
    }
}

@media (max-width: 960px) {
    .navbar__mega-menu {
        width: 560px !important;
        padding: 1.5rem 1.75rem !important;
        margin-left: -50px !important;
    }
}

@media (max-width: 768px) {
    .navbar__mega-menu {
        display: none !important; /* Hide desktop menu on mobile (handled by Drawer) */
    }
}

/* Premium micro-interactive card for menu items */
.mega-menu-card {
    position: relative;
    background: var(--mega-menu-card-bg) !important;
    border: 1px solid var(--mega-menu-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    transition: 
        background 0.3s ease, 
        border-color 0.3s ease, 
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.3s ease !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* Spotlight mouse glow element */
.mega-menu-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(
        220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--accent-rgb), 0.09),
        transparent 80%
    ) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.mega-menu-card:hover::before {
    opacity: 1 !important;
}

.mega-menu-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3) !important;
    background: var(--mega-menu-card-hover-bg) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.4), 
        0 0 15px rgba(var(--accent-rgb), 0.06) !important;
}

/* Hover effects on items inside the cards */
.mega-menu-card:hover .mega-menu-title {
    color: rgb(var(--accent-rgb)) !important;
}

.mega-menu-card:hover .mega-menu-icon-wrapper {
    background-color: rgb(var(--accent-rgb)) !important;
    color: #000000 !important;
    transform: scale(1.05) rotate(5deg) !important;
}

.mega-menu-icon-wrapper {
    transition: 
        background-color 0.3s ease, 
        color 0.3s ease, 
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover Bridge to ensure smooth cursor transitions */
.mega-menu-bridge::before {
    content: '' !important;
    position: absolute !important;
    top: -24px !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: -1 !important;
}