/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

@font-face {
  font-family: "Kenao";
  src:
    url("/wp-content/themes/hello-theme-child-master/assets/fonts/kenao.woff2") format("woff2"),
    url("/wp-content/themes/hello-theme-child-master/assets/fonts/kenao.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
	--title-font: 'Kenao';
	--base-font: 'Krub';
	--color-dark: #63483E;
	--color-gold: #D9BFA0;
	--color-dark-rgb: 99, 72, 62;
	--color-light: #F2E2CE;
	--color-lightest: #F7EEE2;
	--fontsize-20: 20px;
	--button-radius: 12px;
	--wesdev-gap: 90px;
	--wesdev-spacing: 20px;
	--wesdev-container-max-width: 1650px;
	--wesdev-small-container-max-width: 1140px;
}

#site-header {
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	top: 0;
    padding-block-end: 2rem;
    padding-block-start: 2rem;
	padding-left: 30px;
	padding-right: 30px;
	.header-inner {
		align-items: flex-start;
		justify-content: flex-end;
		.site-branding {
			margin-right: auto;
			.site-description {
				font-family: var(--title-font);
				color: var(--color-light);
				font-size: var(--fontsize-20);
				line-height: 120%;
			}
		}
		
		.header-contact {
			display: flex;
			align-items: center;
			margin-right: 20px;
			svg {
				height: 10px;
				margin-right: 10px;
			}
		}
		
		.site-navigation {
			display: none!important;
		}
		.site-navigation-dropdown {
			position: fixed;
			z-index: 99;
			top: 0;
			right: 0;
			left: 0;
			height: 100vh;
			margin: 0;
			background-color: rgba(0, 0, 0, .4);
			transform-origin: right;
			transform: scaleY(1) scaleX(0) !important;
			transition: 0s;
			ul {
				max-width: 400px;
				right: -100%;
				bottom: 0;
				top: 0;
				padding-top: 115px;
				transition: all 0.3s ease-in-out .15s;
				background-color: var(--color-light);
				li {
					a {
						color: var(--color-dark);
						background-color: transparent;
					}
					&.current-menu-item {
						a {
							color: var(--color-light);
							background-color: var(--color-dark);
						}
					}
				}
			}
		}
		.site-navigation-toggle-holder {
			display: flex!important;
			align-items: flex-start;
			height: auto;
			position: relative;
			margin-top:0;
			margin-bottom:0;
			padding-top:0;
			padding-bottom:0;
			z-index: 999;
			button.site-navigation-toggle {
				padding: 0;
				margin: 0;
				background-color: transparent!important;
				height: 40px;
				width: 20px;
				span {
					width: var(--wesdev-spacing);
					color: #f2e2ce;
					background-color: #f2e2ce;
					height: 3px;
					position: relative;
					&:before {
						margin-block-end: 0;
						box-shadow: none;
						position: absolute;
						top: -10px;
						left: 0;
						right: 0;
					}
					&:after {
						position: absolute;
						bottom: -10px;
						left: 0;
						right: 0;
					}
				}
				&[aria-expanded=true] {
					span {
						background-color: transparent;
						color: var(--color-dark);
						&:before {
							transform: translateY(10px) rotate(45deg);
						}
						&:after {
							transform: translateY(-10px) rotate(-45deg);
						}
					}
				}
			}
			&.elementor-active {
				& + .site-navigation-dropdown {
					transform: scaleY(1) scaleX(1) !important;
					ul {
						right: 0;
					}
				}
			}
		}
		
	}
	@media screen and (max-width: 768px) {
		.header-inner {
			flex-wrap: nowrap;
			.site-branding {
				max-width: 120px;
				.site-description {
					font-size: 12px;
				}
			}
			.header-contact {
				display: flex;
				align-items: center;
				margin-right: 0;
				height: 40px;
			}
		}
	}
}

.wesdev-container, #site-header > .header-inner {
	max-width: var(--wesdev-container-max-width);
	margin: 0 auto;
	border-radius: var(--button-radius);
}

