/*
 Theme Name:   GeneratePress Child
 Description:  Thème enfant pour mon nouveau projet
 Author:       Espace Islam
 Template:     generatepress
 Version:      1.0.0
*/


/* GLOBAL */

:root { 
	--mainColor: #25878a; 
	--secondColor: #eac435;
	--thirdColor : #e9f3f3;
	
	--lightGrey : #F8F8F8;
}

body{
	background-color: inherit;
}

/* TRANSITION */

.menuBurger *, 
.menuMobile{
	transition:.3s all ease-in-out;
}

/* BORDER SPACE */
.inside-article{
	padding:0px !important;
}
.post .inside-article,
.tag .site-main,
.category .site-main,
.gb-query-loop-pagination,
.inside{
	padding-left:25px !important;
	padding-right:25px !important;
}
.page > .inside-article,
.post > .category-entry{
	max-width:600px;	
	margin-left:50px;
	margin-right:50px;
}



.single-post .site-main{
	padding-left:0px;
}

@media (min-width: 700px) {
	.single-post .site-main{
		padding-left:50px;
		padding-right:40px;
	}
}

@media (max-width: 700px) {
	.single-post .site-main, 
	.home .gb-loop-item.post{
		padding-left:0px;
		padding-right:0px;
	}
	.page > .inside-article{
		margin-left:25px;
		margin-right:25px;
	}
	.post > .category-entry{
		margin-left:0px;
		margin-right:0px;
	}

}


/* LOGO */

.sitename span{
	color: var(--secondColor);
}
/* MOBILE */
.menuMobile{
	position: absolute;
	top:-150%;
	left:0px;
	z-index:999;
}
.menuOpen{
	overflow-y:hidden;
}
.menuOpen .menuMobile{
	top:0%;
}
.logged-in .menuMobile{
	margin-top:32px;
}

.menuBurger{
	position: relative;
	width:50px;
	height:50px;
}

.menuBurger span{
	height:2px;
	width:30px;
	position: absolute;
	top:20px;
	left:10px;
	background-color: #000;
	cursor:pointer;
}

.menuBurger span:nth-child(1){
	top:20px;
}
.menuBurger span:nth-child(2){
	top:26px;
}
.menuBurger span:nth-child(3){
	top:32px;
	width:15px;
	opacity:1;
}
.menuBurger:hover span:nth-child(3){
	width:30px;
}
.menuOpen .menuBurger span:nth-child(1), 
.menuOpen .menuBurger span:nth-child(2){
	top:25px;
	background-color: #FFF;
}
.menuOpen .menuBurger span:nth-child(1){
	transform: rotate(45deg);
	
}
.menuOpen .menuBurger span:nth-child(2){
	transform: rotate(-45deg);
}
.menuOpen .menuBurger span:nth-child(3){
	opacity:0;
}


#menu-menumain, 
#menu-menulegal{
	list-style: none;
}

.menu-menumain-container, 
.menu-menulegal-container{
	width:100%;
	text-align:center;
}

#menu-menumain, 
#menu-menulegal{
	display: flex;
	flex-direction:column;
	margin:0px;
}

#menu-menumain li {
	display: block;
	text-align:center;
}
#menu-menumain li a {
	font-size: 2.5em;
	font-family: Playfair Display, serif;
	color: #FFF;
	text-decoration:none;
	font-weight:bolder;
	position:relative;
}

#menu-menumain li.current-menu-item a {
	color: var(--secondColor);
}
#menu-menumain li.current-menu-item a:before {
	content: "";
	position: absolute;
	top:55%;
	left:-25%;
	width:150%;
	height:2px;
	background-color:#FFF;
}

#menu-menulegal{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
}
#menu-menulegal li a {
	padding: 10px 30px;
	background-color: rgba(255, 255, 255, .25);
	color: #FFF;
	border-radius:100px;
	font-size:14px;
	text-decoration: none;
	margin:2px;
}

/* TTS */

.tts-controls[data-status="stop"] #tts-pause, 
.tts-controls[data-status="stop"] #tts-stop, 
.tts-controls[data-status="stop"] #tts-config{
	display: none;
}
.tts-controls[data-status="playing"] #tts-play, 
.tts-controls[data-status="playing"] #tts-stop,
.tts-controls[data-status="playing"] #tts-config{
	display: none;
}

.tts-controls[data-status="paused"] #tts-pause,
.tts-controls[data-status="paused"] #tts-stop,
.tts-controls[data-status="paused"] #tts-config{
	display: none;
}

.tts-controls[data-status="playing"]:hover #tts-stop, 
.tts-controls[data-status="paused"]:hover #tts-stop,
.tts-controls:hover #tts-config{
  display: inline-block;
}


