/* menu.css */

/* Estilos para o menu horizontal */
.menu-horizontal ul {
    list-style: none;
    display: flex;
    gap: 20px;
	padding: 0;
	margin: 0;
}

.menu-horizontal ul li {
    padding: 20px;
    text-align: center;
}

.menu-horizontal ul li a {
	font-family: Arial, sans-serif;	
    color: #000; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado */
    font-size: 18px;
}

/* Menu Lateral (oculto por padrão em telas grandes) */
.menu-lateral {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -250px; /* Inicialmente fora da tela */
    width: 250px;
    height: 22vh;
    background-color: #fff; /* Cor de fundo do menu */
    transition: right 0.3s ease; /* Efeito suave ao abrir/fechar */
	text-decoration: none; /* Remove o sublinhado */
}

.menu-lateral ul li a {
	font-family: Arial, sans-serif;	
    color: #000; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado */
    font-size: 14px;
	line-height: 2; /* Espaçamento maior entre os itens do menu */
}
.menu-lateral.active {
    right: 0; /* Menu aparece quando a classe 'active' é adicionada */
}

/* Estilos para as três barrinhas */
.menu-toggle {
    display: none; /* Inicialmente oculto */
    font-size: 30px;
	background-color: transparent; /* Sem fundo */
    border: none;
    color: #009999;
    cursor: pointer;
    position: fixed; /* Fixa no canto superior direito */
    top: 20px; /* Distância do topo */
    right: 20px; /* Distância da lateral direita */
    z-index: 1000; /* Garante que o botão fique sobre o conteúdo */
}

/* Hover nos itens do menu */
.menu-lateral nav ul li a:hover {
    background-color: #fff; /* Cor de fundo ao passar o mouse */
}

/* Remover qualquer estilo de foco ou clique */
.menu-toggle:active, .menu-toggle:focus {
    background-color: transparent; /* Garante que não tenha cor de fundo ao clicar */
    outline: none; /* Remove o contorno */
}

/************************************************************************************/

/* Responsividade */
/* Ajustes para dispositivos móveis */
@media screen and (max-width: 1200px) {
    /* Exibe o menu lateral em telas pequenas */
    .menu-lateral {
        display: flex;
    }

    /* Oculta o menu horizontal em telas pequenas */
    .menu-horizontal {
        display: none;
    }

    /* Exibe o botão das três barrinhas em telas pequenas */
    .menu-toggle {
        display: flex;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 100;
    }
}

/* Responsividade: menu horizontal apenas para telas grandes */
@media screen and (min-width: 1200px) {
    /* Exibe o menu horizontal em telas grandes */
    .menu-horizontal {
        display: flex;
    }

    /* Oculta o menu lateral em telas grandes */
    .menu-lateral {
        display: none;
    }

    /* Esconde o botão das três barrinhas em telas grandes */
    .menu-toggle {
        display: none;
    }
}