.btn {
	padding: 5px 20px;
	font-size: 16px;
	border-radius: calc(var(--button-radius) * 1.67);
	transition: all 0.15s ease-in-out;
	display: inline-flex;
	align-items: center;
	svg {
		transition: all 0.15s ease-in-out;
		width: 16px;
		height: 16px;
		margin-right: 8px;
	}
	&.btn--outline {
		border: 1px solid var(--color-dark);
		color: var(--color-dark);
		background-color: transparent;
		svg {
			fill: var(--color-dark);
		}
		&:hover {
			color: var(--color-light);
			background-color: var(--color-dark);
			svg {
				fill: var(--color-light);
			}
		}
	}
	&.btn--outline__white {
		background-color: var(--color-light);
		border-color: var(--color-light);
		svg {
			fill: var(--color-dark);
		}
		&:hover {
			color: var(--color-light);
			background-color: var(--color-dark);
			svg {
				fill: var(--color-light);
			}
		}
	}
}

.wesdev-slider {
	.wesdev-slider-holder {
		.wesdev-slider-container {
			.wesdev-slide-wrapper::-webkit-scrollbar{ display:none; }
			.wesdev-slide-wrapper {
				scrollbar-width: none;
				display: flex;
				gap: calc(var(--wesdev-gap) * 2);
				overflow-x: auto;
				overflow-y: hidden;
				scroll-snap-type: x mandatory;
				-webkit-overflow-scrolling: touch;
				scroll-behavior: smooth;
				cursor: grab;
				user-select: none;
				&.is-dragging {
					cursor: grabbing;
				}
				.wesdev-slide {
					width: 50%;
					flex: 0 0 auto;
  					scroll-snap-align: start;
					display: flex;
					align-items: center;
					gap: var(--wesdev-gap);
					.slide-image {
						max-width: 40%;
						width: 329px;
						img {
							aspect-ratio: 329 / 508;
							object-fit: cover;
							max-height: 508px;
							border-radius: var(--button-radius);
						}
					}
					.slide-info {
						width: 60%;
						.slide-title {
							* {
								font-family: var(--base-font);
								font-size: var(--fontsize-20);
								color: var(--color-dark);
							}
						}
						.slide-content {
							color: var(--color-dark);
							font-family: var(--base-font);
							span {
								text-decoration: underline;
								margin-top: var(--wesdev-spacing);
							}
							& > a {
								text-decoration: underline;
								color: var(--color-dark);
							}
						}
						.slide-button {
							color: var(--color-dark);
							font-family: var(--base-font);
							margin-top: calc(var(--wesdev-spacing) * 2.5);
							a {
								display: inline-flex;
								align-items: center;
								svg {
									width: 18px;
									margin-right: 5px;
								}
							}
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 768px) {
		padding: 10px;
		.wesdev-slider-holder {
			.wesdev-slider-container {
				.wesdev-slide-wrapper {
					.wesdev-slide {
						gap: 30px;
						width: 100%!important;
						.slide-info {
							.slide-title {
								white-space: nowrap;
								font-size: 16px;
							}
							.slide-button {
								margin-top: var(--wesdev-spacing);
							}
						}
					}
				}
			}
		}
	}
}

.wesdev-dots{
	display: flex;
	gap: 0;
	justify-content: center;
	margin-top: 60px;
	border-radius: 4px;
	overflow: hidden;
	.wesdev-dot {
		width: 100%;
		height: 4px;
		padding: 0;
		border-radius: 0;
		border: 0;
		background-color: var(--color-light); 
		cursor: pointer;
		&.is-active {
			background: var(--color-gold); 
		}
	}
}

.wesdev-masonry {
	.wesdev-masonry-holder {
		.wesdev-masonry-container {
			max-width: var(--wesdev-small-container-max-width);
			.wesdev-masonry-filter {
				margin-bottom: var(--wesdev-gap);
			}
			.wesdev-masonry-filter-inner {
				display: flex;
                align-items: center;
				a {
					display: inline-block;
					color: var(--color-dark);
					min-width: 220px;
					text-align: center;
					&.is-active {
						text-decoration: underline;
					}
				}
			}
			.masonry-title {
				margin-top: calc(var(--wesdev-spacing) * 2);align-content* {
					margin-bottom: 0;
				} 
			}
			.wesdev-masonry-wrapper:not(.quoted) {
				display: grid;
				grid-template-rows: repeat(2, auto);
  				grid-auto-flow: column;
  				grid-auto-columns: minmax(0, 1fr);
				gap: calc(var(--wesdev-spacing) * 2.25);
				.wesdev-masonry-item {
					overflow: hidden;
					.masonry-image {
						display: flex;
					}
					img {
						border-radius: var(--button-radius);
					}
					&:nth-child(6n + 1), &:nth-child(6n + 4), &:nth-child(6n + 5){
						img {
							aspect-ratio: 326 / 562;
							object-fit: cover;
						}
					}
					&:nth-child(6n + 2), &:nth-child(6n + 3), &:nth-child(6n + 6){
						img {
							aspect-ratio: 1 / 1;
							object-fit: cover;
						}
					}
					&:nth-child(6n + 4) {
						margin-top: -252px;
					}
				}
				@media screen and (max-width: 768px) {
					display: block;
					column-count: 2;
					gap: 20px;
					.wesdev-masonry-item {
						margin-top: 0!important;
						margin: 0 0 20px;
						.masonry-image {
							img {
								aspect-ratio: 326 / 562;
                            	object-fit: cover;
							}
						}
					}
				}
			}
			.wesdev-masonry-wrapper.quoted {
				column-count: 4;
  				column-gap: 24px;
				.wesdev-masonry-item {
					break-inside: avoid;
					-webkit-column-break-inside: avoid;
					page-break-inside: avoid;
					margin: 0 0 24px;
					display: inline-block;
					width: 100%;
					vertical-align: top;
					overflow: hidden;
					border-radius: var(--button-radius);
					
					.masonry-text {
						padding: 40px;
						border-radius: var(--button-radius);
						p {
							font-size: 40px;
							line-height: 40px;
							font-family: var(--title-font);
						}
					}
					
					img {
						display: block;
						width: 100%;
						border-radius: var(--button-radius);
						aspect-ratio: 1 / 1;
						object-fit: cover;
					}
					&:nth-child(16n + 1) {
						img {
							aspect-ratio: 342 / 600;
						}
					}
					&:nth-child(16n + 7) {
						img {
							aspect-ratio: 342 / 543;
						}
					}
					
					&.quote-one {
						background-color: var(--color-dark);
						height: 300px;
						display: flex;
						align-items: center;
						p {
							color: var(--color-light);
						}
					}
					&.quote-two {
						background-color: var(--color-gold);
						height: 300px;
						display: flex;
						align-items: center;
						p {
							color: var(--color-dark);
						}
					}
					&.quote-three {
						background-color: var(--color-lightest);
						height: 300px;
						display: flex;
						align-items: center;
						p {
							color: var(--color-dark);
						}
					}
				}
			}
			.button-holder {
				margin-top: calc(var(--wesdev-spacing) * 2);
			}
			
			@media screen and (max-width: 1024px) {
			  .wesdev-masonry-wrapper.quoted { column-count: 3; }
			}
			@media screen and (max-width: 768px) {
			  .wesdev-masonry-wrapper.quoted { column-count: 2; }
				.wesdev-masonry-filter {
					margin-bottom: 30px;
					.wesdev-masonry-filter-inner {
						.wesdev-masonry-category-btn {
							padding: 0 20px 0 0;
							min-width: 1px;
						}
					}
				}
				.wesdev-masonry-wrapper.quoted {
					.wesdev-masonry-item {
						.masonry-image {
							img {
								aspect-ratio: 326 / 562;
                            	object-fit: cover;
							}
						}
						.masonry-text {
							padding: 20px!important;
							p {
								font-size: 32px!important;
                            	line-height: 34px!important;
							}
						}
						&.quote-one, &.quote-two, &.quote-three {
							height: 200px;
						}
					}
				}
			}
		}
	}
}

.wesdev-product-category-slider {
	margin-bottom: var(--wesdev-gap);
	.wesdev-product-category-slider-holder {
		.wesdev-product-category-slider-container {
			display: flex;
			justify-content: space-between;
			gap: calc(var(--wesdev-gap) * 2);
			.wesdev-product-category-slider-wrapper {
				display: flex;
				align-items: center;
				.wesdev-product-category-slider-item {
					a {
						display: inline-block;
						color: var(--color-dark);
						min-width: 220px;
						text-align: center;
						&.is-active {
							text-decoration: underline;
						}
					}
				}
			}
			.slider-button {
				.open-cart {
					display: block;
					width: 25px;
					height: auto;
				}
			}
		}
	}
	@media screen and (max-width: 768px) {
		.wesdev-product-category-slider-holder {
			.wesdev-product-category-slider-container {
				.wesdev-product-category-slider-wrapper {
					.wesdev-product-category-slider-item {
						a {
							min-width: 1px;
							padding: 0 20px 0 0;
						}
					}
				}
			}
		}
	}
}

.products {
	.product {
		position: relative;
		& > .add_to_cart_button, .wesdev-workshop-acf {
			display: none!important;
		}
		& > .woocommerce-loop-product__link {
			pointer-events: none;
			display: flex!important;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			img {
				border-radius: var(--button-radius);
			}
			.woocommerce-loop-product__title {
				.wesdev-workshop-duration {
					position: absolute;
					right: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					svg {
						width: 18px;
						margin-right: 4px;
					}
					@media screen and (max-width: 768px) {
						position: relative;
						right: auto;
						bottom: auto;
					}
				}
			}
			h2, .price {
				font-size: 18px!important;
				line-height: 24px;
				font-family: var(--base-font);
				color: var(--color-dark);
				padding: 0!important;
				margin: 0!important;
			}
		}
		& > .yith-wcqv-button {
			opacity: 0;
			position: absolute;
			top:0;
			bottom:0;
			right:0;
			left: 0;
			z-index: 9;
		}
		@media screen and (min-width: 1040px) {
			width: calc((100% / 4) - (120px / 4))!important;
			margin: 0 40px 40px 0!important;
			&:nth-child(4n+4) {
				margin: 0 0 40px 0!important;
			}
		}
	}
	@media screen and (min-width: 1040px) {
		width: var(--wesdev-container-max-width);
	}
}

.wpcf7-form {
	.formfield {
		margin-bottom: 40px;
		.label {
			display: block;
		}
		input {
			border: none;
			border-bottom: 1px solid var(--color-dark);
			background: transparent;
			border-radius: 0;
			width: 50%;
		}
		textarea {
			background: transparent;
			border-radius: 12px;
			border-color: var(--color-dark);
			margin-top: 10px;
		}
	}
	.wpcf7-submit {
		padding: 8px 30px!important;
		border-radius: calc(var(--button-radius) * 1.67)!important; 
		border: 1px solid var(--color-dark)!important;
		color: var(--color-dark)!important;
		background-color: transparent!important;
	}
	.wesdev-submit-bg {
		padding-left: 2.5rem!important;
		background-repeat: no-repeat!important;
		background-position: left 1rem center!important;
		background-size: 18px 18px!important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6' fill='none' stroke='%2363483E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	}
}

footer#site-footer {
	background-color: var(--color-gold);
	max-width: 100%;
	padding: calc(var(--wesdev-gap) * 1.5) 0;
	.container {
		max-width: var(--wesdev-container-max-width);
		margin: 0 auto;
		.footer-column__wrapper {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			color: var(--color-dark);
			gap: var(--wesdev-gap);
			.footer-column {
				max-width: calc(100% / 3);
				& > h2, & > h4 {
					color: var(--color-dark);
					font-family: var(--title-font);
					margin: 0;
				}
				& > h2 {
					font-size: 80px;
					line-height: 0.9;
				}
				& > h4 {
					font-size: 36px;
					margin-bottom: 20px;
				}
				.btn {
					display: inline-flex;
					align-items: center;
					margin-top: 20px;
					padding: 4px 20px;
					svg {
						width: 16px;
						height: auto;
						margin-right: 10px;
					}
				}
				address {
					font-style: normal;
				}
				ul {
					padding: 0;
					margin: 0;
					li {
						list-style-type: none;
					}
				}
			}
		}
		.footer-bottom {
			margin-top: var(--wesdev-gap);
			display: flex;
			justify-content: space-between;
			padding-top: 20px;
			border-top: 1px solid #F2E2CE;
			.footer-logo {
				max-width: 275px;
				display: flex;
				align-items: center;
				img {
					width: 100%;
					height: auto;
				}
			}
			.footer-social {
				display: flex;
				gap: 10px;
				svg {
					fill: #F2E2CE;
					width: 27px;
					height: auto;
				}
			}
		}
	}
	@media screen and (max-width: 768px) {
		padding: 30px 20px;
		.container {
			.footer-column__wrapper {
				flex-direction: column;
    			gap: 20px;
				.footer-column {
					max-width: 100%;
					margin-bottom: 30px;
					.footer-title {
						font-size: 42px;
					}
					.btn {
						height: 35px;
					}
				}
			}
			.footer-bottom {
				margin-top: 30px;
			}
		}
	}
}

.wesdev-slide-container {
	overflow: hidden;
	position: relative;
	&:before {
		content: '';
		background-color: rgba(242, 226, 206, .6);
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.wesdev-bg-slider {
		height: 100%;
	}
}

.yith-quick-view {
	.available-dates {
		@media screen and (min-width: 768px) {
			column-count: 2;
		}
	}
	.product_meta {
		display: none!important;
	}
	.yith-quick-view-content {
		.entry-summary {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.entry-title {
			display: block!important;
			font-size: 42px;
    		line-height: 120%;
		}
		
		.product {
			.product_cat-workshop {
				
			}
			.product:not(.product_cat-workshop) {
				.woocommerce-product-gallery {
					display: none;
				}
			}
		}
	}
	&.wesdev-qv--workshop {
		.yith-wcqv-wrapper {
			width: 80%!important;
			height: 90vh!important;
			left: 50%!important;
			top: 50%!important;
			@media screen and (min-width: 768px) {
				transform: translate(-50%, -50%)!important;
			}

			.yith-quick-view-content.woocommerce {
				div.product {
					.product {
						height: 90vh;
						padding: 110px 40px;

						.images.classic {
							display: none;
						}
						.woocommerce-product-gallery {
							width: 50%;
							& > a {
								height: 36px!important;
								display: none!important;
							}
							.woocommerce-product-gallery__wrapper {
								height: calc(100% - 20px);
								display: flex;
								flex-wrap: wrap;
								gap: 20px;
								.woocommerce-product-gallery__image {
									height: 175px;
									border-radius: var(--button-radius);
									&:nth-child(1) {
										height: calc(100% - 175px);
										width: 100%;
									}
									img {
										border-radius: var(--button-radius);
									}
								}
							}
						}
						div.summary {
							width: 50%;
							max-height: 100%!important;
							.wesdev-workshop-meta-title {
								margin-top: 30px;
								font-size: 18px;
							}
							.wesdev-workshop-acf {
								
								.wesdev-workshop-meta {
									column-count: 2;
									margin-bottom: 40px;
									.wesdev-workshop-meta__row {
										display: flex;
										align-items: center;
										.wesdev-workshop-meta__label {
											margin-right: 5px;
											display: inline-flex;
											align-items: center;
											.wesdev-workshop-meta__icon {
												display: inline-flex;
												margin-right: 5px;
												svg {
													width: 18px;
													height: 18px;
												}
											}
										}
									}
								}
								.booking-button {
									a {
										display: inline-flex;
										align-items: center;
										svg {
											width: 18px;
											margin-right: 5px;
										}
									}
								}
							}
							form.cart {
								display: none!important;
							}
						}
					}
				}
			}
		}
	}
}