/* MOBILE KERET 26 */ 

/* Hamburger */ 

.hamburger { 
	width: 40px; 
	height: 40px; 
	padding: 8px; 
	border: 0; 
	background: none; 
	cursor: pointer; 
	position: relative; 
	z-index: 1001; 
}

.hamburger span { 
	display: block; 
	width: 24px; 
	height: 2px; 
	background: #ededed;
	margin: 5px 0;
	transition: transform 0.2s ease, opacity 0.2s ease; 
} 

/* Hide hamburger/menu behavior on desktop */ 
@media (min-width: 901px) { 
	.mobile-menu { display: block; } 
    .hamburger {display: none;}
}
	
	/* Mobile REAL */ 
	
@media (max-width: 900px) { 

	:root { 
		--spacing-character-text: .05rem;
		--spacing-xs: 1rem;
		--spacing-md: 1rem;  /* change */
		--spacing-lg: 4rem;
		--spacing-section: 5rem; /* change */
		--spacing-grid-gap: 1rem;

		--layout-gap: 1rem;

		--size-font-text: 18px; /* change */
		--size-font-xs: 14px;
		--size-font-sm: .9rem;
		--size-font-md: 1rem; /* change */
		--size-font-mlg: 2rem; /* new */ 
		--size-font-lg: 3rem;
		--size-font-xl: 4rem; /* change */
		--size-font-mxl: 5rem; /* change */;
		--size-font-xxl: 6rem;
	}

	.big-nav {
		display: none;
	}
	
	.big-nav-search input#search {
		background-color: var(--color-neon-purple);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
		font-size: var(--size-font-lg);
		text-align: center;
		color: var(--color-background);
		width: 100%;
		box-sizing: border-box;
		opacity: 1;
		outline: none;
	}
        .desktop-menu {
            display: none !important;
        }
        .small-nav { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            position: sticky; 
            z-index: 22;
			padding: 0;
        ul {
            flex-direction: column;
        }
	} 
	.hamburger { 
	    display: block; 
	} 
	.mobile-menu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0; 
        background: var(--color-background); 
        z-index: 1000; 
        padding: var(--spacing-xs); 
		border-bottom: 1rem dashed red;

        li a {
            display: block;
            font-size: var(--size-font-xl);
			color: var(--color-blue);
            font-family: TexCnRegular, Arial, Helvetica, sans-serif;
            text-align: center;
        }
		form {
				display: block !important;
			}
	} 
	.mobile-menu.is-open { 
	    display: block;
        padding: var(--spacing-xs); 
	}
	.mobile-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
		text-align: left;
	}
	.mobile-menu li {
	    margin: 0;
	}
	.mobile-menu input#search {
		padding: var(--spacing-grid-gap) 0;
		background-color: transparent;
		color: var(--color-neon-purple);
		font-family: TexCnRegular, Arial, Helvetica, sans-serif !important;
		font-size: var(--size-font-xl);
		text-align: left;
		width: 100%;
		box-sizing: border-box;
		opacity: 1;
		outline: none;
	}
	/* Turn hamburger into X */

	.hamburger.is-open span:nth-child(1) {
	    transform: translateY(7px) rotate(45deg);
	}
	.hamburger.is-open span:nth-child(2) {
	    opacity: 0; 
	}
	.hamburger.is-open span:nth-child(3) {
	    transform: translateY(-7px) rotate(-45deg); 
	} 

	/* MOBILE / FEATURED */

	.featured { 
		.button-row {
			top: 65px;
			.button  { 
				font-size: var(--size-font-lg);
			}
		}
		.carousel-cell:hover{ 
			border: 0;
			padding: var(--spacing-md);
		}
		.carousel-cell:nth-child(1) {
		width: 70%;
		img{
			width: 100%;
			float: unset;
			shape-outside: circle();
			border-radius: 50%;
			padding: 0;
			aspect-ratio: 1/1;
			object-fit: cover;
			animation: rota 40s infinite linear;
		}
		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);
		}
		}
		.carousel-cell:nth-child(2) {
			width: 70%;
			text-align: center;

			img{
				width: 70%;
				float: right;
				shape-outside: circle();
				border-radius: 50%;
				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);
			}
		}
		.carousel-cell:nth-child(3) {
			width: 80%;
                img {
                    width: 45%;
                    float: right;
                    shape-outside: circle();
                    border-radius: 50%;
                    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);
                }
		}

        .carousel-cell:nth-child(4) {
		width: 80%;
			img {
				animation: borderradius 20s infinite alternate;
			}
			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);
			}
		}

		.carousel-cell:nth-child(5) {
		width: 80%;
			img {
				animation: borderradius 20s infinite alternate;
			}
			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);
			}
		}

        .carousel-cell:nth-child(6) {
            width: 80%;
                img{
                    width: 100%;
                    float: right;
                    shape-outside: circle();
                    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);
                }
        }
		


        .carousel-cell:nth-child(7) {
			width: 80%;
			img{
				width: 70%;
				float: right;
				shape-outside: circle();
				border-radius: 50%;
				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);
			}
		}
		

		.carousel-cell:nth-child(8) { 
            width: 80%;
			img {
				aspect-ratio: 1/1;
				object-fit: cover;
				animation: rota 20s infinite linear;
				border-radius: 50%;
			}
		}

		.carousel-cell:nth-child(9) {
			width: 70%;
			text-align: center;

			img{
				width: 70%;
				float: right;
				shape-outside: circle();
				border-radius: 50%;
				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);
			}
		}

        .carousel-cell:nth-child(10) {
			width: 80%;
			img{
				width: 100%;
				float: unset;
				shape-outside: circle();
				border-radius: 50%;
                padding: 0;
			}
			h2 { 
				font-size: var(--size-font-xl);
				line-height: 100%;
                text-align: left;
			}
			p { 
				padding-top: var(--spacing-md);
				font-size: var(--size-font-md);
				font-family: Arial, Helvetica, sans-serif;
				letter-spacing: var(--spacing-character-text);
			}
		}
    }


    /* MOBIL containers */

    .container-full { 
        gap: var(--spacing-grid-gap);
        display: grid;
    }

    .container-narrow { 
        grid-column: col-start 1 / span 12;
        padding: var(--spacing-xs);
    }



    .hirlevel { 
        h2 { 
            font-size: var(--size-font-lg) !important;
            text-align: center !important;
            overflow-wrap: normal;
        }
        form, fieldset { 
            display: flex;
            flex-direction: column;
            align-items: center;
        }
		
    }

	.hirlevel {
  		& fieldset {
   		 & label:hover {
      letter-spacing: 0rem !important;
    }
  }
}

