/* ************  Fixed menu bar styles  ********************************************* */

.menu-bar {        /*  menu-bar is a div */
    position: fixed;
    /* top: 100px; */
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgb(235, 235, 235);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    /*box-shadow: 0 4px 6px rgb(141, 141, 141);
    border-top-color: rgb(100, 100, 100);
    border-top: solid;
    border-top-width: 1px;*/

    border-bottom: solid; 
    border-bottom-width: 1px;
    border-bottom-color: rgb(194, 5, 5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* border-bottom-color: rgb(100, 100, 100); */
}

.menu-bar .menu-title {
    margin-left: 12px;
    font-size: 16px;
    color: rgb(180, 0, 0);
    font-weight: bold;
    font-style: italic; 
    white-space: nowrap;
}

.menu-bar .menu-links {
    margin-right: 110px;
    display: flex;
    gap: 20px;
    font-size: 14px;   
    white-space: nowrap;
}

.menu-bar .dropdown {
    position: relative; /*   make the position of the dropdown items relative (in the same place as) the parent item     */
}



.menu-bar .menu-links a {
    /* this means all <a> elements within class menu-links, regardless of any intermediate elements or nesting  */
    color: rgb(180, 0, 0);  
    text-decoration: none; /* seems to not do anything */
    padding: 8px 12px; /*  padding to spread out the top level items (i.e. Filters, Data etc) */
    /* does not seem to have any effect on the drop down items even though they are <a> elements within class menu-links  -  This is because  styling for ".dropdown-content a" below has 10px padding for the dropdown <a> elements */
}


.menu-bar .menu-links  .disabled-link {
    pointer-events: none;
    color: rgb(167, 166, 166);
    cursor: not-allowed;
}



.menu-bar .menu-links a:hover {
    background-color: rgb(250, 84, 84);
    color: white;
    border-radius: 4px;
}
.menu-bar .dropdown-content {
    display: none; /*  prevents display of the dropdown-content - until it is relvealed by the hover section below  */
    position: absolute; /* this seems to allow the items to "overflow" the containing elements - 
        without it the menubar expands vertically to contain the whole dropdown lists*/
    top: 140%; /*  this positions the top of the dropdown-content at 100% of the height of the parent element 
        - i.e. so that it sits just at the bottom of the parent element   */
    left: 0;
    /* background-color: #f1cdcd; */
    background-color: rgb(230, 230, 230);
    min-width: 100px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.menu-bar .dropdown-content a {
    display: block;
    padding: 5px 5px 5px 5px;
    /*color: rgb(204, 55, 55);*/
}
.menu-bar .dropdown-content a:hover {
    background-color: rgb(250, 84, 84);
    color: rgb(238, 238, 238);
}

/* Next selector seems to mean that hovering over .dropdown  makes the content of .dropdown-content to display: block */
.menu-bar .dropdown:hover .dropdown-content {
    display: block;
}
/*   From Chat GPT:
What It Does:
.dropdown:hover → Targets any element with the class dropdown when it is hovered over.
.dropdown-content → Targets any element with the class dropdown-content inside the hovered .dropdown element.
Combined meaning: When a user hovers over an element with the class .dropdown, the .dropdown-content 
    inside it will be affected by the styles in the following { } 
As an example, can use this to turn the bottom element of the Filters list to blue if it is given class "resetall"
*/