/*
 Theme Name:   HanZi (Hannoversche Zimmerei)
 Description:  GeneratePress child theme für HanZi (Hannoversche Zimmerei)
 Author:       Mark Colling
 Author URI:   https://mark-colling.de
 Template:     generatepress
 Version:      1.0
*/

/* max-width mit margins */
.mw-rails {
	--container: var(--gb-container-width);
  	--rail: max(0px, calc((100% - var(--container)) / 2));
}
.mw-both  { margin-inline: var(--rail); }
.mw-left  { margin-inline-start: var(--rail); }
.mw-right { margin-inline-end: var(--rail); }

/* clip-path */
.clip {
	--clip_size_normal: 200px;
	--clip_size_smaller: 150px;
	--clip_size_smallest: 100px;
}
.clip.footer-clip {
	clip-path: polygon(0px 0px, calc(100% - var(--clip_size_normal)) 0px, 100% var(--clip_size_normal), 100% 100%, 0 100%);
}
.clip.bottom-left {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip_size_normal) 100%, 0 calc(100% - var(--clip_size_normal)));
}
.clip.top-right {
	clip-path: polygon(0px 0px, calc(100% - var(--clip_size_normal)) 0px, 100% var(--clip_size_normal), 100% 100%, 0 100%);
}
.clip.top-left {
	clip-path: polygon(0px var(--clip_size_normal), var(--clip_size_normal) 0px, 100% 0px, 100% 100%, 0px 100%);
}
.clip.top-left.smallest {
	clip-path: polygon(0px var(--clip_size_smallest), var(--clip_size_smallest) 0px, 100% 0px, 100% 100%, 0px 100%);
}
.clip.top-left.smaller {
	clip-path: polygon(0px var(--clip_size_smaller), var(--clip_size_smaller) 0px, 100% 0px, 100% 100%, 0px 100%);
}
.clip.top-right.smaller {
	clip-path: polygon(0px 0px, calc(100% - var(--clip_size_smaller)) 0px, 100% var(--clip_size_smaller), 100% 100%, 0 100%);
}
.clip.top-right.smallest {
	clip-path: polygon(0px 0px, calc(100% - var(--clip_size_smallest)) 0px, 100% var(--clip_size_smallest), 100% 100%, 0 100%);
}
@media (max-width: 834px) {
	.clip.footer-clip {
		clip-path: polygon(0px 0px, calc(100% - var(--clip_size_smallest)) 0px, 100% var(--clip_size_smallest), 100% 100%, 0 100%);
	}
	.page-home .clip.bottom-left.cta-img, 
	.page-karriere .clip.bottom-left.cta-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip_size_smaller) 100%, 0 calc(100% - var(--clip_size_smaller)));
	}
	.page-unternehmen .clip.bottom-left.cta-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip_size_smallest) 100%, 0 calc(100% - var(--clip_size_smallest)));
	}
	.page-unternehmen .clip.bottom-left.handwerk-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip_size_smaller) 100%, 0 calc(100% - var(--clip_size_smaller)));
	}
	.page-unternehmen .clip.top-right.quote {
		clip-path: polygon(0px 0px, calc(100% - var(--clip_size_smallest)) 0px, 100% var(--clip_size_smallest), 100% 100%, 0 100%);
	}
	.clip.top-left.smaller.benefits {
		clip-path: polygon(0px var(--clip_size_smallest), var(--clip_size_smallest) 0px, 100% 0px, 100% 100%, 0px 100%);
	}
}

/* Menu */
.main-navigation .main-nav ul li a {
	line-height: 50px;
}
.main-navigation .main-nav ul li.main-menu-kontakt a {
	background-color: var(--hanzi-red);
	color: var(--base-3);
  	border-radius: 15px;
  	margin-left: 25px;
}
.main-navigation .main-nav ul li.main-menu-kontakt a:hover {
	background-color: var(--hanzi-red) !important;
	color: var(--base-3) !important;
}

#mobile-menu-control-wrapper.main-navigation .menu-toggle {
	padding: 0;
	line-height: 0;
	font-size: 28px;
	color: var(--hanzi-red);
}
.has-inline-mobile-toggle #site-navigation.toggled {
	background-color: var(--base-3);
}

.main-navigation ul ul {
	border: 3px solid var(--hanzi-grey);
	border-radius: 15px;
	padding: 52px 0 14px;
	text-align: center;
	box-shadow: none;
	top: -4px;
	z-index: -1;
}

/* Hanzi Hero */
.page-hero.hanzi-hero .inside-page-hero.grid-container {
	position: relative;
	display: flex;
	height: 100vh;
	width: 100%;
	justify-content: center;
	align-items: center;
}
.page-hero.hanzi-hero .inside-page-hero .content-arrow {
	position: absolute;
	left: 40px;
	bottom: 80px;
}
.page-hero.hanzi-hero .inside-page-hero .hanzi-home-logo {
	width: 100%;
	max-width: 630px;
	padding: 40px;
}
@media (max-width: 834px) {
  	.site-header .site-logo .header-image {
		width: 130px;
	}
	
	.home .jobs-section {
		background-position: center;
	}
}

/* Leistungen Single Slider */
.wp-block-greenshift-blocks-swiper.leistungen-single-slider .wp-block-greenshift-blocks-image > img {
	min-height: 300px;
}
.wp-block-greenshift-blocks-swiper.leistungen-single-slider .swiper-button-next::after {
	display: inline-block;
	width: 27px;
	height: 62px;
	background: currentColor;  

	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 62'><path d='M6.80412 0L0 0L0 32L0 61.5L27 32L6.80412 32L6.80412 0Z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 62'><path d='M6.80412 0L0 0L0 32L0 61.5L27 32L6.80412 32L6.80412 0Z'/></svg>") center/contain no-repeat;
	
	transform: rotate(-90deg);
}
.wp-block-greenshift-blocks-swiper.leistungen-single-slider .swiper-button-prev::after {
	display: inline-block;
	width: 27px;
	height: 62px;
	background: currentColor;  

	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 62'><path d='M6.80412 0L0 0L0 32L0 61.5L27 32L6.80412 32L6.80412 0Z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 62'><path d='M6.80412 0L0 0L0 32L0 61.5L27 32L6.80412 32L6.80412 0Z'/></svg>") center/contain no-repeat;
	
	transform: rotate(-90deg) scaleY(-1);
}

/* Stelleangebot Single */
article.stellenangebot ul {
	margin: 0;
	list-style-position: inside;
}

/* Helpers */
.home-gradient-stop {
	background-image: linear-gradient(180deg,var(--hanzi-grey) calc(100% - 100px),var(--base-3) 100px);
}
.leistungen-gradient-stop {
	background-image: linear-gradient(0deg, var(--base-3) calc(100% - 500px),var(--hanzi-grey) 500px);
}

/* Burger SVG Custom */
/* default: show burger, hide close */
.menu-toggle .nav-icon--close { display: none; }

/* when open, flip them by aria-expanded alone */
.menu-toggle[aria-expanded="true"] .nav-icon--burger { display: none; }
.menu-toggle[aria-expanded="true"] .nav-icon--close { display: inline; }