/*
Theme Name: Jurnal PGRI Garut
Theme URI: https://jurnal.pgrikabgarut.or.id/
Author: KabizaWebDev
Author URI: http://kabizawebdev.com/
Description: Exclusive Theme for Jurnal PGRI Kabupaten Garut
*/

:root{
	--warna1: #3956ef;
	--warna2: #dbeafe;
	--warna3: #21c267;
	--montserrat : 'Montserrat', sans-serif;
}

/* side scroll */
body::-webkit-scrollbar{
  width: 0.5rem;
}

body::-webkit-scrollbar-track{
  background-color: transparent
}

body::-webkit-scrollbar-thumb{
  background-color: var(--warna1);
	/* border-radius: 5px; */
}

/* Build class */
/* background */
.bg-warna1{
	background-color: var(--warna1);
}
.bg-warna2{
	background-color: var(--warna2);
}
.bg-warna3{
	background-color: var(--warna3);
}
/* background hover*/
.hover\:bg-warna1:hover{
	background-color: var(--warna1);
}
.hover\:bg-warna2:hover{
	background-color: var(--warna2);
}
.hover\:bg-warna3:hover{
	background-color: var(--warna3);
}

/* text */
.text-warna1{
	color: var(--warna1);
}
.text-warna2{
	color: var(--warna2);
}
.text-warna3{
	color: var(--warna3);
}
/* text hover */
.hover\:text-warna1:hover{
	color: var(--warna1);
}
.hover\:text-warna2:hover{
	color: var(--warna2);
}
.hover\:text-warna3:hover{
	color: var(--warna3);
}
.group:hover .group-hover\:bg-warna1{
	background-color: var(--warna1);
}
.group:hover .group-hover\:bg-warna2{
	background-color: var(--warna2);
}
.group:hover .group-hover\:bg-warna3{
	background-color: var(--warna3);
}
.group:hover .group-hover\:text-warna1{
	color: var(--warna1);
}
.group:hover .group-hover\:text-warna2{
	color: var(--warna2);
}
.group:hover .group-hover\:text-warna3{
	color: var(--warna3);
}
.border-warna1{
	border-color: var(--warna1);
}
.border-warna2{
	border-color: var(--warna2);
}
.border-warna3{
	border-color: var(--warna3);
}
.my-font{
	font-family: var(--montserrat);
}

/* Warta Style */
#navbar li{
	width: 50%;
}
#navbar li:hover{
	background-color: var(--warna2);
	color: var(--warna1);
}

#navbar li a{
	padding: 10px 0;
	display: block;
}

/* swipper Scroll */
.swiper-container-horizontal>.swiper-scrollbar{
	left: 0;
	width: 100%;
	bottom: 0;
	height: 3px;
}

.swiper-scrollbar-drag{
	background-color: var(--warna2);
}

.the-category a{
	color: var(--warna1);
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: bold;
}

/* Navigasi Style */
.pagination{
	margin-top: 4rem;
	box-sizing: border-box;
}

.screen-reader-text{
	display: none;
}

.pagination>.nav-links{
	display: block;
	text-align: center;
	padding: 1rem 1rem;
}

.pagination>.nav-links>.page-numbers{
	padding: .5rem 1rem;
	background-color: white;
	border-radius: 8px;
	font-weight: bold;
	font-family: var(--montserrat);
	color: gray;
	box-shadow: var(--warna2);
}

.pagination>.nav-links>.page-numbers:hover{
	background-color: var(--warna2);
	color: white;
}

.pagination>.nav-links>.current{
	background-color: var(--warna2);
	color: white;
}

.wp-block-embed iframe{
	width: 100%;
	height: 500px;
}

/* comments */
#comments{
	margin-bottom: 1.5rem;
}

.comment{
	background-color: hsl(0, 0%, 95%);
	margin-bottom: 1rem;
	padding: 1.5rem 1rem;
}

.comment-body{
	border-bottom: 1px solid lightgrey;
}

.comment-body p{
	padding: 1rem 0;
}

.comment-body .reply{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.comment-body .reply a{
	margin-left: auto;
	padding: 0 1rem;
	display: inline-block;
	background-color: var(--warna2);
	color: white;
	border-radius: 5px;
}

.comment-author img{
	display: inline;
}

.comment-author .fn{
	font-weight: bold;
	margin-left: .5rem;
}

.comment-author .says{
	font-size: .8rem;
}

.comment-meta a{
	font-size: .8rem;
}

.children{
	margin-left: 8rem;
	border-left: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
}

/* Respond */
#respond{
	background-color: hsl(0, 0%, 95%);
	padding: 1.5rem 1rem;
}

#reply-title{
	margin-bottom: 1rem;
	color: var(--warna2);
	font-size: 1.5rem;
	font-family: var(--montserrat);
	font-weight: bold;
}

.comment-form{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.comment-form textarea{
	padding: .5rem;
	border: .5px solid var(--warna2);
	border-radius: 5px;
}

.comment-form input{
	padding: .5rem;
	border: .5px solid var(--warna2);
	border-radius: 5px;
}

.comment-notes{
	grid-column: span 2 / span 2;
}

.comment-form-comment{
	display: flex;
	flex-direction: column;
	grid-column: span 2 / span 2;
}

.comment-form-author{
	display: flex;
	flex-direction: column;
}

.comment-form-email{
	display: flex;
	flex-direction: column;
}

.comment-form-url{
	grid-column: span 2 / span 2;
	display: flex;
	flex-direction: column;
}

.comment-form-cookies-consent{
	grid-column: span 2 / span 2;
}

.form-submit{
	grid-column: span 2 / span 2;
	display: flex;
}

.form-submit .submit{
	margin-left: auto;
	padding: .5rem 1rem;
	background-color: var(--warna2);
	color: white;
}

/* download */
.wp-block-file{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.wp-block-file *+.wp-block-file__button{
	margin-left: 0;
	border-radius: 5px;
	padding: .3rem .5rem;
	display: inline-flex;
	align-items: center;
	background-color: var(--warna1);
}

.wp-block-file *+.wp-block-file__button::before{
	content: url(assets/svg/bxs-file-pdf.svg);
	margin-right: .5rem;
}

.the-jurnal-archives:first-child{
	padding-top: 0;
}

#side-navbar>li>a{
	padding: 1rem 0;
}

#side-navbar>li:hover>a{
	margin-bottom: .5px solid var(--warna1);
}

/* Responsive */
/* 'sm': '640px', */
@media (min-width: 640px) {

}

/* 'md': '768px', */
@media (min-width: 768px) {
	#navbar li{
		width: 20%;
	}
}

/* 'lg': '1024px', */
@media (min-width: 1024px) {
	#navbar li{
		width: 16.666667%;
	}
}

/* 'xl': '1280px', */
@media (min-width: 1280px) {

}

/* '2xl': '1536px', */
@media (min-width: 1536px) {

}