/**
 * NJHMS Before After Slider — base structural CSS.
 *
 * Colors and sizes come from Elementor style controls (via CSS custom
 * properties and inline selectors). Everything here is scoped under
 * .njhms-ba-slider — no bare element selectors at top level.
 */

.njhms-ba-slider {
	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	width: 100%;
	/* Fallback height so the widget can never collapse to 0px if the
	   Container > Height control is reset. Elementor's own selector output
	   has higher specificity, so the control always wins when it is set. */
	height: 400px;
	--njhms-ba-handle-size: 44px;
	--njhms-ba-line-size: 2px;
	--njhms-ba-pos: 50%;
}

.njhms-ba-slider[data-orientation="horizontal"] {
	cursor: col-resize;
}

.njhms-ba-slider[data-orientation="vertical"] {
	cursor: row-resize;
}

.njhms-ba-slider .njhms-ba-before,
.njhms-ba-slider .njhms-ba-after {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.njhms-ba-slider .njhms-ba-before img,
.njhms-ba-slider .njhms-ba-after img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	max-width: none;
	-webkit-user-drag: none;
}

/* After layer is the full base image; before layer sits on top and is clipped. */
.njhms-ba-slider .njhms-ba-after {
	z-index: 1;
}

.njhms-ba-slider .njhms-ba-before {
	z-index: 2;
	clip-path: inset( 0 calc( 100% - var( --njhms-ba-pos ) ) 0 0 );
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-before {
	clip-path: inset( 0 0 calc( 100% - var( --njhms-ba-pos ) ) 0 );
}

/* Project Info overlay (Service Type + Location). Stacking order for the
   slider's direct children: after 1, before 2, info 3, labels 4, handle 10 —
   so the scrim covers both images but never dims a badge or the handle. */
.njhms-ba-slider .njhms-ba-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 40px 16px 16px;
	background-image: linear-gradient( to top, rgba( 0, 0, 0, 0.7 ) 0%, transparent 100% );
	pointer-events: none;
}

.njhms-ba-slider .njhms-ba-service {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.njhms-ba-slider .njhms-ba-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 1.3;
	color: rgba( 255, 255, 255, 0.8 );
}

.njhms-ba-slider .njhms-ba-location svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

/* Drag handle. */
.njhms-ba-slider .njhms-ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --njhms-ba-pos );
	/* Explicit width so shrink-to-fit can never disagree with the circle
	   width — keeps the line children pixel-centered on --njhms-ba-pos. */
	width: var( --njhms-ba-handle-size );
	transform: translateX( -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
	cursor: col-resize;
	/* Scoped to the handle only — the slider itself keeps touch-action: pan-y
	   so a swipe over the images still scrolls the page on mobile. */
	touch-action: none;
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-handle {
	top: var( --njhms-ba-pos );
	left: 0;
	right: 0;
	bottom: auto;
	width: auto;
	height: var( --njhms-ba-handle-size );
	transform: translateY( -50% );
	flex-direction: row;
	cursor: row-resize;
}

.njhms-ba-slider .njhms-ba-line {
	flex: 1;
	width: var( --njhms-ba-line-size );
	background: #ffffff;
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-line {
	width: auto;
	height: var( --njhms-ba-line-size );
	flex: 1;
}

.njhms-ba-slider .njhms-ba-circle {
	width: var( --njhms-ba-handle-size );
	height: var( --njhms-ba-handle-size );
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.njhms-ba-slider .njhms-ba-circle svg {
	width: 55%;
	height: 55%;
	/* The arrows use stroke="currentColor" fill="none" presentation
	   attributes — color drives them, fill must stay off. */
	fill: none;
	color: #1a1a1a;
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-circle svg {
	transform: rotate( 90deg );
}

/* Labels — top corners, since the bottom is occupied by the info overlay. */
.njhms-ba-slider .njhms-ba-label {
	position: absolute;
	top: 14px;
	z-index: 4;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.18s ease;
}

/* A badge describes the layer underneath it, so once the divider has swept
   past its inner edge that layer is gone and the badge goes with it. The
   class is toggled from JS, which is the only place the divider position and
   the badge geometry are both known. */
.njhms-ba-slider .njhms-ba-label.njhms-ba-label-covered {
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.njhms-ba-slider .njhms-ba-label {
		transition: none;
	}
}

.njhms-ba-slider .njhms-ba-label-before {
	left: 14px;
}

.njhms-ba-slider .njhms-ba-label-after {
	right: 14px;
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-label-before {
	top: 14px;
	left: 14px;
	right: auto;
}

.njhms-ba-slider[data-orientation="vertical"] .njhms-ba-label-after {
	top: auto;
	bottom: 14px;
	left: 14px;
	right: auto;
}

/* When the info overlay is present, the vertical AFTER badge (bottom-left)
   must clear the scrim + text instead of sitting flush at the bottom edge. */
.njhms-ba-slider.njhms-ba-has-info[data-orientation="vertical"] .njhms-ba-label-after {
	bottom: 72px;
}

.njhms-ba-editor-notice {
	padding: 20px;
	background: #fdeced;
	color: #1a1a1a;
	border: 1px dashed #fc1a22;
	border-radius: 12px;
	font-size: 14px;
	text-align: center;
}

/* Keyboard focus style. The default browser outline on the handle itself
   (a 44px-wide, full-height div) paints as two vertical bars straddling the
   divider while dragging/focused, so the outline is suppressed here — the
   visible ring lives on the circle only.
   Ring drawn with outline, not box-shadow: the Handle > Box Shadow control
   emits box-shadow on this same element and would win on source order,
   silently hiding the focus ring. Modern browsers follow border-radius for
   outline, so it renders round. */
.njhms-ba-slider .njhms-ba-handle:focus {
	outline: none;
}

.njhms-ba-slider .njhms-ba-handle:focus-visible {
	outline: none;
}

.njhms-ba-slider .njhms-ba-handle:focus-visible .njhms-ba-circle {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}