/*
Theme Name:         KERET HUSZONHAT
Theme URI:          https://keretblog.hu
Description:        A KERET 2026-os kin
Version:            1.0
Author:             Domi / Thursday Eleven
Author URI:         https://thursday-eleven.com
Text Domain:        keret
License:            IDK License
License URI:        https://thursday-eleven.com 
Requires PHP:       8.3
Requires at least:  6.6
*/

@font-face {
	font-family: TexCnRegular;
	src: url(./assets/fonts/texgyreheroscn-regular.woff2) format(woff2);
	src: url(./assets/fonts/texgyreheroscn-regular.woff) format(woff);
}

@font-face {
	font-family: TexCnBold;
	src: url(./assets/fonts/texgyreheroscn-bold.woff2) format(woff2);
	src: url(./assets/fonts/texgyreheroscn-bold.woff) format(woff);
}

@font-face {
	font-family: Perforgrama;
	src: url(./assets/fonts/Perfograma.woff2) format(woff2);
	src: url(./assets/fonts/Perfograma.woff) format(woff);
}

@font-face { 
	font-family: TexReg;
	src: url(./assets/fonts/texgyreheros-regular.woff2) format(woff2);
	src: url(./assets/fonts/texgyreheros-regular.woff) format(woff);
}

:root { 
	--color-background: #0D0711;
	--color-text: #CDC8BC;
	--color-red: #FF1818;
	--color-purple: #C37CDE;
	--color-neon-purple: #A200FF;
	--color-dark-purple: #210B4C;
	--color-blue: #184EFF;
	--color-bright-blue: #3e15ff;
	--color-yellow: #FAE301;
	--color-green: #75BD6D;
	--color-grey: #7E7E7E;
	--color-aqua: #6BB7E8;
	--color-hirlevelbg: #101010;
	--color-hirlevelcolor: #e8db25;


	--size-font-text: 18px;
	--size-font-xs: 14px;
	--size-font-sm: 1.25rem;
	--size-font-md: 1.5rem;
	--size-font-lg: 3rem;
	--size-font-xl: 4rem;
	--size-font-mxl: 6rem;
	--size-font-xxl: 8rem;

	--spacing-character-text: .1rem;
	--spacing-xs: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-section: 10rem;
	--spacing-grid-gap: 1rem;

	--layout-gap: 1rem;

	
}

* { 
	margin: 0;
	border: 0;
	font-weight: 100;
}

p { 
	font-family: TexCnRegular;
}

img {
	object-fit: cover;
}

a {
	text-decoration: none;
	color: inherit;
}

.has-strong-magenta-background-color {
	background-color: #313131;
}

.has-strong-magenta-color {
	color: #f78da7;
}

.has-regular-font-size {
	font-size: 16px;
}

body {
	font-family: TexReg, Arial, Helvetica, sans-serif;
	color: var(--color-text);
	background-color: var(--color-background);
	font-size: var(--size-font-text);
}

.big-nav {
	padding: var(--spacing-md);
	justify-content: space-between;
	align-items: start;
	top: 0;
	background-color: var(--color-bright-blue);
	position: relative;
	z-index: 99;
	.big-nav-inner{ 
		display: flex;
		justify-content: space-between;
		align-items: start;
	}
	.logo-search { 
		display: flex;
		flex-direction: column;
		
	}
	.logo {
		width: 300px;
	}
	ul { 
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 0
	}
	ul,li { 
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		font-family: TexCnBold;
		font-size: var(--size-font-lg);
		line-height: 100%;
		
	}
	li a { 
		color: var(--color-background) !important;
		border-radius: 50%;
		overflow: hidden;
	}
	li a:hover { 
		background-color: var(--color-neon-purple);
		color: var(--color-text);
	}
}
.big-nav-search { 
	position: relative;
	z-index: 14;
	background-color: var(--color-yellow);
	
	form { 
		width: 100%;
		background-color: var(--color-yellow);
		display: flex;
	justify-content: center;
		color :red;
		* { 
			transition: 1s ease;
		}
		
	}
	
}

.big-nav-search input#search {
	background-color: var(--color-yellow);
	font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
	font-size: var(--size-font-md);
	text-align: center;
	color: var(--color-background);
	width: 100%;
	box-sizing: border-box;
	opacity: 1;
	outline: none;
	}

.big-nav-search input#search:focus {
	background-color: var(--color-aqua) !important;
	color: var(--color-background) !important;
	font-size: var(--size-font-mxl )!important;
	line-height: 100%;
}

.big-nav-search input#search:focus-visible {
	outline: 2px solid purple;
}


