/*
Theme Name: Komarek
Theme URI: 
Author: Aspectus Group
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: komarek
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks

/* Defaults
---------------------------------------- */

/* Defaults
---------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--cut: 40px;
	--nocut: 0px;
}
@media only screen and (min-width: 1024px) {
	:root {
		--cut: 80px;
		--nocut: 0px;
	}
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body * {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: pretty;
    text-wrap: balance;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

input:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--neutral);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 8px;
}

/* -- Navigation -- */

li.wp-block-navigation-item {
	border-bottom: 2px solid transparent;
}
li.wp-block-navigation-item:hover {
	color: var(--wp--preset--color--primary);
}
li.wp-block-navigation-item.current-menu-item {
	border-bottom: 2px solid var(--wp--preset--color--custom-yellow);
	color: var(--wp--preset--color--contrast);
}

@media only screen and (max-width: 782px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.wp-block-navigation-item.has-child > a,
	.wp-block-navigation-item.has-child > button {
		display: inline-flex;
		align-items: center;
		margin-right: 0.5rem;
	}
	.wp-block-navigation-item.has-child > ul {
		flex-basis: 100%;
		width: 100%;
	}
	.wp-block-navigation-item.has-child > ul > li {
		padding: 5px 0;
	}
	li.wp-block-navigation-item.current-menu-item {
		border-bottom: 0;
	}
	li.wp-block-navigation-item.current-menu-item > a {
		border-bottom: 2px solid var(--wp--preset--color--custom-yellow);
		width: max-content;
	}
}


