/* Custom hover styles for menu */
.menu-item {
    position: relative;
}

/* Zajistit, že odkazy jsou klikatelné */
.menu-item a {
    pointer-events: auto !important;
    position: relative;
    z-index: 100;
}

.menu-item:hover .submenu {
    opacity: 1 !important;
    visibility: visible !important;
}

.submenu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

/* Hover bridge - neviditelná oblast pro udržení hover */
.hover-bridge {
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}

/* Zajistit, že submenu zůstane viditelné při hover na hover bridge */
.menu-item:hover .hover-bridge:hover + .submenu,
.menu-item:hover .submenu:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Alternativní řešení - větší hover oblast */
.menu-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    pointer-events: none;
}

/* Zajistit, že submenu zůstane viditelné při hover na pseudo-element */
.menu-item:hover::after + .submenu,
.menu-item:hover .submenu:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Kompletní řešení - pokrytí celé cesty */
.menu-item::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
    pointer-events: none;
    z-index: 49;
}

/* Zajistit, že submenu zůstane viditelné při hover na celou cestu */
.menu-item:hover::before ~ .submenu,
.menu-item:hover .submenu:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Další hover bridge přímo na submenu */
.submenu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
    pointer-events: none;
}