/* Tribal Image-Shaped Mobile Menu */
@media (max-width: 768px) {
    #mobile-menu {
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* Prevent scroll if image is too big */
    }

    /* Keep hidden when closed - Critical Fix */
    #mobile-menu:not(.flex) {
        display: none !important;
        opacity: 0;
        pointer-events: none;
    }

    #mobile-menu.flex {
        opacity: 1;
        pointer-events: all;
    }

    /* Main tribal design - Large image on the left */
    #mobile-menu nav::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -10%;
        right: auto;
        /* Shifted to left side */
        transform: translate(0, -50%) scale(0.9);
        width: 80vw;
        height: 80vh;
        background-image: url('tribal-menu-icon.png');
        background-repeat: no-repeat;
        background-position: center left;
        background-size: contain;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
    }

    #mobile-menu.flex nav::before {
        opacity: 1;
        transform: translate(0, -50%) scale(1);
    }

    /* Container for menu items */
    #mobile-menu nav ul {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 50vh;
        gap: 1.5rem;
        padding-top: 2rem;
        padding-left: 25%;
        /* Base padding */
        pointer-events: auto;
    }

    #mobile-menu nav ul li {
        position: relative;
        opacity: 0;
        pointer-events: auto;
        width: auto;
    }

    /* Create Semi-Circle Curve */

    /* Top Item - Close to edge */
    #mobile-menu nav ul li:nth-child(1) {
        margin-left: 3.5rem;
    }

    /* Middle Item - Pushed out (Curve peak) */
    #mobile-menu nav ul li:nth-child(2) {
        margin-left: 6rem;
        /* Creates the bulge/curve */
    }

    /* Bottom Item - Close to edge */
    #mobile-menu nav ul li:nth-child(3) {
        margin-left: 3rem;
    }

    /* Entrance Animations */
    #mobile-menu.flex nav ul li:nth-child(1) {
        animation: textFadeIn 0.6s ease-out 0.4s forwards;
    }

    #mobile-menu.flex nav ul li:nth-child(2) {
        animation: textFadeIn 0.6s ease-out 0.5s forwards;
    }

    #mobile-menu.flex nav ul li:nth-child(3) {
        animation: textFadeIn 0.6s ease-out 0.6s forwards;
    }

    @keyframes textFadeIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Link Styling - Text Only */
    #mobile-menu nav ul li a {
        display: block;
        color: #000;
        /* Distinct Black */
        text-decoration: none;
        font-family: 'Merriweather', serif;
        /* Matching site serif font */
        font-size: 2.2rem;
        font-weight: 300;
        /* Thinner elegant weight */
        line-height: 1;
        transition: all 0.3s ease;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    }

    /* Link Styling - Text Only */
    #mobile-menu nav ul li a:hover {
        color: #00b4a6;
        /* Teal accent */
        transform: scale(1.1);
    }

    /* Active State */
    #mobile-menu nav ul li a:active {
        color: #009688;
        transform: scale(0.95);
    }

    /* Social icons at bottom */
    #mobile-menu>div {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #mobile-menu.flex>div {
        animation: simpleFadeIn 0.8s ease 0.8s forwards;
    }

    @keyframes simpleFadeIn {
        to {
            opacity: 1;
        }
    }

    /* Close button styling upgrade */
    #mobile-menu-close-button {
        top: 2rem;
        right: 2rem;
        color: #000;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        padding: 0.5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
}