/* Header container stays on top of the page content */
.headontop {
    position: relative;
    z-index: 1000;
}

/* Elementor main nav in header */
.headontop nav.elementor-nav-menu--main {
    position: relative; /* anchor for the mega panels */
    z-index: 1001;
}

/* Menu items that have mega menu attached */
.headontop nav.elementor-nav-menu--main li.vesna-has-megamenu {
    position: static; /* allow panel to span full viewport width */
}

/* Mega menu panel (similar to ONY nav-submenu) */
.vesna-megamenu-panel {
    position: absolute;
    left: 50%;
    top: 100%; /* directly under the nav bar */
    width: 100vw; /* full viewport width */
    background: #ffffff;
    padding: 32px 72px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transform: translateX(-50%) translateY(-10px); /* start slightly above for "drop from top" */
    transition:
        opacity 0.12s ease-out,
        visibility 0.12s ease-out,
        transform 0.12s ease-out;
    z-index: 999; /* below headontop but above page content */
}

/* Show panel on hover over li or panel itself (fast top-down animation) */
.headontop nav.elementor-nav-menu--main li.vesna-has-megamenu:hover > .vesna-megamenu-panel,
.vesna-megamenu-panel:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Mobile: fallback – make mega menu static block content */
@media (max-width: 1024px) {
    .vesna-megamenu-panel {
        position: static;
        width: 100%;
        transform: none !important;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding: 16px 24px;
    }

    .headontop nav.elementor-nav-menu--main li.vesna-has-megamenu:hover > .vesna-megamenu-panel {
        transform: none;
    }
}