/* ==========================================================================
   HIMPEL Hero
   --------------------------------------------------------------------------
   Every rule is scoped under .himpel-hero. Nothing targets the theme, body,
   or any global element, so the Hub theme is untouched.

   Per-instance values arrive as CSS custom properties on the section's inline
   style attribute (shortcode), or as Elementor-generated selectors (widget).
   The var() fallbacks below are the spec defaults, so both paths agree.
   ========================================================================== */

.himpel-hero {
	/* Brand tokens — local to this component only. */
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;
	--himpel-overlay-color: #121212;

	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: var(--hh-h-d, 80vh);
	overflow: hidden;
	background-color: var(--himpel-dark);
	isolation: isolate;
	box-sizing: border-box;
}

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

.himpel-hero--valign-top {
	align-items: flex-start;
}
.himpel-hero--valign-middle {
	align-items: center;
}
.himpel-hero--valign-bottom {
	align-items: flex-end;
}

/* --------------------------------------------------------------------------
   Edge-to-edge host
   Elementor wraps a shortcode in several padded divs, which show as white
   bands above, below and beside the hero. himpel-hero.js tags only those
   wrappers that actually contain this section, so nothing else on the page
   — or in the theme — is affected.
   -------------------------------------------------------------------------- */
.himpel-hero-host {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	border: 0 !important;
}

/* Elementor gives widgets a bottom margin from the kit's widget spacing. */
.himpel-hero-host.elementor-widget {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Full-width breakout
   --himpel-vw is written by himpel-hero.js and equals the document width
   WITHOUT the scrollbar, which 100vw wrongly includes. The 100vw fallback
   keeps the layout correct if JS is unavailable.
   -------------------------------------------------------------------------- */
.himpel-hero--fullwidth {
	width: var(--himpel-vw, 100vw);
	max-width: var(--himpel-vw, 100vw);
	margin-left: calc(50% - var(--himpel-vw, 100vw) / 2);
	margin-right: calc(50% - var(--himpel-vw, 100vw) / 2);
}

/* --------------------------------------------------------------------------
   Background image + overlay
   -------------------------------------------------------------------------- */
.himpel-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	transform-origin: center center;
}

.himpel-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: var(--hh-ov-op, 0.6);
	background-color: var(--himpel-overlay-color);
}

/* Solid keeps the flat colour above. Gradient variants replace it. */
.himpel-hero--ov-left .himpel-hero__overlay {
	background-color: transparent;
	background-image: linear-gradient(
		to right,
		var(--himpel-overlay-color) 0%,
		color-mix(in srgb, var(--himpel-overlay-color) 55%, transparent) 45%,
		transparent 85%
	);
}

.himpel-hero--ov-bottom .himpel-hero__overlay {
	background-color: transparent;
	background-image: linear-gradient(
		to top,
		var(--himpel-overlay-color) 0%,
		color-mix(in srgb, var(--himpel-overlay-color) 45%, transparent) 45%,
		transparent 85%
	);
}

.himpel-hero--ov-both .himpel-hero__overlay {
	background-color: transparent;
	background-image:
		linear-gradient(
			to top,
			var(--himpel-overlay-color) 0%,
			color-mix(in srgb, var(--himpel-overlay-color) 35%, transparent) 50%,
			transparent 85%
		),
		linear-gradient(
			to right,
			var(--himpel-overlay-color) 0%,
			color-mix(in srgb, var(--himpel-overlay-color) 40%, transparent) 45%,
			transparent 80%
		);
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.himpel-hero--ov-left .himpel-hero__overlay,
	.himpel-hero--ov-both .himpel-hero__overlay {
		background-image: linear-gradient(
			to right,
			var(--himpel-overlay-color) 0%,
			transparent 85%
		);
	}
	.himpel-hero--ov-bottom .himpel-hero__overlay {
		background-image: linear-gradient(
			to top,
			var(--himpel-overlay-color) 0%,
			transparent 85%
		);
	}
}

/* --------------------------------------------------------------------------
   Layout: single column, left aligned
   -------------------------------------------------------------------------- */
.himpel-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: var(--hh-py-d, 60px) var(--hh-px-d, 40px);
}

.himpel-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	max-width: var(--hh-cw-d, 720px);
}

