/**
 * Navbar Active Indicator - CSS Universal
 * Faixa laranja animada para indicar página ativa
 */

/* Navbar Menu Items */
.navbar-menu li a {
    position: relative;
}

.navbar-menu li a.active {
    color: var(--c-orange1) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.navbar-menu li a.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-orange1), var(--c-orange2));
    border-radius: 2px;
    animation: activeIndicator 0.6s ease-out forwards;
    box-shadow: 0 2px 8px rgba(246, 102, 2, 0.3);
}

@keyframes activeIndicator {
    0% {
        width: 0;
        opacity: 0;
        transform: translateX(-50%) scaleY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }
    100% {
        width: 80%;
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }
}

/* Mobile menu active states */
@media (max-width: 991px) {
    .navbar-menu li a.active::after {
        bottom: -4px;
        height: 2px;
        width: 60%;
        animation: none;
    }
}