.search-nav-search { 
	position: relative;
	z-index: 14;
	background-color: var(--color-yellow);
	
	form { 
		width: 100%;
		background-color: var(--color-yellow);
		display: flex;
	justify-content: center;
		color :red;
		* { 
			transition: 1s ease;
		}
		
	}
	
}

.search-nav-search input#search {
	background-color: var(--color-yellow);
	font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
	font-size: var(--size-font-md);
	text-align: center;
	color: var(--color-background);
	width: 100%;
	box-sizing: border-box;
	opacity: 1;
	outline: none;
	}

.search-nav-search input#search:focus {
	background-color: var(--color-aqua) !important;
	color: var(--color-background) !important;
	line-height: 100%;
}

.search-nav-search input#search:focus-visible {
	outline: 2px solid purple;
}

	.small-nav { 
		top: 0;
		width: 100%;
		position: fixed;
		background-color: var(--color-background);
		z-index: 13;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			width: 135px;
			padding-left: calc(var(--spacing-md) - 12.5px);
		}


		.mobile-menu { 
			padding-right: var(--spacing-md);
			z-index: 99999;
			form {
				display: none;
			}
		}
	ul { 
		display: flex;
		gap: var(--spacing-grid-gap);

	}
	ul,li { 
		list-style: none;
		margin: 0;
		padding: 0;
		width: max-content;
	}

	li a { 
		color: var(--color-text) !important;
		font-size: var(--size-font-md);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
	}

	li a:hover { 
		background-color: var(--color-neon-purple);
	}
	
	}


.flickity-viewport { 
	transition: height 1s ease;
	min-height: 700px;
}

