/* 
TODO
- font size
- color for 2 links in header 
*/

/* hide stuff */
/*
body > header > nav ul:nth-child(2) li:last-child{
	display: var(--nav-login-display, none);
}
*/
body > header {
	background: black;
}
@media screen and (max-width: 60em) {
	/*
	body > header nav .links-site li:first-child {
  		display: none;
  	}
  	*/
  	body > header nav .links-social li:not(:last-child) {
  		display: none;
  	}
}		
@media screen and (min-width: 60em) {
	body > header {
		background: black;
	}

	.js body > header {
		left: 50%;
		transform: translate(-50%, 0);
		background: black;
	}
	body > header nav .links-social,
	body > header nav .links-service {
  		display: none;
  	}
	/*
	.js body > header nav ul:first-child li:first-child {
		font-weight: bold;
	}
	.js body > header nav ul:nth-child(2) a{
		color: var(--color-primary);
	}
	*/
	.js body > header nav .links-forms a{
		color: var(--color-primary);
	}
}
@media screen and (min-width: 80em) {
	body > header.wrapper {
		background: black ;
	}
}



/* navigation links */

.links a {
	color: var(--color-light);
}
.links {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1em;
	background: var(--color-bg--dark);
	padding-block: 2em;
	line-height: 2;
}
.links > div:first-child ul:first-child li:first-child {
	display: none;
}
@media screen and (min-width: 48em) {
	/* switch to 3 columns */
	.links {
		flex-flow: row nowrap;
		justify-content: center;
		text-align: left;
		gap: 4em;
	}
}