/* START -- SITE HDR W/MEGA MENU */

/* after BS5 additions to megamenu, I had to add BS5 sticky-top to megamenu code make it stick */
/* ./templates/includes/header.html.twig:<header id="cbr_header">{{ page.header_CBR }}</header>
./templates/includes/header_alt.html.twig:<header id="cbr_header">{{ page.header_CBR }}</header>
 */
#cbr_header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 5000;
    border-top: 10px solid var(--cbr-darkest);
    background-color: var(--cbr-color);
    border-bottom: 3px solid #fcfbfb;
  }
  
  div#cbr_logoSearch {
    margin: 0;
    display: flex;
    justify-content: center;
  }
  
  div#cbr_logoSearch_box {
    display: flex;
    flex: 1;
    max-width: 1200px;
  }
  
  .cbr_logo {
    margin-left: 10px;
    float: left;
    max-width: 400px;
    padding-left: 5px;
  }
  .cbr_logo img {
    width: 400px;
  }

/* keep text size similar to UW image size, currently 230*/
  .cbr_uw_units_box {
    font-size: 0.85rem;
    font-weight: 400;
    flex: 70%;
    float: right;
  }
  .cbr_uw_units {
    float: right;
    margin: 25px 20px 0px 15px;
  }
    
  .uw_units_name {
    fill: #ffffff;
  }
  
a.cbr_uw_units_link,
a.cbr_uw_units_link:link,
a.cbr_uw_units_link.link,
a.cbr_uw_units_link.visited,
a.cbr_uw_units_link:visited,
a.cbr_uw_units_link:hover {
  color: white;
  text-decoration: none;
}
    
  .cbr_search_box {
    font-size: 0.6rem;
    flex: 70%;
    float: right;
  }

  .cbr_search_box_footer {
    display:none;
    font-size: 0.6rem;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .cbr_search {
    float: right;
    margin: 25px 20px 0px 15px;
  }
 
  .form {
    display: flex;
    flex-direction: row;
  }
  .search-field {
    width: 100%;
    padding: 5px 35px 5px 15px;
    border: none;
    border-radius: 10px;
    outline: none;
    background-color: var(--cbr-nav-bg); /* #d8eeee*/
  }
  
  .search-field::placeholder {
    color: var(--cbr_darkest);
/*
    font-family: open-sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
*/
  }
  
  .search-button {
    background: transparent;
    border: none;
    outline: none;
    margin-top: 5px;
    margin-left: -33px;
  }
  
  .search-button img {
    width: 20px;
    height: 20px;
    object-fit: cover;
  }
  
  nav#cbr_altnav {
    margin: 0;
    display: flex;
    justify-content: center;
  }
  
  div#cbr_nav_menu {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-top: 1px solid var(--cbr-hov-color);
    display: flex;
    flex: 1;
    max-width: 1200px;
  }
  
  /* TOP NAV WITH DROPDOWN */

  .cbr_topnav {
    flex: 67%;
    overflow: hidden;
  }
  
  .cbr_topnav#cbr_btn_data,
  .cbr_topnav#cbr_btn_preds,
  .cbr_topnav#cbr_btn_trends,
  .cbr_topnav#cbr_btn_tools,
  .cbr_topnav#cbr_btn_pubs,
  .cbr_topnav#cbr_btn_about {
    flex: none;
    color: #fcfbfb;
  }
  
  .cbr_topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    height: 43px;
    padding: 10px 45px 0px 45px;
    margin-right: 10px;
    text-decoration: none;
  }
  
  .cbr_dropdown {
    float: left;
    overflow: hidden;
  }
  
  .cbr_dropdown .cbr_dropbtn {
    border: none;
    outline: none;
    color: white;
    font-family: inherit;
    margin: 0;
  }
  
/* originally used for positioning, now using BS dropdown-center */
div#cbr_Data,
div#cbr_Predictions,
div#cbr_Trends,
div#cbr_Tools,
div#cbr_Publications,
div#cbr_About {

}
  