.featured { 
	position: relative;
	z-index: 20;
	background-color: var(--color-purple);
	.button-row { 
		position: sticky;
		top: 0;
		display: flex;
		z-index: 21;
		background-color: var(--color-background);
		justify-content: space-between;
		cursor: pointer;
		
		.button-group {
			display: flex;
			justify-content: space-between;
			width: 100%;
			button:hover { 
				background-color: var(--color-grey);
			}
		}

		button { 
			background-color: var(--color-background);
			transition: 1s ease;
			color: var(--color-text);
			width: 100%;
			font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			font-size: var(--size-font-sm);
		}

		button:hover {
			border-radius: 50%;
			transition: .5s ease;
			cursor: pointer;
			color: var(--color-background);
			background-color: var(--color-red);
		}
		.is-selected { 
			border-radius: 50%;
			background-color: var(--color-red);
			transition: 1s ease;
			color: var(--color-background);
		}
		.button--previous, .button--next { 
			background-color: var(--color-grey);
			:hover {
				border-radius: 50%;
			}
		}
	}
	.carousel-cell {
		margin-top: var(--spacing-xs);
		margin-bottom: var(--spacing-xs);
		background-color: var(--color-background);
		width: 50%; /* full width */
		margin-right: var(--spacing-xs);
		padding: var(--spacing-md);
		p { 
			font-family: TexReg, Arial, Helvetica, sans-serif;
			font-size: var(--size-font-md);
			padding: var(--spacing-xs) 0;
		}
		img {
			width: 100%;
			height: auto;
		}
		h2 { 
			font-family: TexCnBold;
			font-size: var(--size-font-lg);
			line-height: 100%;
			hyphens: auto;
		}
	}

	.carousel-cell:hover{ 
		border: 1rem dashed var(--color-red);
		padding: 1rem;
	}

	.carousel-cell:nth-child(1) {
		width: 85%;
		img{
			width: 45%;
			float: right;
			shape-outside: circle();
			border-radius: 50%;
			padding: var(--spacing-md);
			aspect-ratio: 1/1;
			object-fit: cover;
			animation: rota 40s infinite linear;
		}
		h2 { 
			font-size: var(--size-font-mxl);
			line-height: 100%;
		}
		
	}

	.carousel-cell:nth-child(2) {
		width: 80%;
		text-align: center;
		img{
			width: 45%;
			float: right;
			border-radius: 50%;
			padding: var(--spacing-md);
		}
		h2 { 
			font-size: var(--size-font-mxl);
			line-height: 100%;
		}
		
	}

	.carousel-cell:nth-child(3) {
		width: 75%;
		img{
			width: 45%;
			float: right;
				border-radius: 50%;
			padding: var(--spacing-md);
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		
	}

.carousel-cell:nth-child(4) {
		width: 70%;
		img{
			width: 50%;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		
	}

	.carousel-cell:nth-child(5) {
		width: 45%;
		img {
			animation: borderradius 20s infinite alternate;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		
	}

	.carousel-cell:nth-child(6) {
		width: 50%;
		
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
	
	}


		.carousel-cell:nth-child(7) { 
			width: 70%;
		img {
			aspect-ratio: 1/1;
			float: right;
			object-fit: cover;
			border-radius: 50%;
			width: 50%;
		}
		h2 { 
			font-size: var(--size-font-mxl);
			line-height: 100%;
		}
		
	}


	.carousel-cell:nth-child(8) { 
		img {
			aspect-ratio: 1/1;
			object-fit: cover;
			animation: rota 20s infinite linear;
			border-radius: 50%;
		}
	}
	
	.carousel-cell:nth-child(9) {
		width: 50%;
		img{
			width: 45%;
			aspect-ratio: 1/1;
			float: right;
			shape-outside: circle();
			border-radius: 50%;
			padding: var(--spacing-md);
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		
	}
	

	.flickity-page-dots {
		position: block !important;
	}
}
.container-full:has(.hirlevel-playlist) { 
	background-color: var(--color-hirlevelbg);
}

.hirlevel-playlist { 
	grid-column: col-start 2 / span 10; 
	grid-template-columns: repeat(12, [col-start] 1fr);
	display: grid;
	gap: var(--spacing-grid-gap);
}

.hirlevel { 
	color: var(--color-hirlevelcolor) !important;
	grid-column: col-start 2 / span 10;
	padding: var(--spacing-section) 0;
	display: flex;
	flex-direction: column;
		.mailpoet-heading { 
			font-size: var(--size-font-xl);
			text-align: center !important;
			padding: 0 var(--spacing-md);
			font-family: Perforgrama, arial, helvetica, sans-serif;
		}
		/* ezek a checkek, mit kuldhetunk?  */
		/* elrejti a default checkboxoat  */
		.mailpoet_checkbox_label .mailpoet_checkbox {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		/* Unchecked */
		.mailpoet_checkbox_label::before {
			content: "O";
			font-family: Perforgrama, arial, helvetica, sans-serif !important;
			font-size: var(--size-font-lg);
			line-height: 1;
		}


		/* Checked */
	
	.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked) { 
			background-color: var(--color-hirlevelcolor);
			color: var(--color-background);
		}

		.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked):hover { 
			background-color: var(--color-grey);
			color: var(--color-hirlevelcolor);
		}

		.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked)::before {
			content: "X";
			color: var(--color-background);
		}

		#mailpoet_form_3 form.mailpoet_form {
			padding: 0 !important;
		}
	
	fieldset {
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		width: 100%;
		label { 
			width: 100%;
			border-bottom: .1rem solid var(--color-hirlevelcolor);
			font-size: var(--size-font-lg);
			height: max-content; 
			padding: var(--spacing-xs) 0;
			line-height: 100%;
			text-align: center;
			cursor: pointer;
			font-family: perforgrama, Arial, Helvetica, sans-serif;
		}
		label:hover {
			color: var(--color-hirlevelcolor);
		}
	}

}

.email-cim input {
	margin-top: var(--spacing-md) !important; 
	background: none !important;
	font-family: Perforgrama, arial, helvetica, sans-serif !important;
	font-size: var(--size-font-lg);
	line-height: 100%;
	text-align: center;
	color: var(--color-hirlevelcolor);
}

.mailpoet_paragraph { 
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;

}

.mailpoet_submit { 
	font-family: Perforgrama, arial, helvetica, sans-serif !important;
	font-size: var(--size-font-xl);
	color: var(--color-hirlevelcolor);
	background: none;
	border: none;
	box-shadow: none;
	margin: 0 !important;
	cursor: pointer;
		input:hover{
			color: var(--color-purple) !important;
			background-color: var(--color-purple) !important;
		}
}

.mailpoet-submit:hover {
	color: var(--color-yellow)
}

/* subscription page management cuccai */

.hirlevel-sub-management-page { 
	padding-top: var(--spacing-section);
	color: var(--color-yellow);
	background-color: var(--color-hirlevelbg);
	h1 { 
		text-align: center;
		grid-column: col-start 2 / span 10; 
		font-family: Perforgrama, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-xl);
	}
	.mailpoet-manage-subscription { 
		grid-column: col-start 2 / span 10; 
			text-align: center;
			font-family: Perforgrama;
	}

	.mailpoet_paragraph { 
		font-size: var(--size-font-md);
		margin-top: var(--spacing-md);
		span { 
			width: 70%;
		}
	}


	fieldset {
		margin: var(--spacing-md);
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		padding: 0;
		width: 100%;
		legend { 
			margin: auto;
		}
		label { 
			width: 100%;
			border-bottom: .1rem solid var(--color-hirlevelcolor);
			font-size: var(--size-font-lg);
			height: max-content; 
			padding: var(--spacing-xs) 0;
			line-height: 100%;
			text-align: center;
			cursor: pointer;
			font-family: perforgrama, Arial, Helvetica, sans-serif;
		}
		label:hover {
			color: var(--color-background);
			background-color: var(--color-hirlevelcolor);
		}

		.mailpoet-heading { 
			font-size: var(--size-font-xl);
			text-align: center !important;
			padding: 0 var(--spacing-md);
			font-family: Perforgrama, arial, helvetica, sans-serif;
		}
		/* ezek a checkek, mit kuldhetunk?  */
		/* elrejti a default checkboxoat  */
		.mailpoet_checkbox_label .mailpoet_checkbox {
			position: absolute;
			opacity: 0;
			pointer-events: none;
			background-color: var(--color-hirlevelcolor);
		}

		/* Unchecked */
		.mailpoet_checkbox_label::before {
			content: "O";
			font-family: Perforgrama, arial, helvetica, sans-serif !important;
			font-size: var(--size-font-lg);
			line-height: 1;
		}

		/* Checked */

		.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked) { 
			background-color: var(--color-hirlevelcolor);
			color: var(--color-background);
		}

		.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked):hover { 
			background-color: var(--color-grey);
			color: var(--color-hirlevelcolor);
		}

		.mailpoet_checkbox_label:has(.mailpoet_checkbox:checked)::before {
			content: "X";
			color: var(--color-background);
		}

		#mailpoet_form_3 form.mailpoet_form {
			padding: 0 !important;
		}
	}

	.mailpoet_text_label { 
		margin-top: var(--spacing-md);
		font-size: var(--size-font-lg);
	}



}



