:root {
	/*--nav-height: 110px;*/
	--nav-height: 50px;
	--nav-height2: 60px;
	--nav-padding-top: var(--spacing);
}


header.site-header {
	align-items: center;
	/*box-shadow: 0 4px 16px rgba(12, 12, 13, 0.1);*/
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 auto;
	z-index: 100;
	color: white;
	transition: 300ms;
	justify-content: space-around;
	/*overflow: hidden;*/
	padding-top: var(--nav-padding-top);
	padding-left: 0;
	/*padding-right: calc(1 * var(--spacing));*/
	/*width: calc(100vwh - 2 * var(--spacing)); */
	background-color: #57131b;
	height: var(--nav-height);

	width: 100vw;
}


nav {
	display: grid;
	grid-template: 'navHome navPrimary navPrimary navPrimary navPrimary navSecondary';
}

nav a {
	color: inherit !important;
	text-decoration: none;
}

nav a:hover {
	text-decoration: none;
}

nav > img {
	z-index: -1;
	--x: 0.6;
	--y: 0.17;
	--width: 100vw;
	--height: var(--nav-height) ;
	--r: 1.5;
}

/*

@media only screen and (max-width: 1200px) {
	nav {
		grid-template: 'navHome navSecondary' 'navPrimary navPrimary';
		width: auto;
		width: 100vw;
	}
	:root {
		--nav-height: 100px;
	}
	#nav-primary {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	#nav-home > span {
		transform: translate(0,0px) !important;
	}
}

@media only screen and (max-width: 750px) {
	#nav-primary {
		font-size: 0.95rem;
	}

	:root {
		--nav-height: 200px;
		--nav-padding-top: calc(2 * var(--spacing));
	}

	#nav-primary {
		margin-top: calc(2 * var(--spacing));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: 100px;
	}

	nav {
		padding-top: calc(2 * var(--spacing));
	}
}

@media only screen and (max-width: 550px){
	:root {
		--nav-height: 230px;
	}

	nav {
		grid-template: 'navHome' 'navSecondary' 'navPrimary';
	}

	#nav-secondary {
		margin-top: calc(2 * var(--spacing));
	}

	#nav-primary {
		margin-top: calc(1 * var(--spacing));
	}
}

@media only screen and (max-width: 374px) {
	nav {
		padding-left: 0;
		padding-right: 0;
	}

	#nav-primary {
		transform: translateX(calc(-0.67 * var(--spacing)));
	}
}

*/

/* above */




/*
@media only screen and (max-width: 550px) and (min-width: 400px) {
	#nav-secondary {
		display: flex;
		flex-flow: column nowrap;
	}
	#nav-secondary a:not(:last-of-type) {
		display: block;
		padding-bottom: calc(1.5 * var(--spacing));
	}
	:root {
		--nav-height: 230px;
	}
}
*/


#nav-home {width: minmax(0, 1fr);grid-area: navHome;text-align: center;}
#nav-primary {grid-area: navPrimary;}
#nav-secondary {grid-area: navSecondary;}

nav > ul {
	list-style: none;
	padding: 0;
	display: inline-block;
}

nav.nav-prep {
	display: none;
	top: -100px;
}

nav.nav-ready {
	position: fixed;
	top: -100px;
	left: 0;
	height: var(--nav-height2);
	margin-bottom: calc(0px - var(--nav-height2));
	background-color: white;
	color: black;
	box-shadow: 0 4px 16px rgba(12, 12, 13, 0.1);
	transition: top 300ms;
	display: flex;
}

nav.nav-scrolled {
	top: 0px;
	display: flex;
}

nav > ul li {
	display: inline;
	padding: 0.25em 0;
	/*text-transform: uppercase;*/
	margin: 0 1em;
	font-weight: 500;
	cursor: pointer;
	transition: border 100ms;
	border-bottom: 2px solid transparent;
	font-size: 1.1rem;
	position: relative;
}

@media (max-width: 950px) {
	nav > ul li {
		margin: 0 0.25em;
	}
}


