.navigation-modal {
	margin-block-start: 0;
}

#navigation_menu_trigger:not( :checked ) + .navigation-modal {
	pointer-events: none;
}

#navigation_menu_trigger::checked + .navigation-modal ~ * {
	pointer-events: none;
}

#navigation_menu_trigger:not( :checked ) + .navigation-modal .navigation-modal-backdrop {
	opacity: 0;
}

#navigation_menu_trigger:not( :checked ) + .navigation-modal .navigation-modal-body {
	--tw-translate-x: calc( 100% + 8px );
	/* ^ the calc( 100% + 8px ) of the translate-x is so that the box-shadow spread of the active page does not bleed out */
}

.navigation-modal nav {
	padding-top: calc( 22 * var( --spacing-unit ) );
}

.navigation-modal nav > ul {
	display: flex;
	margin: 0;
	flex-direction: column;
	padding-left: 0;
	list-style-type: none;

	text-align: center;
}
.navigation-modal nav > ul > li {
	width: calc( 100% - ( 2 * 6 * var( --spacing-unit) ) );
	margin: 0 calc( 6 * var( --spacing-unit ) );

	border-width: 0;
	color: rgba( var( --light ), 1 );
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: 500ms;
}
.navigation-modal nav > ul > li:not( .current-menu-item ):hover {
	color: rgba( var(--neutral ), 1 );
}

.navigation-modal nav > ul > :not( [ hidden ] ) ~ :not( [ hidden ] ) {
	border-width: 0;
	border-top-width: 1px;
	border-style: solid;
	border-color: rgba( var( --accent ), 1 );
}

.navigation-modal a {
	display: inline-block;
	width: 100%;
	padding: calc( 6 * var( --spacing-unit ) ) 0;
	color: inherit;
	text-decoration-line: none;
}

.navigation-modal nav > ul > li.current-menu-item {
	margin: 0;
	width: 100%;
	background-color: rgba( var( --accent ), 1 );
	box-shadow: 0 0 0 8px rgba( var( --accent ), 1 );
	z-index: 10;
	transition-property: filter;
}
.navigation-modal nav > ul > li.current-menu-item:hover {
	filter: brightness( 1.1 );
}


/**
 | Contact Us link
 |
 */
.navigation-modal nav > ul > li:last-child a {
	margin-top: calc( 12 * var( --spacing-unit ) );
	padding: calc( 4 * var( --spacing-unit ) ) 0;
	font-size: var( --h4-fs );
	line-height: var( --h4-lh );
	letter-spacing: var( --h4-ls );
	background-color: rgba( var( --light ), 1 );
	color: rgba( var( --dark ), 1 ) !important;
	text-decoration-line: none;
}