/**
 * SH Back to Top for Elementor - v3
 *
 * Size, offsets and colours are written per-instance by Elementor from the
 * widget's Style tab. This file holds structure, positioning presets and the
 * behaviour that shouldn't be editable.
 *
 * Cascade contract with the Style tab
 * -----------------------------------
 * Elementor writes its per-instance rules at a much higher specificity than
 * anything here (`.elementor-123 .elementor-element.elementor-element-abc
 * .sh-top` is four classes deep against our one). So a hover or inverted
 * rule in this file could never win against an Elementor *normal*-state
 * declaration: set a Background under Normal and the hover background would
 * stop changing.
 *
 * Every themeable value is therefore routed through a custom property:
 * Elementor only ever sets the variables, and this file owns the rules that
 * consume them per state. Specificity no longer decides anything, so states
 * layer correctly in both directions and each variable falls back to the
 * default below when its control is left empty.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Zero layout footprint.
 *
 * The button is position:fixed, so it is already out of flow - but the widget
 * wrapper around it is not. In a flex container that empty wrapper still
 * counts as a flex item and still earns a `gap`, which is where stray space
 * in the footer comes from. `display: contents` removes those boxes from
 * layout entirely: no gap, no widget spacing, no leftover column height.
 * ---------------------------------------------------------------------- */
.elementor-widget-sh_back_to_top,
.elementor-widget-sh_back_to_top > .elementor-widget-container,
.sh-top-host {
	display: contents;
}

/* ...but a real box inside the editor, or it can't be clicked or selected. */
.elementor-widget-sh_back_to_top:has( .sh-top--preview ),
.elementor-widget-sh_back_to_top:has( .sh-top--preview ) > .elementor-widget-container,
body.elementor-editor-active .elementor-widget-sh_back_to_top,
body.elementor-editor-active .elementor-widget-sh_back_to_top > .elementor-widget-container {
	display: block;
}

/* -------------------------------------------------------------------------
 * Button
 * ---------------------------------------------------------------------- */
.sh-top {
	--sh-top-size: 3rem;
	--sh-top-icon: 1.125rem;
	--sh-top-x: 1.5rem;
	--sh-top-y: 1.5rem;
	--sh-top-blur: 10px;
	--sh-top-ease: cubic-bezier( .22, 1, .36, 1 );
	--sh-top-slide-x: 0;
	--sh-top-slide-y: .5rem;

	/* Defaults for every colour the Style tab can override. */
	--sh-top-fg: var( --e-global-color-primary, #1c1a18 );
	--sh-top-bg: rgba( 255, 255, 255, .86 );
	--sh-top-bd: rgba( 28, 26, 24, .16 );

	/* Offsets with the notch and home-indicator insets folded in. */
	--sh-rgt: calc( var( --sh-top-x ) + env( safe-area-inset-right, 0px ) );
	--sh-lft: calc( var( --sh-top-x ) + env( safe-area-inset-left, 0px ) );
	--sh-btm: calc( var( --sh-top-y ) + env( safe-area-inset-bottom, 0px ) );
	--sh-top: calc( var( --sh-top-y ) + env( safe-area-inset-top, 0px ) );

	position: fixed;
	bottom: var( --sh-btm );
	right: var( --sh-rgt );
	z-index: 9990; /* below Elementor's off-canvas layer */

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --sh-top-size );
	height: var( --sh-top-size );
	padding: 0 max( 0px, calc( ( var( --sh-top-size ) - var( --sh-top-icon ) ) / 2 ) );
	margin: 0;

	border: 1px solid var( --sh-top-bd );
	border-radius: 999px;
	background: var( --sh-top-bg );
	-webkit-backdrop-filter: blur( var( --sh-top-blur ) ) saturate( 1.1 );
	backdrop-filter: blur( var( --sh-top-blur ) ) saturate( 1.1 );
	box-shadow:
		0 1px 2px rgba( 28, 26, 24, .06 ),
		0 10px 24px -14px rgba( 28, 26, 24, .5 );
	color: var( --sh-top-fg );
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	opacity: 0;
	visibility: hidden;
	transform: translate( var( --sh-top-slide-x ), var( --sh-top-slide-y ) );
	transition:
		opacity .3s var( --sh-top-ease ),
		transform .3s var( --sh-top-ease ),
		visibility .3s,
		background-color .25s ease,
		border-color .25s ease,
		color .25s ease;
}

.sh-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -------------------------------------------------------------------------
 * Position presets. Each also sets the direction the button slides in from,
 * so a top-anchored button drops down and an edge-anchored one slides in
 * sideways.
 * ---------------------------------------------------------------------- */
