/*
 * Components of the converted pages: wrappers (.vr-section, .vr-w), entrance animation, shape dividers, and the widget blocks
 * (varus/cta, icon-box, flip-box, posts, media filter). Per element values (colors, paddings, widths) are in the post meta
 * _varus_page_css, printed in the page head. Values below reproduce the Elementor 3.1 defaults used by the old site (kit 33).
 * Selectors for the old HTML wrappers (.vr-row, .vr-col, .vr-acc, .vr-imagebox and so on) were removed after the block conversion
 * (theme-replacement/blocks/final/prune-css.py lists what a stylesheet no longer needs).
 */

:root {
	--vr-k-primary: #6ec1e4;
	--vr-k-text: #7a7a7a;
	--vr-k-accent: #61ce70;
	--vr-k-secondary: #54595f;
	--vr-k-head: var(--vr-font-heading, "Jura", sans-serif);
	--vr-k-body: var(--vr-font-text, "Montserrat", sans-serif);
	--vr-k-line: #d4d4d4;
	--vr-content-max: 1140px;
	--vr-anim-dist: 60px;
}

html,
body {
	overflow-x: clip;
}

/* ---------- Page body, sections, columns ---------- */
.vr-body,
.vr-pbody {
	width: 100%;
}

.vr-section {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.vr-section.vr-stretch {
	width: var(--vr-vw, 100vw);
	margin-left: calc(50% - var(--vr-vw, 100vw) / 2);
}

.vr-col__in {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
}

/* vertical alignment: section level centers the column content box, column level aligns the widgets */

/* shape dividers */

/* visibility per device (desktop above 1024, tablet 768 to 1024, phone up to 767) */
@media (min-width: 1025px) { .vr-hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .vr-hide-t { display: none !important; } }
@media (max-width: 767px) { .vr-hide-m { display: none !important; } }

/* ---------- Widget base ---------- */
.vr-w {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.vr-w:not(:last-child) {
	margin-bottom: 20px;
}

.vr-ico {
	max-width: none;
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: visible;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* ---------- Entrance animation and scroll effects (components.js) ---------- */
.vr-js .vr-anim:not(.vr-in) {
	opacity: 0;
}

.vr-js .vr-anim[data-vr-anim] {
	transition: opacity 1s ease, transform 1s ease;
}

.vr-js .vr-anim:not(.vr-in)[data-vr-anim="fadeInUp"] { transform: translate3d(0, var(--vr-anim-dist), 0); }
.vr-js .vr-anim:not(.vr-in)[data-vr-anim="fadeInDown"] { transform: translate3d(0, calc(var(--vr-anim-dist) * -1), 0); }
.vr-js .vr-anim:not(.vr-in)[data-vr-anim="fadeInLeft"] { transform: translate3d(calc(var(--vr-anim-dist) * -1), 0, 0); }
.vr-js .vr-anim:not(.vr-in)[data-vr-anim="fadeInRight"] { transform: translate3d(var(--vr-anim-dist), 0, 0); }

.vr-anim.vr-in {
	opacity: 1;
}

[data-vr-fx] {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.vr-js .vr-anim:not(.vr-in) {
		opacity: 1;
		transform: none;
	}

	.vr-js .vr-anim[data-vr-anim] {
		transition: none;
	}
}

/* ---------- Content typography (The7 values inside Elementor content on the old site) ---------- */
/* :where keeps specificity at zero so widget rules always win */
:where(.vr-body, .vr-pbody) {
	color: var(--vr-k-text);
}

:where(.vr-body, .vr-pbody) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 10px;
	color: #333;
	font-family: var(--vr-font-heading, "Jura", sans-serif);
	font-weight: 700;
	text-transform: uppercase;
}

:where(.vr-body, .vr-pbody) h1 { font-size: 34px; line-height: 49px; }
:where(.vr-body, .vr-pbody) h2 { font-size: 34px; line-height: 39px; }
:where(.vr-body, .vr-pbody) h3 { font-size: 24px; line-height: 29px; }
:where(.vr-body, .vr-pbody) h4 { font-size: 20px; line-height: 25px; }
:where(.vr-body, .vr-pbody) h5 { font-size: 16px; line-height: 21px; }
:where(.vr-body, .vr-pbody) h6 { font-size: 14px; line-height: 19px; }

:where(.vr-body, .vr-pbody) p { text-align: justify !important; } /* old child theme: p { text-align: justify !important } */

:where(.vr-body, .vr-pbody) a { color: var(--vr-color-accent, #66a0b5); }

:where(.vr-body, .vr-pbody) :is(ul, ol) { margin: 0 0 10px 20px; padding: 0; }
:where(.vr-body, .vr-pbody) blockquote { margin: 0 0 10px; padding: 20px 25px; font-weight: 700; }
:where(.vr-body, .vr-pbody) table { margin: 0 0 10px; }

:where(.vr-body, .vr-pbody) .alignright { float: right; display: block; margin: 0 0 10px 30px; }
:where(.vr-body, .vr-pbody) .alignleft { float: left; display: block; margin: 0 30px 10px 0; }
:where(.vr-body, .vr-pbody) .aligncenter { display: block; margin: 0 auto 10px; }

:where(.vr-body, .vr-pbody) :is(sub, sup) {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

:where(.vr-body, .vr-pbody) sup { top: -0.5em; }
:where(.vr-body, .vr-pbody) sub { bottom: -0.25em; }

/* ---------- Heading and text ---------- */

/* The7 custom CSS of the old site: h2.elementor-heading-title { font-size: 24px !important } */

/* ---------- Image ---------- */

/* Elementor centers the image widget unless the widget sets its own alignment (generated rules come later and win). */

/* ---------- Button ---------- */
.vr-btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 24px;
	border-radius: 3px;
	background-color: var(--vr-k-accent);
	color: #fff;
	font-family: var(--vr-font-heading, "Jura", sans-serif);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	fill: currentColor;
	cursor: pointer;
	transition: all 0.3s;
}

.vr-btn:hover,
.vr-btn:focus {
	color: #fff;
	text-decoration: none;
}

/* ---------- Kit defaults of the old site (global colors and fonts) ---------- */
.vr-iconbox__title,
.vr-cta__title,
.vr-flip__title,
.vr-ah {
	font-family: var(--vr-k-head);
	font-weight: 600;
}

.vr-iconbox__title { color: var(--vr-k-primary); }

.vr-iconbox__icon { color: var(--vr-k-primary); }
.vr-iconbox__desc,
.vr-cta__desc,
.vr-flip__desc {
	color: var(--vr-k-text);
	font-family: var(--vr-k-body);
	font-weight: 400;
}

.vr-flip__desc { color: inherit; }

.vr-ah__plain { color: var(--vr-k-secondary); }
.vr-ah__mark { stroke: var(--vr-k-accent); }
.vr-btn { font-family: var(--vr-k-head); }

/* ---------- Spacer and divider ---------- */

/* ---------- Accordion (native details, exclusive through name attribute) ---------- */

/* ---------- Icon list ---------- */

/* ---------- Icon box and image box ---------- */
.vr-iconbox {
	text-align: center;
}

.vr-iconbox--left { display: flex; flex-direction: row; text-align: left; }
.vr-iconbox--right { display: flex; flex-direction: row-reverse; text-align: right; }
.vr-iconbox--va-top { align-items: flex-start; }
.vr-iconbox--va-bottom { align-items: flex-end; }

.vr-iconbox {
	display: flex;
	align-items: center;
}

.vr-iconbox__content,
.vr-iconbox__icon {
	padding: 5px;
}

.vr-iconbox__icon {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 50px;
	line-height: 1;
}

.vr-iconbox__icon a { color: inherit; display: inline-flex; }
.vr-iconbox--top .vr-iconbox__icon { margin: 0 auto 15px; }
.vr-iconbox__content { flex-grow: 1; }
/* Phones (Elementor default, measured on live): the icon is a block with the body line height and the title is centered
   unless the widget sets its own mobile alignment (those rules are scoped per widget and win). */
@media (max-width: 767px) {
	.vr-iconbox--left,
.vr-iconbox--right { text-align: center; }
	.vr-iconbox--left .vr-iconbox__icon,
.vr-iconbox--right .vr-iconbox__icon { display: block; line-height: inherit; }
	.vr-iconbox--left .vr-iconbox__icon svg,
.vr-iconbox--right .vr-iconbox__icon svg { display: inline-block; }
}
.vr-iconbox__title a { color: inherit; }
.vr-iconbox__desc { margin: 0; }

/* ---------- Call to action (classic skin: image above, text block below) ---------- */
.vr-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.vr-cta__bg-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 200px;
	overflow: hidden;
}

.vr-cta__bg,
.vr-cta__overlay {
	position: absolute;
	inset: 0;
	transition: all 1.5s;
}

.vr-cta__bg {
	z-index: 1;
	background-size: cover;
	background-position: 50%;
}

.vr-cta__overlay { z-index: 2; }
.vr-cta:hover .vr-cta__bg { transform: scale(1.05); }

.vr-cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	width: 100%;
	padding: 35px;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 152px;
	background-color: #f7f7f7;
	color: #55595c;
	transition: all 0.4s;
}

.vr-cta--va-top .vr-cta__content { align-content: flex-start; align-items: flex-start; }
.vr-cta--va-bottom .vr-cta__content { align-content: flex-end; align-items: flex-end; }

.vr-cta__title {
	width: 100%;
	margin: 0;
	font-size: 23px;
	color: #55595c;
}

.vr-cta__title:not(:last-child),
.vr-cta__desc:not(:last-child) { margin-bottom: 15px; }
.vr-cta__desc { width: 100%; color: #55595c; }

.vr-cta__btn {
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #55595c;
	background: transparent;
	color: #55595c;
}

/* ---------- Flip box (hover or keyboard focus shows the back) ---------- */
.vr-flip {
	position: relative;
	height: 280px;
	overflow: hidden;
	background: #fff;
}

.vr-flip__side {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s, opacity 0.8s;
}

.vr-flip__layer {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	padding: 35px;
	text-align: center;
	color: #fff;
}

.vr-flip__layer::before { z-index: 0; }
.vr-flip__inner { position: relative; z-index: 1; width: 100%; }
.vr-flip__title { margin: 0 0 20px; line-height: 1; color: inherit; }
.vr-flip__desc { margin: 0; font-size: 14px; color: inherit; }
.vr-flip__btn { margin-top: 20px; border: 2px solid #fff; background: transparent; color: #fff; }

.vr-flip--push .vr-flip__back { transform: translateX(100%); }
.vr-flip--push:hover .vr-flip__front,
.vr-flip--push:focus-within .vr-flip__front { transform: translateX(-100%); }
.vr-flip--push:hover .vr-flip__back,
.vr-flip--push:focus-within .vr-flip__back { transform: translateX(0); }

.vr-flip--slide .vr-flip__back { transform: translateX(100%); }
.vr-flip--slide:hover .vr-flip__back,
.vr-flip--slide:focus-within .vr-flip__back { transform: translateX(0); }

.vr-flip--flip { overflow: visible; perspective: 1000px; }
.vr-flip--flip .vr-flip__side { backface-visibility: hidden; }
.vr-flip--flip .vr-flip__back { transform: rotateY(180deg); }
.vr-flip--flip:hover .vr-flip__front,
.vr-flip--flip:focus-within .vr-flip__front { transform: rotateY(-180deg); }
.vr-flip--flip:hover .vr-flip__back,
.vr-flip--flip:focus-within .vr-flip__back { transform: rotateY(0); }

.vr-flip--fade .vr-flip__back { opacity: 0; }
.vr-flip--fade:hover .vr-flip__back,
.vr-flip--fade:focus-within .vr-flip__back { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.vr-flip__side { transition: none; }
}

/* ---------- Advanced heading (Ultimate Addons) ---------- */

/* ---------- Animated headline (highlight style) ---------- */
.vr-ah { font-size: 43px; line-height: 1.2; }
.vr-ah__hl { position: relative; display: inline-block; }
.vr-ah__mark {
	position: absolute;
	left: -10px;
	top: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* ---------- Social icons ---------- */

/* ---------- Map, forms, cf7 wrapper ---------- */

.vr-cf7 { width: 100%; }
.vr-cf7 .wpcf7-not-valid { border-color: var(--vr-cf7-error, #ffa000); }

/* ---------- Posts list ([varus_posts]) ---------- */
.vr-posts {
	display: grid;
	grid-template-columns: repeat(var(--vr-cols, 3), minmax(0, 1fr));
	gap: 30px;
}

.vr-posts__item { min-width: 0; }

.vr-posts__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / var(--vr-thumb-ratio, 0.66);
}

.vr-posts__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vr-posts__title { margin: 15px 0 5px; font-size: 20px; line-height: 1.3; }
.vr-posts__title a { color: inherit; }
.vr-posts__meta { margin-bottom: 8px; font-size: 13px; }
.vr-posts__excerpt { margin-bottom: 10px; }
.vr-posts__more { font-family: var(--vr-font-heading, "Jura", sans-serif); font-weight: 700; }

.vr-posts--classic.vr-posts--thumb-left .vr-posts__item { display: flex; align-items: flex-start; gap: var(--vr-thumb-gap, 18px); }
.vr-posts--classic.vr-posts--thumb-left .vr-posts__thumb { flex: 0 0 var(--vr-thumb-w, 30%); }
.vr-posts--classic.vr-posts--thumb-left .vr-posts__title { margin-top: 0; }

.vr-posts--carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.vr-posts--carousel .vr-posts__item { flex: 0 0 calc((100% - 40px) / var(--vr-cols, 3)); scroll-snap-align: start; }
.vr-posts--cards .vr-posts__thumb { border-radius: 16px; }
.vr-posts__pager { margin-top: 20px; text-align: center; }
.vr-posts__pager .page-numbers { display: inline-block; padding: 4px 10px; }

/* ---------- Info box ---------- */

/* ---------- Site logo widget ---------- */
.vr-logo { display: inline-block; vertical-align: top; }
.vr-logo img { display: block; max-width: 100%; height: auto; }

/* ---------- Deferred widgets (forms, popups): nothing is drawn ---------- */

/* ---------- Phone and tablet behavior of the old Elementor output ---------- */
/* Image boxes with the image left or right stack with the image on top, centered (Elementor default below 768 px). */

/* Fixed (parallax) section backgrounds do not paint on touch browsers, Elementor turned them into normal ones. */
@media (max-width: 1024px) {
	.vr-section {
		background-attachment: scroll !important;
	}
}