.menu {
  
  display: flex;
}

.menu-item {
    
  user-select: none;    
}


#menu {
  grid-area: bottomright;
  display: flex;
  position:relative;
  /*
  justify-content: flex-start;
  align-items: flex-start;*/
}


#menu:has(.narrow-menu) ul {
    border: 1px solid #000;
    box-shadow: none;
    min-height: fit-content; 
    min-width: fit-content; 
}

#menu .menu-item {
  font-size: var(--sb-menu-font-size);
  font-weight: bolder;
  font-stretch: condensed;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  padding: 14px;
  position:relative;
}

#menu:has(.narrow-menu) .menu-item {

  padding: 8px;
}

#menu .sub-menu .menu-item {
  font-size: var(--sb-sub-menu-font-size);

  padding: 9px;
}



#menu .menu a {

  text-decoration: none;
  color: black;

}

/*to verify... position and bottom might go in js*/
#menu:not(:has(.narrow-menu)) .menu {

  position:absolute;
  bottom:0px;
}

#menu .narrow-menu {

  background-color: var(--lis1-background-color);
  position:absolute;
  top:90%;
  z-index: 9999; 
}


#menu:not(:has(.narrow-menu)) .menu:has(.sub-menu):has(.current-menu-ancestor){

     bottom: calc(100% - var(--menu-height, 0px));
    --menu-height: calc(100% - var(--sb-sub-menu-height, 40px));
}


#menu .menu-item:not(.current-menu-item):not(.current-menu-ancestor):hover {
  background-color: var(--lis1-hover-menu-color);

}



#menu .current-menu-item,
#menu .current-menu-ancestor {

  background-color: var(--lis1-selected-menu-color);
  /*background: linear-gradient(to right, blue, lightblue);*/

}


#menu:not(:has(.narrow-menu)) .sub-menu 
{
  display: none; /* Hides sub-menus by default */
  position:absolute;
  border: none;
  padding: 0;

  background-color: color-mix(in srgb, var(--lis1-background-color) 75%, black);
}


#menu:has(.narrow-menu) .sub-menu 
{
  display: none; /* Hides sub-menus by default */
  position:unset;
  border: black 1px solid;
  padding: 0;
  background-color: color-mix(in srgb, var(--lis1-background-color) 75%, black);
}


#menu:not(:has(.narrow-menu)) .menu-item:not(.current-menu-ancestor):hover .sub-menu,
#menu:not(:has(.narrow-menu)) .menu-item:not(.current-menu-ancestor) .sub-menu:hover {
  display: block; 
  position:absolute;
  top:90%;
  left: -10px;
  
  background-color: var(--lis1-background-color);
  opacity: 100%;
  z-index: 9999; 
  border: #777 1px solid;
}

#menu .menu-item:not(.current-menu-ancestor) .sub-menu .menu-item {
  font-size: var(--sb-sub-menu-hover-font-size);
    
  z-index: 9999; 
}



#menu:has(.narrow-menu) .menu-item:not(.current-menu-ancestor):hover .sub-menu,
#menu:has(.narrow-menu) .menu-item:not(.current-menu-ancestor) .sub-menu:hover {
  display: block; 
  position: absolute; 
  top:90%;
  right: 0px;
  background-color: var(--lis1-background-color);
  opacity: 100%;
  z-index: 9999; 
}

/*

  zoom: 0.8;
  position:unset;

#menu .current-menu-ancestor > .sub-menu {
  display: flex;
  z-index: auto; 
}



  background-color: color-mix(in srgb, var(--lis1-hover-menu-color) 100%, transparent 0%);
#menu .menu-item:hover .sub-menu,
#menu .menu-item .sub-menu:hover {
  display: flex; 
  top: 100%; 
  right:  auto;
  left: 20px;
  top: 100%;
  background-color: var(--lis1-content-color);
  border: 1px solid var(--lis1-separator-color);
  padding: 10px;
  z-index: 9999; 
  opacity: 1;
  transform: none;  display: inline-block;
}*/
/* Add arrow to menu items with submenu */
#menu .menu-item-has-children > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_1";  
  display: inline-block;
  vertical-align: middle;   /* aligns with text baseline */
  line-height: 1; 
  margin-left: 6px;
  opacity: 0.6;
}



#menu .menu-item-has-children:hover > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_1";  
  opacity: 1;
}
#menu .current-menu-ancestor.menu-item-has-children > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_2";  
  opacity: 1;
}
/* Show submenu when parent is current ancestor */
#menu:not(:has(.narrow-menu)) .current-menu-ancestor > .sub-menu {
  
  display: flex;
  border: none;
  padding: 0;
  background-color: var(--sb-sub-menu-background-color);
  opacity: 100%;
  top: 100%;    
  font-size: var(--sb-sub-menu-font-size);
  z-index: auto; 
}
#menu:has(.narrow-menu) .current-menu-ancestor > .sub-menu {
  
  display: block;
  border: none;
  padding: 0;
  opacity: 100%;
  top: 100%;  
  z-index: auto; 
}


/* Show submenu when parent is current ancestor */
#menu .current-menu-ancestor > .sub-menu .current-menu-item{
  
  background-color: color-mix(in srgb, var(--lis1-selected-menu-color) 90%, black);
}


/* Hide all submenu items by default background-color: blue;
#menu .sub-menu .menu-item {
    display: none;
}
*/
/* 
#menu .sub-menu .current-menu-item {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--lis1-selected-menu-color);
    border-radius: 4px;
}
*/
/* Show all submenu items on hover */
#menu:not(:has(.narrow-menu)) .menu-item:hover .sub-menu .menu-item {
    display: block;
}


/*
---simplebusiness_ui.js---------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

.std-header {
  display: grid;        
  grid-template-areas:
          "left topright"
          "left bottomright";
  grid-template-columns: min-content auto;
  grid-template-rows: min-content 1fr;
}

.narrow-header { 
  grid-template-areas:
          "left topright"
          "bottomright bottomright";
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
    
}

.narrow-branding {
  transform: scale(0.5);
  transform-origin: top left;
  width: 180px;
  height: 90px;
}

.narrow-menu {
  
  display: none;
  position: absolute;
  right: 5px;
  background: white;
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
}


/*.narrow-current-menu-item {
    
    
  display:block;
  top: 0px;
  left: 0px;
}
  position: fixed;
.narrow-menu .sub-menu{
  
   top: 0px;
  left: 0px;
}

/*
---simplebusiness_function.php--------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

/**
 * Styles for the narrow screen menu button.
 *
 * - Removes all default styling from the element using `all: unset`.
 * - Hides the button by default with `display: none`.
 * - Sets the cursor to pointer to indicate interactivity.
 * - Applies automatic left margin to align the button to the right.
 *
 * Intended for use in responsive navigation menus, typically shown only on
 * smaller screens or when a menu toggle is needed.
 *
 *  Added by sbt_wp_nav_menu_fhook
 */
#menu-narrowscreen-button {
  all: unset; 
  display: none;
  cursor: pointer;
  margin-left: auto;
}

/**
 * Added by sbt_wp_nav_menu_fhook
 */
#menu-narrowscreen-span {
    
  font-size: 20px !important;
  display: none;
    
  margin-right: auto;
}