/* Navbar Styles */
.navbar {
    background: var(--gradient-primary);
    padding: 1.2rem 0 1.2rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    transform-origin: top;
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: padding, background; /* Hint to browser about what will change */
}

.navbar.scrolled {
    padding: 0.5rem 0 0.5rem 0;
    background: rgba(184, 102, 20, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar.scrolled .navbar-brand {
    font-size: 1.6rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    padding: 0.5rem 1rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar-dark .navbar-toggler {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none;
    padding: 0.5rem;
}

/* Remove focus ring from navbar toggler */
.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* Basic Styling for the new toggler bars */
.toggler-bar {
    display: block;
    width: 22px; /* Standard hamburger icon width */
    height: 3px;  /* Standard hamburger icon line height */
    background-color: #fff; /* White color for the bars */
    border-radius: 1px;
    margin: 4px 0; /* Spacing between bars */
    transition: all 0.3s ease-in-out;
}

/* Animation styles when the menu is OPEN (.collapsed class is NOT present) */
.navbar-toggler:not(.collapsed) .top-bar {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler:not(.collapsed) .middle-bar {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .bottom-bar {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Remove default styles if any remain */
.navbar-toggler-icon { 
    /* Ensure no leftover styles interfere */
    background-image: none !important; 
}

.navbar-dark .navbar-nav .nav-link:hover, 
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--gold);
}

/* Mobile responsiveness for navbar */
@media (max-width: 991.98px) {
    /* Force navbar BACKGROUND to be solid dark orange on mobile */
    .navbar {
        background: rgb(184, 102, 20) !important; /* Add !important for precedence if needed */
        backdrop-filter: none !important; /* Ensure no blur */
        /* Padding is handled by scroll effect */
}

    /* Ensure .scrolled doesn't bring back blur or transparency */
    .navbar.scrolled {
        background: rgb(184, 102, 20) !important; 
        backdrop-filter: none !important; 
    }

    .navbar-nav {
        text-align: center;
        padding-top: 1rem;
    }
    
    .navbar-nav .nav-link {
        margin: 0.5rem 0;
    }
    
    .navbar-toggler {
        margin-right: 0;
    }

    /* Mobile active link styling */
    .navbar-dark .navbar-nav .nav-link.active {
        /* background-color: rgba(255, 255, 255, 0.1); */ /* REMOVED background highlight */
        color: var(--gold); /* Ensure gold color remains */
        /* border-radius: 5px; */ /* REMOVED optional rounded highlight */
        text-decoration: underline;
        text-decoration-color: var(--gold); /* Match text color */
        text-underline-offset: 4px; /* Space below text */
        text-decoration-thickness: 2px; /* Slightly thicker underline */
    }

    /* REMOVE the rule hiding the desktop underline on mobile */
    /*
    .navbar-dark .navbar-nav .nav-link.active::after {
        display: none;
    }
    */

    /* Style Download App button consistently on mobile */
    .navbar-nav .btn-light {
        display: inline-block; /* Keep it inline */
        width: auto; /* Allow auto width */
        padding: 0.5rem 1.0rem; /* Keep desired padding */
        min-width: 0; /* Ensure no minimum width inherited */
        /* These apply whether menu is shown or hidden on mobile */
    }

    /* Specific styles for when the menu is shown (like margin/alignment if needed) */
    .navbar-collapse.show .navbar-nav .btn-light {
        margin-top: 0.75rem; 
        align-self: center; /* Keep alignment */
        flex-grow: 0;       
    }

    /* Make the expanded menu appear below the navbar, full screen */
    .navbar-collapse {
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: translateX(100%); /* Changed from translateY(-20px) */
        pointer-events: none; 
        position: fixed; 
        top: 65px; /* Changed from 70px (moved up 5px) */
        left: 0;
        right: 0;
        width: 100vw;
        height: calc(100vh - 65px); /* Adjusted height calculation */
        background-color: rgb(184, 102, 20); 
        z-index: 1025; 
        display: flex; 
        flex-direction: column;
        justify-content: flex-start; /* Changed from center */
        align-items: center; 
        padding-top: env(safe-area-inset-top, 0px); /* Still pad top within this container */
        padding-bottom: env(safe-area-inset-bottom, 5px); 
    }

    .navbar-collapse.show {
        opacity: 1;
        transform: translateX(0); /* Changed from translateY(0) */
        pointer-events: auto; /* Allow interaction when shown */
        /* Remove height override that conflicts with Bootstrap */
    }

    /* Adjust padding/width inside the full screen menu */
    .navbar-collapse.show .navbar-nav {
        padding-top: 5rem; /* Increased padding to push content down more */
        width: 100%; 
    }

    /* Style the Lottie animation within the mobile menu */
    .navbar-collapse.show .mobile-menu-lottie {
        /* Size is set inline for now, but could be controlled here */
        margin-bottom: 1.5rem; /* Space below animation */
        display: block; /* Ensure it behaves as a block for margin auto */
    }
}

/* Add some space between nav items on larger screens */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        margin: 0 5px;
    }
    
    .navbar-nav {
        align-items: center;
    }

    .mobile-menu-lottie {
        display: none !important; /* Hide Lottie on desktop */
    }
}

/* Targeting the problematic 992px to 1199px range */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-dark .navbar-nav .nav-link {
        font-size: 0.9rem; /* Increased from 0.85rem */
        padding: 0.5rem 0.7rem; /* Increased horizontal padding */
        margin: 0 3px; /* Increased margin slightly */
    }

    .navbar-nav .btn-light.ms-lg-3 { /* More specific selector for the download button */
        font-size: 0.9rem; /* Increased from 0.85rem */
        padding: 0.45rem 0.9rem; /* Increased padding */
        margin-left: 0.75rem !important; /* Increased left margin */
    }

    /* Hide icons next to nav links specifically in this range */
    .navbar-dark .navbar-nav .nav-link .fas {
        display: none !important; 
    }
}

/* Ensure clean spacing between nav items */
.navbar-nav .nav-item {
    margin: 0 5px;
}