.himpel-hero--align-center .himpel-hero__content {
	align-items: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.himpel-hero--align-center .himpel-hero__actions {
	justify-content: center;
}

.himpel-hero--align-right .himpel-hero__content {
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}
.himpel-hero--align-right .himpel-hero__actions {
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.himpel-hero__title {
	margin: 0;
	padding: 0;
	color: var(--hh-title-color, var(--himpel-white));
	/* No font-family on purpose. The title is a real <h1>, so it inherits the
	   Liquid theme's H1 typography. Only size, weight and rhythm stay ours so
	   the hero keeps its scale. */
	font-size: var(--hh-title-d, 58px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.5px;
	text-wrap: balance;
}

.himpel-hero--title-shadow .himpel-hero__title {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Controlled line break
   Put || in the title where the line should break. The break is off by
   default and switched on per breakpoint, so the wrap point is explicit
   rather than left to the font metrics of whatever theme is active.
   -------------------------------------------------------------------------- */
.himpel-hero__br {
	display: none;
}

.himpel-hero__br--all {
	display: inline;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.himpel-hero__br--t {
		display: inline;
	}
}

@media (max-width: 1024px) {
	.himpel-hero__br--tm {
		display: inline;
	}
}

@media (max-width: 767px) {
	.himpel-hero__br--m {
		display: inline;
	}
}

/* balance would fight an explicit break; let the break decide. */
.himpel-hero__title:has(.himpel-hero__br--all),
.himpel-hero__title:has(.himpel-hero__br--t),
.himpel-hero__title:has(.himpel-hero__br--tm),
.himpel-hero__title:has(.himpel-hero__br--m) {
	text-wrap: pretty;
}

.himpel-hero__desc {
	margin: var(--hh-gap-title, 20px) 0 0;
	padding: 0;
	color: var(--hh-desc-color, var(--himpel-secondary));
	/* Inherits the theme's paragraph typography — it is a real <p>. */
	font-size: var(--hh-desc-d, 20px);
	font-weight: 400;
	line-height: 1.6;
	max-width: 46ch;
}

.himpel-hero--title-shadow .himpel-hero__desc {
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Buttons — side by side
   -------------------------------------------------------------------------- */
.himpel-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hh-btn-gap, 16px);
	margin-top: var(--hh-gap-actions, 36px);
}

.himpel-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: 100px;
	/* Inherits the theme's body typography. */
	font-size: var(--hh-btn-d, 16px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, transform 0.25s ease;
}

.himpel-hero__btn:hover,
.himpel-hero__btn:focus-visible {
	text-decoration: none;
	transform: translateY(-2px);
}

.himpel-hero__btn:focus-visible {
	outline: 2px solid var(--himpel-white);
	outline-offset: 3px;
}

.himpel-hero__btn--primary {
	background-color: var(--himpel-primary);
	border-color: var(--himpel-primary);
	color: var(--himpel-white);
}

.himpel-hero__btn--primary:hover,
.himpel-hero__btn--primary:focus-visible {
	background-color: var(--himpel-primary-dark);
	border-color: var(--himpel-primary-dark);
	color: var(--himpel-white);
}

.himpel-hero__btn--secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--himpel-white);
}

/* Button label stays white in every state. The old hover filled this button
   with cream and switched the text to dark; a translucent white fill keeps
   the white label legible over the photo instead. */
.himpel-hero__btn--secondary:hover,
.himpel-hero__btn--secondary:focus-visible {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: var(--himpel-white);
	color: var(--himpel-white);
}

/* --------------------------------------------------------------------------
   Circular arrow badge
   The badge supplies the button's visual right padding, so a button carrying
   one gets a tighter right inset than a plain one.
   -------------------------------------------------------------------------- */
.himpel-hero__btn--has-icon {
	gap: 14px;
	padding: 8px 8px 8px 26px;
}

.himpel-hero__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--hh-icon-size, 34px);
	height: var(--hh-icon-size, 34px);
	border-radius: 50%;
	background-color: var(--hh-icon-bg, #ffffff);
	color: var(--hh-icon-color, var(--himpel-primary));
	transition: background-color 0.25s ease, color 0.25s ease,
		transform 0.25s ease;
}

.himpel-hero__btn-icon svg {
	display: block;
	width: 56%;
	height: 56%;
	/* Inherits the badge's colour, so one property drives the arrow. */
	stroke: currentColor;
	fill: none;
}

/* The arrow drifts along its own diagonal on hover. */
.himpel-hero__btn:hover .himpel-hero__btn-icon,
.himpel-hero__btn:focus-visible .himpel-hero__btn-icon {
	transform: translate(2px, -2px);
}

.himpel-hero__btn--primary {
	--hh-icon-bg: var(--himpel-white);
	--hh-icon-color: var(--himpel-primary);
}

.himpel-hero__btn--secondary {
	--hh-icon-bg: var(--himpel-white);
	--hh-icon-color: var(--himpel-dark);
}

/* The badge stays white on hover now that the button fill is translucent
   rather than cream, so it keeps its edge without inverting. */

/* ==========================================================================
   GSAP intro animation
   --------------------------------------------------------------------------
   .is-animating is printed server-side so the pre-animation state exists in
   the very first paint — no flash of finished text. JS removes it after
   gsap.set() has taken over, and a safety timer removes it if GSAP never
   loads, so the copy can never stay stuck invisible.
   ========================================================================== */
.himpel-hero.is-animating .himpel-hero__title,
.himpel-hero.is-animating .himpel-hero__desc,
.himpel-hero.is-animating .himpel-hero__btn {
	opacity: 0;
}

