/*
  Snippet CSS para padronizar os menus do site maisdeus.com
  Este código deve ser adicionado ao final do arquivo CSS existente ou em um novo arquivo CSS carregado após os estilos originais.
  Ele visa sobrescrever os estilos dos menus de Cifras e Quiz para que se assemelhem ao menu principal.
*/

/* 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 */
/* No menu principal, o item ativo muda apenas a cor do texto. */
/* Se houver uma classe '.active' ou similar que adicione um fundo ou borda, ela deve ser sobrescrita. */
.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 */
/* No menu principal, o item ativo muda apenas a cor do texto. */
/* Se houver uma classe '.active' ou similar que adicione um fundo ou borda, ela deve ser sobrescrita. */
.main-menu a.active[href*="quiz"],
.main-nav a.active[href*="quiz"] {
    background-color: transparent !important;
    border: none !important;
}

/* Se houver um container para o menu que adicione bordas ou fundos, ele também precisaria ser ajustado. */
/* Exemplo: */
/*
.header-container {
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
*/