.cbr_dropdown-content {
    display: none;
    position: absolute;
    justify-content: center;
    top: 125px;
    margin-left: -1px;
    margin-right: 10px;
    max-width: 1150px;
    min-height: 240px;
    z-index: 1;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color: var(--cbr-nav-bg);
    border-left: 1px solid var(--cbr-navmenu-dropnborder);
    border-right: 1px solid var(--cbr-navmenu-dropnborder);
    border-bottom: 1px solid var(--cbr-navmenu-dropnborder);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
 }
  
 .cbr_dropdown-content a {
    margin: 0;
    font-size: 1rem;
    float: none;
    color: var(--cbr-color);
    text-decoration: none;
    display: none;
    padding: 0px 0px 0px 0px;
    text-align: left;
 }
  
.cbr_topnav a:hover,
.cbr_dropdown:hover .cbr_dropbtn {
    color: white;
    background-color: var(--cbr-hov-color);
}
  
.cbr_dropdown:hover .cbr_dropdown-content {
    display: block;
    animation: fadeIn 1s;
    border: 1px solid var(--cbr-navmenu-dropnborder);
}
.cbr_dropdown-content a:hover {
    margin: 0;
    background-color: var(--cbr-nav-bg);
    color: white;
}

  .cbr_dropdown:hover .cbr_dropdown-content,
  .cbr_dropdown:hover .cbr_dropdown-about-content {
    display: block;
  }
  
  
  div#cbr_NavData a:hover,
  div#cbr_NavTrends a:hover,
  div#cbr_NavPredictions a:hover,
  div#cbr_NavTools a:hover,
  div#cbr_NavPublications a:hover,
  div#cbr_NavAbout a:hover {
    background-color: transparent;
  }
  
  .cbr_NavWrapper {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--cbr-nav-bg);
  }
  
/*
  .cbr_NavWrapper a {
    display: block;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  .cbr_NavWrapper a:hover {
  color: var(--cbr-link);
    border: none;
  }
  
*/
  .cbr_NavCol1 p {
    margin: 0;
    /*color: var(--cbr-darkestgray);*/
    padding: 0px 10px 5px 0px;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600; 
    line-height: 1.5; /* make italic readable */
  }
  
  .cbr_NavCol2 p {
    margin: 0px;
    color: var(--cbr-text);
    padding: 0px 10px 15px 0px;
    font-size: 0.8rem;
    line-height: 1.2; 
    font-weight: 400;
  }    
    
  .cbr_NavCenter {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    max-width: 1200px;
    padding: 5px 10px 20px;
  }
/* are flex and display block incompatible? */
  .cbr_NavCol1 {
    flex: 1.3;
    display: block;
    color: var(--cbr-dark);
    padding: 0px 5px 0px 5px;
    font-size: 0.8rem;
    line-height: 1;
    border-right: 1px solid var(--cbr-navmenu-dropnborder);
  }

  .cbr_NavCol2 {
    flex: 4;
    display: flex;
    flex-direction: column;
  }
  
  
  .cbr_NavCenter .cbr_NavCol2 {
    flex: 2;
    display: flex;
    flex-direction: column;
  }  
  .cbr_NavCenterSmall .cbr_NavCol2 {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .cbr_NavRow {
    flex: 1;
    gap: 30px;
    display: flex;
  }
  
  .cbr_NavCol3 {
    flex: 1;
    display: block;
  }
  
  div.cbr_NavHdr,
  a.cbr_NavHdr {
    display: block;
    margin: 0;
    padding: 15px 0px 10px 0px;
    color: var(--cbr_darkest);
    font-size: 0.75rem;
/*
    font-weight: 500;
*/
    font-weight: 600;
    line-height: 1.1;
      text-transform: uppercase;

  }
  
  a.cbr_NavCat {
    display: block;
    margin: 0;
    padding: 10px 0px 20px 0px;
    color: var(--cbr-dark);
    font-family: "Alegreya SC", serif;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
  letter-spacing: 0.05em;
  }
  
  a.cbr_NavCat:hover {
    border-bottom: none;
  }
  
  a.cbr_NavHdr:hover {
  color: var(--cbr-link);
  }
  
  .cbr_accordion,
  .cbr_icon_nav,
  .cbr_mobile_navSub,
  .cbr_mobile_nav,
  .cbr_Panel {
    display: none;
  }
  
  /* END DROPDOWN */
  /* MORE TOP MENU IN NEXT SECTION - REPONSIVE MOBILE... */
  /* RESPONSIVE MEDIA QUERIES */
  
  .cbr_mobileBlock {
    margin: 0; /*none; failed browser inspect */
    min-height: 30px;
    display: none;
    background-color: var(--cbr-color);
  }
  
  /* END RESPONSIVE NAV */

#cbr_nav_menu div.navsep {
  background:transparent;
/*
  background-color: var(--cbr-color);
*/
  margin: 0 1.3rem;
  height: 51px; /* one taller than buttons to keep navbar same height with border hover*/
}