/* Per-word mask, created by JS when it splits the title. */
.himpel-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* Room for descenders so the mask never clips a 'g' or 'y'. */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.himpel-hero__word-in {
	display: inline-block;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-hero.is-animating .himpel-hero__title,
	.himpel-hero.is-animating .himpel-hero__desc,
	.himpel-hero.is-animating .himpel-hero__btn {
		opacity: 1;
	}

	.himpel-hero__btn,
	.himpel-hero__btn-icon {
		transition: none;
	}

	.himpel-hero__btn:hover,
	.himpel-hero__btn:focus-visible {
		transform: none;
	}

	.himpel-hero__btn:hover .himpel-hero__btn-icon,
	.himpel-hero__btn:focus-visible .himpel-hero__btn-icon {
		transform: none;
	}
}

/* ==========================================================================
   Responsive
   Breakpoints mirror Elementor's defaults so the panel's Tablet / Mobile
   views match what the visitor actually sees.
   ========================================================================== */

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-hero {
		min-height: var(--hh-h-t, 450px);
	}

	.himpel-hero__inner {
		padding: var(--hh-py-t, 40px) var(--hh-px-t, 20px);
	}

	.himpel-hero__content {
		max-width: var(--hh-cw-t, 100%);
	}

	.himpel-hero__title {
		font-size: var(--hh-title-t, 38px);

		/*
		 * Force the title onto two rows on tablet.
		 * Measured at the 38px tablet size in Encode Sans Semi Expanded:
		 *   "No.1 Ventilation"       288px
		 *   "No.1 Ventilation Brand" 407px
		 * A cap between the two makes "Brand" wrap. 9.5em (~361px at 38px)
		 * sits in the middle with room either side, and being in em it tracks
		 * the font size instead of being a fixed pixel guess.
		 */
		max-width: var(--hh-title-mw-t, 9.5em);

		/* balance would even the rows out and could move the break; let the
		   width alone decide where the wrap lands. */
		text-wrap: normal;
	}

	.himpel-hero__desc {
		font-size: var(--hh-desc-t, 17px);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-hero {
		min-height: var(--hh-h-m, 600px);
	}

	.himpel-hero__inner {
		padding: var(--hh-py-m, 40px) var(--hh-px-m, 15px);
	}

	.himpel-hero__content {
		max-width: var(--hh-cw-m, 100%);
	}

	.himpel-hero__title {
		font-size: var(--hh-title-m, 32px);
		line-height: 1.18;
	}

	.himpel-hero__desc {
		margin-top: var(--hh-gap-title-m, 14px);
		font-size: var(--hh-desc-m, 16px);
		max-width: 100%;
	}

	.himpel-hero__actions {
		margin-top: var(--hh-gap-actions-m, 28px);
		gap: var(--hh-btn-gap-m, 10px);
	}

	.himpel-hero__btn {
		padding: 13px 20px;
		font-size: var(--hh-btn-m, 14px);
	}

	.himpel-hero__btn--has-icon {
		gap: 10px;
		padding: 7px 7px 7px 20px;
		/* Set on the button so it beats the section-level desktop value.
		   Reads a differently named property, so there is no cycle. */
		--hh-icon-size: var(--hh-icon-size-m, 30px);
	}

	/* Optional: full-width stacked buttons on phones. */
	.himpel-hero--stack-mobile .himpel-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.himpel-hero--stack-mobile .himpel-hero__btn {
		width: 100%;
		flex: 0 0 auto;
	}
}

/* Very narrow phones: trim the horizontal padding so both labels keep their
   full text. Buttons stay content-sized — forcing equal widths here would clip
   the longer label. If they ever genuinely do not fit, flex-wrap on
   .himpel-hero__actions drops the second one to its own line. */
@media (max-width: 400px) {
	.himpel-hero:not(.himpel-hero--stack-mobile) .himpel-hero__btn {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* The arrow badge adds ~40px per button, which tips the pair over the
	   available width on a 360px phone. Tighten the badge and the insets so
	   both still share one row. Deliberately more specific than Elementor's
	   own padding rule, which would otherwise force the wrap back. */
	.himpel-hero:not(.himpel-hero--stack-mobile) .himpel-hero__actions {
		gap: 8px;
	}

	.himpel-hero:not(.himpel-hero--stack-mobile) .himpel-hero__btn--has-icon {
		gap: 8px;
		padding: 6px 6px 6px 16px;
		--hh-icon-size: var(--hh-icon-size-xs, 26px);
	}
}

/* --------------------------------------------------------------------------
   Elementor editor: the breakout must not escape the preview canvas.
   -------------------------------------------------------------------------- */
.elementor-editor-active .himpel-hero--fullwidth,
.elementor-editor-preview .himpel-hero--fullwidth {
	max-width: 100%;
}