/*
@media (min-width: 60em) {
  body.frontpage > header > nav ul:first-child li:first-child{
		display: none;
  }
}
*/
@media (orientation: landscape) and (max-width: 59.938em) {
	/* ORIG
	body > header nav {
		--nav-font-size: var(--step-1);
		--nav-font-weight: 400;
	}
	body > header nav ul {
		--nav-list-items-layout: row;
		justify-content: center;
	}
	*/
	
}
@media (min-width: 60em) {
  /* header nav */
  body > header {
    --nav-button-display: none;
    /*padding: 1em 0;*/
    /* ORIG
    --nav-position: static;
    --nav-position: fixed;
    */
  }
  /* header nav ul */
  body > header nav {
    --nav-list-layout: row;
    /* ORIG
    --nav-list-position: static;
    */
    --nav-list-padding: 0;
    /* ORIG
    --nav-list-height: auto;
    */
    /*
    --nav-list-width: 100%;
    --nav-list-shadow: none;
    */
    --nav-list-visibility: visible;
    --nav-list-justify: flex-end;
    /*--nav-list-gap: 4em;*/
    --nav-list-gap: 1.5em;
    /* ORIG
	--nav-font-size: var(--step-0);
	--nav-font-weight: 400;
	*/
  }
  body > header nav ul {
  	/* ORIG
  	--nav-list-items-layout: row;
  	*/
  	--nav-list-items-gap: 1em;
  	/*
  	--nav-list-items-align: stretch;
  	*/
  } 
  /*
  body > header > nav ul:first-child li:first-child{
		display: none;
  }
  */ 
  body > header > nav ul:nth-child(2) li:last-child{
		--nav-login-display: block;
  }
  /*
  body > header nav ul:last-child {
  	display: none;
  }
  */
}
@media (min-width: 64em) {
	body > header nav ul {
  	/* ORIG
  	--nav-list-items-layout: row;
  	*/
  	--nav-list-items-gap: 1.5em;
  	/*
  	--nav-list-items-align: stretch;
  	*/
  }
}
/* header nav */
body > header {
  /* ORIG
  position: var(--nav-position, fixed);
  */
  position: var(--nav-position, static);
  /* ORIG
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  */
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end; /* place toggle at the end */
  align-items: center;
  /*padding: 0.75em 0.5em;*/
  padding: 1em 0.5em;
  gap: 1em;
}
.js body > header {
	--nav-position: fixed;
}

/* header nav ul */
body > header nav {
  /*
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  */
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  /* ORIG
  flex-wrap: wrap;
  */
  flex-wrap: nowrap;
  justify-content: var(--nav-list-justify, center);
  /*
  justify-content: var(--nav-list-justify, space-evenly);
  */
  gap: var(--nav-list-gap, 1rem);
  /* ORIG
  height: var(--nav-list-height, 100vh);
  */
  height: var(--nav-list-height, auto);
  /* ORIG
  padding: var(--nav-list-padding, 2rem);
  */
  padding: var(--nav-list-padding, 1rem);
  /* ORIG
  position: var(--nav-list-position, fixed);
  */
  position: var(--nav-list-position, static);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  /* ORIG
  width: var(--nav-list-width, min(100vw, 100vw));
  */
  width: 100%;
  visibility: var(--nav-list-visibility, visible);
  /* ORIG
  font-size: var(--nav-font-size, var(--step-2));
  */
  font-size: var(--nav-font-size, var(--step-1));
  /* ORIG
  font-weight: var(--nav-font-weight, 800);
  */
  font-weight: var(--nav-font-weight, 600);
  /*font-weight: var(--nav-font-weight, 400);*/
}
.js body > header nav {
	/* NEW */
	--nav-list-height: 100vh;
	--nav-list-height: 100dvh;
	--nav-list-position: fixed;
	--nav-list-padding: 3rem;
	/*--nav-list-padding: 2rem;*/
	/*--nav-font-size: var(--step-2);
	--nav-font-weight: 800;*/
}
body > header nav ul {
	display: flex;
	/* ORIG
   	flex-direction: var(--nav-list-items-layout, column);
   	*/
   	flex-direction: var(--nav-list-items-layout, row);
   	flex-wrap: wrap;
   	align-items: var(--nav-list-items-align, center);
   	/* NEW */
   	justify-content: center;
   	gap: var(--nav-list-items-gap, 1rem);
   	/* RESET
   	list-style-type: none;
   	margin: 0;
   	padding: 0;
   	*/
}
.js body > header nav ul {
	--nav-list-items-layout: column;
}
/*
@media (min-width: 40em) {
  .js body > header nav {
	//--nav-font-size: var(--step-3);
	--nav-font-size: var(--step-3);
	//--nav-font-weight: 600;
  }
}
*/
@media (orientation: landscape) and (max-width: 59.938em) {
	/*
	.js body > header nav {
		--nav-font-size: var(--step-2);
		--nav-font-size: var(--step-1);
		--nav-font-weight: 600;
		--nav-font-weight: 400;
	}
	*/
	.js body > header nav ul {
		--nav-list-items-layout: row;
		/*
		justify-content: center;
		*/
	}
}
/*
@media (orientation: landscape) and (max-width: 40em) {
	.js body > header nav {
		--nav-font-size: var(--step-0);
	}
}
*/
@media (min-width: 22.5em) {
  .js body > header nav {
	--nav-font-size: var(--step-2);
  }
}
@media (min-width: 25em) {
  .js body > header nav {
	--nav-font-size: var(--step-3);
  }
}
/*
@media (min-width: 40em) {
  .js body > header nav {
	--nav-font-size: var(--step-3);
  }
}
*/
@media (min-width: 60em) {
  .js body > header nav {
	--nav-list-height: auto;
	--nav-list-position: static;
	--nav-font-size: var(--step-0);
	--nav-font-weight: normal;
	--nav-list-padding: 0 1em;
  }
   .js body > header nav ul {
	--nav-list-items-layout: row;
  }
}

/* display */
[aria-expanded="false"] + nav {
  visibility: var(--nav-list-visibility, hidden);
}

/* toggle button */
body > header button {
  all: unset; /* Reset button styling */
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0 0.25em;
}



/************* DELETE *************/


/* Define variables for your colors */
/*
:root {
  --color-shades-dark: rgb(25, 25, 25);
  --color-highlight: rgb(24, 54, 145);
}
*/

/* reset.css */

/* Use the alternative box model */
/*
* {
  box-sizing: border-box;
}
*/

/* a11y */

/* Remove the default :focus outline */
/*
*:focus {
  outline: none;
}
*/
/* Show a custom outline on :focus-visible */
/*
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}
*/





/* Basic link styling */
/*
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}
*/
/* Change the border-color on :hover and :focus */
/*
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}
*/
/* Change border-color and color for the active page */
/*
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}
*/