/**
 * PWD Animations - Service Wheel widget stylesheet.
 * Loaded together with pwd-animations-core.css.
 */

/* =========================================================================
 * Service Wheel widget
 *
 * A pill tab bar above a vertical, looping list of services. The script
 * (Embla) sets data-state="active|near|mid|far" on every row by its distance
 * from the middle; size, colour and fade all come from that. Without the
 * script (.is-wheel absent) the same markup is a plain readable list.
 * ====================================================================== */
.pwd-anim--wheel {
	--pwd-sw-pitch: 94px;
	--pwd-sw-rows: 5;
	--pwd-sw-fs-active: 40px;
	--pwd-sw-fs-near: 36px;
	--pwd-sw-fs-far: 32px;
	--pwd-sw-c-active: #1d1c1a;
	--pwd-sw-c-near: #a9a8a2;
	--pwd-sw-c-far: #c1c0ba;
	--pwd-sw-o-mid: 0.7;
	--pwd-sw-o-far: 0.6;
	--pwd-sw-line: #e8e8e3;
	--pwd-sw-dash: currentColor;
	--pwd-sw-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pwd-sw-tab-bg: #f0efea;
	--pwd-sw-tab-color: #6b6a64;
	--pwd-sw-tab-active-bg: #ffffff;
	--pwd-sw-tab-active-color: #1d1c1a;
	--pwd-sw-tabs-align: center;
	--pwd-sw-tabs-gap: 2.5rem;
	--pwd-sw-btn-bg: #1d1c1a;
	--pwd-sw-btn-color: #ffffff;
	--pwd-sw-btn-hover-bg: #3a3935;
	--pwd-sw-btn-hover-color: #ffffff;
	--pwd-sw-btn-radius: 999px;
	--pwd-sw-caption-color: inherit;
	--pwd-sw-caption-w: 22%;
	width: 100%;
}

.pwd-sw__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Tabs ---- */
.pwd-sw__tabs-wrap {
	display: flex;
	justify-content: var(--pwd-sw-tabs-align);
	margin-bottom: var(--pwd-sw-tabs-gap);
}

.pwd-sw__tabs {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	gap: 2px;
	max-width: 100%;
	padding: 4px;
	overflow-x: auto;
	border-radius: 999px;
	background: var(--pwd-sw-tab-bg);
	scrollbar-width: none;
}

.pwd-sw__tabs::-webkit-scrollbar {
	display: none;
}

.pwd-sw__tabs[hidden] {
	display: none;
}

/* Reset theme button styles (many themes colour every <button> on hover). */
.pwd-sw .pwd-sw__tab,
.pwd-sw .pwd-sw__tab:hover,
.pwd-sw .pwd-sw__tab:focus {
	margin: 0;
	padding: 0.55rem 1.15rem;
	min-height: 40px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--pwd-sw-tab-color);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: none;
	cursor: pointer;
	transition: color 0.2s ease-out;
}

.pwd-sw .pwd-sw__tab[aria-selected="true"] {
	color: var(--pwd-sw-tab-active-color);
}

.pwd-sw .pwd-sw__tab:focus-visible {
	outline: 2px solid var(--pwd-sw-c-active);
	outline-offset: 2px;
}

.pwd-sw__indicator {
	position: absolute;
	z-index: -1;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: var(--pwd-sw-ind-w, 0);
	border-radius: 999px;
	background: var(--pwd-sw-tab-active-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transform: translateX(var(--pwd-sw-ind-x, 0));
	transition: transform 0.2s ease-out, width 0.2s ease-out;
}

/* ---- Caption + stage layout ---- */
.pwd-sw__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 2.5rem;
	align-items: center;
}

.pwd-sw--caption-left .pwd-sw__body {
	grid-template-columns: var(--pwd-sw-caption-w) minmax(0, 1fr);
}

.pwd-sw__caption {
	margin: 0;
	color: var(--pwd-sw-caption-color);
	text-align: right;
}

.pwd-sw--caption-above .pwd-sw__caption {
	text-align: center;
}

.pwd-sw__stage {
	position: relative;
	min-width: 0;
}

.pwd-sw__panel {
	transition: opacity 0.3s var(--pwd-sw-ease), transform 0.3s var(--pwd-sw-ease);
}

