/* [fk_hero] — static homepage hero, geometrically equivalent to the Revolution
   Slider stage it replaced ("home-1").
   ---------------------------------------------------------------------------
   Revslider renders a fixed-size stage scaled to the container, with only two
   responsive levels enabled on this slider (size.custom = d:true, t:true):

       level     grid        title        subtitle   button
       desktop   1240x814    100/90 px    20/20 px   15/17, pad 25/58/27
       tablet     778x500     62/55 px    20/20 px   14/17, pad 12/24/14

   scale = min(1, containerWidth / gridWidth); every length is multiplied by it,
   and each layer is positioned from the stage's vertical middle by the offsets
   stored on the slide (title -100, subtitle +66, button +146 on desktop;
   -58 / +66 / +135 on tablet).

   That whole model collapses into one custom property: --u, the scaled pixel.
   Verified against the live slider at 1920/1280/1024/768/412 — stage height and
   every layer's top edge land within a pixel. */

.fk-hero {
	/* desktop level: 1px at a 1240px-wide stage, never upscaled (100/1240 = 0.08065) */
	--u: min(1px, 0.08065vw);

	position: relative;
	/* Full-bleed without JavaScript: the hero sits inside the theme's fixed-width
	   .content_wrap (as the slider did), so pull it out to the viewport edges with
	   pure CSS rather than WPBakery's stretch_row script, which resizes rows after
	   paint and causes a layout shift. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	height: calc(814 * var(--u));
	overflow: hidden;
	background: #e7e7e7;
}

.fk-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fk-hero__inner {
	position: absolute;
	inset: 0;
}

/* The three layers share one left origin and are placed from the stage middle,
   exactly as the slider's absolutely-positioned captions were. */
.fk-hero__title,
.fk-hero__subtitle,
.fk-hero__button {
	position: absolute;
	left: calc(50% - 637.5 * var(--u));
	margin: 0;
	white-space: nowrap;
	font-family: Montserrat, sans-serif;
}

.fk-hero__title {
	top: calc(50% - 235 * var(--u));
	font-weight: 300;
	font-size: calc(100 * var(--u));
	line-height: calc(90 * var(--u));
	color: #fcf8f2;
}

.fk-hero__subtitle {
	top: calc(50% + 56 * var(--u));
	margin-left: calc(16 * var(--u));
	font-weight: 600;
	/* the slider clamps captions to a legible minimum on narrow screens */
	font-size: max(13px, calc(20 * var(--u)));
	line-height: calc(20 * var(--u));
	color: #4f4f4e;
}

.fk-hero__button {
	top: calc(50% + 111.5 * var(--u));
	display: inline-block;
	padding: calc(25 * var(--u)) calc(58 * var(--u)) calc(27 * var(--u));
	border-radius: calc(60 * var(--u));
	background: #105e26;
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--u)));
	line-height: max(14px, calc(17 * var(--u)));
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color 0.2s;
}

.fk-hero__button:hover,
.fk-hero__button:focus {
	background: #bc9312;
}

/* Tablet level — the slider switches grid below its tablet width of 778px
   (100/778 = 0.12853). */
@media (max-width: 777px) {
	.fk-hero {
		--u: min(1px, 0.12853vw);
		height: calc(500 * var(--u));
	}

	.fk-hero__title,
	.fk-hero__subtitle,
	.fk-hero__button {
		left: calc(50% - 409.6 * var(--u));
	}

	.fk-hero__title {
		top: calc(50% - 140.5 * var(--u));
		font-size: calc(62 * var(--u));
		line-height: calc(55 * var(--u));
	}

	.fk-hero__subtitle {
		top: calc(50% + 56 * var(--u));
		margin-left: 0;
	}

	.fk-hero__button {
		top: calc(50% + 113.5 * var(--u));
		padding: calc(12 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
		font-size: max(12px, calc(14 * var(--u)));
	}
}