header {
	background-color: #fbfbfb;
	padding: 10px 10px;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	width: 100%;
	max-width: var(--max-width);
	font-family: var(--font-roboto);
	z-index: 99;

	#container-logo {
		display: flex;
		align-items: center;
		gap: 7px;
		img {
			width: 45px;
		}
		span {
			font-size: 26px;
			font-weight: bold;
			color: var(--midlle-blue);
		}
	}

	#menu-toggle,
	#menu-checkbox {
		display: none;
	}

	#nav-header {
		display: grid;
		grid-template-columns: repeat(6, auto);
		align-items: center;
		justify-items: center;
		gap: 5px;
		list-style: none;
		height: 45px;
		li {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 0 10px;
			height: 100%;
			font-size: 15px;
			cursor: pointer;

			ul{
				li{
					color: black;
					padding: 10px 10px;
				}
				li:hover{
					background-color: #eaeaea;
				}
			}
			
		}
		li:hover {
			text-shadow: 0px 1px 1px var(--color-white-default);
		}
		#login {
			#login-a {
				background-color: var(--high-blue);
				background-image: linear-gradient(to bottom, var(--high-blue) 50%, #2665ed 50%);
				border-radius: 5px;
				color: white;
				padding: 6px 15px;
				box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
				transition: all 0.15s ease;
				font-weight: 500;
			}
			#login-a:hover {
				transform: translateY(1px);
				background: #2665ed;
			}

			#login-a:active {
				transform: scale(0.98);
			}
		}

		.has-submenu{
			.submenu {
				display: none; /* escondido por padrão */
			}
			.submenu.show {
				/* mostra quando ativado */
				position: absolute;
				display: flex;
				flex-direction: column;
				background-color: white;
				box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
				top: 100%;
			}
		}
		.hover-btn:hover {
			background-color: #eaeaea;
			color: var(--color-text-hover);
		}
	}
}