.pwd-sw__panel[hidden] {
	display: none;
}

.pwd-sw__panel.is-entering {
	opacity: 0;
	transform: translateY(10px);
}

.pwd-sw__panel + .pwd-sw__panel {
	margin-top: 2rem;
}

.pwd-sw.is-enhanced .pwd-sw__panel + .pwd-sw__panel {
	margin-top: 0;
}

.pwd-sw__panel-title {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.pwd-sw.is-enhanced .pwd-sw__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Rows: static list (no script, reduced motion) ---- */
.pwd-sw .pwd-sw__track {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwd-sw__slide {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwd-sw__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--pwd-sw-line);
	transition: border-color 0.3s var(--pwd-sw-ease);
}

.pwd-sw__dash {
	flex: none;
	width: 24px;
	height: 4px;
	background: var(--pwd-sw-dash);
	color: var(--pwd-sw-c-active);
	opacity: 0;
	transition: opacity 0.3s var(--pwd-sw-ease);
}

.pwd-sw--no-dash .pwd-sw__dash {
	display: none;
}

.pwd-sw__label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--pwd-sw-c-active);
	font-size: var(--pwd-sw-fs-far);
	line-height: 1.2;
}

.pwd-sw__cta-wrap {
	flex: none;
	margin-left: auto;
}

.pwd-sw .pwd-sw__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.65rem 1.25rem;
	border-radius: var(--pwd-sw-btn-radius);
	background: var(--pwd-sw-btn-bg);
	color: var(--pwd-sw-btn-color);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.pwd-sw .pwd-sw__cta:focus-visible {
	background: var(--pwd-sw-btn-hover-bg);
	color: var(--pwd-sw-btn-hover-color);
}

@media (hover: hover) {
	.pwd-sw .pwd-sw__cta:hover {
		background: var(--pwd-sw-btn-hover-bg);
		color: var(--pwd-sw-btn-hover-color);
	}
}

.pwd-sw .pwd-sw__cta:focus-visible {
	outline: 2px solid var(--pwd-sw-c-active);
	outline-offset: 3px;
}

/* ---- Rows: the wheel ---- */
.pwd-sw.is-wheel .pwd-sw__viewport {
	height: calc(var(--pwd-sw-pitch) * var(--pwd-sw-rows));
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pwd-sw-pitch), #000 calc(100% - var(--pwd-sw-pitch)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pwd-sw-pitch), #000 calc(100% - var(--pwd-sw-pitch)), transparent 100%);
}

.pwd-sw.is-wheel .pwd-sw__viewport:focus-visible {
	outline: 2px solid var(--pwd-sw-c-active);
	outline-offset: 4px;
}

.pwd-sw.is-wheel .pwd-sw__track {
	display: flex;
	flex-direction: column;
	height: 100%;
	touch-action: pan-y pinch-zoom;
}

.pwd-sw.is-wheel .pwd-sw__slide {
	display: flex;
	align-items: center;
	flex: 0 0 var(--pwd-sw-pitch);
	min-height: 0;
	cursor: pointer;
}

.pwd-sw.is-wheel .pwd-sw__slide[data-state="active"] {
	cursor: default;
}

.pwd-sw.is-wheel .pwd-sw__row {
	min-height: calc(var(--pwd-sw-pitch) - 6px);
	padding: 0;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.pwd-sw.is-wheel .pwd-sw__label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-block: 0.1em;
	/* Every row is laid out at the middle row's size and scaled down, so the
	   size change is a compositor transform, not a layout pass per frame.
	   The script sets --pwd-sw-scale-near/-far from the size controls. */
	font-size: var(--pwd-sw-fs-active);
	transform: scale(var(--pwd-sw-label-scale, 1));
	transform-origin: left center;
	transition: transform 0.3s var(--pwd-sw-ease), color 0.3s var(--pwd-sw-ease), opacity 0.3s var(--pwd-sw-ease);
}

.pwd-sw.is-wheel .pwd-sw__cta-wrap {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity 0.3s var(--pwd-sw-ease), transform 0.3s var(--pwd-sw-ease), visibility 0s linear 0.3s;
}