/* heti bontas MOBIL */


.heti-bontas {

	grid-column: col-start 1 / span 12; 
	padding: var(--spacing-xs) var(--spacing-xs);

	.heti-bontas-left { 
		top: var(--spacing-lg);
		position: sticky;
		grid-column: col-start 1 / span 12;
        z-index: -999;
		height: max-content;
		.heti-bontas-excerpt { 
			color: var(--color-background);
			background-color: var(--color-neon-purple);
			font-size: var(--size-font-sm);
		}
		img { 
			width: 100%;
			height: auto;
		}
		img::after { 
			content: attr("alt");
		}
	}

	.heti-bontas-right { 
        background-color: var(--color-background);
		grid-column: col-start 1 / span 12;
		.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 p { 
		color: var(--color-red);
		font-family: 'Courier New', Courier, monospace;
	}

	}
	


.section-title {
    h1 { 
        font-size: var(--size-font-xl);
    }
}


/* 
FEED HEAVY */


.feed-item { 
	padding: var(--spacing-xs);
	height: max-content;
	transition: background-color 10s ease;
	hyphens: auto;
	img {
		width: 100%;
		height: auto;
		z-index: -30;
	}

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

	p {
		font-size: var(--size-font-md);
		font-family: Arial, Helvetica, sans-serif;
        letter-spacing: var(--spacing-character-text);
		padding-bottom: var(--spacing-xs);
	}
	.feed-cat a, .feed-cat a p { 
		font-size: var(--size-font-text);
	}
}

.category-feed {overflow-x: hidden;}
.category-feed .feed-item {
	grid-column: col-start 1 / span 12 !important;
	img { 
		width: 50% !important;
		float: left;
		position: relative !important;
		padding: var(--spacing-grid-gap);
	}
	h2 { 
		font-size: var(--size-font-lg) !important;
	}
	}

.author-feed {overflow-x: hidden;}
.author-feed .feed-item {
	grid-column: col-start 1 / span 12 !important;
	img { 
		width: 50% !important;
		float: left;
		position: relative !important;
		padding: var(--spacing-grid-gap);
	}
	h2 { 
		font-size: var(--size-font-lg) !important;
	}
	}
.feed-item:hover {
		border: 0;
		padding: var(--spacing-xs);
	}

.feed-item:nth-child(1){ 
	grid-column: col-start 1 / span 12;
		img { 
			width:100%;
			padding: 0;
		}
}

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

		p { 
			font-size: var(--size-font-text);
		}

		img { 
			width: 100%;
            object-fit: cover;
            aspect-ratio: 1/1;
			animation: borderradius 5s ease infinite alternate;
		}
}	

.feed-item:nth-child(3){ 
	grid-column: col-start 1 / span 12;
	h2  {
			font-size: var(--size-font-lg);
		} 
	 img { 
			width: 100%;
			padding: 0;
		}
}