.sh-pos-bottom-right .sh-top {
	top: auto;
	right: var(--sh-rgt);
	bottom: var(--sh-btm);
	left: auto;
	margin-inline: 0;
	margin-block: 0;
	width: auto;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: .5rem;
}

.sh-pos-bottom-center .sh-top {
	top: auto;
	right: 0;
	bottom: var(--sh-btm);
	left: 0;
	margin-inline: auto;
	margin-block: 0;
	width: fit-content;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: .5rem;
}

.sh-pos-bottom-left .sh-top {
	top: auto;
	right: auto;
	bottom: var(--sh-btm);
	left: var(--sh-lft);
	margin-inline: 0;
	margin-block: 0;
	width: auto;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: .5rem;
}

.sh-pos-middle-right .sh-top {
	top: 0;
	right: var(--sh-rgt);
	bottom: 0;
	left: auto;
	margin-inline: 0;
	margin-block: auto;
	width: auto;
	--sh-top-slide-x: .5rem;
	--sh-top-slide-y: 0;
}

.sh-pos-middle-left .sh-top {
	top: 0;
	right: auto;
	bottom: 0;
	left: var(--sh-lft);
	margin-inline: 0;
	margin-block: auto;
	width: auto;
	--sh-top-slide-x: -.5rem;
	--sh-top-slide-y: 0;
}

.sh-pos-top-right .sh-top {
	top: var(--sh-top);
	right: var(--sh-rgt);
	bottom: auto;
	left: auto;
	margin-inline: 0;
	margin-block: 0;
	width: auto;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: -.5rem;
}

.sh-pos-top-center .sh-top {
	top: var(--sh-top);
	right: 0;
	bottom: auto;
	left: 0;
	margin-inline: auto;
	margin-block: 0;
	width: fit-content;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: -.5rem;
}

.sh-pos-top-left .sh-top {
	top: var(--sh-top);
	right: auto;
	bottom: auto;
	left: var(--sh-lft);
	margin-inline: 0;
	margin-block: 0;
	width: auto;
	--sh-top-slide-x: 0;
	--sh-top-slide-y: -.5rem;
}

