/* Styly pro menu - spodní linka při hover a aktivní stránce */
/* Pouze CSS - bez změny HTML */

#navigation .menu-level-1 > li > a,
.menu-helper .menu-level-1 > li > a {
    position: relative;
    transition: color 0.3s ease;
    padding-bottom: 10px;
    display: inline-block;
}

/* Spodní linka pomocí pseudo-elementu - zabraňuje poskočení */
#navigation .menu-level-1 > li > a::after,
.menu-helper .menu-level-1 > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #00B3C4;
    transition: width 0.3s ease;
}

/* Spodní linka při hover */
#navigation .menu-level-1 > li > a:hover,
.menu-helper .menu-level-1 > li > a:hover {
    color: #00B3C4;
}

#navigation .menu-level-1 > li > a:hover::after,
.menu-helper .menu-level-1 > li > a:hover::after {
    width: 100%;
}

/* Spodní linka pro aktivní stránku - různé varianty, které Shoptet může použít */
#navigation .menu-level-1 > li.active > a,
#navigation .menu-level-1 > li > a.active,
#navigation .menu-level-1 > li.current > a,
#navigation .menu-level-1 > li.current-menu-item > a,
#navigation .menu-level-1 > li > a[aria-expanded="true"],
.menu-helper .menu-level-1 > li.active > a,
.menu-helper .menu-level-1 > li > a.active,
.menu-helper .menu-level-1 > li.current > a {
    color: #00B3C4;
    font-weight: 600;
}

#navigation .menu-level-1 > li.active > a::after,
#navigation .menu-level-1 > li > a.active::after,
#navigation .menu-level-1 > li.current > a::after,
#navigation .menu-level-1 > li.current-menu-item > a::after,
#navigation .menu-level-1 > li > a[aria-expanded="true"]::after,
.menu-helper .menu-level-1 > li.active > a::after,
.menu-helper .menu-level-1 > li > a.active::after,
.menu-helper .menu-level-1 > li.current > a::after {
    width: 100%;
}

/* Responzivní design */
@media (max-width: 768px) {
    #navigation .menu-level-1 > li > a,
    .menu-helper .menu-level-1 > li > a {
        padding-bottom: 8px;
    }

    #navigation .menu-level-1 > li > a::after,
    .menu-helper .menu-level-1 > li > a::after {
        height: 2px;
    }
}