/* ==========================================
   BASE STYLES (Unified Core)
   ================================---------- */
.menu-links {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.menu-links li {
    position: relative;
}

.menu-links .mobile-title-node {
    display: none;
}

@media (min-width: 992px) {
    .menu-links li {
        display: flex;
        gap: 5px;
    }
    .menu-links li::before {
        content: "›";
        display: inline-block;
        margin-right: 8px; /* Adjust spacing between the arrow and the link text */
        font-weight: bold;
        opacity: 0.7;
    }
}

/* ==========================================
   MOBILE VIEWPORT ARCHITECTURE (.mv / .is-mobile)
   ================================---------- */
@media (max-width: 992px) {
    .menu-links {
        border-radius: 4px; 
        position: relative; 
        width: 100%;
        list-style: none;
        padding: 0; 
        margin: 0;
        border: 1px solid rgba(0,0,0,0.5);
    }

    .menu-links li { 
        display: none; 
        cursor: pointer; 
        padding: 10px; 
        min-width: 150px;
        padding-left: 1rem;  
    }

    .menu-links li:first-child { 
        border-top: 0;    
        display: block;   
    }

    .menu-links li:first-child a { 
        display: inline-block; 
    }

    .menu-links a { 
        display: block; 
        position: relative;
    }
       
    .menu-links li:first-child:hover { 
        background-color: transparent; 
    }

    .menu-links.is-open li { 
        display: block;  
    }

    .menu-links .mobile-title-node {
        display: block;
        position: relative;
    }

    .menu-links .mobile-title-node::after {
        position: absolute; 
        content: '';
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        display: block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.29297 6.70711C3.68349 6.31658 4.31666 6.31658 4.70718 6.70711L12.0001 14L19.293 6.70711C19.6835 6.31658 20.3167 6.31658 20.7072 6.70711L21.4143 7.41421C21.8048 7.80474 21.8048 8.4379 21.4143 8.82843L13.0607 17.182C12.4749 17.7678 11.5252 17.7678 10.9394 17.182L2.58586 8.82843C2.19534 8.4379 2.19534 7.80474 2.58586 7.41422L3.29297 6.70711Z' fill='%23000000'/%3E%3C/svg%3E");
        width: 20px; 
        height: 20px;  
        font-weight: bold;
        font-size: 1rem;
        line-height: 1;
        transition: transform 0.3s ease;
    }

    .menu-links.is-open .mobile-title-node::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .sel-menu .nav-item .nav-link {
        padding: 0;
    }

    /* THEME VARIANTS (Light Mode) */
    nav[data-theme="light"] .menu-links {
        border: 1px solid rgba(0,0,0,0.1);
    }

    nav[data-theme="light"] .menu-links li {
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    nav[data-theme="light"] .menu-links li:first-child {
        border-top: 0;
    }

    nav[data-theme="light"] .menu-links li::before {
        filter: none;
        opacity: 0.5;
    }

    nav[data-theme="light"] .menu-links li:hover {
        background-color: rgba(0,0,0,0.05);
    }

    nav[data-theme="light"] .menu-links li:hover::before {
        opacity: 1;
    }

    /* THEME VARIANTS (Dark Mode) */
    nav[data-theme="dark"] .menu-links {
        border: 1px solid rgba(255,255,255,0.4);
    }

    nav[data-theme="dark"] .menu-links li {
        border-top: 1px solid rgba(255,255,255,0.4);
    }

    nav[data-theme="dark"] .menu-links li:first-child {
        border-top: 0;
    }

    nav[data-theme="dark"] .menu-links li::before {
        filter: brightness(0) invert(1);
        opacity: 0.5;
    }

    nav[data-theme="dark"] .menu-links li:hover {
        background-color: rgba(255,255,255,0.05);
    }

    nav[data-theme="dark"] .menu-links li:hover::before {
        opacity: 1;
    }
}