#page-header{
  padding:20px;
  z-index:10;
}

/* banner image */
#banner-image{
  width:100%;
  height:80px;
  max-width:200px;
  background-position:center left;
  background-image:url("/img/ghm-official-light-logo-horizontal-transparent.png");
}
/* dark mode changes */
.dark-mode #banner-image{
  background-image:url("/img/ghm-official-dark-logo-horizontal-transparent.png");
}
/*system mode, dark mode styles*/
@media (prefers-color-scheme: dark) {
	.system-mode #banner-image{
    background-image:url("/img/ghm-official-dark-logo-horizontal-transparent.png");
  }
}


/* main nav & sub nav */
#main-nav-items-container{
  position:relative;
  background-color:var(--background);
  z-index:100;
}
.main-nav-item-container,
.sub-nav-item-container{
  padding:20px 10px;
  font-family: 'Montserrat', sans-serif;
}
.main-nav-item-container.standard-link:after,
.sub-nav-item-container.standard-link:after{
  opacity:0;
  height:2px;
  bottom:0;
}

@media (hover: hover) and (pointer: fine) {
  .main-nav-item-container.standard-link:hover:after,
  .sub-nav-item-container.standard-link:hover:after{
    animation:headerHoverLink .45s;
    animation-fill-mode: forwards;  
  }
}
@keyframes headerHoverLink{
	0%{
		/* opacity:1; */
	}
	25%{
		opacity:0;
	}
	30%{
		width:0;
	}
	35%{
		opacity:1;
	}
	100%{
		width:100%;
    opacity:1;
	}
}

.selected.main-nav-item-container,
.selected.sub-nav-item-container{
  color:var(--accent-gold);
  user-select:none;
}
.selected.main-nav-item-container.standard-link:after,
.selected.sub-nav-item-container.standard-link:after{
  opacity:1;
}
@media (hover: hover) and (pointer: fine) {
  .selected.main-nav-item-container.standard-link:hover:after,
  .selected.sub-nav-item-container.standard-link:hover:after{
    animation:none;
  }
}

/* site settings */
.site-settings-container{
  margin-left:30px;
  padding-left:20px;
  /* position:relative; */
}
.settings-icon{
  /* padding: 20px 10px; */
  width:18px;
  height:18px;
  transition:color .25s, transform .5s;
  transform: rotate(0);
}
.selected .settings-icon{
  transform:rotate(180deg);
  color:var(--accent-gold);
}

.settings-dropdown{
  width:100%;
  /* max-width:95vw; */
  padding:15px 20px;
  border:1px solid #e3e3e3;
  border-radius:8px;
  /* padding-bottom:50px; */
  pointer-events:none;
  box-shadow:0px;
  position:absolute;
  right:0;
  background-color:var(--background);
  
  transition:top .3s, opacity .3s, box-shadow .3s;
  opacity:0;
  top:75%;
}
.selected .settings-dropdown{
  pointer-events:all;
  opacity:1;
  top:calc(100% + 8px);
  box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
}
.color-scheme-container{
  position:relative;
  font-size:13px;
}
/* icons */
.color-scheme-icons-container{
  margin-bottom: 12px;
  position:relative;
}
.color-scheme-icon{
  width: 16px;
  height: 16px;
  cursor:pointer;
}
/* overwrite tooltip styles */
.settings-dropdown [data-tooltip]{
  position:static;
}
.settings-dropdown [data-tooltip]:after{
  font-size:13px;
  padding:0;
  text-align:right;
  width:150px;
  border:none;
}
@media (hover: hover) and (pointer: fine) {
  .settings-dropdown [data-tooltip]:hover:after{
    top:calc(100% + 35px);
    box-shadow:none;
  }
}

/* bar */
.color-scheme-toggle-bar-container{
  margin: 0 0px;
  position:relative;
  z-index:1;
}
.color-scheme-toggle-bar{
  cursor:pointer;
  background-color: var(--accent-gold);
  /* opacity:.1; */
  border-radius:50px;
  height: 10px;
  border: 2px solid var(--accent-gold);
  width: 70px;
  position:relative;
}
.color-scheme-toggle-knob{
  pointer-events:none;
  width: 20px;
  height: 20px;
  position:absolute;
  top: 50%;
  border-radius:10px;
  border: 2px solid var(--accent-gold);
  /* border-color: var(--accent-gold); */
  background-color: var(--background);
  transition: .15s;
}

/*  */
[data-color-scheme="1"] .color-scheme-toggle-knob{
  left: -2px;
  transform:translateY(-50%) translateX(0);
}
[data-color-scheme="2"] .color-scheme-toggle-knob{
  left: 50%;
  transform:translateY(-50%) translateX(-50%);
}
[data-color-scheme="3"] .color-scheme-toggle-knob{
  left: calc(100% + -8px);
  transform: translateY(-50%) translateX(-50%);
}
/*  */

.color-scheme-label-container{
  margin-top:10px;
}
.color-scheme-label{
  display:none;
}
[data-color-scheme="1"] .color-scheme-label:nth-child(1){
  display:inline;
}
[data-color-scheme="2"] .color-scheme-label:nth-child(2){
  display:inline;
}
[data-color-scheme="3"] .color-scheme-label:nth-child(3){
  display:inline;
}

/* sub nav specifically */
.section-sub-nav{
  margin-bottom:50px;
}


/* mobile-styles */
/* stack header elements vertically */
@media only screen and (max-width:540px){
  #page-header .max-width-section{
    flex-wrap:wrap;
    justify-content: center;
  }
  #banner-image{
    margin:0 auto;
  }
}