/**
 * UN Site Logo — responsive + sticky logo swap.
 *
 * Two images live in the DOM at once (full + compact). Visibility is driven entirely
 * here, so there is no competition with Elementor's per-element width CSS: the widget's
 * responsive width sliders only set the --un-w-* custom properties; every width/visibility
 * rule below reads those vars. The active image takes its configured width; the inactive
 * one collapses to width:0 with a fade + scale/slide — a single smooth motion, no jump.
 *
 * Modifier classes (added by the widget) gate when the compact logo takes over:
 *   --cmob   compact on mobile (<= 767px)
 *   --ctab   compact on tablet (768–1024px)
 *   --cstick compact when sticky (.is-sticky, added by un-site-logo.js at any breakpoint)
 */

.un-site-logo {
	--un-logo-speed: 350ms;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	max-width: 100%;
	line-height: 0;
}

.un-site-logo__link {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	text-decoration: none;
}

.un-site-logo__img {
	display: block;
	height: auto;
	max-width: 100%;
	/* Base state = hidden/collapsed. The active rules below re-open the right one. */
	width: 0;
	opacity: 0;
	transform: scale(0.85) translateX(-6px);
	transform-origin: left center;
	transition:
		width var(--un-logo-speed) cubic-bezier(0.4, 0, 0.2, 1),
		opacity var(--un-logo-speed) ease,
		transform var(--un-logo-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: width, opacity, transform;
}

/* ---- Default (desktop, at rest): full logo active ---- */
.un-site-logo__full {
	width: var(--un-w-full, 180px);
	opacity: 1;
	transform: none;
}

/* ---- Mobile: compact takes over ---- */
@media (max-width: 767px) {
	.un-site-logo--cmob .un-site-logo__full {
		width: 0;
		opacity: 0;
		transform: scale(0.85) translateX(-6px);
	}
	.un-site-logo--cmob .un-site-logo__compact {
		width: var(--un-w-compact, 56px);
		opacity: 1;
		transform: none;
	}
}

/* ---- Tablet: compact takes over (opt-in) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
	.un-site-logo--ctab .un-site-logo__full {
		width: 0;
		opacity: 0;
		transform: scale(0.85) translateX(-6px);
	}
	.un-site-logo--ctab .un-site-logo__compact {
		width: var(--un-w-compact, 56px);
		opacity: 1;
		transform: none;
	}
}

/* ---- Sticky: compact takes over at any breakpoint (highest specificity wins) ---- */
.un-site-logo--cstick.is-sticky .un-site-logo__full {
	width: 0;
	opacity: 0;
	transform: scale(0.85) translateX(-6px);
}
.un-site-logo--cstick.is-sticky .un-site-logo__compact {
	width: var(--un-w-compact-sticky, var(--un-w-compact, 56px));
	opacity: 1;
	transform: none;
}

/* ---- Reduced motion: keep the swap, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
	.un-site-logo__img {
		transition: width 1ms linear, opacity 1ms linear;
		transform: none !important;
	}
}