/* Burger Menu and Mobile Navigation Styles */

/* Burger menu icon */
.burger {
    display: none; /* Hidden by default on desktop */
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 18px;
    height: 18px;
}

.burger div {
    width: 18px;
    height: 2px;
    background-color: #8b0000; /* Dark maroon */
    margin: 4px 0;
    transition: all 0.3s ease;
    position: relative;
}

.dark .burger div {
    background-color: white;
}

/* Toggle animation for burger menu */
.burger.toggle .line1 {
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
}

.burger.toggle .line2 {
    opacity: 0;
}

.burger.toggle .line3 {
    transform: rotate(-45deg);
    position: absolute;
    top: 8px;
}

/* Mobile navigation styles */
@media screen and (max-width: 800px) {
    .burger {
        display: block; /* Show burger on mobile */
    }
    
    .nav-links {
        position: absolute;
        right: 0;
        top: 45px; /* Height of the navbar */
        background-color: #f8e5e7; /* Very light maroon/pink */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        transform: translateX(100%);
        transition: all 0.5s ease-in;
        z-index: 999;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
    }

    .dark .nav-links {
        background-color: #8b0000; /* Dark maroon for dark mode */
    }

    .nav-links.nav-active {
        transform: translateX(0%);
        max-height: 1000px; /* Large enough to show all items */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        opacity: 1;
        display: flex !important; /* Force display */
        visibility: visible !important; /* Force visibility */
    }

    .nav-links li {
        width: 100%;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .nav-links.nav-active li {
        opacity: 1;
    }

    .nav-links li a {
        padding: 15px 20px;
        width: 100%;
        display: block;
        text-align: left;
        border-right: none;
        border-bottom: none;
    }

    .dark .nav-links li a {
        border-bottom: none;
    }

    /* Submenu styles for mobile */
    .nav-links .sub-menu {
        position: static;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        width: 100%;
        background-color: #faf0f1; /* Even lighter maroon/pink */
        box-shadow: none;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .dark .nav-links .sub-menu {
        background-color: #c41e3a; /* Lighter maroon */
    }

    .nav-links .has-submenu.active .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: 1000px; /* Large enough to show all items */
    }

    .nav-links .sub-menu li a {
        padding-left: 40px; /* Indent submenu items */
    }

    /* Animation for nav items */
    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    .nav-links.nav-active li {
        animation: navLinkFade 0.5s ease forwards;
    }

    /* Delay each nav item animation */
    .nav-links.nav-active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-links.nav-active li:nth-child(2) { animation-delay: 0.2s; }
    .nav-links.nav-active li:nth-child(3) { animation-delay: 0.3s; }
    .nav-links.nav-active li:nth-child(4) { animation-delay: 0.4s; }
    .nav-links.nav-active li:nth-child(5) { animation-delay: 0.5s; }
    .nav-links.nav-active li:nth-child(6) { animation-delay: 0.6s; }
    .nav-links.nav-active li:nth-child(7) { animation-delay: 0.7s; }
}

/* Additional spacing for burger menu on smaller screens */
@media screen and (max-width: 775px) {
    .burger {
        top: 55%; /* Adjust position to be just slightly lower than default */
        margin-top: 2px; /* Add a small margin */
    }
}