/* Alapstílusok */

:root {
	--navbar-height: 92px;
	--nav-item-padding: 10px;	 
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.custom-navbar {
	background: var(--navbar-background-color);
}
.logo {
	color: var(--navbar-color);
}
.nav-links a {
	color: var(--navbar-color);
}
.nav-links a:hover {
    background: var(--navbar-background-hover);
}
.dropdown-menu,
.dropdown-menu2 {
    background: var(--navbar-background-color);
}
.dropdown-menu a,
.dropdown-menu2 a {
    color: var(--navbar-color);
}

.menu-icon span {
    background: var(--navbar-color);
}


 .dropdown a,
 .dropdown2 a {
	color: var(--navbar-color);
 }
 
.nav-links {
        background: var(--navbar-background-color);
}




/* Navigációs sáv */
.custom-navbar {
    padding: 8px 12px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logó */
.logo {
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
}

/* Menülista */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row; /* Asztali nézetben vízszintes */
}

/* Menü elemek */
.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    /*padding: 8px 12px;*/
    display: block;
    transition: 0.3s;
}

.nav-links a:hover {
/*    border-radius: 5px;	*/
}

.nav-links form {
	padding: 8px 12px;
}

/* Checkbox elrejtése */
#navbar-toggle-cbox {
    display: none;
}

/* Almenü */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    list-style: none;
    min-width: 150px;
}

.dropdown-menu2 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    padding: 0;
    list-style: none;
    min-width: 150px;
}

.dropdown-menu li,
.dropdown-menu2 li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dropdown-menu li:last-child,
.dropdown-menu2 li:last-child {
    border-bottom: none;
}

/* Almenü linkek */
.dropdown-menu a,
.dropdown-menu2 a {
    padding: 10px;
    display: block;
    text-align: left;
}



/* Almenü megjelenítés hoverre (asztali nézetben) */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu,
    .dropdown2:hover .dropdown-menu2 {
       /* display: block;*/
    }
    
    .dropdown:hover .dropdown-menu,
    .dropdown2:hover .dropdown-menu2 {
       /* display: block;*/
    }
    
}


/* Ha a checkbox be van jelölve, az almenü láthatóvá válik */
.dropdown input:checked ~ .dropdown-menu {
    display: block;
}

.dropdown2 input:checked ~ .dropdown-menu2 {
    display: block;
}
    
.dropdown input:checked + a.ddwn label::after {
	content: "▲";
}
.dropdown2 input:checked + a.ddwn label::after {
	content: "◄";
}


label.submenu-toggle {
	cursor: pointer;
	padding-top:10px;
	padding-bottom:10px;
}
a.ddwn {
	padding-top:10px;
	padding-bottom:10px;
}

.dropdown a.ddwn label::after{
	content: "▼";
}
.dropdown2 a.ddwn label::after{
	content: "►";
}


/* Rejtett checkbox a kattintás érzékelésére */
    .dropdown input,
    .dropdown2 input {
        display: none;
    }


#menu-items li {
	padding: 0;
}

#menu-items li a {
	padding: var(--nav-item-padding);
}


#menu-items li.dropdown  {
	padding: 0;
}

#menu-items li.dropdown a {
  	padding: 0;
}    

#menu-items li.dropdown a label{
	padding: var(--nav-item-padding);
	display: inline-block;
}

.dropdown-menu  li {
        padding: 0;        
}
#menu-items ul.dropdown-menu li a {
        padding: var(--nav-item-padding);
}

/* TODO .dropdown-menu li.dropdown2  a label */



/* Mobilnézet */
@media (max-width: 768px) {
	
	.dropdown2 a.ddwn label::after{
		content: "▼";
		font-size: small;
	}
	.dropdown2 input:checked + a.ddwn label::after {
		content: "▲";
		font-size-adjust: -1px;
	}
	
	.dropdown-menu2 {
    display: none;
    position: relative;
    top:0;
    left:0;
    }

	
    .menu-icon {
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        cursor: pointer;
    }

    .menu-icon span {
        position: absolute;
        width: 30px;
        height: 3px;
        transition: transform 0.3s, opacity 0.3s, top 0.3s;
    }

    .menu-icon span:nth-child(1) { top: 0; }
    .menu-icon span:nth-child(2) { top: 10px; }
    .menu-icon span:nth-child(3) { top: 20px; }
    
    /* Animáció: X alak */
    #navbar-toggle-cbox:checked + .menu-icon span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
    }

    #navbar-toggle-cbox:checked + .menu-icon span:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
    }

    /* Középső csík eltűnik */
    #navbar-toggle-cbox:checked + .menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        width: 100%;
        padding: 0;
    }

	/* Almenü mobilon lenyílóként */
    .dropdown-menu {
        display: none;
        position: static;
        background: none;
    }
    
    
    

    /* Ha a checkbox be van jelölve, akkor megjelenik a menü */
    #navbar-toggle-cbox:checked ~ .collapse {
        display: flex;
    }
    
    
    
    
    

    .nav-links li {
        margin: 0 0;
        text-align: center;
        
    }    

    .dropdown a {
        display: flex;
        justify-content: center;
        padding: var(--nav-item-padding);
        
    }
    .dropdown a label {
    	width: 100%;
    	height: 100%;
    	padding: var(--nav-item-padding);
    }
    
    .dropdown ul {
    	margin: 0;
    }
    #menu-items .dropdown ul li {
    	padding: 0;
    }
    #menu-items .dropdown ul li a {
    	padding: var(--nav-item-padding);
    	background-color: #e9e1df;
    }
}