<style>

    .drop{
    /*transform: scaleY(8) !important;    */
  transform-origin: top !important;
  transition: transform 0.09s ease-in !important;
    }
    .droplogo{
  /*color: white !important;*/
text-shadow: 0 0 50px #fff, 0 0 50px #fff, 0 0 50px #fff, 0 0 50px #f3ff6a21, 0 0 100px #f3ff6a21, 0 0 120px #f3ff6a21, 0 0 125px #f3ff6a21, 0 0 200px #f3ff6a21;
    }
    
    .dropmenu{
  color: #ffffff !important;
    --shadow-color: #fff300;
    --shadow-color-light: #f3ff6a00;
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }
    .droptext{
        --n-menu-title-color-normal:white !important;
    }
</style>
<script>

// --- Clasa ClassWatcher ---
class ClassWatcher {
    constructor(targetNode, classToWatch, classAddedCallback, classRemovedCallback) {
        this.targetNode = targetNode;
        this.classToWatch = classToWatch;
        this.classAddedCallback = classAddedCallback;
        this.classRemovedCallback = classRemovedCallback;
        this.lastClassState = targetNode.classList.contains(this.classToWatch);
        this.observer = new MutationObserver(this.mutationCallback);
        this.observe();
    }

    observe() {
        this.observer.observe(this.targetNode, { attributes: true });
    }

    disconnect() {
        this.observer.disconnect();
    }

    mutationCallback = (mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                let currentClassState = mutation.target.classList.contains(this.classToWatch);
                if (this.lastClassState !== currentClassState) {
                    this.lastClassState = currentClassState;
                    currentClassState ? this.classAddedCallback() : this.classRemovedCallback();
                }
            }
        }
    };
}

// --- Clasa AttributeWatcher ---
class AttributeWatcher {
    constructor(targetNode, attributeToWatch, conditionCallback, attributeAddedCallback, attributeRemovedCallback) {
        this.targetNode = targetNode;
        this.attributeToWatch = attributeToWatch;
        this.conditionCallback = conditionCallback;
        this.attributeAddedCallback = attributeAddedCallback;
        this.attributeRemovedCallback = attributeRemovedCallback;
        this.lastState = this.conditionCallback(this.targetNode.getAttribute(this.attributeToWatch));
        this.observer = new MutationObserver(this.mutationCallback);
        this.observe();
    }

    observe() {
        this.observer.observe(this.targetNode, { attributes: true });
    }

    disconnect() {
        this.observer.disconnect();
    }

    mutationCallback = (mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === this.attributeToWatch) {
                let currentState = this.conditionCallback(this.targetNode.getAttribute(this.attributeToWatch));
                if (this.lastState !== currentState) {
                    this.lastState = currentState;
                    currentState ? this.attributeAddedCallback() : this.attributeRemovedCallback();
                }
            }
        }
    };
}


