@charset "UTF-8";

/*--------------------------------------------------------------
	0. Global
--------------------------------------------------------------*/
body{
	background: var(--lrk-color-light-grey); 
	color: var(--lrk-color-dark-blue); 
	font-family: "Varta", sans-serif; 
	font-size: 1.8rem;
	--container-size: 100%; 
	--wp--preset--font-size--huge: 3.5rem;
	--wp--preset--font-size--x-large: 3rem;
	--wp--preset--font-size--large: 2.5rem;
	--wp--preset--font-size--medium: 2.2rem;
	--wp--preset--font-size--small: 1.6rem;
}

@media (min-width: 600px) {
	body{--container-size: 540px;}
}
@media (min-width: 782px) {
	body{
		--container-size: 768px;
		--wp--preset--font-size--large: 2.75rem;		
		--wp--preset--font-size--x-large: 3.5rem;
	}
}

@media (min-width: 992px){
	body{
		--container-size: 960px;
		--wp--preset--font-size--medium: 2.25rem;		
		--wp--preset--font-size--large: 3rem;		
		--wp--preset--font-size--x-large: 4rem;
	}
}

@media (min-width: 1280px){
	body{
		--container-size: 1200px;
		--wp--preset--font-size--medium: 2.5rem;
		--wp--preset--font-size--large: 3.5rem;
		--wp--preset--font-size--x-large: 4.5rem;
	}
}
@media (min-width: 1440px){
	body{--container-size: 1400px;}
}

@media (min-width: 1680px){
	body{--container-size: 1600px;}
}


h1, .h1,
#header > article .header-content h1, #header > article .header-content .h1-like{font-family: "Varta", sans-serif; font-weight: 400; color: var(--lrk-color-blue); margin-top: 0; line-height: 1.2; font-size:var(--wp--preset--font-size--x-large);}
h2, .h2{position: relative; font-family: "Varta", sans-serif; font-weight: 400; font-size:var(--wp--preset--font-size--large); color: var(--lrk-color-blue); margin-bottom: 25px;}
h2:after, .h2:after{content:''; display: block; margin: 10px 0; width: 70px; height: 3px; background: var(--lrk-color-yellow);}
h2.has-text-align-center:after, .h2.has-text-align-center:after{margin: 10px auto;}
h3, .h3{font-size: var(--wp--preset--font-size--medium); font-weight: 700;}
h4, .h4{font-size: 1.8rem; font-weight: 700; color: var(--lrk-color-dark-blue); margin: 0;}

a{color: inherit;}
li::marker {color: var(--lrk-color-yellow); font-size: 2rem;}
ul{padding-left: 15px;}
ul > li{margin-bottom: 1em;}

mark{padding: unset;}

.btn, button, input.submit, .frm_button_submit, .wp-block-button > .wp-block-button__link{
	border: 1px solid; border-radius: 8px; background: transparent; 
	color: var(--lrk-color-blue);
	font-size: inherit;
	text-transform: inherit;
	padding: 1rem 2rem;
}
.btn:hover, button:hover, input.submit:hover, .frm_button_submit:hover, .wp-block-button__link:hover{
	background: var(--lrk-color-blue);
	border-color: var(--lrk-color-blue);
	color: var(--lrk-color-white);
}
.btn.contact:before{content: url('../images/icon-mail.svg'); transition: 0.5s; display: inline-block; width: 22px; margin-right: 10px;}
.btn.contact:hover:before{content: url('../images/icon-mail-white.svg');}

