/* PužoSfera interactions — presentation only. Behaviour/data live in PužoSfera Core. */

/* ==============================
   Misao Puža Mudrice
   ============================== */
.ps-thought-rotator {
	box-sizing: border-box;
	width: min(100%, 760px);
	margin-inline: auto;
	padding: var(--ps-thought-padding, 22px);
	border: var(--ps-thought-border-width, 2px) solid var(--ps-thought-border, #76ad8d);
	border-radius: var(--ps-thought-radius, 26px);
	background: linear-gradient(145deg, var(--ps-thought-bg-start, #f2fbf4), var(--ps-thought-bg-end, #dff3e7));
	box-shadow: 0 12px 28px var(--ps-thought-shadow, rgba(6, 68, 47, .18));
	color: var(--ps-thought-text, #173f31);
	overflow: hidden;
}

.ps-thought-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	margin-bottom: .55rem;
	color: var(--ps-thought-label, #0a5538);
	font-family: var(--ps-thought-label-font-family, "Alegreya", Georgia, serif);
	font-size: var(--ps-thought-label-size, 17px);
	font-weight: 700;
	letter-spacing: .035em;
}

.ps-thought-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
}

.ps-thought-icon-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ps-thought-icon-fallback { font-size: 1.75rem; }

.ps-thought-text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ps-thought-text, #173f31);
	font-family: var(--ps-thought-font-family, "Alice", Georgia, serif);
	font-size: var(--ps-thought-font-size, 25px);
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
}

.ps-thought-text::before,
.ps-thought-text::after {
	color: color-mix(in srgb, var(--ps-thought-label, #0a5538) 58%, transparent);
	font-size: 1.45em;
	line-height: 0;
	vertical-align: -.15em;
}
.ps-thought-text::before { content: "“"; margin-right: .12em; }
.ps-thought-text::after { content: "”"; margin-left: .12em; }

.ps-thought-text-content {
	display: inline;
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--ps-thought-fade, 450ms) ease, transform var(--ps-thought-fade, 450ms) ease;
}

.ps-thought-rotator.is-fading .ps-thought-text-content {
	opacity: 0;
	transform: translateY(3px);
}

.ps-thought-data { display: none !important; }

/* ==============================
   Puž Mudrica — interaktivna fusnota
   ============================== */
.ps-mudrica-note {
	--ps-mudrica-type-accent: var(--ps-mudrica-border, #76ad8d);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	vertical-align: middle;
	isolation: isolate;
}

.ps-mudrica-type-upozorenje { --ps-mudrica-type-accent: #d58b3b; }
.ps-mudrica-type-cinjenica { --ps-mudrica-type-accent: #4b8ca8; }
.ps-mudrica-type-komentar { --ps-mudrica-type-accent: #8a739f; }

.ps-mudrica-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ps-mudrica-icon-size, 54px);
	height: var(--ps-mudrica-icon-size, 54px);
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--ps-mudrica-type-accent) 72%, white 28%);
	border-radius: 50%;
	background: color-mix(in srgb, var(--ps-mudrica-bg, #f4fbf6) 88%, white 12%);
	box-shadow: 0 5px 13px color-mix(in srgb, var(--ps-mudrica-shadow, rgba(6,68,47,.22)) 75%, transparent);
	cursor: pointer;
	transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.ps-mudrica-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 82%;
	height: 82%;
}
.ps-mudrica-icon-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ps-mudrica-icon-fallback { font-size: calc(var(--ps-mudrica-icon-size, 54px) * .58); }

.ps-mudrica-trigger-badge {
	position: absolute;
	right: -4px;
	bottom: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ps-mudrica-badge, #ef9b38);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

.ps-mudrica-trigger::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 9px);
	z-index: 3;
	width: max-content;
	max-width: 220px;
	padding: .38rem .58rem;
	border-radius: 8px;
	background: #103d31;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity 160ms ease, transform 160ms ease;
}

.ps-mudrica-hint {
	color: var(--ps-mudrica-title, #0a5538);
	font-size: .88em;
	font-weight: 700;
}

.ps-mudrica-popover {
	--ps-mudrica-shift: 0px;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 13px);
	z-index: 999;
	display: grid;
	gap: .55rem;
	width: min(360px, calc(100vw - 24px));
	padding: var(--ps-mudrica-padding, 18px);
	border: var(--ps-mudrica-border-width, 2px) solid var(--ps-mudrica-type-accent);
	border-radius: var(--ps-mudrica-radius, 22px);
	background: var(--ps-mudrica-bg, #f4fbf6);
	box-shadow: 0 15px 34px var(--ps-mudrica-shadow, rgba(6,68,47,.22));
	color: var(--ps-mudrica-text, #173f31);
	font-family: var(--ps-mudrica-font-family, "Alegreya", Georgia, serif);
	font-size: var(--ps-mudrica-font-size, 19px);
	line-height: 1.48;
	text-align: left;
	opacity: 0;
	transform: translateX(calc(-50% + var(--ps-mudrica-shift))) translateY(4px) scale(.975);
	transform-origin: 50% 100%;
	transition: opacity 170ms ease, transform 170ms ease;
}

.ps-mudrica-popover[hidden] { display: none !important; }
.ps-mudrica-popover.is-open {
	opacity: 1;
	transform: translateX(calc(-50% + var(--ps-mudrica-shift))) translateY(0) scale(1);
}
.ps-mudrica-popover.is-below {
	top: calc(100% + 13px);
	bottom: auto;
	transform-origin: 50% 0;
}

.ps-mudrica-title {
	display: block;
	padding-right: 1.5rem;
	color: var(--ps-mudrica-title, #0a5538);
	font-size: 1.08em;
	font-weight: 800;
}
.ps-mudrica-body { display: block; }
.ps-mudrica-body p:first-child { margin-top: 0; }
.ps-mudrica-body p:last-child { margin-bottom: 0; }
.ps-mudrica-more { font-weight: 750; }

.ps-mudrica-close {
	position: absolute;
	top: 7px;
	right: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ps-mudrica-title, #0a5538);
	font-size: 23px;
	line-height: 1;
	cursor: pointer;
}

.ps-mudrica-trigger:focus-visible,
.ps-mudrica-close:focus-visible,
.ps-mudrica-more:focus-visible {
	outline: 3px solid var(--ps-mudrica-type-accent);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.ps-mudrica-trigger:hover {
		transform: translateY(-2px) scale(1.035);
		filter: brightness(1.035);
		box-shadow: 0 8px 18px color-mix(in srgb, var(--ps-mudrica-shadow, rgba(6,68,47,.22)) 85%, transparent);
	}
	.ps-mudrica-trigger:hover::after,
	.ps-mudrica-trigger:focus-visible::after {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* ==============================
   Animirani pužji trag
   Dodaj klasu ps-trail-reveal na postojeći Gutenberg Image/SVG block.
   ============================== */
.ps-trail-reveal {
	-webkit-mask-image: linear-gradient(var(--ps-trail-angle, 90deg), #000 0%, #000 45%, rgba(0,0,0,.88) 49%, transparent 54%, transparent 100%);
	mask-image: linear-gradient(var(--ps-trail-angle, 90deg), #000 0%, #000 45%, rgba(0,0,0,.88) 49%, transparent 54%, transparent 100%);
	-webkit-mask-size: 220% 100%;
	mask-size: 220% 100%;
	-webkit-mask-position: var(--ps-trail-start, 100%) 0;
	mask-position: var(--ps-trail-start, 100%) 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: -webkit-mask-position var(--ps-trail-duration, 1800ms) cubic-bezier(.22,.72,.22,1) var(--ps-trail-delay, 100ms), mask-position var(--ps-trail-duration, 1800ms) cubic-bezier(.22,.72,.22,1) var(--ps-trail-delay, 100ms);
	will-change: -webkit-mask-position, mask-position;
}

.ps-trail-reveal.is-revealed {
	-webkit-mask-position: var(--ps-trail-end, 0%) 0;
	mask-position: var(--ps-trail-end, 0%) 0;
}

@media (prefers-reduced-motion: reduce) {
	.ps-thought-text-content,
	.ps-mudrica-trigger,
	.ps-mudrica-trigger::after,
	.ps-mudrica-popover,
	.ps-trail-reveal {
		transition: none !important;
	}
	.ps-trail-reveal {
		-webkit-mask-position: var(--ps-trail-end, 0%) 0 !important;
		mask-position: var(--ps-trail-end, 0%) 0 !important;
	}
}