nav#desktop-menu {
    display: flex;
    overflow: hidden;
    height: 55px;
    box-shadow: 1px 1px 10px gray;
    z-index: 1;
    flex: 0;
}

nav#mobile-menu {
    display: none;
}

a.title-logo-tag {
    display: flex;
    height: 100%;
    text-decoration: none;
    padding-left: 10px;
    justify-items: center;
}

a.title-logo-tag h2{
    color: #398C7C;
    font-size: 16pt;
    margin: auto;
}

nav#desktop-menu ul {
    flex-grow: 2;
    justify-content: center;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 auto; 
    height: 100%;
}

nav#desktop-menu ul li {
    position: relative;
}   

nav#desktop-menu li.menu-item a {
    text-decoration: none;
    cursor: pointer;
    font-size: 0.8em;
    color: #000000c0;
    transition: 0.25s;
    font-weight: bold;
    height: calc(100% - 2px);
    display: flex;
    padding: 0 10px;
}

nav#desktop-menu li.menu-item a.active {
    background-color: #398C7C;
    color: #FFFFFF;
}

nav#desktop-menu li.menu-item a.active, div.menu-item-selection{
    display: block;
}

nav#desktop-menu li.menu-item a > span {
    display: flex;
    width: 100%;
    height: 100%;
    line-height: 1;
    align-items: center;
}

nav#desktop-menu div.menu-item-selection.active {
    display: block;
}

nav#desktop-menu div.menu-item-selection {
    display: none;
    height: 2px;
    background-color: #398C7C;
}

nav#desktop-menu ul li:hover a {
    color: black;
    background-color: #0000000C;
}

nav#desktop-menu ul li:hover div.menu-item-selection {
    display: block;
}

div.icons-container {
    display: flex;
    padding-right: 10px;
}

div.icons-container > * {
    margin: auto 10px;
}

nav span {
    background-repeat: no-repeat;
    height: 28px;
    width: 28px;
    display: flex;
    background-size: 100% 100%;
    cursor: pointer;
    margin: auto 0;
}

span#logo {
    background-image: url("/assets/images/icons/logo.jpeg");
    aspect-ratio: 1 / 1;
}

span#lang {
    background-image: url("/assets/images/icons/language.svg");
}

span#facebook {
    background-image: url("/assets/images/icons/facebook.png");
    filter: grayscale(100%);
    transition: 0.2s;
}

span#instagram {
    background-image: url("/assets/images/icons/instagram.svg");
    filter: grayscale(100%);
    transition: 0.2s;
}

span#facebook:hover {
    filter: grayscale(0%);
}

span#instagram:hover {
    filter: grayscale(0%);
}

nav#desktop-menu div.lang-dropdown {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0 10px;
}

div.lang-dropdown-content {
    position: absolute;
    border-top: 2px solid #398C7C;
    display: none;
    flex-direction: column;
    justify-items: center;
    z-index: 1;
    right: 0;
    background-color: white;
    box-shadow: -2px -2px 5px gray inset;
    top: 55px;
    width: 150px;
}

div.lang-dropdown-content a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    font-size: 0.85em;
    color: black;
    text-decoration: none;
    height: 25px;
}

div.lang-dropdown-content a:hover {
    background-color: #0f0f0f10;
}

div.lang-dropdown-content img {
    width: 24px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
}

div.lang-dropdown-content a:first-child {
    padding: 10px 20px 5px 20px;
}

div.lang-dropdown-content a:last-child {
    padding: 5px 20px 10px 20px;
}

div.lang-dropdown-content a:not(:last-child) {
    border-bottom: 1px solid gray;
}

nav#desktop-menu div.lang-dropdown:hover div.lang-dropdown-content{
    display: flex;
}

/*======================================================*/
/*=-----------------------MOBILE-----------------------=*/
/*======================================================*/

@media screen and (max-width: 960px) {
    nav#desktop-menu {
        display: none;
    }

    nav#mobile-menu {
        position: relative; /* důležité pro absolutní pozici uvnitř */
        z-index: 1;
        background-color: #FFFFFF;
        width: 100%;
        display: flex;
        justify-content: flex-start; /* logo zůstane vlevo */
        align-items: center;
        height: 50px;
        box-shadow: 1px 1px 10px gray;
    }

    nav#mobile-menu div#expand-wrapper {
        z-index: 1;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    a.title-logo-tag h2{
        font-size: 12pt;
    }

    nav#mobile-menu button#expand-menu {
        position: absolute;
        border: none;
        background-color: transparent;
        height: 100%;
        padding: 0;
        top: 0;
        left: calc(50% - 15px);
    }

    nav#mobile-menu span#menu-icon {
        background-image: url("../images/icons/menu.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 60%;
        aspect-ratio: 1/1;
        display: block;
        transition: 0.2s;
    }

    nav#mobile-menu div#menu-container {
        width: 100%;
        display: block;
        position: absolute;
        top: 49px;
        background-color: #F0F0F0FF;
        transform: translateY(calc(-100% - 49px));
        transition: 0.4s;
    }

    nav#mobile-menu div#menu-container.active {
        transform: translateY(0%);
    }

    nav#mobile-menu div#expand-wrapper.active {
        right: calc(75% - 22.5px);
    }

    nav#mobile-menu div#expand-wrapper.active span#menu-icon {
        background-image: url("../images/icons/close-black.svg");
    }

    nav#mobile-menu div#menu-container ul {
        display: flex;
        list-style: none;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    nav#mobile-menu li.menu-item{
        padding: 15px 0;
        margin: auto;
    }

    nav#mobile-menu li.menu-item a {
        text-decoration: none;
        cursor: pointer;
        font-size: 10pt;
        color: #000000c0;
        font-weight: bold;
        text-wrap: nowrap;
    }

    nav#mobile-menu li.menu-item a.active {
        color: #398C7C;
    }

    nav#mobile-menu li.menu-item a > span {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
    }

    span#facebook, span#instagram {
        filter: grayscale(0%);
    }
}