@media (max-width: 700px) {
	.tts-controls[data-status="stop"] #tts-config, 
	.tts-controls[data-status="playing"] #tts-config,
	.tts-controls[data-status="paused"] #tts-config, 
	.tts-controls:hover #tts-config, 
	.tts-controls[data-status="playing"] #tts-stop, 
	.tts-controls[data-status="paused"] #tts-stop, 
	.tts-controls:hover #tts-stop, 
	.tts-controls[data-status="playing"]:hover #tts-stop, 
	.tts-controls[data-status="paused"]:hover #tts-stop{
		display: inline-block;
	}
	.tts-controls[data-status="stop"] #tts-stop{
		display: none;
	}

}


/* POST */


.tts-line{
	position: relative;
}
.tts-line:before{
	content:"";
	position:absolute; 
	top:0px;
	left:-50px;
	width:1px;
	height:100%;
	background-color: #eee;
}

.tts-controls{
	position: sticky;
	top:25vh;
	margin-left:-73px;
	display: flex;
	flex-direction: column;
	width:46px;
	height:46px;
	
}

@media (max-width: 700px) {
	
	.tts-controls{
		position: sticky;
		width:100%;
		margin-bottom:15px;
		margin-left:0px;
		flex-direction:row;
		justify-content:flex-start;
		background-color: #EEE;
		top:0vh;
		z-index:99;
	}
}

.tts-btn{
	padding:0px;
	width:46px;
	height:46px;
	line-height:40px;
	border-radius: 100px;
	border:3px solid #FFF;
}
@media (max-width: 700px) {
	.tts-btn{
		border-width:0px;
		border-radius: 0px;
		width:46px !important;
	}
	.tts-btn#tts-config{
		margin-left: auto;
	}
}

.tts-btn svg{
	width:15px;
}
.scrolling #tts-play{
	background-color: #EEE;
}
@media (max-width: 700px) {
	.scrolling #tts-play{
		background-color: var(--secondColor);
	}
}
#tts-play, 
#tts-play:hover{
	background-color: var(--secondColor);
	fill:#FFF;
}
#tts-pause{
	background-color: var(--thirdColor);
	fill: var(--mainColor);
}
#tts-stop{
	background-color: #ddd;
	fill: #fff;
}
#tts-config{
	background-color: var(--mainColor);
	fill: #FFF;
}


#tts-config-panel{
	position: fixed;
	top:0px;
	left:0px;
	height:0px;
	overflow-y:auto;
	width:100vw;
	height:100vh;
	display: flex;
	z-index:111;
	align-items:center;
	justify-content:center;	
	background-color: rgba(0, 0, 0, .5)
}
#tts-config-panel .tts-config-container{
	max-width:600px;
	width: max-content;
	background-color: #FFF;
	padding:50px;
}
#tts-config-panel .tts-config-field, 
#tts-config-panel .tts-explication{
	margin-bottom:20px;
}

#tts-config-panel button{
	border-radius:100px;
	padding: 10px 30px;
	font-size:16px;
}

#tts-test-voice{
	background-color: var(--mainColor);
	border:1px solid var(--mainColor);
	color: #FFF;
}
#tts-save-close{
	background-color: var(--secondColor);
	border:1px solid var(--secondColor);
	color: #FFF;
}
#tts-clear-cache{
	background-color: inherit;
	color: #000;
	border:1px solid #000;
}


@media (max-width: 700px) {
	.tts-info{
		display: none !important;
	}
}


