/* ================================
   Hamburger (Button + Mobile Nav)
==================================*/

/* hide by default */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 2001;
}

    /* the three bars */
    .hamburger div {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 4px 0;
        transition: 0.4s;
    }


/* hide it when the menu is closed */
.main-nav .nav-close {
    display: none;
}

/* show it when you’ve toggled the menu open */
.main-nav.show .nav-close {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
}

/* style the little “×” button */
.main-nav .close-btn {
    font-size: 1.5rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* RTL: show the close-wrapper and align the × to the left */
[dir="rtl"] .main-nav.show .nav-close {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding-right: 1.5rem;
}

/* the × button itself is identical in both LTR and RTL */
[dir="rtl"] .main-nav .close-btn {
    font-size: 1.5rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    margin-right: 0.5rem; /* adjust as desired */
}



/* only on small screens */
@media (max-width: 600px) {
    /* show the button */
    .hamburger {
        display: block;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
    }

    /*    [dir="rtl"] .hamburger {
        right: auto;
        left: 1.5rem;
    }*/

    .hamburger,
    .header-right {
        order: 1;
    }
    /* drop the logo onto its own centered row */
    .logo {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 1rem 0;
    }


    /* hide it when the menu is closed */
    .main-nav .nav-close {
        display: none;
    }

    /* show it when you’ve toggled the menu open */
    .main-nav.show .nav-close {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        padding: 0.5rem 1rem;
    }

    /* style the little “×” button */
    .main-nav .close-btn {
        font-size: 1.5rem;
        color: #fff;
        background: transparent;
        border: none;
        cursor: pointer;
        line-height: 1;
    }

    /* RTL: show the close-wrapper and align the × to the left */
    [dir="rtl"] .main-nav.show .nav-close {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        padding-right: 1.5rem;
    }

    /* the × button itself is identical in both LTR and RTL */
    [dir="rtl"] .main-nav .close-btn {
        font-size: 1.5rem;
        color: #fff;
        background: transparent;
        border: none;
        cursor: pointer;
        line-height: 1;
        margin-right: 0.5rem; /* adjust as desired */
    }





    /* your main nav starts hidden off-screen */
    .main-nav {
        display: none;
        flex-direction: column; /* ALWAYS vertical */
        align-items: flex-start;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0; /* overridden for RTL below */
        width: 80vw;
        max-width: 320px;
        background: var(--primary);
        padding-top: 4rem;
        box-shadow: 2px 0 8px rgba(0,0,0,0.09);
        z-index: 2000;
        transition: transform 0.3s ease;
        transform: translateX(-100%); /* slide off to left */


        overflow-y: auto;
        max-height: 100vh; /* so it never grows off the bottom */
    }

        /* when you add “show” it slides into view */
        .main-nav.show {
            display: flex;
            transform: translateX(0);
            flex-direction: column !important;
            align-items: flex-start !important;
        }

    /* RTL version: off-screen right → slide in from right */
    [dir="rtl"] .main-nav {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

        [dir="rtl"] .main-nav.show {
            transform: translateX(0);
        }

    /* hide your header-right (flags, avatar, etc.) so it never sits under the ☰ */
    .main-nav.show ~ .header-right {
        display: none;
    }

    /* optional “click outside” overlay (if you still wire it up) */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1999;
    }

    .main-nav.show ~ .menu-overlay {
        display: block;
    }

    /* switch the dropdown submenu on mobile from absolute to inline */
    /*.main-nav li.dropdown > ul.dropdown-menu {
        left: auto;
        right: 0;*/ /* anchor to right edge of parent <li> */
        /*text-align: left;*/ /* align menu items to the right */
        /*z-index: 3000;*/ /* float above other elements */

        /*position: static;
        box-shadow: none;
        padding-left: 1rem;*/ /* indent its items a bit */
    /*}*/

    /* Give the nav itself some breathing room on the right */
    [dir="rtl"] nav ul.main-nav {
        padding-inline-start: 1rem; /* pushes items off the screen edge */
        padding-inline-end: 0; /* you may tweak these values */
    }

        /* Flip the per-item margin to the right instead of left */
        [dir="rtl"] nav ul.main-nav li {
            margin-inline-end: 1.5rem; /* same as LTR’s margin-start */
            margin-inline-start: 0;
        }

            /* Position RTL dropdowns on the right side and ensure visibility */
            [dir="rtl"] nav ul.main-nav li.dropdown > ul.dropdown-menu {
                left: auto;
                right: 0; /* anchor to right edge of parent <li> */
                text-align: right; /* align menu items to the right */
                z-index: 3000; /* float above other elements */

                position: static;
                box-shadow: none;
                padding-left: 1rem; /* indent its items a bit */
            }

            /* Make sure dropdown links are fully opaque */
            [dir="rtl"] nav ul.main-nav li.dropdown ul.dropdown-menu li a {
                opacity: 1; /* undo any accidental transparency */
                background: var(--primary); /* consistent background */
                color: #fff; /* ensure text is readable */
            }




    /* ── LTR Mobile Nav Tweaks ── */
    [dir="ltr"] nav ul.main-nav {
        /* add a little padding on the inside right, instead of left */
        padding-inline-start: 0;
        padding-inline-end: 1rem;
    }

        [dir="ltr"] nav ul.main-nav li {
            /* margin on the left, not the right */
            margin-inline-start: 1.5rem;
            margin-inline-end: 0;
        }

            /* dropdown submenu sits inline (not off-screen) */
            [dir="ltr"] nav ul.main-nav li.dropdown > ul.dropdown-menu {
                position: static;
                box-shadow: none;
                padding-left: 1rem; /* indent items */
                left: 0;
                right: auto;
                text-align: left;
                z-index: 3000;
            }

            /* ensure submenu links are fully visible */
            [dir="ltr"] nav ul.main-nav li.dropdown ul.dropdown-menu li a {
                opacity: 1;
                background: var(--primary);
                color: #fff;
            }

    /* make sure the “×” close-btn lands on the panel’s top-right in LTR */
    [dir="ltr"] .main-nav.show .nav-close {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        padding: 0.5rem 1rem;
    }

    /* and RTL version stays on the top-left */
    [dir="rtl"] .main-nav.show .nav-close {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        padding: 0.5rem 1rem;
    }

}