/* -----------------------------------
   DEFAULT MENU COLOR
----------------------------------- */

#mainMenu ul.nav li a,
#mainMenu ul.nav li a:visited,
#mainMenu ul.nav li a:hover,
#mainMenu ul.nav li a:focus {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* -----------------------------------
   ACTIVE MAIN MENU ITEM
   Example:
   <li class="hover--active"><a>Home</a></li>
----------------------------------- */

#mainMenu ul.nav li.hover--active > a,
#mainMenu ul.nav li.active > a,
#mainMenu ul.nav li.current > a,
#mainMenu ul.nav li.current-menu-item > a,
#mainMenu ul.nav li.selected > a {
    color: #af7929 !important;
    opacity: 1 !important;
}


/* -----------------------------------
   ACTIVE SUBMENU ITEM
----------------------------------- */

#mainMenu ul.nav li ul li.hover--active > a,
#mainMenu ul.nav li ul li.active > a,
#mainMenu ul.nav li ul li.current > a,
#mainMenu ul.nav li ul li.current-menu-item > a,
#mainMenu ul.nav li ul li.selected > a {
    color: #af7929 !important;
    opacity: 1 !important;
}


/* -----------------------------------
   MAKE PARENT MAIN MENU GOLD
   WHEN ONE OF ITS SUBMENU ITEMS IS ACTIVE
----------------------------------- */

#mainMenu ul.nav li:has(ul li.hover--active) > a,
#mainMenu ul.nav li:has(ul li.active) > a,
#mainMenu ul.nav li:has(ul li.current) > a,
#mainMenu ul.nav li:has(ul li.current-menu-item) > a,
#mainMenu ul.nav li:has(ul li.selected) > a {
    color: #af7929 !important;
    opacity: 1 !important;
}


/* -----------------------------------
   DESKTOP VERSION
----------------------------------- */

@media (min-width: 768px) {

    .navbar-nav > li > a,
    .navbar-nav > li > a:visited,
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .navbar-nav > li.hover--active > a,
    .navbar-nav > li.active > a,
    .navbar-nav > li.current > a,
    .navbar-nav > li.current-menu-item > a,
    .navbar-nav > li.selected > a {
        color: #af7929 !important;
        opacity: 1 !important;
    }

    .navbar-nav > li:has(ul li.hover--active) > a,
    .navbar-nav > li:has(ul li.active) > a,
    .navbar-nav > li:has(ul li.current) > a,
    .navbar-nav > li:has(ul li.current-menu-item) > a,
    .navbar-nav > li:has(ul li.selected) > a {
        color: #af7929 !important;
        opacity: 1 !important;
    }
}