.playlist { 
	grid-column: col-start 7 / span 6; 
	background-color: var(--color-background);
	padding: var(--spacing-section) 0;
	h2 { 
		font-family: TexCnBold, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-lg);
		line-height: 100%;
		color: var(--color-text);
		text-align: left;
	}
	.spinning-disc { 
		top: calc(65px + var(--spacing-md));
		position: sticky;
		overflow: hidden;
		svg { 
			width: 100%;
			aspect-ratio: 1/1;
			height: max-content;
			animation: minusrota 20s infinite linear ;
		}
	}
	.playlist-cover { 
		padding: var(--spacing-md);
		position: relative;
		margin-top: -51%;
		max-width: 673px;
		aspect-ratio: 1/1;
		background-color: var(--color-blue);
		iframe { 
			margin: var(--spacing-md) 0;
		}
	}
}



.heti-bontas {
	grid-column: col-start 2 / span 10; 
	padding: var(--spacing-md) 0;
	.heti-bontas-left { 
		top: calc(65px + var(--spacing-md));
		position: sticky;
		grid-column: col-start 1 / span 6;
		height: max-content;
		.heti-bontas-excerpt { 
			color: var(--color-background);
			background-color: var(--color-neon-purple);
			font-size: var(--size-font-text);
		}
		img { 
			width: 100%;
			height: auto;
		}
		img::after { 
			content: attr("alt");
		}
	}
	.heti-bontas-right { 
		grid-column: col-start 7 / span 6;
		.wp-block-paragraph { 
			display: none;
			visibility: hidden;
		}
		.program-item { 
			border-bottom: 3px solid var(--color-neon-purple);
			padding: var(--spacing-xs) 0;
			a {
				text-decoration: underline;
				color: var(--color-red);
				font-family: TexCnBold;
			}
			.wp-block-paragraph { 
				display: block;
				visibility: visible;
			}
		}

		.program-item:last-child { 
			border-bottom: 0px;
		}

		.program-item:has(a:hover) { 
			background-color: var(--color-red);
			color: var(--color-background);
			a { 
				color: var(--color-background);
			}

			h3  {
				color: var(--color-background);
			}
		}

		h3 { 
			font-family: 'Courier New', Courier, monospace;
			color: var(--color-red);
			
		}

		p {
			font-size: var(--size-font-md);
		}
		
		}
		figure { 
		display: none;
		visibility: hidden;
	}
	.heti-bontas-weather { 
		margin-bottom: var(--spacing-xs);

	}
	.heti-bontas-weather p { 
		color: var(--color-red);
		font-family: 'Courier New', Courier, monospace;
	}

	}

	



/* LAYOUT */
.container { 
	max-width: 1540px;
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
 	gap: var(--spacing-grid-gap);
	margin: 0 auto;
}

.container-full{
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
}

.color-fill { 
	background-color: var(--color-neon-purple);
	padding: var(--spacing-grid-gap);
}

.section-title {
	background-color: var(--color-blue);
	font-family: TexCnBold;
	text-align: center;

	h1 {
		font-size: var(--size-font-sm);
	}
	
}

