/*custom-navbar.css*/
/*Navigácia -- sidebar*/
/* Výchozí sidebar (nad 756px) */
.nav-link,
.nav-toggle,
.theme-option {
    cursor: pointer;
}

.custom-navbar {
    flex-direction: column;
    height: 70vh;
    width: 10rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 990;
    background-image: var(--bg-lin-gradient);
    box-shadow: -7px -20px 20px 0px hsl(0deg 0% 0%);
    border: none;
}

    .custom-navbar .nav-container {
        flex-direction: column;
    }

.nav-collapse {
    width: 100%;
}

.nav-link.active {
    border-bottom: .1rem solid var(--text-color-primary);
    border-bottom-left-radius: .7rem;
    font-weight: bold;
}

.custom-navbar .nav-item {
    padding: 1rem;
    text-align: center;
}

.custom-navbar a.nav-link {
    padding: 0.5rem 0;
    display: block;
    color: var(--text-color);
}

    .custom-navbar a.nav-link:hover {
        color: var(--text-color-primary);
    }

/*Navigácia - Logo---*/
.nav-logo {
    display: block;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-color-primary);
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
}

.custom-navbar .nav-toggle {
    display: none; /* hamburger sa nezobrazuje */
}

.nav-toggle .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
    border: none;
}

.nav-toggle {
    margin: 0.2rem;
}

    .nav-toggle:focus {
        box-shadow: 0 0 5px hsl(0, 0%, 5%);
    }

.btn-theme {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    padding: .5rem 0;
}

    .btn-theme .visually-hidden {
        text-transform: capitalize;
        background-color: transparent;
    }

    .btn-theme svg {
        fill: var(--text-color);
    }

.nav-item-theme {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-theme:hover {
    color: var(--text-color-primary)
}

/* Pozícia a vzhľad panelu */
.sub-menu {
    position: relative;
}

.sub-menu-toggle {
    cursor: pointer;
}

/* Dropdown panel */
.sub-menu-toggle {
    border: none;
    font-size: 1.2rem;
    background-color: transparent;
    color: var(--text-color);
}

.sub-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 120px;
    width: 100%;
    padding: .5rem 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    background: var(--bg-color);
    display: none; /* control via hover/JS */
}

    /* Položky vo vnútri */
    .sub-menu-dropdown .sub-menu-link {
        display: block;
        padding: .5rem 1rem;
        text-decoration: none;
    }

        /* Hover efekt na položkách (len štýl, farby si dáš v CSS) */
        .sub-menu-dropdown .sub-menu-link:hover {
            filter: brightness(1.05);
        }

/* Desktop: zobraziť na hover */
.sub-menu:hover .sub-menu-dropdown {
    display: block;
}

/* Touch zariadenia: vypneme hover-open, zapneme triedu .open */
@media (hover: none) {
    .sub-menu:hover .sub-menu-dropdown {
        display: none;
    }
}

.sub-menu.open .sub-menu-dropdown {
    display: block;
}

/* Rešpektuj hidden atribút (bezpečné) */
.sub-menu-dropdown[hidden] {
    display: none !important;
}

/* --- Top navbar (401px – 756px) --- */
@media screen and (max-width: 756px) and (min-width: 481px) {
    .custom-navbar {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 4rem;
        position: fixed;
        background-image: var(--bg-lin-gradient2);
        box-shadow: 0px -7px 20px 0px var(--box-shadow);
    }

        .custom-navbar .nav-container,
        .custom-navbar .nav-collapse {
            height: 100%; 
            display: flex;
            align-items: center;
        }

        .custom-navbar .nav-container {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .custom-navbar .nav-collapse {
            flex-direction: row;
            justify-content: flex-end;
        }

        .custom-navbar .nav-list {
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: stretch; /* každý nav-item vyplní výšku */
        }

        .custom-navbar .nav-item {
            height: 100%; /* celý <li> natiahnutý */
            padding: 1rem 0.5rem;
        }

        .custom-navbar .nav-link {
            display: flex; /* umožní zarovnanie obsahu */
            align-items: center; /* vertikálne centrovanie */
            height: 100%; /* výška ako nav-item */
            padding: 0 0rem; /* horizontálny padding */
            font-size: 1rem; /* voliteľné zväčšenie */
        }

        .custom-navbar .nav-toggle {
            display: none;
        }

    .nav-link.active {
        border-bottom-left-radius: 0rem;
    }

    .btn-theme {
        position: relative;
        top: 5px;
    }

        .btn-theme:hover {
            background-color: transparent;
            color: var(--text-color-primary);
        }

    .sub-menu {
        position: static;
    }

    .sub-menu-dropdown {
        position: absolute;
        box-shadow: none;
        border-radius: 0;
        width: fit-content;
        top: 4rem;
        left: 21rem;
    }
}

@media screen and (min-width: 481px) {
    .custom-navbar .nav-collapse {
        display: block;
    }
}
/* --- Hamburger do 400px --- */
@media screen and (max-width: 480px) {
    .custom-navbar {
        width: 100%;
        height: auto;
        position: fixed;
        padding: 0.5rem 1rem;
        box-shadow: -1px -6px 20px 0px var(--box-shadow);
        background-image: var(--bg-lin-gradient2);
    }

        .custom-navbar .nav-icon {
            color: var(--text-color);
            font-size: 1.3rem;
            background-color: transparent;
        }

        .custom-navbar .nav-toggle {
            border: none;
            background-color: transparent;
        }

            .custom-navbar .nav-toggle:focus {
                border: none;
                background-color: transparent;
                box-shadow: none;
            }

        .custom-navbar .nav-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between; /* logo vľavo, hamburger vpravo */
        }

        .custom-navbar .nav-logo {
            order: 1;
            margin: 0;
            margin-right: auto;
            padding: 0.5rem;
        }

        .custom-navbar .nav-toggle {
            order: 2;
            display: block;
            margin-left: auto;
        }

        /* 🔥 MENU sa zobrazuje ako nový blok pod navbarom */
        .custom-navbar .nav-collapse {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: var(--bg-color1);
            padding: 0 1rem; /* padding-top a bottom daj v .show triede */
            z-index: 999;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }

            .custom-navbar .nav-collapse.show {
                max-height: 500px;
            }

        .custom-navbar .nav-list {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .custom-navbar .nav-item {
            padding: 0.5rem 1rem;
            text-align: center;
        }

        .custom-navbar a.nav-link {
            padding: 0.5rem 0;
            display: block;
        }

            .custom-navbar a.nav-link:hover {
            }

    .btn-theme {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: .5rem 0;
    }

        .btn-theme:hover {
            color: var(--text-color-primary);
        }

    .sub-menu {
        position: static;
    }

    .sub-menu-dropdown {
        position: static;
        box-shadow: none;
        border-radius: 0;
        margin-left: 1rem; /* jemné odsadenie, uprav podľa seba */
    }
}