/* #main-menu {
border-bottom: solid 1px #000;   amíg nincs megformázva, hasznos, ha adunk egy bordert, hogy lássuk, mekkora a menü 
border-top: solid 1px #000; 
} */

#main-menu ul {
    display: flex;
    list-style-type: none;
    align-items: center;
}

#main-menu ul li {
    margin-left: 2rem;
}

#main-menu ul li a {   /* menü első szintje, vagyis Szolgáltatások */
    color: inherit;
    padding: 0.75rem 0;
    font-weight: bold;
/*    text-transform: uppercase; */
    font-size: smaller; /* ha az alap font-size 100%, akkor a smaller értéke: 0,75-0,8 */
    position: relative; /* before elem miatt és hogy a paddingen belül legyen */
}

#main-menu ul li a:before {  /* az aláhúzást meg lehet oldani text underline-nal is, de before-after elemekkel szabadabban lehet formázni*/
    content: "";
    display: block;
/*    border: solid 2px red; -> *a keretet (before aláhúzást) lehet a borderrel és a magassággal is állítani, de a magassághoz háttérszín kell*/
/* width: 100%; */    
    width: 0%;
    height: 2px;
    background: transparent;
    position: absolute;
    bottom: 5px;
/*    transition: background 0.3s ease-in-out; áttűnést mindig az eredeti állapothoz érdemes adni. Ha all, akkor az összesre vonatkozik. */
    transition: all 0.3s ease-in-out; /* ha width: 0%; */
}

#main-menu ul li a:hover:before { /* állapot szelektrot mindig a pszeudo elé kell rakni! */
    background: var(--teal);
    width: 100%;
}

#main-menu ul li a:hover,
#main-menu ul li.current-menu-item a {  /* aktuális menüpont színe, #main-menu ul li-t hozzá kell adni, mert felülformázza! "current-menu osztályú listaelem" */
    color: var(--teal);
}

#main-menu ul li ul {    /* menü második szintje, vagyis Parkfenntartás, stb. almenük */
    display: none;
}


#hamburger {
    display: none; /* desktopon ne látszódjon */
}

#main-menu ul .button {
    padding: 0.9rem 1rem; /* nekem nem volt elég a 0.5rem alsó-felső padding */
    color: #fff;
    background: var(--teal);
}

#main-menu ul .button a,
#main-menu ul li.current-menu-item.button a { /* a . azt jelenti, hogy mindkét osztállyal rendelkezik ez a listaelem */
    color: #fff;
    /*text-transform: none;*/
}

#main-menu ul .button a:hover {
    color: var(--title);
}
#main-menu ul .button:hover {
    background: var(--orange);
}

#main-menu ul li.button a:before {  /* itt nem fontos az aláhúzás, a pszeudót le lehet venni */
    content: none;
}


@media only screen and (max-width: 1281px) {
    #main-menu ul {
        display: block;
        margin: 0;
        padding: 0;
    }
    
    #main-menu ul li {
        margin: 0;
        padding: 0;
        border-top: solid 1px #ddd;
    }
    
    #main-menu ul li a {
        padding: 0.25rem 0;
        display: block;
    }



    #hamburger {
        display: flex; /* block helyett, amikor még svg volt */
        flex-direction: column; /* oszlop legyen, hiszen a flex miatt egymás mellé kerülnek a span-ek */
        justify-content: space-between; /* ugyanúgy működik, csak nem vízszintesen, hanem függőlegesen nyújtja szét az elemeket */
        width: 2rem;
        height: 2rem;
        background: var(--lime);
        border-radius: 50%;
        padding: 0.5rem;
        transition: all 0.3s ease-in-out;
    }
    
    #hamburger.nyitva {  /* a #hamburger és a .nyitva ugyanazon az elemen van, ezért pontosan így kell kiválasztani! */
        background: var(--title);
    }
    
    /* időközben kitöröltük az svg-t, mert span-re váltottunk - videó: 30:40
    #hamburger svg { /* az svg-re is rá kell formázni
        display: block;
        width: 100%;
        height: auto;
    } */
    
    #hamburger span {
        display: block;
        width: 100%;
        height: 4px;
        background: var(--title); /* így lesz vonal */
        border-radius: 2px;
    }
    
    #hamburger.nyitva {  /* a #hamburger és a .nyitva ugyanazon az elemen van, ezért pontosan így kell kiválasztani! */
        background: var(--title);
        justify-content: center;
    }
    
    #hamburger.nyitva span {
        background: #fff;
        transition: all 0.3s ease-in-out;
    }

    #hamburger.nyitva span:nth-of-type(2) { /* 2. span */
        display: none;
    } 
    
    #hamburger.nyitva span:nth-of-type(1) {
        transform: rotate(45deg);
        margin-bottom: -2px; /* a span elemek egymás alatt/fölött helyezkednek el, ezért látszik az X csálénak, emiatt adunk margint */
    }

    #hamburger.nyitva span:nth-of-type(3) {
        transform: rotate(-45deg);
        margin-top: -2px;  /* a span elemek egymás alatt/fölött helyezkednek el, ezért látszik az X csálénak, emiatt adunk margint */
    }
    
    #main-menu {
      /*  display: none; - működik a display: none/display: block-kal is, de darabos, ezért max-heigth és opacity: 0-val csináljuk  */
        max-height: 0;
        opacity: 0;
        transition: all 0.8s ease-in-out;
        border-top: solid 1px #ddd;
    }
    
    #main-menu.nyitva {
     /*   display: block; */
        max-height: 1000px;
        opacity: 1;
        margin-top: 0.75rem;
    }
    
    .wide {
    width: 100vw;  /* tablet mérettől már nem kell hely a görgetősávnak, hiszen nincs rá szükség, az ujjunkat használjuk */
    left: 50%; /* itt sem kell */
    }
}