.section-title-sticky {
	z-index: 12;
	position: sticky;
	top: 65px;
	background-color: var(--color-blue);
	font-family: TexCnBold;
	text-align: center;

	h1 {
		font-size: var(--size-font-sm);
	}
	
}



.section-title-sticky-bottom {
	z-index: 12;
	position: sticky;
	bottom: 0px;
	background-color: var(--color-blue);
	font-family: TexCnBold;
	text-align: center;

	h1 {
		font-size: var(--size-font-sm);
	}
	
}

.section-title-sticky-large{
		h1 {
		font-size: var(--size-font-lg);
	}
	
	}


/* MAIN FEED LAYOUT */


.feed-item { 
	padding: 2rem;
	height: max-content;
	background-color: var(--color-background);
	overflow: hidden;
	img {
		width: 100%;
		height: auto;
		z-index: -30;
	}

	h2 { 
		font-family: TexCnBold, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-xl);
		line-height: 110%;
		hyphens: auto;
	}


	p {
		font-size: var(--size-font-md);
		font-family: TexReg, Arial, Helvetica, sans-serif;
		padding: var(--spacing-xs) 0;
		line-height: 150%;
	}


}

.feed-opt { 
	width: max-content;
	display: flex;
	font-size: var(--size-font-sm);
	gap: .2rem;
}


.feed-cat { 
	display: flex;
	align-items: start;
	justify-content: space-between;
	align-content: start;
	text-align: left;
	letter-spacing: var(--spacing-character-text);
	
	gap: var(--spacing-xs);
	width: 100%;
	height: max-content;
	overflow: hidden;

	:hover { 
		background-color: var(--color-blue);
	}

	a {
		font-size: var(--size-font-sm);
		text-align: left;
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
		display: block;
		text-align: center;

		
	}
	a p {
		font-size: var(--size-font-sm) !important;
		padding: 0 !important;
		margin: 0 !important;
		text-align: left;
		font-size: var(--size-font-sm);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
	
	}

	.feed-category { 
		display: flex;
		gap: .4rem;
	}
}

.feed-item:hover {
		border: 1rem dotted var(--color-red);
		padding: 1rem;
		transition: height 10s ease;
	}

/* h2:hover { 
	animation: blink 10s infinite linear !important;
} */
/* 

@keyframes blink {
	0% { 
		color: var(--color-blue);
	}

	25% { 
		color: var(--color-green);
	}

	50% { 
		color: var(--color-red);
	}

	75% { 
		color: var(--color-yellow);
	}

	100% { 
		color: var(--color-neon-purple);
	}
	
} */


.feed-item:nth-child(1){ 
	grid-column: col-start 1 / span 12;
		img { 
			width: 50%;
			float: left;
			padding: var(--spacing-grid-gap);
			padding-left: 0;
		}
}

.feed-item:nth-child(2) { 
	grid-column: col-start 1 / span 6;
		h2  {
			font-size: var(--size-font-lg);
			line-height: 120%;
		}

		img { 
			width: 50%;
			float: right;
			padding: var(--spacing-grid-gap);
			padding-right: 0rem;
		}
}	

.feed-item:nth-child(3){ 
	grid-column: col-start 7 / span 6;
	h2  {
			font-size: var(--size-font-lg);
			line-height: 120%;
		} 
	 img { 
			width: 50%;
			float: left;
			padding: var(--spacing-grid-gap);
			padding-left: 0;
		}
}

.feed-item:nth-child(4){ 
	grid-column: col-start 1 / span 12;  
		img { 
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 50%;
			animation: borderradius 5s ease alternate infinite;
		}
	overflow: hidden;

}

.feed-item:nth-child(5){ 
	grid-column: col-start 1 / span 4;  
		img { 
			width: 100%;
			animation: rota 10s infinite linear;
			border-radius: 50%;
			overflow: hidden;
			z-index: -2;
			aspect-ratio: 1/1;
			object-fit: cover;
		}
		h2 {
			font-size: var(--size-font-lg);
			line-height: 110%;
			text-align: left;
		} 
		
}

.feed-item:nth-child(6){ 
	grid-column: col-start 5 / span 4;  
		img { 
			width: 100%;
		}
		h2 {
			font-size: var(--size-font-lg);
			line-height: 120%;
			text-align: center;
		} 
		p {
			text-align: center;
		}
}

.feed-item:nth-child(7){ 
	grid-column: col-start 9 / span 4;  
		img { 
			width: 100%;
		}
		h2 {
			font-size: var(--size-font-lg);
			line-height: 120%;
			text-align: right;
		} 
		p {
			text-align: right;
		}
}

