/* Puzzle Categories for Elementor
 * Every visual value is a custom property so Elementor controls can override it.
 */

.pcfe-outer {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pcfe-wrapper {
	--pcfe-size: 520px;
	--pcfe-bg: #fbb829;
	--pcfe-bg-hover: #f26b21;
	--pcfe-stroke: transparent;
	--pcfe-stroke-width: 0;

	--pcfe-detach: 18px;
	--pcfe-scale: 1.03;
	--pcfe-rotate: 0deg;
	--pcfe-duration: 420ms;
	--pcfe-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
	--pcfe-dim: 1;

	--pcfe-shadow-color: rgba(0, 0, 0, 0.22);
	--pcfe-shadow-blur: 14px;
	--pcfe-shadow-y: 8px;

	--pcfe-height: 420px;
	--pcfe-content-width: 30%;
	--pcfe-icon-size: 34px;
	--pcfe-icon-gap: 10px;
	--pcfe-icon-color: #1f1300;
	--pcfe-icon-color-hover: #ffffff;
	--pcfe-title-color: #1f1300;
	--pcfe-title-color-hover: #ffffff;
	--pcfe-desc-color: #3a2a08;
	--pcfe-desc-color-hover: #fff4e0;
	--pcfe-desc-gap: 6px;
	--pcfe-stack-cols: 1;

	width: 100%;
	max-width: var(--pcfe-size);
}

/* --- Third-party CSS hardening ---------------------------------------------
 * Some themes and icon libraries ship a blanket `svg { width: 1em; height: 1em }`
 * reset. That collapses the puzzle pieces into a dot in the corner. These rules
 * are scoped to this widget and use !important purely to out-rank such resets —
 * they only re-assert the widget's own intended sizing, nothing more.
 */
.pcfe-wrapper .pcfe-svg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	vertical-align: top;
}

.pcfe-wrapper .pcfe-shape {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
}

/* Square stage that scales with the wrapper width. */
.pcfe-stage {
	position: relative;
	width: 100%;
	padding-top: 100%;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

/* Height: keep the ring circular, capped by whichever is smaller. */
.pcfe-wrapper.pcfe-h-cap {
	max-width: min(var(--pcfe-size), var(--pcfe-height));
}

/* Height: let the ring fill the box and become an oval. */
.pcfe-wrapper.pcfe-h-stretch .pcfe-stage {
	padding-top: 0;
	height: var(--pcfe-height);
}

.pcfe-piece {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* The four layers overlap edge to edge. Letting them swallow pointer events
	   is what stopped the lower pieces from reacting, so they stay transparent
	   to the pointer and the stage decides which piece is hovered. */
	pointer-events: none;
	transform-origin: center center;
	transition: transform var(--pcfe-duration) var(--pcfe-easing),
		opacity var(--pcfe-duration) var(--pcfe-easing);
	will-change: transform;
}

.pcfe-svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.pcfe-svg .pcfe-shape-link,
.pcfe-svg .pcfe-shape-link .pcfe-shape {
	pointer-events: auto;
}

.pcfe-shape {
	cursor: pointer;
	fill: var(--pcfe-bg);
	stroke: var(--pcfe-stroke);
	stroke-width: var(--pcfe-stroke-width);
	transition: fill var(--pcfe-duration) var(--pcfe-easing),
		filter var(--pcfe-duration) var(--pcfe-easing);
}

/* Label block, positioned on the diagonal of its own quadrant. */
.pcfe-content {
	position: absolute;
	left: var(--pcfe-x, 50%);
	top: var(--pcfe-y, 50%);
	width: var(--pcfe-content-width);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	pointer-events: none;
}

.pcfe-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin-bottom: var(--pcfe-icon-gap);
	color: var(--pcfe-icon-color);
	font-size: var(--pcfe-icon-size);
	transition: color var(--pcfe-duration) var(--pcfe-easing);
}

.pcfe-icon--below {
	margin-bottom: 0;
	margin-top: var(--pcfe-icon-gap);
}

.pcfe-icon i,
.pcfe-wrapper .pcfe-icon svg {
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	font-size: inherit;
	color: inherit;
	fill: currentColor;
}