:root {
	--nav--mouse-x: 50%;
	--nav--mouse-y: 50%;
}

@keyframes glisten {
	0% {
		background-image: radial-gradient(farthest-corner at var(--nav-mouse-x) var(--nav-mouse-y), rgba(255,255,255,0.5) 10%, transparent);
	}
	100% {
		background-image: radial-gradient(farthest-corner at var(--nav-mouse-x) var(--nav-mouse-y), rgba(255,255,255,0) 10%, transparent);
	}
}

nav > ul li.nav-anim {
	/*background-color: rgba(255,0,255,0.5);*/
	animation: nothing 600ms;
	background-color: transparent;
}


#nav-home > span {
	display: inline-block;
	text-decoration: none;
	transform: translate(0,-7px);
}

nav > ul li:after {
	content: "";
	position: absolute;
	z-index: 20;
	background-color: transparent;
	height: 1px;
	width: 0%;
	border-radius: 1px;
	top: 110%;
	left: 50%;
	transition: 200ms;
	top: 100%;
}

nav > ul li:hover:after, nav > ul li[active]:after {
	content: "";
	position: absolute;
	z-index: 20;
	height: 1px;
	width: 100%;
	border-radius: 2px;
	top: 100%;
	left: 0%;
	background-color: white;
}

nav > ul li:hover, nav > ul li[active] {
	/*border-bottom: 2px solid black;*/
}

#nav-home {
	font-size: 1.5rem;
	text-align: center;
	cursor: pointer;
	font-family: ananda;
	width: 100%;
	display: block;
}

#nav-primary {
	text-align: center;
}

#nav-secondary {
	/*margin-left: 2em;*/
	text-align: center;
}

#nav-secondary li {
	margin: 0 0.5em;
	font-size: 0.95rem;
}





/*  toggle nav bar  */

/* Scope everything under .site-header to avoid clashing */
.site-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }

/* default: hide mobile toggle on desktop */
.nav-toggle { display: none; background: none; border: 0; padding: .25rem; cursor: pointer; }

/* Primary nav default (preserve your site's desktop styling here) */
.primary-nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* -------- Mobile rules -------- */
@media (max-width: 768px) {
  /* show toggle */
  .nav-toggle { display: inline-flex; align-items: center; }

  /* collapse the normal nav into a dropdown panel - don't remove desktop rules, we override small-screen behavior only */
  .primary-nav {
    background: white;          /* change to match header background */
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    overflow: hidden;
    max-width: 80vw;             
    transition: .28s ease;
    z-index: 1000;
  }

  /* stack links vertically on mobile */
  .primary-nav ul { flex-direction: column; padding: .75rem 1rem; gap: .5rem; }

  /* open state (toggled by JS) */
  .primary-nav.open { 
    /* large enough to show items; or use max-height: calc(100vh - headerHeight) */
    max-width: 80vw;
  }

  /* optional: prevent page scrolling when nav open */
  .no-scroll { overflow: hidden; }



  #primary-nav {
  	background-color: #57131b;
  	position:fixed;
  	top:0;
  	right:0;
  	width:80vw;
  	height:100vh;
  	transform:translateX(80vw);  /* collapsed */
  }

  #primary-nav.open {
  	transform:translateX(0px);
  }
}




/*  close button  */

/* visually-hidden utility (useful for sr-only text if needed) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

.nav-close {
  display: none;           /* hidden by default (desktop) */
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* mobile specific */
@media (max-width: 768px) {
  .nav-close {
    display: inline-flex;
    position: absolute;
    top: 1.5rem;
    right: .5rem;
    z-index: 1100;
  }

  /* make sure the close button is visually comfortable on top of the panel */
  .primary-nav { padding-top: 2.25rem; } /* room for close button */
  .nav-close svg { width: 20px; height: 20px; }
}




/*  scrolling  */


header.site-header {
	transform:translateY(0%);
}

header.site-header.scroll-down {
	transform:translateY(-100%);
}