.feed-item:nth-child(8){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: left;
			shape-outside: circle();
			border-radius: 50%;
			width: 30%;
			aspect-ratio: 1/1;
			padding: var(--spacing-md);
			padding-left: 0;
			animation: rota 60s linear infinite;
		}	

	h2 { 
		font-size: var(--size-font-xxl);
			line-height: 100%;
			text-align: center;
	}
	p { 
		text-align: center;
	}
	
}

.feed-item:nth-child(9){ 
	grid-column: col-start 1 / span 4;  
	h2 {
		font-size: var(--size-font-lg);
	}
}

.feed-item:nth-child(10){ 
	grid-column: col-start 5 / span 8;  
	h2 { 
	font-size: var(--size-font-mxl);	
	}

	img { 
			width: 50%;
			border-radius: 50%;
			shape-outside: circle();
			aspect-ratio: 1/1;
			float: right;
			padding: var(--spacing-md);
			padding-right: 0;
			animation: rota 120s infinite linear;
		}	
}

.feed-item:nth-child(11){ 
	grid-column: col-start 1 / span 12;  
	h2 {
		font-size: var(--size-font-mxl);
	}
	img { 
		shape-outside: circle();
		aspect-ratio: 1/1;
		border-radius: 50%;
		float: left;
			width: 50%;
			padding: var(--spacing-md);
			padding-left: 0;
		}	
}

.feed-item:nth-child(12){ 
	grid-column: col-start 1 / span 6; 
		img{
			width: 45%;
			float: right;
			shape-outside: circle();
			border-radius: 50%;
			padding: var(--spacing-md);
			padding-right: 0;
			aspect-ratio: 1/1;
			object-fit: cover;
			animation: rota 40s infinite linear;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
			text-align: center;
		}
		p { 
			
		}
}
.feed-item:nth-child(13){ 
	grid-column: col-start 7 / span 6; 
		img{
			width: 45%;
			float: left;
			shape-outside: circle();
			border-radius: 50%;
			padding: var(--spacing-md);
			padding-left: 0;
			aspect-ratio: 1/1;
			object-fit: cover;
			animation: rota 40s infinite linear;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
			text-align: center;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}
}
.feed-item:nth-child(14){ 
	grid-column: col-start 1 / span 12; 

	h2 { 
		font-size: var(--size-font-xl);
	}
	img { 
			width: 50%;
			padding: var(--spacing-md);
			padding-left: 0;
		}	
}
.feed-item:nth-child(15){ 
	grid-column: col-start 1 / span 12;
		img{
			width: 50%;
			border-radius: 50%;
			padding: var(--spacing-md);
			padding-right: 0;
			float: right;
		}
		h2 { 
			font-size: var(--size-font-xxl);
			line-height: 100%;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}
}
.feed-item:nth-child(16){ 
	grid-column: col-start 1 / span 6;  
	text-align: center;
	
		img{
			width: 45%;
			float: right;
			border-radius: 50%;
			padding: var(--spacing-md);
			padding-right: 0;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}	
}
.feed-item:nth-child(17){ 
	grid-column: col-start 7 / span 6;  
	text-align: center;
	
		img{
			width: 70%;
			padding: var(--spacing-md);
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}	
}
.feed-item:nth-child(18){ 
	grid-column: col-start 1 / span 12;  
	text-align: center;
	overflow: hidden;
	img{
			width: 50%;
			float: right;
			aspect-ratio: 1/1;
			shape-outside: circle();
			border-radius: 50%;
			padding: var(--spacing-md);
			padding-right: 0;
			animation: rota 120s linear infinite;
		}
		h2 { 
			font-size: var(--size-font-mxl);
			line-height: 100%;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}	
}
.feed-item:nth-child(19){ 
grid-column: col-start 1 / span 12;  
		img{
			width: 75%;
			float: right;
			border-radius: 50%;
		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
		}
		p { 
			padding-top: var(--spacing-md);
			font-size: var(--size-font-md);
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing: var(--spacing-character-text);
		}
}
.feed-item:nth-child(20){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 50%;
			padding: var(--spacing-md);
		}	
}
.feed-item:nth-child(21){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 50%;
			padding: var(--spacing-md);
		}	
}
.feed-item:nth-child(22){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 66.6666667%;
			padding: var(--spacing-md);
		}	
}
.feed-item:nth-child(23){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 66.6666667%;
			padding: var(--spacing-md);
		}	
}

.feed-item:nth-child(24){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 66.6666667%;
			padding: var(--spacing-md);
		}	
}

.feed-item:nth-child(25){ 
	grid-column: col-start 1 / span 12;  
	img { 
			float: right;
			width: 66.6666667%;
			padding: var(--spacing-md);
		}	
}

/* PAGINATION */

.pagination_links { 
	grid-column: col-start 1 / span 12; 
}

