/* Nav bar from Slider Revolution (https://www.sliderrevolution.com/resources/css-dropdown-menu/), "Pure CSS DropDown Menu": 
Branched off the one from DietrichMusic.com on 25-Aug-26
*/

/* 1. Define your "constants" in the root scope */
:root {
  --bar-color: #BCBCBC; 
  --horiz-justification: flex-start; /* or flex-end for menu items against the right edge */
  --line-height: 45;
}

@media screen and (max-width: 736px) 
{
   /* On narrow screens, the top menu item is the hamburger menu icon */
  :root {
    --width-level1: 140;  
    --width-level2: 180;  
    --width-level3: 180;  
  }
}
@media screen and (min-width: 737px) 
{
  :root {
    --width-level1: 240;  
    --width-level2: 240;  
    --width-level3: 270;  
  }
}

nav {
  margin: 0; /* was 50px, 0 originally -- why? Don't want the space at top!!*/
  background-color: var(--bar-color);
}

nav ul {
  display: flex;
  justify-content: var(--horiz-justification); 
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
  
nav ul li {
  display:inline-block;
  background-color: var(--bar-color);
}

nav a {
  display:block;
  padding:0 10px; 
  color:#BBBBBB;
  font-size: clamp(0.8rem, 0.5rem + 1.0vw, 1.4rem);
  line-height: calc(var(--line-height) * 1px);
  text-decoration:none;
}

nav a:hover { 
  background-color: #000000;  
  
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
}

/* Hide Dropdowns by Default */
nav ul ul {
  display: none;
  position: absolute; 
  top: calc(var(--line-height) * 1px); /* the height of the main nav */
}
  
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
  display:inherit;
}
  
/* First Tier Dropdown */
nav ul ul li {
  width:calc(var(--width-level1) * 1px); /* changed from 170 */
  float:none;
  display:list-item;
  position: relative;
}

/* Second tiers */
nav ul ul ul li {
  width:calc(var(--width-level2) * 1px); /* changed from 170 */
  position: relative;
  top:calc(var(--line-height) * -1px); 
  left:calc(calc(var(--width-level1) - 10) * 1px); /* s/b width minus 10 */
}

/* Third and more Tiers */
nav ul ul ul ul li {
  width:calc(var(--width-level3) * 1px); /* changed from 170 */
  position: relative;
  top:calc(var(--line-height) * -1px); 
  left:calc(calc(var(--width-level2) - 10) * 1px); /* s/b width minus 10 */
}

HamburgerMenuIcon
{
  height: 22px  ;
  object-fit: cover;
}