/* SOURCE */
.doc p{
	display: list-item;
    list-style: decimal;
    margin: 0px 0px 5px 20px;
}
/* SUGGESTIONS */
.articles-similaires{
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.articles-similaires .item-similaire{
	display: flex;
}
.articles-similaires .item-similaire a{
	padding:10px 30px;
	border-radius:100px;
	background-color: #FFF;
	border: 1px solid var(--mainColor);
	font-size:16px;
	color: var(--mainColor);
	margin: 0px 5px 5px 0px;
	text-decoration: none;
}
.articles-similaires .item-similaire a:hover{
	background-color: var(--mainColor);
	color: #FFF;
}


/* CATEGORIES */
.page-header {
	background-color: var(--thirdColor) !important;
	margin-bottom:50px;
	position: relative;
	border-left:3px solid var(--mainColor);
}
.page-header .page-title{
	font-family: Playfair display, serif;
	font-weight:bolder;	
	color: var(--mainColor);
}
/* THEMES */
.alphabet-container .letter-section{
	position: relative;
	margin-bottom:0px;
	padding-top:100px;
}
.alphabet-container .big-letter{
	position: absolute;
	z-index:9;
	font-size:7em;
	line-height:0px;
	color: #EEE;
	font-family: Playfair display, serif;
}
.alphabet-container .terms-grid{
	position: relative;
	z-index: 11;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	padding-left:50px;

}
.alphabet-container .terms-grid a{
	background-color: #FFF;
	color: var(--mainColor);
	border:1px solid var(--mainColor);
	text-decoration: none;
	padding:10px 30px;
	border-radius: 100px;
	margin-right:5px;
	margin-bottom:5px;
	font-size:16px;
}
.alphabet-container .terms-grid a:hover{
	background-color: var(--mainColor);
	color:#FFF;
}


/* INDEX */
.themes > p{
	display: flex;
	flex-direction:row;
	gap:5px;
}
.themes > p:hover{
	text-decoration:none;
}
.themes > p > a:hover{
	text-decoration:underline;
}

/* custom-article-loop */
@media (min-width: 700px) {
	.custom-article-loop {
		margin:0 40px -40px !important;
	}
}

.custom-article-loop .article-item{
	margin-bottom:75px;
}
.custom-article-loop .article-item:last-of-type{
	margin-bottom:50px !important;
}

.custom-article-loop .article-meta{
	font-weight:normal !important;
}
.custom-article-loop .article-meta a{
	color: var(--mainColor);
	text-decoration: none;
	text-transform: initial;
	font-weight:normal;
}
.custom-article-loop .article-meta a:hover{
	text-decoration: underline;	
}

.custom-article-loop .article-button a{
	padding:10px 30px;
	border:1px solid #CCC;
	background-color: inherit;
	color: #888;
	border-radius:100px;
	font-size:16px;
}
.custom-article-loop .article-button a:hover{
	border:1px solid var(--mainColor);
	color: #FFF;
	background-color: var(--mainColor);
}

/* PAGINATION */

.paging-navigation, 
.custom-prev-next{
	width:100% !important;
}
.paging-navigation .nav-links, 
.custom-prev-next .page-numbers{
	list-style: none;
	margin:0px;
	padding:20px;
	display: flex;
	justify-content:space-between;
}
.paging-navigation .nav-links .next{
	display: flex;
	flex-direction:row-reverse;
}
.paging-navigation .nav-links .next span{
	padding-left:5px;
}
.custom-prev-next .page-numbers li, 
.custom-prev-next .page-numbers li span{
	display: none;
}
.custom-prev-next .page-numbers li:first-child, 
.custom-prev-next .page-numbers li:last-child{
	display: block;
}
.custom-prev-next .page-numbers li a{
	color: var(--mainColor);
	padding:10px 0px;
}
/* MEP */

#tts-readable p{
	line-height:170%;
}
.sunna, 
.coran{
	margin-top:40px;
	margin-bottom:20px;
	font-family:Playfair display, serif;
	font-size:1.25rem;
	line-height:150%;
}
.coran{
	font-weight:bolder;
}
.coran:before{
	content:"﴾"
}
.coran:after{
	content:"﴿";
}
.sunna{
	font-style:italic;
}
.sunna:before, 
.sunna:after{
	font-size:2rem;
	position: relative;
	line-height:1rem;
	top:5px;
}
.sunna:before{
	content:'“';
	padding-right:3px;	

}
.sunna:after{
	content:'”';
}
.sunna, 
.coran, 
.source{
	margin-left:50px;
	margin-right:50px;
}
@media (max-width: 700px) {
	.sunna, 
	.coran, 
	.source{
		margin-left:0px;
		margin-right:0px;
	}
}

.source{
	border-top:1px solid #CCC;
	text-transform: uppercase;
	font-size:12px;
	text-align:right;
	padding-top:5px;
	margin-bottom:40px;
}

.wp-block-quote{
	font-size:1rem;
	padding: 20px;
	background-color: #F9F9F9;
	border-radius:25px;
	border-left: 5px solid rgba(0,0,0,.05);
	border-right: 5px solid rgba(0,0,0,.05);
}

article ul, 
article ol{
	line-height:170%;
}

#tts-readable ol li{
	margin-bottom:10px;
}

#tts-readable .wp-block-separator{
	border: 0px;
	background-color: #FFF;
	border-top:1px dashed #CCC;
	margin-top:50px;
}
#tts-readable .ending > p{
	background-color: var(--mainColor);
	color:#FFF;
	width:max-content;
	margin-left:auto;
	text-transform: uppercase;
	padding:10px 20px;
	font-weight:bolder;
	font-size:12px;
}
#tts-readable .ending{
	border-top:1px solid var(--mainColor);
	margin-top:50px;
}