/*
Theme Name: KIF-Visionalle
Theme URI: 
Author: BTA
Author URI: https://kif.fi
Description: Visionalles theme
Requires at least: 6.0
Tested up to: 6.3.1
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kif-home
Tags: wide-blocks, block-patterns, block-styles, editor-style, full-site-editing
*/



/* Defaults. */
* {
	/* Enables features from the registered fonts. */
	font-feature-settings: "tnum", "ss01" 1;
	font-variant-numeric: slashed-zero;

}

a:where( :not( :focus ) ),
input:focus,
textarea:focus,
.wp-element-button {
	transition: all 0.5s ease-in-out;
}

:where( a:not( .wp-element-button ):focus ) {
	outline: 1px solid currentColor;
	outline-offset: 0.0625em;
}

a,
.wp-element-button {
	text-underline-offset: 0.0625em;
}

:where( :not( pre ) > code ) {
	padding: 0.125em 0.25em;
	font-size: 0.8125em;
	font-weight: 600;
	background: var( --wp--preset--color--secondary-color-lighter );
}

kbd {
	padding: 0.125em 0.25em;
	font-size: 0.8125em;
	background: var( --wp--preset--color--secondary-color-lighter );
	border: 1px solid var( --wp--preset--color--secondary-color-dark );
	border-radius: 0.25rem;
}

mark {
	padding: 0.25em;
}

s {
	color: var( --wp--preset--color--accent-color );
	text-decoration-color: var( --wp--preset--color--accent-color );
}

sup,
sub {
	font-size: 0.8125em;
}

/*audio,
video {
	display: block;
}
*/
/**
 * Combine each line-height set via `settings.custom.lineHeight` in `theme.json`
 * with the corresponding font-size set via `setting.typography.fontSizes`.
 */
.has-5-xl-font-size { line-height: var( --wp--custom--line-height--5-xl ); }
.has-4-xl-font-size { line-height: var( --wp--custom--line-height--4-xl ); }
.has-3-xl-font-size { line-height: var( --wp--custom--line-height--3-xl ); }
.has-2-xl-font-size { line-height: var( --wp--custom--line-height--2-xl ); }
.has-xl-font-size   { line-height: var( --wp--custom--line-height--xl ); }
.has-lg-font-size   { line-height: var( --wp--custom--line-height--lg ); }
.has-md-font-size   { line-height: var( --wp--custom--line-height--md ); }
.has-sm-font-size   { line-height: var( --wp--custom--line-height--sm ); }
.has-xs-font-size   { line-height: var( --wp--custom--line-height--xs ); }

/* Loosens the spacing above headings tightens the spacing below. */
.wp-block-post-content :is( h1, h2, h3, h4, h5, h6 ) {
	margin-block-end: 0;
}

.wp-block-post-content * + :is( h1, h2, h3, h4, h5, h6 )  {
	margin-block-start: var( --wp--preset--spacing--120 );
}