.pcfe-title {
	margin: 0;
	color: var(--pcfe-title-color);
	line-height: 1.25;
	word-break: break-word;
	transition: color var(--pcfe-duration) var(--pcfe-easing);
}

.pcfe-desc {
	margin-top: var(--pcfe-desc-gap);
	color: var(--pcfe-desc-color);
	line-height: 1.45;
	transition: color var(--pcfe-duration) var(--pcfe-easing);
}

/* Active state: the piece pulls away from the ring along its own diagonal. */
.pcfe-piece.is-active {
	z-index: 3;
	transform:
		translate(
			calc(var(--pcfe-detach) * var(--pcfe-tx, 1) * 0.7071),
			calc(var(--pcfe-detach) * var(--pcfe-ty, 1) * 0.7071)
		)
		rotate(var(--pcfe-rotate))
		scale(var(--pcfe-scale));
}

.pcfe-piece.is-active .pcfe-shape {
	fill: var(--pcfe-bg-hover);
	filter: drop-shadow(0 var(--pcfe-shadow-y) var(--pcfe-shadow-blur) var(--pcfe-shadow-color));
}

.pcfe-piece.is-active .pcfe-icon {
	color: var(--pcfe-icon-color-hover);
}

.pcfe-piece.is-active .pcfe-title {
	color: var(--pcfe-title-color-hover);
}

.pcfe-piece.is-active .pcfe-desc {
	color: var(--pcfe-desc-color-hover);
}

.pcfe-stage.pcfe-dim-others.is-hovering .pcfe-piece:not(.is-active) {
	opacity: var(--pcfe-dim);
}

/* Never draw a rectangular focus ring. A browser outlines an SVG link around its
   bounding box, which is a square — not the puzzle shape inside it. */
.pcfe-shape-link,
.pcfe-shape-link:focus,
.pcfe-shape-link:focus-visible,
.pcfe-shape-link:active,
.pcfe-shape,
.pcfe-shape:focus,
.pcfe-shape:focus-visible,
.pcfe-shape:active {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* Keyboard users still get an indicator, traced along the piece itself. */
.pcfe-shape-link:focus-visible .pcfe-shape,
.pcfe-shape:focus-visible {
	stroke: var(--pcfe-focus-color, currentColor);
	stroke-width: var(--pcfe-focus-width, 3);
	stroke-dasharray: 6 5;
}

/* Optional card layout on small screens. */
@media (max-width: 767px) {
	.pcfe-wrapper.pcfe-stack-mobile,
	.pcfe-wrapper.pcfe-stack-mobile.pcfe-h-cap {
		max-width: 100%;
	}

	.pcfe-stack-mobile .pcfe-stage,
	.pcfe-stack-mobile.pcfe-h-stretch .pcfe-stage {
		padding-top: 0;
		height: auto;
		display: grid;
		grid-template-columns: repeat(var(--pcfe-stack-cols), minmax(0, 1fr));
		gap: 14px;
	}

	.pcfe-stack-mobile .pcfe-piece {
		pointer-events: auto;
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		background: var(--pcfe-bg);
		border-radius: 14px;
		padding: 26px 18px;
		transition: background var(--pcfe-duration) var(--pcfe-easing),
			transform var(--pcfe-duration) var(--pcfe-easing);
	}

	.pcfe-stack-mobile .pcfe-piece.is-active {
		background: var(--pcfe-bg-hover);
		transform: translateY(calc(var(--pcfe-detach) * -0.35)) scale(var(--pcfe-scale));
		box-shadow: 0 var(--pcfe-shadow-y) var(--pcfe-shadow-blur) var(--pcfe-shadow-color);
	}

	.pcfe-stack-mobile .pcfe-svg {
		display: none;
	}

	.pcfe-stack-mobile .pcfe-content {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		transform: none;
		pointer-events: auto;
	}

	.pcfe-stack-mobile .pcfe-card-link {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcfe-piece,
	.pcfe-shape,
	.pcfe-icon,
	.pcfe-title,
	.pcfe-desc {
		transition-duration: 0.01ms;
	}

	.pcfe-piece.is-active {
		transform: none;
	}
}