/* merge btn-secondary make CBR */
#cbr_nav_menu .btn-cbrnav{
  --bs-btn-bg: var(--cbr-color);
  --bs-btn-border-color: unset;
  --bs-btn-hover-bg: unset !important;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--cbr-hov-color);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-shadow-rgb: 153,153,153;
  --bs-btn-active-border-color: var(--cbr-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--cbr-darkgray);
  --bs-btn-disabled-border-color: var(--cbr-darkgray);  
}

#cbr_nav_menu .btn-secondary{
  --bs-btn-bg: var(--cbr-color);
  --bs-btn-border-color: unset;
  --bs-btn-hover-bg: unset !important;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--cbr-hov-color);
}

.cbr_NavCenter{
/*
  min-width: 800px;
*/
  min-width: 748px;
  border: 1px solid var(--cbr-navmenu-dropnborder);
  box-shadow: 5px 5px 15px var(--cbr-darkgray);
}

.cbr_NavCenterLarge{
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  max-width: 1200px;
  padding: 5px 10px 20px;
  min-width: 1200px;
  border: 1px solid var(--cbr-navmenu-dropnborder);
  box-shadow: 5px 5px 15px var(--cbr-darkgray);
}

/* Small width of nav anchor tags with fewer content*/
/* in use Publications and About */
.cbr_NavCenterSmall {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  max-width: 800px;
  padding: 5px 10px 20px;
/*
  min-width: 600px;
*/
  min-width: 522px;
  border: 1px solid var(--cbr-navmenu-dropnborder);
  box-shadow: 5px 5px 15px var(--cbr-darkgray);
}

/* make a list with no bullets so wrapping items stay together */
/* put space only between items */
/* line height for readable in accordion and megamenu */
ul.mm_list {
  list-style: none;
  padding-left: 0;
}

ul.mm_list li {
    font-size: 0.8rem !important;
    line-height: 1.5;
    font-weight: 400;
}

ul.mm_list li:not(:last-child) {
   margin-bottom: 15px;
}

a.mm_li,
a.mm_li:link,
a.mm_li:visited {
/*
  color: var(--cbr-link);
*/
  text-decoration: none;
    font-size: 0.8rem !important;
        font-weight: 500;

}
a.mm_li:hover { 
  text-decoration: underline;
/*
  color: var(--cbr-link);
*/
    font-size: 0.8rem !important;
            font-weight: 500;

}

/* specific to hamburger/mobile/media accordion menu */
#cbraccordion ul.mm_list {
  list-style: none;
  padding-left: 90px !important; /* subpanel a is 50px; */
  padding-top: 0.5em;
}

/*
#cbraccordion ul.mm_list li {
    font-size: 0.8rem !important;
    line-height: 0.9rem !important;
    font-weight: 400 !important;
    * }
*/


#cbraccordion ul.mm_list li:not(:last-child) {
   margin-bottom: 5px !important;
}

/* end accordion menu list items */