.feed-item:nth-child(4){ 
	grid-column: col-start 1 / span 12;  
		img { 
			top: var(--spacing-md);
			float: right;
			object-fit: cover;
			animation: rota linear 50s infinite;
			aspect-ratio: 1/1;
			width: 50%;
			shape-outside: circle();
			padding: var(--spacing-xs);
		}
		h2 {
			font-size: var(--size-font-mlg);
			line-height: 120%;
			text-align: left;
		} 
		p { 
			text-align: left;
		}
		overflow: hidden;

}

.feed-item:nth-child(5){ 
	grid-column: col-start 1 / span 12;  
		img { 
			float: right;
			width: 100%;
			animation: rota 30s 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: center;
		} 
		p { 
			text-align: center;
		}
}

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

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

	h2 { 
		font-size: var(--size-font-xl);
			line-height: 120%;
			text-align: left;
	}
	p { 
		text-align: left;
	}
}

.feed-item:nth-child(8){ 
	grid-column: col-start 1 / span 12;  
	text-align: left;
    img { 
        border-radius: 50%;
        width: 50%;
        padding: var(--spacing-xs);
    }
    h2 { 
        text-align: left;
        font-size: var(--size-font-lg);
    }
    p { 
        text-align: left;
    }
	
}

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

.feed-item:nth-child(10){ 
	grid-column: col-start 1 / span 12;  
	text-align: left;
    img { 
        border-radius: 50%;
    }
    h2 { 
        font-size: var(--size-font-lg);
    }
    
}

.feed-item:nth-child(11){ 
	grid-column: col-start 1 / span 12;  
	text-align: left;
	h2 {
		font-size: var(--size-font-xl);
	}
}

.feed-item:nth-child(12){ 
	grid-column: col-start 1 / span 12; 
		img{
			width: 50%;
			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-xl);
			line-height: 100%;
			text-align: left;
		}
		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(13){ 
	grid-column: col-start 1 / span 12; 
		img{
			width: 50%;
			float: left;
			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-xl);
			line-height: 100%;
			text-align: left;
		}
		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;  
	img { 
			width: 100%;
			padding: 0;
		}	
}

.feed-item:nth-child(15){ 
	grid-column: col-start 1 / span 12;  
	text-align: center;
		img{
			width: 100%;
			border-radius: 50%;
			padding-right: 0;
			padding-left: var(--spacing-md);

		}
		h2 { 
			font-size: var(--size-font-xl);
			line-height: 100%;
			hyphens: none;
		}
		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 12;  
	text-align: center;
	
		img{
			width: 50%;
			float: left;
			shape-outside: circle();
			border-radius: 50%;
			aspect-ratio: 1/1;
			padding: 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 1 / span 12;  
	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;

	img{
			animation: rota 50s infinite linear;
			width: 50%;
			float: left;
			shape-outside: circle();
			border-radius: 50%;
			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(19){ 
grid-column: col-start 1 / span 12;  
		img{
		}
		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);
		}	
}
   


/* SINGLE MOBILE */
	
	.spots_subscribe { 
	grid-column: col-start 1 / span 12;	
	padding: var(--spacing-md);
	border: 1rem dotted var(--color-red)
}

.single { 
}


.single-head { 
    padding: var(--spacing-section) var(--spacing-xs);
    grid-column: col-start 1 / span 12;
    top: 0;
    position: sticky;
    height: max-content;
	h2 {
		font-size: var(--size-font-mxl);
	}
}

.single-thumbnail { 
    background-color: var(--color-background);
    height: max-content;
    img { 
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

.single-content {
    padding: 0 var(--spacing-xs);

	h2 { 
		grid-column: col-start 1 / span 10;  
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-lg);
	}

	h3 { 
		grid-column: col-start 1 / span 10;  
		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 1 / span 12;
    line-height: 175%;
    font-size: var(--size-font-text);
  }

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

	p:first-child::first-letter { 
		font-family: TexCnRegular, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-xxl);
		float: left;
		padding: 0;
	}

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

iframe, figure { 
	margin: var(--spacing-md) 0;
	grid-column: col-start 1 / span 12;
}


.wp-block-embed-spotify { 
	grid-column: col-start 1 / span 12;
}

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

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


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

}


footer {
	margin-top: var(--spacing-section);
	background-color: var(--color-blue);
	.logo { 
		width: 100px;
		margin-bottom: var(--size-font-md);
	}
.footer-wrap { 
		display: flex;
		flex-direction: column;
		font-family: TexCnBold, Arial, Helvetica, sans-serif;
		font-size: var(--size-font-lg);

		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;
		a {
			font-size: var(--size-font-lg);
		}
	}
	.footer-column { 
		grid-column: 1/ span 2;
		display: flex;
		flex-direction: column;
		padding: var(--spacing-md);

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

}


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

	
@keyframes scale {
	0% { 
		transform: scale(75%);
	}	

	100% {
		transform: scale(125%);
	}
}