
nav.navigation-bar {
	
}
@media ( min-width: 738px ) {
	nav.navigation-bar {
		display: grid;
		grid-template-columns: repeat( 11, [col-start] minmax( 0, 1fr ) [col-end gutter-start] var( --gutter-width ) [gutter-end] ) [col-start] minmax( 0, 1fr ) [col-end];
	}
}

nav.navigation-bar ul {
	/* m-0 md:start-col-2 md:end-col-11-end lg:start-col-3 lg:end-col-10-end flex pl-0 list-none bg-dark divide-y divide-y-solid divide-accent */
	margin: 0;
	display: flex;
	padding-left: 0;
	list-style-type: none;
	background-color: rgba( var( --dark ), 1 );
}
@media ( min-width: 738px ) {
	nav.navigation-bar ul {
		grid-column-start: col-start 2;
		grid-column-end: col-end 11;
	}
}
@media ( min-width: 1024px ) {
	nav.navigation-bar ul {
		grid-column-start: col-start 3;
		grid-column-end: col-end 10;
	}
}
nav.navigation-bar ul > :not( [ hidden ] ) ~ :not( [ hidden ] ) {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-color: rgba( var( --accent ), 1 );
}

nav.navigation-bar li {
	position: relative;
	flex-grow: 1;
	text-align: center;
	color: rgba( var( --light ), 1 );
	transition-duration: 500ms;
	
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}
nav.navigation-bar li:not( .current-menu-item ):hover {
	color: rgba( var( --neutral ), 1 );
}
nav.navigation-bar li.current-menu-item {
	background-color: rgba( var( --accent ), 1 );
	box-shadow: 0 0 0 4px rgba( var( --accent ), 1 );
	z-index: 10;
	transition-property: filter;
}
nav.navigation-bar li.current-menu-item:hover {
	filter: brightness( 1.1 );
}
@media ( min-width: 738px ) {
	nav.navigation-bar li.current-menu-item {
		box-shadow: 0 0 0 8px rgba( var( --accent ), 1 );
	}
}

.navigation-bar a {
	display: block;
	width: 100%;
	padding: calc( 3 * var( --spacing-unit ) ) 0;
	color: inherit;
	text-decoration-line: none;
}
@media ( min-width: 738px ) {
	.navigation-bar a {
		padding: calc( 6 * var( --spacing-unit ) ) 0;
	}	
}
.navigation-bar a > .wp-block-navigation-item__label {
	display: block !important;
	font-size: var( --h2-fs );
	line-height: var( --h2-lh );
	letter-spacing: var( --h2-ls );
	font-style: italic;
}
.navigation-bar a > .wp-block-navigation-item__description {
	display: block !important;
	margin-top: calc( 2 * var( --spacing-unit ) );
	font-size: var( --h6-fs );
	line-height: var( --h6-lh );
	letter-spacing: var( --h6-ls );
}
