/*
 * Styles for the main-navigation component
 */

@font-face {
    font-family: 'Tenderness';
    src: url('../fonts/Tenderness-Regular.otf') format('opentype');
}

.main-navigation {
    width: 100%;
    background-color: var(--main-2);
    font-family: Tenderness, sans-serif;
    display: flex;
    justify-content: center;
    position: relative; /* Asetetaan paikoituskontekstiksi pudotusvalikolle */
    z-index: 2000; /* Varmistetaan, että navigaatio on muiden elementtien yläpuolella */
    box-sizing: border-box;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* Varmistaa, että ul keskittyy */
}

.main-navigation > ul > li {
    display: inline-block;
    position: static; /* Varmistetaan, että dropdown-menu paikoittuu suhteessa .main-navigationiin */
    /*position: relative;*/ /* Muutetaan, jotta alavalikko voi paikoittua suhteessa tähän */
}

.main-navigation ul li a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--main-1);
    text-decoration: none;
    font-weight: 600;
}

.main-navigation ul li a:hover {
    background-color: var(--highlight-1);
}

/* Pudotusvalikko */
.main-navigation .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Asetetaan heti navigaatiopalkin alapuolelle */
    left: 0;
    width: 100%; /* Otetaan koko navigaatiopalkin leveys */
    background-color: var(--main-3-transparent); /*   --main-3 osittain läpinäkyvänä */    
    z-index: 1001; /* Nostetaan arvoa, jotta se on kategoriavalikon yläpuolella */
    box-shadow: 0 8px 16px var(--main-2-transparent);
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid var(--main-3-transparent);
}

/* Lisätään näkymätön "silta" pää- ja alavalikon väliin */
/*.main-navigation li.has-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}*/

.main-navigation li.has-dropdown:hover > .dropdown-menu {
    display: block;
}

.main-navigation .dropdown-menu li {
    display: inline-block; /* Asetetaan linkit vierekkäin, jotta ne voivat rivittyä */
}

@media (max-width: 800px) {
    .main-navigation {
        display: none;
    }
}