/* dispalyTopics */
body.display-slideshow  #slideshow,
body.display-gig  #gig,
body.display-user  #user,
body.display-sky  #sky,
body.display-equipement  #equipement,
body.display-vehicle  #vehicle,
body.display-info 	  #info,
body.display-settings #settings {
	display: block; 
}
  
body.display-location #location {
	display: grid; 
}

/* highlight active button */
body.display-slideshow button.nav-head-slideshow, 
body.display-gig button.nav-head-gig, 
body.display-user button.nav-head-user, 
body.display-vehicle button.nav-head-vehicle, 
body.display-location button.nav-head-location, 
body.display-equipement button.nav-head-equipement, 
body.display-info button.nav-head-info,
body.display-sky button.nav-head-sky,
body.display-settings button.nav-head-settings { 
	color: var(--logo-lightblue-color);
}

/* NAV */
#nav-container {
	pointer-events: none;
	justify-self:left;
}

#nav-container .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	background: var(--background-color);
	z-index:98;
}

#nav-container:focus-within .bg {
	visibility: visible;
	opacity: .6;
}

body.light #nav-container:focus-within .bg {
	opacity: 1;
}

#nav-container * {
	visibility: visible;
}

.user-location-tracking {
	grid-area: 1 / 3 / 2 / 4;
}

/*** BEGIN - Hamburger */
.menu-button {
	position:relative;
	z-index: 100;/* above .bg */
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.icon-bar {
	display: block;
	width: 80%;
	margin: 0 10%;
	height: 3px;
	background: var(--link-color);
	transition: .3s;
}

.icon-bar + .icon-bar { margin-top: 5px; }
/*#nav-container:focus-within .menu-button { pointer-events: none; }*/
#nav-container:focus-within .icon-bar:nth-of-type(1) { transform: translate3d(0,8px,0) rotate(45deg); }
#nav-container:focus-within .icon-bar:nth-of-type(2) { opacity: 0; }
#nav-container:focus-within .icon-bar:nth-of-type(3) { transform: translate3d(0,-8px,0) rotate(-45deg); }
/*** END - Hamburger */

#nav-content {
	margin-top: 56px;
	padding: 20px 12px 20px 12px;
	width: 90%;
	max-width: 300px;
	position: absolute;
	top: 0;
	left: 0;
	min-height: calc(100vh - 40px - 59px);
	background: var(--sub-background-color);
	pointer-events: auto;
	-webkit-tap-highlight-color: var(--background-color);
	contain: paint;
	z-index:99;
	display:none;
}

#nav-container:focus-within #nav-content {
	display:block;/* diplay:none prevents clicking accedentally and will make transitions impossible */
}

#nav-options {
	display:grid;	
	grid-template-columns: 1fr; 
	grid-template-rows: auto;
	justify-items: start; 
	align-items: center;
	gap: 8px;
}

.nav-item   {
	width:100%;
	cursor:pointer;
	pointer-events: auto;
	color:var(--link-color) !important;
	text-decoration:none;
}
.nav-item:hover { background:var(--highlight-background-color); }
.nav-item button { pointer-events: none; }   
.nav-item span { margin-left: 16px; }

#nav-options .nav-item{
	display:grid;
	grid-template-columns: calc(2 * var(--font-size-menu-button)) auto;
}
#nav-options .nav-item.site-theme{
	display:grid;
	grid-template-columns: calc(2 * var(--font-size-menu-button)) auto auto;
}
#nav-options .nav-item button {
	grid-column: 1 / 2;
	justify-self:center;
}
#nav-options .nav-item > label,
#nav-options .nav-item > span { 
	grid-column: 2 / 3;
	line-height:calc(2 * var(--font-size-menu-item));
	font-size: var(--font-size-menu-item);
}

#nav-options .nav-item.site-theme div {
	margin: auto 0;
}

#nav-options .nav-item.site-theme .toggle-switch span {
	background:var(--highlight-background-color);
}

#nav-options .nav-item.small button:not(.refreshCollection) .fa-solid,
#nav-options .nav-item.small span { 
	font-size: calc(3 / 4 * var(--font-size-menu-item));
}

.select-backend {
	background-color: inherit;
	border: 1px dotted var(--link-color);
	padding: 0.25em;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;
	color: inherit;
}

/* END - Navigation */