#cbr_nav_menu .btn-sm  {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

#cbr_nav_menu .btn-lg  {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

#cbr_nav_menu .btn  {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  font-weight: 500;
}

/* in use? */
/*
#cbr_nav_menu .btn-group-sm > .btn, .btn-sm {
  --bs-btn-padding-x: 1.5rem !important;
}
*/

#cbr_nav_menu .btn-group > .btn {
  width: auto;
  height:50px;
  --bs-btn-border-radius: unset;
}

.cbr_NavButtonLink {
  width: 100%;
  margin: auto;
  padding: 1em;
  text-align: center;
}

.cbr_NavButtonLink a {
  text-decoration: none;
}

/* For mouseover hover effect on BS5 nav anchor tags */
div#cbr_btn_datagrp:hover,
div#cbr_btn_datagrp:hover,
div#cbr_btn_predsgrp:hover,
div#cbr_btn_trendsgrp:hover,
div#cbr_btn_toolsgrp:hover,
div#cbr_btn_pubsgrp:hover,
div#cbr_btn_aboutgrp:hover {
  background-color: var(--cbr-hov-color);
/*
  border-radius: unset;
*/
  border-radius: 3px;
}

div#datagrp,
div#predsgrp,
div#trendsgrp,
div#toolsgrp,
div#pubsgrp,
div#aboutgrp {
  background:transparent;
}

div#datagrp:hover,
div#predsgrp:hover,
div#trendsgrp:hover,
div#toolsgrp:hover,
div#pubsgrp:hover,
div#aboutgrp:hover {
/*
  border-radius: 4px;
  border: 1px solid var(--cbr-nav-bg);
*/
}

/* Remove pre-set Bootstrap 5 border box from dropdown elements */
#cbr_nav_menu .dropdown-menu.show {
  border: none;
  background:transparent;
}

/* Removes extra space from dropdown megamenu box */
#cbr_nav_menu .dropdown-menu {
  --bs-dropdown-padding-y: 0;
  margin-top: -2px !important;
}

/* media query for height, make it scrollable */
  @media screen and (max-height: 950px) and (min-height: 901px) {

	#cbr_nav_menu .dropdown-menu {
	  --bs-dropdown-padding-y: 0;
	  margin-top: -2px !important;
	  height: auto;
	  max-height: 750px;
	  overflow-y: auto;
	  overflow-x: auto;
  box-shadow: 5px 5px 15px var(--cbr-darkgray);
	}
}
  @media screen and (max-height: 900px) and (min-height: 801px) {

	#cbr_nav_menu .dropdown-menu {
	  --bs-dropdown-padding-y: 0;
	  margin-top: -2px !important;
	  height: auto;
	  max-height: 650px;
	  overflow-y: auto;
	  overflow-x: auto;
	    box-shadow: 5px 5px 15px var(--cbr-darkgray);
	}
}
  @media screen and (max-height: 800px) and (min-height: 701px) {

	#cbr_nav_menu .dropdown-menu {
	  --bs-dropdown-padding-y: 0;
	  margin-top: -2px !important;
	  height: auto;
	  max-height: 550px;
	  overflow-y: auto;
	  overflow-x: auto;
	    box-shadow: 5px 5px 15px var(--cbr-darkgray);
	}
}
  @media screen and (max-height: 700px) and (min-height: 601px) {

	#cbr_nav_menu .dropdown-menu {
	  --bs-dropdown-padding-y: 0;
	  margin-top: -2px !important;
	  height: auto;
	  max-height: 450px;
	  overflow-y: auto;
	  overflow-x: auto;
	    box-shadow: 5px 5px 15px var(--cbr-darkgray);
	}
}


/* needed for accessibility tabs ? */
/* https://getbootstrap.com/docs/5.2/components/dropdowns/#overview */
/*
#cbr_nav_menu .dropdown-item {
  font-weight: unset !important;
  color: unset !important;
  text-align: unset !important;
  white-space: unset !important;
  }
*/


/* END Bootstrap */