/*****************************************************************************************************
* Menus Module: Common CSS
******************************************************************************************************/

/*
Common Nav Menus CSS
---------------------------------------------------------------------------------------------------- */

/* All Nav Menus > General
--------------------------------------------- */

  /* Set nav menu ancestors 100% height for vertical centering 
  via flexbox. The height of the outermost container (e.g. 
  site-header) needs to be defined absolutely. */

.header-widget-area,
.widget_nav_menu,
.header-widget-area .widget-wrap,
.nav-header,
.genesis-nav-menu,
.genesis-nav-menu .menu-item,
.genesis-nav-menu .menu-item a {
  height: 100%;
}

.genesis-nav-menu {
  display: flex;
  flex-flow: row nowrap;
  font-size: 16px;
  line-height: 1;
  margin: 0;
    /* Force GPU rendering to prevent menu item flickering
     in Chrome due to sub menu opacity transition. */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; 
}

.genesis-nav-menu .menu-item {
  cursor: pointer;
  list-style: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  white-space: nowrap;
}

body:not(.bub-role-administrator) .genesis-nav-menu .menu-item.bub-role-administrator {
  display: none;
}

.genesis-nav-menu .menu-item a {
  color: #ddd;
  color: var(--theme1-color-def);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 20px;
  text-decoration: none;
  width: 100%;
}

.genesis-nav-menu :is(
  .menu-item a:hover,
  .menu-item a:focus,
  .menu-item a.clicked,
  .current-menu-item > a
  ) {
  /*color: var(--theme1-color-acc);*/
}

.genesis-nav-menu > :is(
  .menu-item:hover > a,
  .menu-item > a:focus,
  .menu-item > a.clicked,
  .menu-item.current-menu-item > a
) {
  /* text-decoration: underline; */
}

.genesis-nav-menu .menu-item.hidden {
  display: none;
}


/* All Nav Menus > Submenus
--------------------------------------------- */

/* All Nav Menus > Submenus > Show / Hide */

.genesis-nav-menu .sub-menu {
  opacity: 0;
  padding: 0;
  position: absolute;
    left: -99999px;
  transition: none;
    /* Visibility must be "hidden" for tab navigation
    to work as expected. */
    visibility: hidden; 
  z-index: 10;  
}

.genesis-nav-menu .sub-menu.show {
  /* Keep below non-showing submenus. */
  z-index: 9;
}

.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .sub-menu.show /* js */ {
  opacity: 1;
  left: inherit;
  visibility: visible;
}

/* All Nav menus > Submenus > Basic Styling */

.genesis-nav-menu .sub-menu .menu-item {
  background: var(--theme1-background-def);
  height: 50px;
}

.genesis-nav-menu .sub-menu .menu-item a {
  padding: 0 15px;
}

.genesis-nav-menu .sub-menu .menu-item a:hover,
.genesis-nav-menu .sub-menu li.current-menu-item > a, 
.genesis-nav-menu .sub-menu li > a.clicked {
  background: var(--theme1-background-sh1);
}


/*
Breadcrumbs
---------------------------------------------------------------------------------------------------- */

.bub-breadcrumbs {
  padding-top: 60px;
  z-index: 1;
}

a.bub-breadcrumbs__crumb {
  background: #444;
  /*background: linear-gradient( to bottom, #444, #404040 );*/
  background: var(--theme2-background-def);
  /*box-shadow: 0px 1px 8px #333;*/
  color: #ddd;
  display: block;
  font-size: 0.85rem;
  padding: 8px 15px 8px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 300ms;
}

a.bub-breadcrumbs__crumb:hover {
  filter: brightness(110%);
}

.bub-breadcrumbs__crumb-arrow {
  margin: 0 3px 0 0;
}

.bub-breadcrumbs__crumb-label {
  text-decoration: none;
}

@media screen and (max-width: 1000px/*mobileMenuMaxWidth*/) {
  
  .bub-breadcrumbs {
    padding-top: 0px;
  }
}


/*
Special Effects
---------------------------------------------------------------------------------------------------- */

/* Fancy Hover Borders
--------------------------------------------- */

.genesis-nav-menu:not(.menu-secondary) > .menu-item > a::after {
  background-color: #ddd;
  background-color: var(--brand1-color-def);
  content: '';
  display: block;
  height: 1px;
  opacity: 0.9;
  position: relative;
  top: 2px;
  width: 0;
  transition: all 0.1s ease-in-out;
}

.genesis-nav-menu > .menu-item:hover > a::after,
.genesis-nav-menu > .menu-item > a:focus::after,
.genesis-nav-menu > .menu-item > a.clicked::after,
.genesis-nav-menu > .menu-item.current-menu-item > a::after {
  width: 101%;
}

/* Exceptions: Mobile Menu, Search Icon etc. */
.genesis-nav-menu.mobile-menu > .menu-item > a::after,
.genesis-nav-menu > :is(
  .menu-item.bub-search-icon, 
  .menu-item.bub-desktop-search-trigger, 
  .menu-item.bub-mobile-search-trigger, 
  .menu-item.totop
  ) > a::after {
  display: none !important;
}


/* Item Hover Background
--------------------------------------------- */

.genesis-nav-menu .menu-item > a > span {
  transition: all 200ms;
}

:where(.nav-primary) :where(
  .genesis-nav-menu > .menu-item:hover > a > span,
  .genesis-nav-menu > .menu-item > a:focus > span,
  .genesis-nav-menu > .menu-item > a.clicked > span,
  .genesis-nav-menu > .menu-item.current-menu-item > a > span 
  ) {
  /* background-color: rgba(0,0,0,0.11); */
  /* border-radius: 8px; */
  /* margin: -0.4em -0.6em; */
  /* padding: 0.4em 0.6em; */
}

/* The small menu above the header: a thin underline, as the main menu's line. */

:where(.nav-secondary) :where(
  .genesis-nav-menu > .menu-item:hover > a > span,
  .genesis-nav-menu > .menu-item > a:focus > span,
  .genesis-nav-menu > .menu-item > a.clicked > span,
  .genesis-nav-menu > .menu-item.current-menu-item > a > span 
  ) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Excecptions */
.genesis-nav-menu > :is(
  .menu-item.menu-item-minicart, 
  .bub-desktop-search-trigger
  ) > a > span {
  /* display: none !important; */
}