/* strong{color: var(--lrk-color-yellow);} */
section:not(#primary):not(#header):not(#top-bar){padding-top: 50px; padding-bottom: 50px; position: relative;}

.content-area{
	width: var(--container-size);
	max-width: unset !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	display: block;
	position: relative;
}

@media (min-width: 782px) {
	.content-area{padding-left: 0; padding-right: 0;}
	.btn, button, input.submit, .frm_button_submit, .wp-block-button > .wp-block-button__link{padding: 1rem 3rem 0.8rem;}
}
@media (min-width: 992px) {
	section:not(#primary):not(#header):not(#top-bar){padding-top: 80px; padding-bottom:80px;}
}


/****	0.1. Hack Gutenberg		****/
.entry-content .alignfull{width: 100vw;}

.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull > .wp-block-group__inner-container{width: var(--container-size); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}
	
.wp-block-media-text{margin-bottom: 0;}
.wp-block-media-text h2, .wp-block-media-text .h2{margin-bottom: 15px;}
.wp-block-media-text h2:after, .wp-block-media-text .h2:after{display: none;}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{margin-bottom: 2em;}

@media (min-width: 782px){
	
	.entry-content .alignfull{width: calc(100vw - 10px);}
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{padding-left: 0; padding-right: 0;}
	
	.wp-block-media-text .wp-block-media-text__content{position: relative; padding-left: 16%; padding-right: 0}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{padding-left: 6%; padding-right: 8%;}
	.wp-block-media-text .wp-block-media-text__content:before{position:absolute; left: 10%; top: 0; content: ''; width: 3px; height: 100%; background: var(--lrk-color-yellow);}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content:before{left: 0;}
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{margin-bottom: 0;}
}



/*--------------------------------------------------------------
	1. Navbar
--------------------------------------------------------------*/
header{background: var(--lrk-color-white); height: auto; padding: 10px 0; position: sticky; top: 0; 
	-webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
header.sticky{height: auto;}

header #navbar{gap: 1em; justify-content: space-between; flex-wrap: wrap;}
header #navbar a.custom-logo-link{flex-basis: 200px; order: 2}
header #navbar a.custom-logo-link img{width: 100%; max-height: 75px; transition: 0.3s;}
header.sticky #navbar a.custom-logo-link img{height: auto; width: auto;}

header #navbar .navbar-nav{flex-basis: auto; text-align: center; order: 3;}
header #navbar nav{font-weight: 600; text-transform: none; min-width: unset; background: var(--lrk-color-light-grey); top: 100%; left: 0; right: unset; width: 100vw;}
header #navbar nav a{font-size: 1.6rem; font-weight: 600;}
header #navbar nav li{position: relative; margin-bottom: 0;}
header #navbar nav li.active > a,
header #navbar nav li > a:hover{color: inherit; /*var(--lrk-color-yellow);*/}

header #navbar .nav-toggle{background: var(--lrk-color-blue); border-radius: 5px;}
header #navbar .nav-toggle span{background: var(--lrk-color-white);}

@media(min-width: 782px){
	header #navbar{flex-wrap: nowrap; gap: 2em;}
	header #navbar nav{background: none; width: auto;}
	header #navbar nav li{padding: 0 5px;}
	header #navbar nav li:not(:last-child):after{content:''; width: 5px; height: 5px; border-radius: 50%; background: var(--lrk-color-yellow); display: inline-block; margin-left: 10px; vertical-align: middle;}
	header #navbar a.custom-logo-link{flex-basis: 150px;}
}

@media(min-width: 992px){
	header #navbar nav ul > li{padding: 0 10px;}
	header #navbar nav li:not(:last-child):after{margin-left: 20px;}
	
}
@media(min-width: 1280px){
	header #navbar nav ul > li{padding: 0 15px;}
	header #navbar nav li:not(:last-child):after{margin-left: 30px;}
	header #navbar nav a{font-size: 1.8rem;}
	header #navbar a.custom-logo-link{flex-basis: 220px;}
}



/**	1.1	Top bar	**/
header #navbar #top-bar{font-size: inherit; border: 0; padding: 0; margin: 0; order: 1; flex-basis: 100%; display: none;}
header #navbar #top-bar .phone{position: relative; display: flex; align-items: center; gap: 10px;}
header #navbar #top-bar .phone:before{content: url('../images/icon-phone.svg'); line-height: 1; width: 20px;}
header #navbar #top-bar .wp-block-group__inner-container{border-left: 2px solid var(--lrk-color-grey); padding-left: 10px;}
header #navbar #top-bar .phone p{margin: 0; white-space: nowrap;}

@media(min-width: 782px){
	header #navbar #top-bar{order: 3; flex-basis: auto; display: block;}
	header #navbar a.custom-logo-link{order: 1;}
	header #navbar .navbar-nav{order: 2;}
}


/*--------------------------------------------------------------
	2. Header
--------------------------------------------------------------*/
#header {height: auto; min-height: 275px;}
.home #header{height: auto;}
#header{background: var(--lrk-color-light-grey); position: relative;}
.home #header:after{content: ''; width: 100px; height: 100px; background: var(--lrk-color-yellow); position: absolute; z-index: -1; top: 100%; right: 0; display: block; border-bottom-left-radius: 9999px;}
#header .content-area{display: flex; flex-direction: column; gap: 1em; align-items: center; height: 100%;}
#header > article{padding: 50px 0; display: block;}
#header > article .header-content{color: inherit; text-align: left; flex-basis: 100%; flex-grow: 1; height: auto;}
#header > article .header-content .suptitle{margin-bottom: 10px; color: var(--lrk-color-blue); font-size: var(--wp--preset--font-size--small);}
#header > article .header-content h1, #header > article .header-content .h1-like{text-transform: none;}
#header > article .header-content .header-btn{margin-top: 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 1em;}
#header > article .header-content .header-btn .btn{margin-top: 0; margin-bottom: 0;}
#header > article .header-content .header-btn p{margin-top: 0; }
#header > article .header-content strong{color: var(--lrk-color-yellow); }

#header > article picture{flex-basis: 100%; position: relative}
#header > article picture:before{content: ''; z-index: 1; width: 70%; height: calc(100% + 50px); background: var(--lrk-color-blue); position: absolute; top: 0; right: -15px; display: block; border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
#header > article picture img{border-radius: 20px; z-index: 2; position: relative; margin-top: 50px;} 

@media(min-width: 782px){
	#header {height: 275px;}
	.home #header{height: auto;}
	#header:before{content: ''; width: 45%; height: 100%; background: var(--lrk-color-blue); position: absolute; top: 0; right: 0; display: block; border-bottom-left-radius: 20px;}
	#header .content-area{flex-direction: row; gap: 2em;}
	#header > article .header-content{flex-basis: 50%; flex-grow: 0;}
	#header > article picture{flex-basis: calc(50% + 2em); height: 100%;}
	body:not(.home) #header > article picture img{position: absolute; top: 0; left: 0; height: calc(100% + 150px); width: 100%; object-fit: cover;}
	.home #header > article .header-content{flex-basis: 30%;}
	.home #header > article picture{flex-basis: 70%;}
	#header > article picture:before{display: none;}
	#header > article picture img{margin-top: 0;}
}


ul.breadcrumb, .woocommerce #header .woocommerce-breadcrumb{margin-top: 10px; background: none; padding: 0;}
ul.breadcrumb > li{font-size: var(--wp--preset--font-size--small); color: var(--lrk-color-blue); font-weight: normal; margin-bottom: 0;}
ul.breadcrumb > li > a, .woocommerce #header .woocommerce-breadcrumb a{color: var(--lrk-color-blue);}
ul.breadcrumb > li:after{content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lrk-color-blue); display: inline-block; vertical-align: middle;}


/*--------------------------------------------------------------
	3. Page
--------------------------------------------------------------*/
body.home #primary,
#primary:has(.page-intro){padding-top: 0; padding-bottom: 0;}

@media(min-width: 782px){
	body:not(.home) #primary:not(:has(.page-intro)){padding-top: 150px;)
}

/*--------------------------------------------------------------
	4. Footer
--------------------------------------------------------------*/
footer{background: var(--lrk-color-blue); color: var(--lrk-color-white); margin-top: 0;}
footer a{text-decoration: none;}
footer p{text-align: center;}
footer .mail,
footer .address,
footer .phone{display: flex; gap: 10px; align-items: center; justify-content: center;}
footer .mail:before{content: url('../images/icon-mail-white.svg'); width: 22px; line-height: 1;}
footer .phone:before{content: url('../images/icon-phone-white.svg'); width: 22px; line-height: 1;}
footer .address:before{content: url('../images/icon-map-white.svg'); width: 22px; line-height: 1;}

footer .has-medium-font-size{margin-bottom: 25px;}
footer figure{text-align:center;}

footer figure.wp-block-gallery.has-nested-images{gap: 2em; align-items: center; justify-content: center;}
footer figure.wp-block-gallery.has-nested-images > .wp-block-image{flex-basis: auto; flex-grow: 0; width: auto !important; margin-bottom: 0 !important;}
footer figure.wp-block-gallery.has-nested-images > .wp-block-image img{max-height: 45px;}

@media(min-width: 782px){
	footer figure, footer p{text-align: unset;}
	footer .mail, footer .address, footer .phone, footer figure.wp-block-gallery.has-nested-images{justify-content: unset;}
}

footer #footer-menu{text-align: center; background: var(--lrk-color-dark-blue); border-top: 1px solid var(--lrk-color-white); padding: 15px 0; font-size:  var(--wp--preset--font-size--small);}
footer #footer-menu .grid{align-items: center; justify-content: space-between;}
footer #footer-menu .grid > *{flex-basis: auto; flex-grow: 0;}
footer #footer-menu .grid nav{text-align: center; margin-bottom: 10px;}
footer #footer-menu ul > li{margin-bottom: 0;}
footer #footer-menu ul > li:after{content: ''; width: 5px; height: 5px; background: var(--lrk-color-white); border-radius: 50%; display: inline-block; vertical-align: middle; margin: 0 15px}

@media(min-width: 782px){
	footer #footer-menu,
	footer #footer-menu .grid nav{text-align: unset; margin-bottom: 0;}
}