@media ( max-width: 1024px ) {
	.sh-pos-tablet-bottom-right .sh-top {
		top: auto;
		right: var(--sh-rgt);
		bottom: var(--sh-btm);
		left: auto;
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-tablet-bottom-center .sh-top {
		top: auto;
		right: 0;
		bottom: var(--sh-btm);
		left: 0;
		margin-inline: auto;
		margin-block: 0;
		width: fit-content;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-tablet-bottom-left .sh-top {
		top: auto;
		right: auto;
		bottom: var(--sh-btm);
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-tablet-middle-right .sh-top {
		top: 0;
		right: var(--sh-rgt);
		bottom: 0;
		left: auto;
		margin-inline: 0;
		margin-block: auto;
		width: auto;
		--sh-top-slide-x: .5rem;
		--sh-top-slide-y: 0;
	}

	.sh-pos-tablet-middle-left .sh-top {
		top: 0;
		right: auto;
		bottom: 0;
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: auto;
		width: auto;
		--sh-top-slide-x: -.5rem;
		--sh-top-slide-y: 0;
	}

	.sh-pos-tablet-top-right .sh-top {
		top: var(--sh-top);
		right: var(--sh-rgt);
		bottom: auto;
		left: auto;
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}

	.sh-pos-tablet-top-center .sh-top {
		top: var(--sh-top);
		right: 0;
		bottom: auto;
		left: 0;
		margin-inline: auto;
		margin-block: 0;
		width: fit-content;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}

	.sh-pos-tablet-top-left .sh-top {
		top: var(--sh-top);
		right: auto;
		bottom: auto;
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}
}

@media ( max-width: 767px ) {
	.sh-pos-mobile-bottom-right .sh-top {
		top: auto;
		right: var(--sh-rgt);
		bottom: var(--sh-btm);
		left: auto;
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-mobile-bottom-center .sh-top {
		top: auto;
		right: 0;
		bottom: var(--sh-btm);
		left: 0;
		margin-inline: auto;
		margin-block: 0;
		width: fit-content;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-mobile-bottom-left .sh-top {
		top: auto;
		right: auto;
		bottom: var(--sh-btm);
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: .5rem;
	}

	.sh-pos-mobile-middle-right .sh-top {
		top: 0;
		right: var(--sh-rgt);
		bottom: 0;
		left: auto;
		margin-inline: 0;
		margin-block: auto;
		width: auto;
		--sh-top-slide-x: .5rem;
		--sh-top-slide-y: 0;
	}

	.sh-pos-mobile-middle-left .sh-top {
		top: 0;
		right: auto;
		bottom: 0;
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: auto;
		width: auto;
		--sh-top-slide-x: -.5rem;
		--sh-top-slide-y: 0;
	}

	.sh-pos-mobile-top-right .sh-top {
		top: var(--sh-top);
		right: var(--sh-rgt);
		bottom: auto;
		left: auto;
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}

	.sh-pos-mobile-top-center .sh-top {
		top: var(--sh-top);
		right: 0;
		bottom: auto;
		left: 0;
		margin-inline: auto;
		margin-block: 0;
		width: fit-content;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}

	.sh-pos-mobile-top-left .sh-top {
		top: var(--sh-top);
		right: auto;
		bottom: auto;
		left: var(--sh-lft);
		margin-inline: 0;
		margin-block: 0;
		width: auto;
		--sh-top-slide-x: 0;
		--sh-top-slide-y: -.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Icon, label, states
 * ---------------------------------------------------------------------- */

/* Elementor's icon manager outputs either an <i> or an inline <svg>. */
.sh-top__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var( --sh-top-icon );
	line-height: 1;
	transition: transform .3s var( --sh-top-ease );
}

.sh-top__icon i {
	font-size: inherit;
	line-height: 1;
}

.sh-top__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* An uploaded SVG usually hardcodes its own fill, which would ignore the
 * colour picked in the Style tab. Presentation attributes lose to any rule,
 * so painting the shapes here wins - while a deliberate `none` (outline
 * icons) is put back by the rule below it. */
.sh-top__icon svg,
.sh-top__icon svg :is( path, circle, ellipse, line, polygon, polyline, rect ) {
	fill: currentColor;
}

.sh-top__icon svg :is( path, circle, ellipse, line, polygon, polyline, rect )[fill="none"] {
	fill: none;
}

.sh-top__icon svg :is( path, circle, ellipse, line, polygon, polyline, rect )[stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.sh-top__label {
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	transition:
		max-width .32s var( --sh-top-ease ),
		margin-inline-start .32s var( --sh-top-ease ),
		opacity .2s ease;
}

/* Label visibility "Always" - no hover needed to read it. */
.sh-label-always .sh-top__label {
	max-width: none;
	opacity: 1;
	margin-inline-start: .55rem;
}

.sh-top:hover,
.sh-top:focus-visible {
	background: var( --sh-top-bg-hover, var( --sh-top-fg ) );
	border-color: var( --sh-top-bd-hover, var( --sh-top-fg ) );
	color: var( --sh-top-fg-hover, #ffffff );
}

.sh-top:hover .sh-top__icon,
.sh-top:focus-visible .sh-top__icon {
	transform: translateY( -2px );
}

.sh-top:hover .sh-top__label,
.sh-top:focus-visible .sh-top__label {
	max-width: 8rem;
	opacity: 1;
	margin-inline-start: .55rem;
}

.sh-label-always .sh-top:hover .sh-top__label,
.sh-label-always .sh-top:focus-visible .sh-top__label {
	max-width: none;
}

.sh-top:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Over the dark footer */
.sh-top.is-inverted {
	background: var( --sh-top-inv-bg, rgba( 255, 255, 255, 0 ) );
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: var( --sh-top-inv-bd, rgba( 255, 255, 255, .38 ) );
	box-shadow: none;
	color: var( --sh-top-inv-fg, #ffffff );
}

.sh-top.is-inverted:hover,
.sh-top.is-inverted:focus-visible {
	background: var( --sh-top-inv-bg-hover, #ffffff );
	border-color: var( --sh-top-inv-bd-hover, #ffffff );
	color: var( --sh-top-inv-fg-hover, var( --sh-top-fg ) );
}

/* No hover to reveal the label on, so don't reserve room for it. */
@media ( hover: none ) {
	.sh-label-hover .sh-top__label {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sh-top,
	.sh-top__icon,
	.sh-top__label {
		transition-duration: .01ms;
	}
}

/* Editor canvas: inline and always visible so it can be seen and styled. */
.sh-top--preview {
	position: relative !important;
	inset: auto !important;
	margin: 0 !important;
	width: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* The label is collapsed until hover on the front end, which makes its
 * typography controls look dead in the panel. Show it open while editing. */
.sh-top--preview .sh-top__label {
	display: inline-block;
	max-width: none;
	opacity: 1;
	margin-inline-start: .55rem;
}