/*---------------------------------------------------------------------------*\
	#Content-Menu
\*---------------------------------------------------------------------------*/

.content-menu {
	position: relative;
	position: sticky;
	font-size: 1.4rem;
	font-weight: 400;
	/* Site Header height */
	top: 8.5rem;
	z-index: 1000;
}

.content-menu_container {
	/* Section padding */
	margin: 0 -2rem;
}

.content-menu_wrapper {
	position: relative;
	background: var( --wp--preset--color--ir-secondary-green );
	background-image: var( --wp--preset--gradient--ir-darker-to-brighter-secondary-green );
	color: #fff;
	display: flex;
	flex-wrap: nowrap;
	/* The gap is regulated through JS. */
	gap: 0;
	justify-content: space-evenly;
	list-style: none;
	overflow: hidden;
	margin: 0;
	/**
	 * The padding left and right is regulated through JS with the
	 * --gap-position.
	 */
	padding: 0 ;
	
	/**
	 * Custom properties to calculate with JS the spaces between and around
	 * children and hide the exceeding ones. This calculation is only
	 * responsible for displaying and hiding the elements and must synergize
	 * with the CSS.
	 * 
	 * @prop <length> gap          The gap lenght. Allowed units are: px|rem
	 * @prop string   gap-position Where the gap is calculated.
	 *                             Values: around|between
	 */
	--gap: 2rem;
	--gap-position: 'around'
}


@media screen and ( max-width: 67.5em ) {
	
	.content-menu {
		/* Site Header height */
		top: 7.5rem;
	}
	
}





/*---------------------------------------------------------------------------*\
	#Items
\*---------------------------------------------------------------------------*/

.content-menu__item {
	flex-basis: 0;
	margin: 0;
	padding: 0;
}

	.content-menu__item--hidden {
		position: absolute;
		visibility: hidden;
		top: 200%;
		left: 200%;
	}


.content-menu__item_container,
.content-menu__item_wrapper,
.content-menu-link,
.content-menu-link_container,
.content-menu-link_wrapper {
	height: 100%;
}


.content-menu-link,
.content-menu-link:is( :focus, :hover, :active ) {
	position: relative;
	display: block;
	color: inherit;
	cursor: pointer;
	background: unset;
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

	.content-menu-link::before {
		content: '';
		position: absolute;
		background-color: rgba( 255, 255, 255, 0 );
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		mix-blend-mode: soft-light;
		transition: background-color .25s ease;
		z-index: 0;
	}

		.content-menu-link:is( :focus, :hover, :active )::before {
			background-color: rgba( 255, 255, 255, .4 );
		}

	.content-menu-link::after {
		content: '';
		position: absolute;
		background-color: rgba( 255, 255, 255, 1 );
		width: 100%;
		height: .5rem;
		bottom: 0;
		left: 0;
		mix-blend-mode: soft-light;
		z-index: 0;
		border-radius: .5rem .5rem 0 0;
	}

.content-menu-link_container {
	padding: 1rem 1rem 1.5rem;
}

.content-menu-link_wrapper {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
}


.content-menu-link__content-part {
	white-space: nowrap;
}