/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */


/* Linear gradient background */
.gm-lg-background {
    background-image: linear-gradient(320deg, var(--global-palette7) 8%, #f5f9fc 43%, #f8eae1 64%, var(--global-palette2) 98%);
}

/* Menu item */
.header-navigation .menu li:last-child {
    background: var(--global-palette8);
	border-radius:6px;
	
	& a {
		color:--global-palette1 !important;
	}
}


/* Hero Scroll Video */
.hero-section > div{
    padding: 0 !important;
    margin-top: -7rem;
}

@layer foundation {
	.scroll-header {
		min-height: 100vh;
	}

	.scroll-image {
		position: sticky;
		top: 0;
		height: 100vh !important;
		width: 100vw;
		object-fit: cover;
	}

	.scroll-header > .scroll-section {
		position: relative;
		top: 0;
		height: 100vh;
		width: 100%;
		translate: 0 -100%;
		display: grid;
		place-items: center;
		color: hsl(0 0% 100%);
	}

	.scroll-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

	.scroll-title > h2 {
		color: #fff !important;
		font-size: var(--global-kb-font-size-xl) !important;
		letter-spacing: 0.2rem;
		text-transform: capitalize !important;
	}

	.scroll-header > .scroll-section::before {
		content: "";
		position: absolute;
		inset: -100% 0 -100% 0;
		background: hsl(0 0% 0% / 0.25);
		pointer-events: none;
		z-index: -1;
	}

@layer scrolls {
	@supports (animation-timeline: scroll()) {
		.scroll-header {
			transform-origin: 50% 0%;
			animation: scale-down both ease-in;
			animation-timeline: view();
			animation-range: exit;
			view-timeline: --scroll-header;
		}

		@keyframes scale-down {
			to {
				scale: 0.8 0.8;
			}
		}

		.scroll-header > .scroll-section::before {
			animation: fade both linear;
			animation-timeline: --scroll-header;
			animation-range: exit-crossing 0% exit 0%;
		}

		@keyframes fade {
			to {
				opacity: 0;
			}
		}
	}
}
}

.hero-img {
max-width: 60%;
}


/* GM Button */
@property 
--r2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property 
--x {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}
    
.wp-block-button.is-style-gm-button1  {
    padding: 2px;
    background: conic-gradient(from calc(var(--r2) - 80deg) at var(--x) 15px, transparent 0, var(--global-palette1) 20%, transparent 25%), #a7a7a7c7;
    border-radius: 43px;
    box-shadow: 0 0 20px 0 rgba(245, 48, 107, 0.1);
    transition: all 0.2s ease;
    transform: translateZ(0);
    animation: shake-horizontal -0.64s linear 3s infinite, shake-vertical -0.64s linear 3s infinite;
    
        &:hover {
            background-color: var(--global-palette2);
            /* box-shadow: 0 0 20px 3px rgba(245, 49, 108, .25); */
			box-shadow: 0 0 20px 3px #00a8cf;
            scale: 1.01;
    }
}

/* Link styling within the button */
.wp-block-button.is-style-gm-button1 a {
    padding: 0.125rem 1.5rem;
    font-weight: 500;
    background: var(--global-palette1);
	color: var(--global-palette9);
    border-radius: 1000px;
    text-shadow: 1px 1px 1px #000, 3px 3px 5px #787878;
}

/* Keyframes for horizontal shaking */
@keyframes shake-horizontal {
    0% {
        --r2: 0deg;
    }
    
    32.8228% {
        --r2: 0deg;
    }
    
    50% {
        --r2: 180deg;
    }
    
    
    82.8228% {
        --r2: 180deg;
    }
    
    100% {
        --r2: 360deg;
    }
}

@keyframes shake-vertical {
    0% {
        --x: 20px;
    }
    
    32.8228% {
        --x: 160px;
    }
    50% {
        --x: 160px;
    }
    82.8228% {
        --x: 20px;
    }
    100% {
        --x: 20px;
    }
}


/* Post Archive - front page */

.gm-posts .entry.loop-entry{
box-shadow: 0px 15px 15px -10px rgba(0, 0, 0, 0.75);
    border: 1px solid black;
}

.gm-posts .entry.loop-entry > a:hover > div > img {
		-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
	}
	@-webkit-keyframes kenburns-top {
		0% {
		  -webkit-transform: scale(1) translateY(0);
				  transform: scale(1) translateY(0);
		  -webkit-transform-origin: 50% 16%;
				  transform-origin: 50% 16%;
		}
		100% {
		  -webkit-transform: scale(1.25) translateY(-15px);
				  transform: scale(1.25) translateY(-15px);
		  -webkit-transform-origin: top;
				  transform-origin: top;
		}
	  }
	  @keyframes kenburns-top {
		0% {
		  -webkit-transform: scale(1) translateY(0);
				  transform: scale(1) translateY(0);
		  -webkit-transform-origin: 50% 16%;
				  transform-origin: 50% 16%;
		}
		100% {
		  -webkit-transform: scale(1.25) translateY(-15px);
				  transform: scale(1.25) translateY(-15px);
		  -webkit-transform-origin: top;
				  transform-origin: top;
		}
	  }
	  
/* FOOTER */
.site-footer-middle-section-2 .footer-navigation .menu {
    flex-direction: column;
}

	  .gm-posts .entry.loop-entry .more-link-wrap {
		text-align: center;
	  }



/*Obrazec - naročilo torte*/

.okusi {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}


.okusi-meni {
    min-width: 22rem;
    border-radius: 1rem;
    padding: 0.5rem;
}

.figure {
    display: flex;
}

.figure > p {
   text-align: center;
}

.figure > p > img {
    max-width: 7.5rem;
}

.dopis {
    line-height: 1.5;
    field-sizing: content;
    min-height: 3lh;
}


/* Tilit Gallery Items */
.gm-gallery div.kb-slide-item {
scale: 0.9;
	border: 6px solid white;
    border-radius: 5px;

/* 	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
}

.gm-gallery div.kb-slide-item:nth-child(odd) {
	transform: rotate(5deg);	
}

.gm-gallery div.kb-slide-item:nth-child(even) {
	transform: rotate(355deg);
}


/* Offset images */
.offset-image1 {
    position: absolute;
    left: -50%;
    bottom: 25%;

    z-index: -1;
}

/* Quote - o nas */
.kt-blocks-testimonials-wrap270_5683b4-f9 .kt-testimonial-content {
    align-content: center; 
}