// Așteaptă încărcarea DOM-ului
window.addEventListener('DOMContentLoaded', () => {
    // Selectează elementele
    const backdrop = document.getElementById('backdrop');
    const logo = document.getElementById('logo');

    const meniu1 = document.getElementById('e-n-menu-title-1881');
    const submeniu1 = document.getElementById('e-n-menu-content-1881');
    
    const meniu2 = document.getElementById('e-n-menu-title-1882');
    const submeniu2 = document.getElementById('e-n-menu-content-1882');
    // Partea de mobil
    const mobileSandwich = document.getElementById('menu-toggle-188');
    const mobileSubmeniu1 = document.getElementById('e-n-menu-dropdown-icon-1881');
    const mobileSubmeniu2 = document.getElementById('e-n-menu-dropdown-icon-1882');

    // Asigură-te că submeniurile există

        let classWatcher = new ClassWatcher(submeniu1, 'e-active', submeniu1adding, submeniu1removals);
        let classWatcher2 = new ClassWatcher(submeniu2, 'e-active', submeniu2adding, submeniu2removals);
        //mobil sandwich
            const watcher = new AttributeWatcher(
            mobileSandwich,
            'aria-expanded',
            value => value === 'true', // considerăm că e "activ" doar dacă valoarea e "true"
            () => {
                if (document.documentElement.clientWidth <= 1024){
                backdrop.classList.add("drop");
                if(mobileSubmeniu1.getAttribute("aria-expanded")=="true")
                                backdrop.style.transform="scaleY(20)";
                else if(mobileSubmeniu2.getAttribute("aria-expanded")=="true")
                                                backdrop.style.transform="scaleY(20)";

else 
                backdrop.style.transform="scaleY(10)";

                logo.classList.add("droplogo");
                meniu1.style.color="white";
                }
            },
            () => {
                if (document.documentElement.clientWidth <= 1024){
                backdrop.classList.remove("drop");
                        backdrop.style.transform="scaleY(0)";

                logo.classList.remove("droplogo");
                }
            }
        );

    // mobil primu submeniu 
            const watchersubmeniu1mobil = new AttributeWatcher(
            mobileSubmeniu1,
            'aria-expanded',
            value => value === 'true', // considerăm că e "activ" doar dacă valoarea e "true"
            () => {
                if (document.documentElement.clientWidth <= 1024){
                backdrop.classList.add("drop");
                        backdrop.style.transform="scaleY(19)";
                logo.classList.add("droplogo");
                }
            },
            () => {
                if (document.documentElement.clientWidth <= 1024){
                                if(mobileSubmeniu1.getAttribute("aria-expanded")=="true")
                                backdrop.style.transform="scaleY(19)";
                else if(mobileSubmeniu2.getAttribute("aria-expanded")=="true")
                                                backdrop.style.transform="scaleY(19)";
                                                else

                        backdrop.style.transform="scaleY(10)";
                }

            }
        );
        
            // mobil al doilea submeniu 
            const watchersubmeniu2mobil = new AttributeWatcher(
            mobileSubmeniu2,
            'aria-expanded',
            value => value === 'true', // considerăm că e "activ" doar dacă valoarea e "true"
            () => {
                if (document.documentElement.clientWidth <= 1024){
                backdrop.classList.add("drop");
                        backdrop.style.transform="scaleY(20)";
                logo.classList.add("droplogo");}
            },
            () => {
                if (document.documentElement.clientWidth <= 1024){
                                if(mobileSubmeniu1.getAttribute("aria-expanded")=="true")
                                backdrop.style.transform="scaleY(20)";
                else if(mobileSubmeniu2.getAttribute("aria-expanded")=="true")
                                                backdrop.style.transform="scaleY(20)";
                                                else

                        backdrop.style.transform="scaleY(10)";}
            }
        );

    window.addEventListener('resize', function(event) {
mobileSandwich.setAttribute("aria-expanded", "false");


}, true);




    // Funcții desktop
    function submeniu1adding() {
            if (document.documentElement.clientWidth > 1024) {

        backdrop.classList.add("drop");
        backdrop.style.transform="scaleY(14)";
        logo.classList.add("droplogo");

        meniu1.classList.add("dropmenu");
        meniu1.querySelectorAll('span').forEach(el => el.classList.add("dropmenu"));
        meniu2.classList.add("droptext");

            }
        else{
                    meniu1.classList.add("dropmenu");
        meniu1.querySelectorAll('span').forEach(el => el.classList.add("dropmenu"));

        }
        
    }

    function submeniu1removals() {
                    if (document.documentElement.clientWidth > 1024) {
        backdrop.classList.remove("drop");
        backdrop.style.transform="scaleY(0)";
        logo.classList.remove("droplogo");
        meniu1.classList.remove("dropmenu");
        meniu1.querySelectorAll('span').forEach(el => el.classList.remove("dropmenu"));
        meniu2.classList.remove("droptext");

                    }
                    else{
                                meniu1.classList.remove("dropmenu");
        meniu1.querySelectorAll('span').forEach(el => el.classList.remove("dropmenu"));

                    }
    }

    function submeniu2adding() {
                            if (document.documentElement.clientWidth > 1024) {

        backdrop.classList.add("drop");
                        backdrop.style.transform="scaleY(14)";
        logo.classList.add("droplogo");
        meniu2.classList.add("dropmenu");
        meniu2.querySelectorAll('span').forEach(el => el.classList.add("dropmenu"));
        meniu1.classList.add("droptext");

                            }
                            else{
                                       meniu2.classList.add("dropmenu");
        meniu2.querySelectorAll('span').forEach(el => el.classList.add("dropmenu"));
 
                            }
    }

    function submeniu2removals() {
                                    if (document.documentElement.clientWidth > 1024) {

        backdrop.classList.remove("drop");
                        backdrop.style.transform="scaleY(0)";

        logo.classList.remove("droplogo");
        meniu2.classList.remove("dropmenu");
        meniu2.querySelectorAll('span').forEach(el => el.classList.remove("dropmenu"));
        meniu1.classList.remove("droptext");

                                    }
        else{
                    meniu2.classList.remove("dropmenu");
        meniu2.querySelectorAll('span').forEach(el => el.classList.remove("dropmenu"));

        }
    }




}); // end DOMContentLoaded



</script>