/*
  Snippet CSS para menu responsivo com botão de toggle
  Este código implementa um menu que se esconde em dispositivos móveis e aparece/desaparece ao clicar em um botão
*/

/* Estilos para os links do menu de navegação */
.main-menu a, .main-nav a {
    /* Remove bordas e fundos específicos de outras páginas */
    border: none !important;
    background-color: transparent !important;
    
    /* Define a cor do texto e peso da fonte conforme o menu principal */
    color: #333333 !important; /* Cor de var(--secondary-color) do menu principal */
    font-weight: bold !important;
    
    /* Ajusta o padding e margem para consistência */
    padding: 10px !important;
    margin: 0 10px !important; /* Ajuste conforme o espaçamento desejado */
    
    /* Garante que a decoração de texto seja removida */
    text-decoration: none !important;
}

/* Estilos para os links do menu de navegação ao passar o mouse ou quando ativos */
.main-menu a:hover,
.main-menu a.active,
.main-nav a:hover,
.main-nav a.active {
    /* Define a cor do texto ao passar o mouse ou quando ativo conforme o menu principal */
    color: #990000 !important; /* Cor de var(--primary-color) do menu principal */
    background-color: transparent !important; /* Garante que o fundo não mude */
}

/* Estilos específicos para o item 'Cifras' quando ativo, se houver */
.main-menu a.active[href*="cifras"],
.main-nav a.active[href*="cifras"] {
    background-color: transparent !important;
    border: none !important;
}

/* Estilos específicos para o item 'Quiz' quando ativo, se houver */
.main-menu a.active[href*="quiz"],
.main-nav a.active[href*="quiz"] {
    background-color: transparent !important;
    border: none !important;
}

/* Botão de toggle do menu mobile */
.mobile-menu-toggle {
    display: none;
    background-color: #990000;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1001;
    transition: background-color 0.3s ease;
}

.mobile-menu-toggle:hover {
    background-color: #cc0000;
}

/* Ícone do hambúrguer */
.mobile-menu-toggle::before {
    content: "☰";
    font-size: 20px;
}

/* Media query para telas menores (mobile) */
@media (max-width: 768px) {
    /* Mostra o botão de toggle em mobile */
    .mobile-menu-toggle {
        display: block !important;
    }
    
    /* Esconde o menu por padrão em mobile */
    .main-menu, .main-nav {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding: 10px 0 !important;
    }
    
    /* Mostra o menu quando a classe 'active' é adicionada */
    .main-menu.active, .main-nav.active {
        display: flex !important;
    }

    .main-menu a, .main-nav a {
        margin: 5px 0 !important;
        text-align: center !important;
        padding: 15px 10px !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 0 !important;
    }
    
    .main-menu a:last-child, .main-nav a:last-child {
        border-bottom: none !important;
    }

    /* Ajuste para o container do header */
    header {
        position: relative !important;
    }
    
    .header-container {
        position: relative !important;
    }
}

/* Para telas maiores, garante que o menu seja sempre visível */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .main-menu, .main-nav {
        display: flex !important;
        position: static !important;
        width: auto !important;
        background-color: transparent !important;
        box-shadow: none !important;
        flex-direction: row !important;
    }
}