.pagination_links:has(h2) { 
	padding: var(--spacing-md) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	background-color: var(--color-red);
	color: var(--color-background);
	font-family: TexCnRegular, Arial, Helvetica, sans-serif;
	
	:hover { 
		background-color: var(--color-background);
		color: var(--color-red);
	}

	.current{ 
		background-color: var(--color-blue);
		color: var(--color-text);
	}
}

/* single page */

.single { 
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	background-color: var(--color-background);
	margin-bottom: var(--spacing-lg);
	grid-column: col-start 1 / span 12; 
}

.single-head { 
	grid-column: col-start 2 / span 10;  
	top: 0;
	position: sticky;
	z-index: 0;
	height: max-content;
	padding: var(--spacing-section) 0;

	h2 {
		font-family: TexCnBold, Arial Narrow, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-mxl);
		line-height: 110%;
		text-align: center;
	}

	.single-head-info { 
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		gap: var(--spacing-xs);
		margin-top: var(--spacing-xs);
		font-size: var(--size-font-lg);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		.single-author:hover { 
			background-color: var(--color-bright-blue);	
		}
	}
}


.single-thumbnail { 
	grid-column: col-start 1 / span 12;  
	z-index: 1;
	img { 
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.single-content { 
	grid-column: col-start 1 / span 12;
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	background-color: var(--color-background);
	z-index: 2;

	h2 { 
		margin-top: var(--spacing-md);
		grid-column: col-start 3 / span 7;  
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-lg);
		strong { 
			background-color: transparent;
			color: var(--color-text);
			font-family: TexCnBold, Arial, Helvetica, sans-serif;
			
		}
	}

	h3 { 
		grid-column: col-start 3 / span 7;  
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-md);
	}

	p {
		margin-top: var(--size-font-xs);
		font-family: Arial, Helvetica, sans-serif;
		grid-column: col-start 3 / span 7;  
		line-height: 175%;
		font-size: var(--size-font-sm);
		text-align: left;
	}

	p:first-child {
		margin-top: var(--spacing-lg);
	}

	p:first-child::first-letter { 
		font-family: TexCnBold, Arial, Helvetica, sans-serif;
		font-style: italic;
		font-size: calc(var(--size-font-xxl));
		width: max-content;
		background-color: var(--color-red);
		text-align: left;
		float: left;
		padding-right: var(--spacing-md);
		margin-right: var(--spacing-xs);
		line-height: 100%;
	}

	p:last-child { 
		margin-bottom: var(--spacing-lg);
	}

	ul { 
		grid-column: col-start 3 / span 7;  
		line-height: 175%;

	}

	strong { 
		background-color: var(--color-text);
		color: var(--color-background);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		letter-spacing: var(--spacing-character-text);
	}

	
	blockquote {
		grid-column: col-start 3 / span 7;
		font-style: italic;
		height: max-content;
		margin-top: var(--size-font-xs);
	}
	
	blockquote p { 
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-text);
		line-height: 160%;
		letter-spacing: .05rem;
		margin: 0 !important;
		color: var(--color-background);
		background-color: var(--color-text);
		padding: var(--spacing-xs);
	}
	
	blockquote p:first-child::first-letter {
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
		font-size: var(--size-font-text) !important;
		float: none !important;
		padding: 0 !important;
		margin-right: 0;
		background-color: transparent;


		font-family: TexCnBold, Arial, Helvetica, sans-serif;
			font-style: italic;
			font-size: calc(var(--size-font-xxl));
			width: max-content;
			float: left;
			line-height: 100%;

}

/* SINGLE beagyazasok */

.wp-block-embed__wrapper { 
	width: 100%;
}

.wp-block-embed__wrapper iframe { 
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
}
/* Ezt kapj a yt es a spoti */
figure { 
	grid-column: col-start 2 / span 10;
	margin: var(--spacing-md) 0;
	img {
		width: 100%;
		height: auto;
	}
}

.wp-block-embed-spotify { 
	grid-column: col-start 3 / span 7;
	iframe { 
		margin: 0 !important;

	}
}
	iframe { 
		grid-column: col-start 3 / span 7;
		margin: var(--spacing-md) 0;
	}

	a { 
		background-color: var(--color-red);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		letter-spacing: var(--spacing-character-text);
		color: var(--color-background);
	}
	a:hover {
		background-color: var(--color-text);
		color: var(--color-red);
	}

.instagram-media { 
	grid-column: col-start 5 / span 3;	
	margin: var(--spacing-md) 0 !important;
}