.pwd-sw.is-wheel [data-state="active"] .pwd-sw__row {
	border-top-color: var(--pwd-sw-line);
	border-bottom-color: var(--pwd-sw-line);
}

.pwd-sw.is-wheel [data-state="active"] .pwd-sw__dash {
	opacity: 1;
}

.pwd-sw.is-wheel [data-state="active"] .pwd-sw__label {
	--pwd-sw-label-scale: 1;
	color: var(--pwd-sw-c-active);
}

.pwd-sw.is-wheel [data-state="active"] .pwd-sw__cta-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.pwd-sw.is-wheel [data-state="near"] .pwd-sw__label {
	--pwd-sw-label-scale: var(--pwd-sw-scale-near, 0.9);
	color: var(--pwd-sw-c-near);
}

.pwd-sw.is-wheel [data-state="mid"] .pwd-sw__label {
	--pwd-sw-label-scale: var(--pwd-sw-scale-far, 0.8);
	color: var(--pwd-sw-c-near);
	opacity: var(--pwd-sw-o-mid);
}

.pwd-sw.is-wheel [data-state="far"] .pwd-sw__label {
	--pwd-sw-label-scale: var(--pwd-sw-scale-far, 0.8);
	color: var(--pwd-sw-c-far);
	opacity: var(--pwd-sw-o-far);
}

/* A scaled-down label would be cut short by its full-size box; let the outer
   rows show what the old per-row font size showed. The viewport clips them. */
.pwd-sw.is-wheel [data-state="near"] .pwd-sw__label,
.pwd-sw.is-wheel [data-state="mid"] .pwd-sw__label,
.pwd-sw.is-wheel [data-state="far"] .pwd-sw__label {
	overflow: visible;
	text-overflow: clip;
}

/* ---- Pause button ---- */
.pwd-sw .pwd-sw__pause,
.pwd-sw .pwd-sw__pause:hover,
.pwd-sw .pwd-sw__pause:focus {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pwd-sw-line);
	border-radius: 50%;
	background: var(--pwd-sw-tab-active-bg);
	box-shadow: none;
	color: var(--pwd-sw-c-active);
	cursor: pointer;
}

.pwd-sw .pwd-sw__pause[hidden] {
	display: none;
}

.pwd-sw .pwd-sw__pause:focus-visible {
	outline: 2px solid var(--pwd-sw-c-active);
	outline-offset: 2px;
}

.pwd-sw__pause svg {
	width: 14px;
	height: 14px;
}

.pwd-sw__icon-play,
.pwd-sw__pause.is-paused .pwd-sw__icon-pause {
	display: none;
}

.pwd-sw__pause.is-paused .pwd-sw__icon-play {
	display: block;
}

/*
 * Fallback sizes per breakpoint. The Row Height and size controls normally
 * output these from Elementor's own CSS (which wins on specificity); these
 * only apply if that CSS is missing.
 */
@media (max-width: 1024px) {
	.pwd-anim--wheel {
		--pwd-sw-pitch: 80px;
		--pwd-sw-fs-active: 32px;
		--pwd-sw-fs-near: 28px;
		--pwd-sw-fs-far: 26px;
	}
}

@media (max-width: 767px) {
	.pwd-anim--wheel {
		--pwd-sw-pitch: 64px;
		--pwd-sw-fs-active: 22px;
		--pwd-sw-fs-near: 19px;
		--pwd-sw-fs-far: 18px;
	}

	/* Phones: the middle row may use two lines rather than cut the name short. */
	.pwd-sw.is-wheel [data-state="active"] .pwd-sw__label {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.15;
		white-space: normal;
	}

	.pwd-sw--caption-left .pwd-sw__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.pwd-sw__caption {
		text-align: center;
	}

	.pwd-sw .pwd-sw__cta {
		padding: 0.5rem 0.9rem;
		font-size: 0.8rem;
	}

	.pwd-sw__dash {
		width: 14px;
		height: 3px;
	}

	.pwd-sw .pwd-sw__pause {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pwd-sw__panel,
	.pwd-sw__indicator,
	.pwd-sw__row,
	.pwd-sw__label,
	.pwd-sw__dash,
	.pwd-sw__cta-wrap {
		transition: none !important;
	}
}