/* ----------------- General --------------- */

#menu {
    background-color: var(--clr-white);
    color: var(--clr-black);
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#menu > * {
    width: 100%;
}


/* ----------------- Top --------------- */

#menu .top {
}

#menu .top .logo {
    width: 100%;
    height: 10.5rem;
    background-size: 19.7rem 5.5rem;
    background-image: url('/public/images/logo.svg?v=2');
}

#menu .top a,
#menu .top a:visited,
#menu .top a:hover {
    color: var(--clr-black);
    font-family: 'Cora', sans-serif;
    text-decoration: none;
}

#menu .top .link {
    padding: 0 2.2rem;
    padding: 0 2.2rem;
    font-size: 1.5rem;
    line-height: 6.8rem;
    font-weight: 500;
    text-align: left;
    background-color: #F7F3EB;
    background-size: 1.2rem 1.2rem;
    background-image: url('/public/images/page/icons/arrow-right-gold.svg?v=1');
    background-position: right 3.4rem center;
}

#menu .top .link.active {
    background-color: var(--clr-gold);
    color: var(--clr-white);
    background-image: url('/public/images/page/icons/arrow-down.svg?v=1');
}

#menu .top .link.kamProPivoLink span {
    padding-left: 3.2rem;
    background-size: 1.7rem 1.7rem;
    background-image: url('/public/images/page/icons/top-map.svg?v=1');
    background-position: left center;
}

#menu .top .link.active.kamProPivoLink span {
    background-image: url('/public/images/page/icons/top-map-white.svg?v=1');
}

#menu .top .link.spravneCepovaniLink span {
    padding-left: 3.2rem;
    background-size: 1.6rem 1.7rem;
    background-image: url('/public/images/page/icons/beer-gold.svg?v=1');
    background-position: left center;
}

#menu .top .link.active.spravneCepovaniLink span {
    background-image: url('/public/images/page/icons/beer.svg?v=1');
}


/* ----------------- Menu --------------- */

#menu .menu {
    display: block;
    height: 100%;
    overflow: auto;
}

#menu .menu * {
    transition: color 0.5s, background-color 0.5s, border 0.5s;
    cursor: default;
}

#menu .menu,
#menu .menu a,
#menu .menu a:visited,
#menu .menu a:hover {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: var(--clr-black);
    text-align: left;
}

#menu .menu .typeSelection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    font-family: 'Roboto Medium', sans-serif;
    text-align: center;
    border-bottom: solid 0.1rem var(--clr-gold-translucent);
}

#menu .menu .typeSelection > .item {
    display: flex;
    padding: 2.2rem 1.2rem 2.0rem 1.2rem;
    width: 50%;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-mobile-white);
}

#menu .menu .typeSelection > .item.active {
    background-color: var(--clr-white);
}

#menu .menu .typeSelection > .item > .name {
    width: fit-content;
    padding-bottom: 0.4rem;
    color: var(--clr-green);
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 0.12rem transparent;
}

#menu .menu .typeSelection > .item.active > .name{
    color: var(--clr-black);
    font-family: 'Roboto Medium', sans-serif;
    border-bottom: solid 0.12rem var(--clr-gold);
}

#menu .menu .typeSelection > .item:hover > .name {
    color: var(--clr-black);
    border-bottom: solid 0.12rem var(--clr-gold);
}


#menu .menu .menuList {
    
}

#menu .menu .menuList > .item,
#menu .menu .menuList > a > .item {
}

#menu .menu .menuList > .item.options {

}

#menu .menu .menuList > .item.active,
#menu .menu .menuList > a > .item.active,
#menu .menu .menuList > .item:hover,
#menu .menu .menuList > a > .item:hover {
    background-color: #E0D1B140;
}

#menu .menu .menuList > .item.options.active,
#menu .menu .menuList > .item.options:hover {

}

#menu .menu .menuList > .item > .name,
#menu .menu .menuList > a > .item > .name {
    margin: 0 2.4rem;
    line-height: 6.8rem;
    border-bottom: solid 0.08rem var(--clr-gold-translucent);
}

#menu .menu .menuList > .item.active > .name,
#menu .menu .menuList > a > .item.active > .name,
#menu .menu .menuList > .item:hover > .name,
#menu .menu .menuList > a > .item:hover > .name{
    color: var(--clr-green);
    font-family: 'Roboto Medium', sans-serif;
    border-bottom: solid 0.08rem transparent;
}    

#menu .menu .menuList > .item.options > .name {
    background-size: 1.2rem 1.2rem;
    background-image: url('/public/images/page/icons/arrow-right-gold.svg?v=1');
    background-position: right 1.2rem center;
}

#menu .menu .menuList > .item.options.active > .name
#menu .menu .menuList > .item.options:hover > .name {
    background-image: url('/public/images/page/icons/arrow-down-gold.svg?v=1');
    
}

#menu .menu .menuList > .item > .subMenu {
    height: 0;
    background-color: #FCFAF7;
    overflow: hidden;
}

#menu .menu .menuList > .item.active > .subMenu {
    height: auto;
    padding: 1rem 0;
    height: auto;
}

#menu .menu .menuList > .item > .subMenu .item {
    padding: 1.2rem 2.4rem 1.2rem 4.4rem;
    background-image: url('/public/images/page/icons/menu-bullet-active.svg?v=1');
    background-size: 0.6rem 0.6rem;
    background-position: left 2.4rem center;
}

#menu .menu .menuList > .item > .subMenu > .item.active {

}

#menu .menu .menuList > .item > .subMenu .item .name {
    width: max-content;
    margin: 0 0rem;
    padding: 0 0 0 0;
    line-height: 2.0rem;
    border-bottom: solid 0.1rem transparent;
}

#menu .menu .menuList > .item > .subMenu .item.active .name,
#menu .menu .menuList > .item > .subMenu .item:hover .name {
    color: var(--clr-green);
    font-family: 'Roboto Medium', sans-serif;
    border-bottom: solid 0.1rem var(--clr-gold);
}


/* ----------------- Bottom --------------- */

#menu .bottom {
    padding: 2.2rem 0 2.2rem 0;
    height: auto;
    color: var(--clr-white);
    font-family: 'Roboto Medium', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6rem;
    background-color: var(--clr-gold);
    text-align: center;
}

#menu .bottom a,
#menu .bottom a:visited,
#menu .bottom a:hover {
    color: var(--clr-white);
    text-decoration: underline;
}

#menu .bottom .link {
    margin-bottom: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
}

#menu .bottom .light {
    margin-top: 1.2rem;
    font-size: 1.2rem;
    line-height: 1.6rem;
    font-family: 'Roboto Light', sans-serif;
}