/* heti bontas feliratkoztato */
	
	
.spots_subscribe { 
	grid-column: col-start 3 / span 7;	
	padding: var(--spacing-md);
	border: 1rem dotted var(--color-red)
}
.wp-block-group__inner-container {
	text-align: center !important;
	
.mailpoet_text { 
	font-size: 2rem !important;
	background: transparent;
	color: var(--color-neon-purple);
	font-family: Perforgrama, Arial, Helvetica, sans-serif;
	text-align: center;
	border-bottom: 1rem solid var(--color-neon-purple);
}

	h2 > strong { 
	color: var(--color-red) !important; 
	}

	p { 
		text-align: center;
		display: inline;

		strong {
			background-color: transparent;
			color: var(--color-neon-purple);
		}
	}

	.mailpoet_submit { 
		color: var(--color-red);
	}
	
	h2 strong {
		font-family: Perforgrama, Arial, Helvetica, sans-serif ;
	}
}

.program-item { 
	grid-column: col-start 3 / span 7;	
	.wp-block-paragraph { 
		margin: 0;
	}
	h3 { 
		margin-top: var(--spacing-md);
	font-family: Courier New, monospace !important;
 }
}
 
}



/* SINGLE RELATED */

.yarpp {
	display: grid;
	grid-column: col-start 1 / span 12;
	.related-posts-grid { 
		grid-column: col-start 1 / span 12;
		grid-template-columns: repeat(12, [col-start] 1fr);
		display: grid;
		gap: var(--layout-gap);
		.related-post { 
			padding: var(--spacing-xs);
			height: max-content;
		}
		.related-post:hover { 
			border: var(--spacing-xs) dashed var(--color-red);
			padding: 0;

		}
		.related-post:nth-child(1) { 
			grid-column: col-start 1 / span 6;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(2) { 
			grid-column: col-start 7 / span 12;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(3) { 
			grid-column: col-start 1 / span 6;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(4) { 
			grid-column: col-start 7 / span 12;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(5) { 
			grid-column: col-start 1 / span 6;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(6) { 
			grid-column: col-start 7 / span 12;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(7) { 
			grid-column: col-start 1 / span 6;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
		.related-post:nth-child(8) { 
			grid-column: col-start 7 / span 12;  
			text-align: center;
			img{
				width: 100%;
				height: auto;
			}
			span { 
				font-size: var(--size-font-lg);
				line-height: 100%;
				font-family: TexCnRegular, Arial, Helvetica, sans-serif;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
	}
}

.search { 
	grid-column: col-start 1 / span 12;  
	background-color: var(--color-blue);
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	form { 
		display: flex;
		justify-content: center;
		align-content: center;
	}
	input { 
			background: none !important;
			font-family: TexCnRegular, arial, helvetica, sans-serif !important;
			font-size: var(--size-font-lg);
			line-height: 100%;
			border-bottom: 1px solid var(--color-background);
			color: var(--color-text);
			text-align: center;
		}
}

.category-header {
	z-index: 2;
	top: 65px;
	position: sticky;
	background-color: var(--color-blue);
	grid-column: col-start 1 / span 12;  
	text-align: center;
	font-size: var(--size-font-xs);
	font-family: TexCnBold, Arial, Helvetica, sans-serif;
}

.sub-category-feed { 
	margin-top: var(--spacing-lg);
}


.unique-page { 
	grid-column: col-start 2 / span 10; 
	padding: var(--spacing-section) 0;
}

.kapcsolat { 
	* {
		grid-column: col-start 2 / span 10; 
	}
	.is-layout-flex { 
		display: flex;
		gap: var(--layout-gap);
	}
}

.adatkezeles { 
	* {
		grid-column: col-start 2 / span 10; 
	}
	.is-layout-flex { 
		display: flex;
		gap: var(--layout-gap);
	}
}

footer {
	margin-top: var(--spacing-section);
	background-color: var(--color-blue);
	.logo { 
		width: 150px;
	}
.footer-wrap { 

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		font-family: TexCnBold, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-md);

		a { 
			display: inline;
			width: max-content;
		}
		.footer-support-button {
			background-color: var(--color-background);
			display: block;
		}
		.footer-contact-button { 
			background-color: var(--color-blue);
			color: var(--color-background);
			display: block;
		}
	}
	ul, li { 
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.footer-column { 
		display: flex;
		flex-direction: column;
	padding: var(--spacing-md);

	}
	.footer-column:nth-child(2){ 
		background-color: var(--color-background);
		color: var(--color-text);
	}

}

@keyframes rota {
	from { 
		transform: rotate(0);
	}
	to { 
		transform: rotate(360deg)
	}
}


@keyframes minusrota {
	from { 
		transform: rotate(360deg);
	}
	to { 
		transform: rotate(00deg)
	}
}

	@keyframes borderradius {
		from { 
			border-radius: 0px;
		}
		to { 
			border-radius: 50%;
		}
	}