/*------------------skiptomain---------------------------*/

.skipToMainContainer {
  background-color: var(--text-main);
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  
}

#skipToMain {
  color: var(--text-white);
  display: block;
  overflow: hidden;
  width: max-content;
  height: 0;
  transition: height 0.3s ease-out;
}

#skipToMain:focus-visible {
  margin: var(--spacing-s);
  padding: var(--spacing-xxs);
  outline: var(--dottedWhite);
  height: var(--spacing-l);
}




/*-------------------breadcrumbs ---------------------------*/





.breadcrumbs {
  list-style: none;
  margin: 0 auto;
  padding: var(--spacing-s) 0;

  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow: hidden;
  line-height: var(--lineheight-T1);
}

.breadcrumbs li {

  height:var(--spacing-l);
  overflow: visible;
  display: inline-block;
  transition: height ease-out var(--transition-default);
/*   height: 0;
  overflow: hidden; */
}

/* 
.breadcrumbs:has(:hover,:focus-visible) li, .breadcrumbs:hover li {
  height:var(--spacing-l);
  overflow: visible;
}
 */


.breadcrumbs a, .breadcrumbs i {
  margin-right: var(--spacing-s);
  text-decoration: none;
  font-size: var(--T3);
}

.breadcrumbs a:hover {
  text-decoration: underline;
}



/*------------------navbar---------------------------*/

.topnav {
display: flex;
max-width: var(--max-width-wide);
justify-content: space-between;
align-items: center;
align-self: stretch;
margin: 0 auto;
overflow: hidden;
padding: 0 var(--spacing-l);
}

.topnav.narrowed {
max-width: 800px;
}



.topnavBtns {
list-style: none;
margin: var(--spacing-m) 0;
padding: 0;
}

.topnavBtns {
display: flex;
gap: var(--spacing-xs);
white-space: nowrap;
}

.topnavBtns li {
 margin: 0;
 padding: 0;
 height: max-content;
}




.searchForm {
  white-space: nowrap;
  display: inline;
  min-height: max-content;
}


.topnavList {
display: none;

}



.topnavBurger {
display: none;
margin: var(--spacing-m) 0;

}


@media screen and (max-width: 768px) {


footer.openTopNav, main.openTopNav, .hero.openTopNav {
  display: none !important;
}

.topnavBtns {
  display: none;
}



.topnav {
  position: relative;
}



.topnavList {
  visibility: hidden;
  display: block;
  position: fixed;
  left: -100vw;
  top: 0;

  list-style-type: none;
  background-color: var(--bg-midtone);
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  padding: var(--spacing-xl) var(--spacing-l);
  box-sizing: border-box;



}

.topnav.responsive .topnavList {
  transition: left 500ms ease-out;
  visibility: visible;
  left: 0; 
}

.topnavList li {
margin-bottom: var(--spacing-xl);
}

.topnavList li:first-of-type {
  float: right;
}

.topnavList li:nth-of-type(2) {
  margin-top: var(--spacing-xxl);
}




.topnavBurger {
  float: right;
  display: block;
}

}