.wp-block-post-content :is( h1, h2, h3, h4, h5, h6 ) + * {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.wp-block-post-content :where( hr, .wp-block-spacer ) + :is( h1, h2, h3, h4, h5, h6 ),
.wp-block-post-content :is( h1, h2, h3, h4, h5, h6 ) + :where( hr, .wp-block-spacer ) {
	margin-block-start: var( --wp--style--block-gap );
}

/* Center captions (WP doesn't support text-align in `theme.json`). */
.wp-element-caption {
	text-align: center;
}

/* Prefix `cite` elements (WP doesn't support element CSS in `theme.json`). */
cite::before {
	content: "\2013\00a0"
}

/* Adds form element styles, which aren't yet supported in `theme.json`. */
input,
select,
textarea,
:where( .wp-block-search__button-inside .wp-block-search__inside-wrapper ),
.wp-block-search__input,
.wp-block-post-comments-form :is( input:not( .wp-element-button ), textarea ) {
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var( --wp--preset--color--primary-color );
}

input[type="checkbox"],
input[type="radio"],
.wp-block-search__button-inside .wp-block-search__input {
	border: none;
}

.wp-block-heading * {
    transition: none !important;
    transform: none !important;
}

.wp-block-navigation__container * {
    transition: none !important;
    transform: none !important;
}
/*näillä loppui menun ja otsikoiden skaalautuminen ladatessa sivua*/


/*pidä footer alhaalla*/
.maincontent {
	min-height: 60vh;
}
.headermenu {
	display: none;
}




.sivunavi {
	background: #57798b;
	position: sticky;
	left: 0;
	bottom: 0;
	top: 0;
	
}



.sivunavi ul{
	margin-left: .5rem;
	margin-top: 3rem;

}

.piilota .wp-block-navigation-item.current-menu-item::before,
.piilota .wp-block-navigation-item.current-menu-item::after {

	--border-radius: 1rem;
	
	content: '';
	position: absolute;
	width: var(--border-radius);
	height: var(--border-radius);
	background: #57798b;
	border-radius: 100vw;
	right: 0;
}
.piilota .wp-block-navigation-item.current-menu-item::before {
	top: calc(var(--border-radius) * -1);
	border-radius: 0 0 100vw 0;
	box-shadow: 6px 6px 0 6px var( --wp--preset--color--background-color);
}
.piilota .wp-block-navigation-item.current-menu-item::after {
	bottom: calc(var(--border-radius) * -1);
	border-radius: 0 100vw 0 0;
	box-shadow: 6px -6px 0 6px var( --wp--preset--color--background-color);
}

.piilota .wp-block-navigation-item.current-menu-item {
	background: #f4f5f7 ;
	border-radius: 100vw 0 0 100vw;
	color: black;

}

.wp-block-navigation-item__content{
 	padding: .5rem 1rem;
	outline: 0; /*poista klikatessa linkin outline */
	border: none;
}
.sivunavi .wp-block-navigation-item{
	width: 100%;
}


.headermenu .wp-block-navigation-item.current-menu-item {
	background: #f4f5f7 ;
	border-radius: 10px;
	color: black;
}


.headermenu .wp-block-navigation-submenu ul {
	border-radius: 20px;
	padding: 1rem;
}





.testi {
	content: ""; /* create a pseudo-element */
	filter: brightness(90%);
	transition: all .5s; /* for smooth transition */
	z-index: -1; /* put it behind the actual content */
  
}

.testi:hover {
	filter: brightness(100%);
	scale:1.05;
}


.videot {
	overflow: visible;
	
    display: grid;
    align-content: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
	transition: all .5s;
	
}
.video:hover {
	scale: 1.3;
	transition: all .5s;
}
.cover {
	border-radius: 15px;
}

/* Style each video item in the grid */
.video {
    border-radius: 15px; /* Apply border-radius to video items */
    transition: all .5s;
    width: 100%;
    height: 100%;
    object-fit: cover;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	padding: 0%;
	margin: 0%;
	
}
@media screen and (max-width: 1100px) {

	.video:hover {
		scale: 1.1;
		transition: all 0s;
	}
	.piilota {
		display: none;
	}

	.headermenu {
		display: block;
	}

}



.kielivalitsin {
	border-radius: 15px;
}	



.mutevideo video {
	transition: all .5s;
	bottom: 0;
	border-radius: 15px;
	content: ""; /* create a pseudo-element */
	filter: brightness(95%);
	z-index: -1; /* put it behind the actual content */
	box-shadow:
	0 1px 1px hsl(0deg 0% 0% / 0.075),
	0 2px 2px hsl(0deg 0% 0% / 0.075),
	0 4px 4px hsl(0deg 0% 0% / 0.075),
	0 8px 8px hsl(0deg 0% 0% / 0.075),
	0 16px 16px hsl(0deg 0% 0% / 0.075)
}
.mutevideo:hover video {
	transition: all 0.5s;
	transform: scale(1.08);
	filter: brightness(110%);
	box-shadow:
		0 1px 1px hsl(0deg 0% 0% / 0.075),
		0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075)
}
.mediajateksti img {
	transform: scale(1);
	transition: all 0.5s;
	border-radius: 15px;
	content: ""; /* create a pseudo-element */
	filter: brightness(90%);
	z-index: -1; /* put it behind the actual content */
}
.mediajateksti:hover img {
	transition: all 0.5s;
	transform: scale(1.08);
	filter: brightness(100%);
	box-shadow:
		0 1px 1px hsl(0deg 0% 0% / 0.075),
		0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075)
	
} /*detailsjateksti kuvan pimennys ja kirkastus kun hiiri on koko kentän päällä */

#paypal-container-9MMM7EUKDJPGU {
	display: flex;
	justify-content: center; /* Center the button horizontally */
	align-items: center; /* Center vertically, if needed */
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box; /* Include padding/borders in width calculations */
  }
  
  #paypal-container-9MMM7EUKDJPGU iframe {
	max-width: 100%;
	height: auto; /* Maintain the aspect ratio */
	box-sizing: border-box;
  }



.wpcf7-form {
	padding: 20px;
	outline: 2px solid rgb(65, 162, 241);
	border-radius: 15px;
}
.wpcf7-form-control {
	width: 100%;
	outline: 1px solid #171513;
	border-radius: 10px;
}
.wpcf7-checkbox {
	padding-right: 15px;
	outline: 0px;

}
.wpcf7-textarea {
	height: 10rem;
}