.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container {
	padding: 30px;
	padding-left: 30px;
    gap: 20px;
    --cut: 20px;
    background: linear-gradient(45deg, #fff 0 var(--cut), #98ffc8 var(--cut)) bottom left;
    margin-top: 20px;
}
.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    transform: translateY(-100%);
    transition: height .2s ease;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container > li {
	background-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 1px solid currentColor;
	padding: 2px;
}
.wp-block-navigation__responsive-container-close {
	z-index: 10;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}

.header-menu-wrapper {
	--cut: 50px;
	background: linear-gradient(45deg, #fff 0 var(--cut), #f7f7f8 var(--cut)) bottom left;
	width: 70%;
}

@media (max-width: 599px) {
	header > .wp-block-group > .wp-block-group {
		flex-wrap: nowrap;
	}
	header > .wp-block-group {
		padding-right: 0;
	}
	.header-menu-wrapper {
		width: 30%;
		--cut: 20px;
	}
	.header-menu-wrapper > nav {
		justify-content: center;
	}
}
@media (min-width: 600px) and (max-width: 1024px) {
  	.header-menu-wrapper {
		width: 30%;
		--cut: 20px;
	}
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* -- Columns -- */

@media only screen and (min-width: 782px) {
	.is-style-columns-overlap,
	.is-style-columns-overlap-alt {
		margin-top: 140px;
	}
	.is-style-columns-overlap > div:last-child {
		margin-left: -10%;
		margin-top: -5%;
	}

	.is-style-columns-overlap-alt > div:first-child {
		z-index: 1;
		margin-top: -5%;
	}
	.is-style-columns-overlap-alt > div:last-child {
		margin-left: -10%;
		z-index: 0;
	}
}

.is-style-bottom-right-cut {
	/* mask:
	  linear-gradient(135deg, transparent 0 var(--nocut), #000 var(--nocut)) top left,
	  linear-gradient(-135deg, transparent 0 var(--nocut), #000 var(--nocut)) top right,
	  linear-gradient(-45deg, transparent 0 var(--cut), #000 var(--cut)) bottom right,
	  linear-gradient(45deg, transparent 0 var(--nocut), #000 var(--nocut)) bottom left;
	mask-size: 50% 50%;
	mask-repeat: no-repeat; */
	mask-image: linear-gradient(
		-45deg,
		transparent 0,
		transparent var(--cut),
		black var(--cut)
	);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: bottom right;
}

.is-style-bottom-left-cut {
	mask-image: linear-gradient(
		45deg,
		transparent 0,
		transparent var(--cut),
		black var(--cut)
	);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: bottom left;
}
.is-style-top-left-cut {
	mask-image: linear-gradient(135deg, transparent 0 var(--cut), #000 var(--cut));
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: bottom left;
}
.is-style-top-right-cut {
	mask-image: linear-gradient(225deg, transparent 0 var(--cut), #000 var(--cut));
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: top right;
}

.home-contact-promo > div {
	flex-direction: column;
}
.home-contact-promo > div > div:last-child {
	width: 70%;
	padding-right: 20%;
	align-self: flex-end;
}

.wp-block-query .wp-block-post-terms {
	width: max-content;
}
.wp-block-query .wp-block-post-terms > a {
	text-decoration: none;
	cursor: pointer;
	pointer-events: none;
}

.is-style-bottom-left-outline {
	position: relative;
}
.is-style-bottom-left-outline::before {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0,100% 0,100% 100%,160px 100%,0 calc(100% - 160px),0 0,4px  4px ,4px calc(100% - 160px - 1.66px),calc(160px + 1.66px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 4px,4px 4px);
	background-color: var(--wp--preset--color--custom-yellow);
	width: 98%;
	height: 100%;
}

.is-style-bottom-right-outline {
	position: relative;
}
.is-style-bottom-right-outline::before {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0,100% 0,100% calc(100% - 160px),calc(100% - 160px) 100%,0 100%,0 0,4px  4px ,4px calc(100% - 4px),calc(100% - 160px - 1.66px) calc(100% - 4px),calc(100% - 4px) calc(100% - 160px - 1.66px),calc(100% - 4px) 4px,4px 4px);	background-color: var(--wp--preset--color--custom-yellow);
	width: 100%;
	height: 100%;
}

.footer-columns {
	mask: linear-gradient(-45deg, transparent 0 var(--cut), #000 var(--cut)) bottom right;
}

.swiper-button-prev, .swiper-button-next {
	top: auto;
	bottom: 0.25rem;
	color:var(--wp--preset--color--contrast);
}
.is-style-services .swiper-button-next,
.is-style-services .swiper-button-prev,
.is-style-product .swiper-button-next,
.is-style-product .swiper-button-prev,
.industry-carousel .swiper-button-next,
.industry-carousel .swiper-button-prev {
	color: var(--wp--preset--color--secondary);
}
.swiper-button-prev {
	left: 10%;
}
.swiper-button-next {
	right: 10%;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
	color:var(--wp--preset--color--contrast);
}

.about-benefit-grid img {
	max-width: 100px;
}

.wp-block-social-links .wp-social-link svg {
	width: 30px;
	height: 30px;
}

.blog-latest-grid li,
.case-studies-grid li {
	display: flex;
	flex-direction: column;
}
.blog-latest-grid li > .wp-block-group,
.case-studies-grid li > .wp-block-group {
	height: 100%;	
}
.blog-latest-grid li > .wp-block-group {
	background: #fff;
}

@media (min-width: 784px) {
	.page-nav.wp-block-navigation ul li a {
		padding: 10px 15px;
		border: 1px solid transparent;
	}
	.page-nav.wp-block-navigation ul li a:hover {
		border-color: var(--wp--preset--color--primary);
	}
}

/* Forms
---------------------------------------- */
.ninja-forms-field.wp-element-button.nf-element {
	background-color: var(--wp--preset--color--secondary);
	color: #335543;
	border-radius: 0;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

.zindex-1 {
	z-index: 1;
	position: relative;
}

.no-overflow {
	overflow: hidden;
}

.outline-before {
	position: relative;
}
.outline-before::before {
	content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(
		160px 0, 
		100% 0, 
		100% 100%, 
		0 100%, 
		0 160px, 
		160px 0, 
		calc(160px + 1.66px) 4px, 
		4px calc(160px + 1.66px), 
		4px calc(100% - 4px), 
		calc(100% - 4px) calc(100% - 4px), 
		calc(100% - 4px) 4px, 
		calc(160px + 1.66px) 4px
	  );
    background-color: var(--wp--preset--color--custom-yellow);
    width: 100%;
    height: 100%;
	top: -40%;
	left: -5%;
}
.outline-before-top-right::before,
.outline-before-tr-high::before {
	clip-path: polygon(
		0 0,
		calc(100% - 160px) 0,
		100% 160px,
		100% 100%,
		0 100%,
		0 0,
		4px 4px,
		4px calc(100% - 4px),
		calc(100% - 4px) calc(100% - 4px),
		calc(100% - 4px) calc(160px + 1.66px),
		calc(100% - 160px - 1.66px) 4px,
		4px 4px
	);
    top: 5%;
    width: 80%;
	left: 22%;
}
.outline-before-tr-high::before {
	top: -15%;
	width: 90%;
	left: 5%;
}
.outline-before-top-left::before {
	clip-path: polygon(
		0 160px,
		160px 0,
		100% 0,
		100% 100%,
		0 100%,
		0 160px,
		4px 160px,
		4px calc(100% - 4px),
		calc(100% - 4px) calc(100% - 4px),
		calc(100% - 4px) 4px,
		160px 4px,
		4px 160px
	);
    top: -150px;
    width: 80%;
	left: 0%;
}
.outline-before-bl::before {
	clip-path: polygon(
		0 calc(100% - 160px),
		0 0,
		100% 0,
		100% 100%,
		160px 100%,
		0 calc(100% - 160px),
		4px calc(100% - 160px - 1.66px),
		calc(160px + 1.66px) calc(100% - 4px),
		calc(100% - 4px) calc(100% - 4px),
		calc(100% - 4px) 4px,
		4px 4px,
		4px calc(100% - 160px - 1.66px)
	);
	top: 20%;
	left: 0%;
	width: 90%;
}

.justify-between {
	justify-content: space-between;
}
.items-center {
	align-items: center;
	display: flex;
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {

	/* -- Utility -- */

	.is-style-hidden-mobile {
		display: none !important;
	}


	.page-nav {
		flex-wrap: nowrap;
		padding-top: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
	}
	.page-nav li {
		flex: 0 0 auto;       /* Don't shrink */
		white-space: nowrap;  /* Prevent text from wrapping */
		padding-bottom: 20px;
		border-bottom: 1px solid var(--wp--preset--color--contrast);
		width: 100%;
	}

	.about-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.about-benefit-grid > div {
		gap: 20px;
		align-items: flex-start;
	}
	.about-benefit-grid img {
		max-width: 50px;
	}
	.about-benefit-grid p.has-medium-font-size {
		font-size: 14px!important;
	}
	.about-benefit-grid * {
		min-width: 0;
	}

	footer nav ul.wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
	}
	.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
		flex-direction: column;
	}
	.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex > div {
		width: 100%;
	}

}

@media only screen and (max-width: 782px) {

	/* -- Columns -- */

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

	.is-style-bottom-right-outline::before {
		clip-path: polygon(0 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 0,4px  4px ,4px calc(100% - 4px),calc(100% - 80px - 0.83px) calc(100% - 4px),calc(100% - 4px) calc(100% - 80px - 0.83px),calc(100% - 4px) 4px,4px 4px);	background-color: var(--wp--preset--color--custom-yellow);
		width: 95%;
		left: 5%;
	}
	.outline-before-top-left::before {
		width: 95%;
		left: 5%;
	}
	.outline-before-bl::before {
		clip-path: polygon(
			0 calc(100% - 80px),
			0 0,
			100% 0,
			100% 100%,
			80px 100%,
			0 calc(100% - 80px),
			4px calc(100% - 80px - 0.83px),
			calc(80px + 0.83px) calc(100% - 4px),
			calc(100% - 4px) calc(100% - 4px),
			calc(100% - 4px) 4px,
			4px 4px,
			4px calc(100% - 80px - 0.83px)
		);
		left: -15px;
		height: 50%;
		top: auto;
		bottom: -50px;
	}
	.is-style-bottom-left-outline::before {
		clip-path: polygon(0 0,100% 0,100% 100%,80px 100%,0 calc(100% - 80px),0 0,4px  4px ,4px calc(100% - 80px - 0.83px),calc(80px + 0.83px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 4px,4px 4px);
		right: 0;
	}

	.wp-block-image img[style*="aspect-ratio:12/5"] {
		aspect-ratio: 4 / 3!important;
	}
	.outline-before-top-right::before {
		clip-path: polygon(
			0 0,
			calc(100% - 80px) 0,
			100% 80px,
			100% 100%,
			0 100%,
			0 0,
			4px 4px,
			4px calc(100% - 4px),
			calc(100% - 4px) calc(100% - 4px),
			calc(100% - 4px) calc(80px + 0.83px),
			calc(100% - 80px - 0.83px) 4px,
			4px 4px
		);
		top: -8%;
		height: 114%;
		width: 100%;
		left: 15px;
	}
	.home-contact-promo > div > div:last-child {
		padding-right: 0;
		width: 85%;
	}
	.swiper-button-prev:after, .swiper-button-next:after {
		font-size: 20px;
	}
	.industry-carousel p {
		font-size: 14px !important;
	}
	.about-benefit-grid > div p {
		flex-basis: 100%;
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		max-height: 0;
		padding-top: 0!important;
		padding-bottom: 0!important;
		margin-top: 0!important;
		overflow: hidden!important;
		opacity: 0;
		transition: 
		  max-height 0.3s ease,
		  padding 0.3s ease,
		  opacity 0.3s ease;
	}
	.wp-block-navigation .has-child button[aria-expanded="true"] + .wp-block-navigation__submenu-container {
		max-height: 1000px;
		padding-top: 1rem!important;
		padding-bottom: 1rem!important;
		margin-top: 20px!important;
		opacity: 1;
	}
	.wp-block-navigation__responsive-container.is-menu-open 
    .wp-block-navigation__responsive-container-content 
    .wp-block-navigation__submenu-icon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

}