/*
	Thème Esprits Nomades
	
	Objet : Styles des Menus
	Auteur : Vincent Jockin / WebArtMedia (développement Web) © 2018
*/



/*
	***********************
	Style du Menu Principal
	***********************
*/

	/* Définition */
	body.category #esprits-menu,
	body.single #esprits-menu {
		background-image: url(https://www.espritsnomades.net/wp-content/themes/espritsnomades/images/esprits_background_menu-alt.jpg);
	}
	body:not(.category):not(.single) #esprits-menu {
		background-image: url(https://www.espritsnomades.net/wp-content/themes/espritsnomades/images/esprits_background_menu.jpg);
	}
	#esprits-menu {
		z-index: 999;
		background-color: #fff;
		background-position: center bottom;
		background-repeat: repeat;
		width: 100%;
		left: 0px;
		line-height: 0;
		box-shadow: 0px -1px 8px rgba(16,24,32,.12), 0px 1px 8px rgba(16,24,32,.25);
		overflow: hidden;
		transition: opacity .5s;
	}

	#esprits-menu .menu {
		float: right;
		display: inline-block;
		margin: 0px -20px 0px 0px;
		padding: 33px 0px;
		transition: all .5s;
	}

	/* Position du menu fixe ou non */
	#esprits-menu.esprits-unfixed {
		position: absolute;
		top: 100vh;
	}
	#esprits-menu.esprits-fixed {
		position: fixed;
		top: 0px;
	}

/*
	Logo
*/
	#esprits-menu .esprits-menu-logo {
		display: block;
		float: left;
		height: 20px;
		line-height: 20px;
		margin: 30px 0px;
		transition: all .75s;
	}

	#esprits-menu .esprits-menu-logo a {
		position: relative;
		display: block;
		height: 100%;
		color: #cc4646;
		font-family: 'Vidaloka', serif;
		font-size: 24px;
		border-bottom: 0px none !important;
		transition: all .5s;
	}
	#esprits-menu .esprits-menu-logo a:hover {
		color: #333366;
		transform: scale(1.2);
	}

/*
	Items
*/
	#esprits-menu .menu li {
		display: block;
		float: left;
		list-style: none;
	}
	#esprits-menu .menu li:not(:last-child) {
		border-right: 1px dotted #333366;
	}

	#esprits-menu .menu li a {
		position: relative;
		display: block;
		color: #333366;
		line-height: 14px;
		margin: 0px 20px;
		padding: 0px;
		border-bottom: 0px none !important;
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 1.25px;
		transition: all .5s;
		cursor: pointer;
	}

	#esprits-menu .menu li a::before,
	#esprits-menu .menu li a::after {
		position: absolute;
		display: block;
		content: '';
		background: #cc4646;
		width: 1px;
		height: 100%;
		top: 0px;
		opacity: 0;
		transition: inherit;
	}
	#esprits-menu .menu li a::before {
		left: -1px;
		margin-right: 0px;
	}
	#esprits-menu .menu li a::after {
		left: 100%;
		margin-left: 0px;
	}

	#esprits-menu .menu li a:hover,
	#esprits-menu .menu li a:focus,
	#esprits-menu .menu li a.esprits-current-item,
	#esprits-menu .menu li.current-menu-item a {
		color: #cc4646;
	}

	#esprits-menu .menu li a:hover::before,
	#esprits-menu .menu li a:focus::before,
	#esprits-menu .menu li a.esprits-current-item::before,
	#esprits-menu .menu li.current-menu-item a::before {
		left: -21px;
		opacity: 1;
	}
	#esprits-menu .menu li a:hover::after,
	#esprits-menu .menu li a:focus::after,
	#esprits-menu .menu li a.esprits-current-item::after,
	#esprits-menu .menu li.current-menu-item a::after {
		margin-left: 20px;
		opacity: 1;
	}




/*
	********************************
	Style de la liste des catégories
	********************************
*/

	body:not(.home) #esprits-menu-list {
		position: fixed;
	}

	#esprits-menu-list {
		display: inline-block;
	}

	#esprits-menu-list,
	#esprits-menu-list ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}

	#esprits-menu-list ul li {
		font-size: 13px;
	}

	#esprits-menu-list li ul {
		padding-left: 20px;
	}

	#esprits-menu-list li a {
		font-weight: 400;
		text-transform: uppercase;
	}

	#esprits-menu-list > li > a {
		position: relative;
		font-weight: 500;
	}
	#esprits-menu-list > li > a::before {
		content: '';
		color: attr();
	}

	/* Catégorie courante */
	#esprits-menu-list li.current-cat > a {
		color: #cc4646;
		border-bottom: transparent;
	}

	/* “Retour” (page précédente) */
	#esprits-menu-previous-page {
		margin-top: 20px;
	}
	#esprits-menu-previous-page > span {
		color: #cc4646;
		line-height: 20px;		
		font-size: 16px;
	}