/*
 Theme Name:   DataMagic
 Description:  Egyedi gyereksablon.
 Author:       weart.hu
 Author URI:   https://weart.hu
 Template:     generatepress
 Version:      0.1
*/

/* BASICS */

body {
	background-image: url("./images/main-bg.svg");
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	&:not(.home) {
		article.page {
			padding: 40px;
			
			@media (max-width: 780px){
				padding: 20px;
			}
		}
	}
}

#page {
	position: relative;
	z-index: 1;
	background: url("./images/main-bg.svg") no-repeat center top #0c082b;
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Safari támogatás */
	border-radius: 3rem;
	max-width: 100% !important;
}


/* HEADER MENU */
.main-navigation {
	.main-nav {
		ul {
			li {
				a {
					border-radius: 0.75rem;
					border: 1px solid transparent;
				}
				a:hover {
					border: 1px solid rgba(255, 255, 255, 0.2);
				}
			}
			ul{
				border-radius: 0.75rem;
			}
		}
	}
}

/* CÍMLAP */
.home .site-content {
	padding: 0;
}

.site-content {
	.wp-block-cb-carousel-v2 .cb-button-next,
	.wp-block-cb-carousel-v2 .cb-button-prev {
		--wp--custom--carousel-block--navigation-color: #ffffff;
		@media (max-width: 780px){
			display: none;
		}
	}

	
	.wp-block-cb-carousel-v2 .cb-button-prev{ left:0 !important; }
	.wp-block-cb-carousel-v2 .cb-button-next{ right:0 !important; }
	
	
	#home-about {
		#home-about__title {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 1rem;
			strong {
				display: flex;
				border: 1px solid var(--contrast-3);
				padding: 0.5rem 1rem;
			}
		}
	}
}

/* BLOG */
.custom-category-list{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	li{
		list-style-type:none;
		padding: 0;
		margin: 1rem .5rem;
		a{
			display: inline-flex;
			padding: .75rem 1rem;
			font-size: 1rem;
			background: var(--accent);
			border-radius: 5px;
			color: white;
			text-decoration: none;
			font-weight: 600;
			letter-spacing: 1px;
			border: 1px solid var(--contrast-3);
			&:hover{
				background: var(--contrast-2);
			}
		}
	}
}

blockquote{
	border-color: var(--contrast-3);
}

.pum-container{
	background-color: #8978fa !important;
	background-image: radial-gradient(rgba(255,255,255,0) 0%,rgba(0,0,0,0.8) 100%) !important;
	iframe{
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* FOOTER */

#gform_submit_button_1{
	margin: 0 auto;
	font-size: 18px;
	
}