@import 'essentials';

/*----------------------------------------*
************  TABLE OF CONTENTS  **********

1.	Mixins
2.	Modules
3.	Basic
//	4.	Plugins
5.	Vendors

*----------------------------------------*/



/*------------------------------------*\
	Mixins
\*------------------------------------*/
$transition: 0.3s ease;
$transition-slow: 3s ease;

@mixin transition($property: all, $speed: $transition) {
  -webkit-transition: #{$property} #{$speed};
  transition: #{$property} #{$speed};
}

//fonts
@mixin museo-sans {
	font-family: 'museo-sans', sans-serif !important;
}

//additional colors
$grey: #f0f0f0; 

/*------------------------------------*\
MODULES
\*------------------------------------*/
@import 'modules';
@import 'off-canvas';
@import 'typography';
@import 'header';
@import 'megamenu';
@import 'nav-v2'; // v2 nav/header revisions (temporary — remove to revert)
@import 'footer';
@import 'blog';
@import 'search-results';
@import 'woocommerce/product-loop.scss';
@import 'woocommerce/product.scss';
@import 'woocommerce/product-page-v2'; // v2 layout (temporary — remove to revert)
@import 'woocommerce/general.scss';
@import 'woocommerce/cart.scss';
@import 'woocommerce/checkout.scss';
@import 'woocommerce/myaccount.scss';
@import 'woocommerce/flexslider.scss';
@import 'woocommerce/payment.scss';

.margin-top-zero {
	margin-top: 0 !important;
}
#tuotanto-bg {
	background-image: url("/wp-content/uploads/2023/11/kingi_tuotanto1.jpeg");
	background-size: cover;
	background-position: center center;
}


/*------------------------------------*\
BASIC
\*------------------------------------*/

table {
	border-collapse: separate;

	tr {
		border-bottom: gray 1px solid;
		td, th {
			border: solid 1px #b5b5b5;
		}
		td {
			border-width: 1px;
			padding: 10px;
		}
		&:first-child {
			th, td {
				border-top-width: 2px;
			}
		}
		&:last-child {
			border-bottom: 0;

			th, td {
				border-bottom-width: 2px;
			}
		}
	}
}
body {
	line-height: 1.4;
	color: $text;
	@include museo-sans; 
	font-weight: 300; 
	font-size: 18px; 
}
a {
	color: $text;
	text-decoration: none;
	&:hover { color: $main; }
	&:focus, &:hover, &:active { outline: 0; }
}

.center {
	text-align: center; 
}
.flex-start { align-items: flex-start !important; }

.justify-between {
	.container {
		justify-content: space-between !important;
	}
}


.gridbox {
	display: grid;

	&.grid-col-two {
		grid-template-columns: 1fr 1fr;
	}
	&.grid-gap-narrow {
		grid-gap: 1rem 1.5rem;
	}
	&.grid-columngap-narrow {
		grid-column-gap: 1.5rem;
	}
	&.grid-rowgap-narrow {
		grid-row-gap: 1.5rem;
	}

	.column {
		flex-basis: 100%;
		width: 100%;

		&.flex {
			> p { display: flex; align-items: center; column-gap: .625rem; }
		}

		.inner-label {
			font-size: 1rem;
			font-weight: 500;
		}
	}
	.span-two {
		grid-column: span 2;
	}
}

@media (max-width: 639px) {
	.gridbox {
		display: flex;
		flex-direction: column;
	}
}


section {
	float: none;
	clear: both;
}

.wysiwyg {
	p:first-child {
		margin-top: 0;
	}
}

.module-border-top { border-top: solid 1px #b9b9b9; }
.module-border-bottom { border-bottom: solid 1px #b9b9b9; }

.unmarked-ulist {
	list-style-type: none;
	li {
		margin-bottom: 1rem;
	}
	.alignleft {
		margin: 0;
		padding-right: .75rem;
	}
}

.zero-height {
	height: 0!important;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.no-margin {
	margin: 0!important; 
}
::selection {
	background: $main;
	color: $light;
	text-shadow: none;
}
::-webkit-selection {
	background: $main;
	color: $light;
	text-shadow: none;
}
::-moz-selection {
	background: $main;
	color: $light;
	text-shadow: none;
}



@media (min-width: 1024px) {
	.two-column-right-offset {
		margin-left: 70px;
	}
}

@media (max-width: 1023px) {
	.lt-no-padding-top { padding-top: 0; }
}



.container {
	width: 100%;
	margin: 0 auto;
	max-width: calc(#{$container} + 2 * #{$mobile-padding});
  padding: 0 $mobile-padding;
  @include st {
    max-width: calc(#{$container} + 2 * #{$desktop-padding});
    padding: 0 $desktop-padding;
  }
	&.narrow {
		max-width: calc(#{$narrow} + 2 * #{$mobile-padding});
    @include st { max-width: calc(960px + 2 * #{$desktop-padding}); }
	}
	&.extra-narrow {
		max-width: calc(#{$extra-narrow} + 2 * #{$mobile-padding});
    @include st { max-width: calc(768px + 2 * #{$desktop-padding}); }
	}
  &.no-padding {
    padding: 0;
  }
  &.full {
    max-width: 100%;
  }
}

//youtube embed 
.yt-iframe-container {
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	margin: 0;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
		outline: 0;
	}
}

//404 page 
.error404 {
	
	#post-404 {
		height: 70vh;
		display: flex;
		flex-direction: column;
		align-items: center; 
		justify-content: center;
		text-align: center; 
		
		@include xld {
			height: 50vh;
		}
		
		h1 {
			margin-bottom: 0; 
			margin-top: 2em; 
		}
		
		img {
			max-width: 80%; 
			
			@include st {
				max-width: 300px; 
			}
			@include lt {
				max-width: 400px; 
			}
		}
	}
}
//arrow
/*.arrow {
  display: block;
  position: absolute;
  right: calc(#{$menu-button-width} / 2 - #{$menu-arrow-width} / 2);
  top: calc(1em - 0.5em);
  transform: translateY(-30%);
  width: $menu-arrow-width;
  height: $menu-arrow-width;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  @include st { cursor: default; right: 0; }
  span {
	position: absolute;
	width: calc(0.707106781186548 * #{$menu-arrow-width});
	height: $menu-arrow-thickness;
	border-radius: $menu-arrow-thickness;
	background-color: $text;
	top: 70%;
	transition: 0.2s ease-in-out;
	&:first-child {
	  left: calc(50% + #{$menu-arrow-thickness} / 2);
	  transform: translateX(-100%) rotate(45deg);
	  transform-origin: calc(100% - #{$menu-arrow-thickness} / 2) center;
	}
	&:last-child {
	  right: calc(50% + #{$menu-arrow-thickness} / 2);
	  transform: translateX(100%) rotate(-45deg);
	  transform-origin: calc(#{$menu-arrow-thickness} / 2) center;
	}
  }
  &.open {
	span {
	  top: 25%;
	  background-color: $main;
	  //@include st { background-color: $text; }
	  &:first-child {
		transform: translateX(-100%) rotate(-45deg);
	  }
	  &:last-child {
		transform: translateX(100%) rotate(45deg);
	  }
	}
  }
  &:hover {
	span {
	  background-color: $main;
	}
  }
}*/ 



/*------------------------------------*\
PLUGINS
\*------------------------------------*/

/* Plugin xxx määritykset */



/*------------------------------------*\
VENDORS
\*------------------------------------*/

.grecaptcha-badge {
	display: none;
	visibility: hidden;
}