/**
 * Lottie Burger Menu Styles
 * Styles for the Lottie animation replacing the mobile burger menu
 */

/* Lottie animation container */
.lottie-burger-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    pointer-events: none; /* Allow clicks to pass through to the parent trigger */
    z-index: 1000;
}

/* Ensure the burger trigger is positioned relatively for absolute positioning */
.av-hamburger {
    position: relative !important;
}

/* SVG sizing within Lottie container */
.lottie-burger-container svg {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
    .lottie-burger-container {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
    .lottie-burger-container {
        width: 38px;
        height: 38px;
    }
}

/* Ensure Lottie animation is visible on all color schemes */
.lottie-burger-container path {
    /* Your Lottie animation colors will be preserved from the JSON file */
    /* Add custom color overrides here if needed */
}

/* Hide the original burger inner elements (backup in case JS doesn't run) */
.av-hamburger.lottie-active .av-hamburger-inner,
.av-hamburger.lottie-active .av-hamburger-inner::before,
.av-hamburger.lottie-active .av-hamburger-inner::after {
    display: none !important;
}

/* Smooth transition for the container */
.lottie-burger-container {
    transition: opacity 0.3s ease;
}

/* Optional: Add a subtle hover effect */
.av-hamburger:hover .lottie-burger-container {
    opacity: 0.8;
}