/**
 * MV Pojmovnik — marker (highlighter) + tooltip stilovi.
 *
 * Migracija iz Code Snippets s minimalnim ispravkama:
 *  - tooltip naslov sad koristi brand Navy (#162394) umjesto #1a1a2e
 *  - bubble bg ostaje #F4F4F5 (highlighter konvencija — neutralno svijetlo)
 *  - žuti gradijent ostaje (highlighter konvencija ≠ brand Yellow #F4B107)
 *
 * Žuti highlighter izgled je markersko-konvencionalni i namjerno nije strogo
 * brand-aligned — emulira fizički highlighter marker, ne brand pillar.
 */

/* ── Marker wrapper ─────────────────────────────────────────── */
.mv-marker {
	display          : inline-block;
	vertical-align   : baseline;
	position         : relative;
	isolation        : isolate;
	cursor           : help;
	padding          : 0;
	margin           : 0 1px;
	color            : inherit !important;
	text-decoration  : none !important;
}

/* Keyboard fokus — bitno za a11y (gradient i border-bottom dodaje focus prsten) */
.mv-marker:focus,
.mv-marker:focus-visible {
	outline          : 2px solid #162394;
	outline-offset   : 2px;
	border-radius    : 2px;
}

/* ── Marker pozadina (filter samo ovdje) ─────────────────────── */
.mv-marker::before {
	content          : "";
	position         : absolute;
	left             : -3px;
	right            : -3px;
	bottom           : -1px;
	height           : 52%;
	background       : linear-gradient(
		to right,
		rgba(255, 210, 0, 0.0)   0%,
		rgba(255, 215, 0, 0.82)  8%,
		rgba(255, 222, 0, 0.78) 50%,
		rgba(255, 215, 0, 0.80) 92%,
		rgba(255, 210, 0, 0.0) 100%
	);
	z-index          : -1;
	filter           : url(#mv-marker-rough);
	pointer-events   : none;
}

/* ── Editor preview (bez filtera — Gutenberg ga nepouzdano renderira) ── */
.block-editor .mv-marker::before,
.editor-styles-wrapper .mv-marker::before {
	filter           : none;
}

/* ── Tooltip bubble ──────────────────────────────────────────── */
.mv-tooltip-bubble {
	position         : absolute;
	background       : #F4F4F5;
	border-radius    : 14px;
	padding          : 14px 16px 14px 14px;
	max-width        : 300px;
	min-width        : 180px;
	box-shadow       : 0 4px 20px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
	transition       : opacity 0.18s ease;
	pointer-events   : none;
	z-index          : 99999;
	font-family      : "Montserrat", "Open Sans", sans-serif;
}

.mv-tooltip-inner {
	display          : flex;
	align-items      : flex-start;
	gap              : 10px;
}

/* Lightbulb ikona — brand Navy */
.mv-tooltip-icon {
	flex-shrink      : 0;
	width            : 22px;
	height           : 22px;
	color            : #162394;
	margin-top       : 1px;
}

.mv-tooltip-icon svg {
	width            : 100%;
	height           : 100%;
}

/* Tekst unutar tooltipa */
.mv-tooltip-content {
	flex             : 1;
}

.mv-tooltip-title {
	display          : block;
	font-size        : 0.875rem;
	font-weight      : 700;
	color            : #162394;          /* brand Navy (popravljeno iz #1a1a2e) */
	margin-bottom    : 4px;
	line-height      : 1.3;
}

.mv-tooltip-body {
	display          : block;
	font-size        : 0.8125rem;
	font-weight      : 500;
	color            : #3A3B3C;
	line-height      : 1.55;
}

/* "Saznaj više" link na detaljnu stranicu (renderira se ako tooltip ima href) */
.mv-tooltip-link {
	display          : inline-block;
	margin-top       : 8px;
	font-size        : 0.75rem;
	font-weight      : 600;
	color            : #F56306;          /* brand Orange */
	text-decoration  : none;
	pointer-events   : auto;             /* link mora biti klikabilan i unutar tooltipa */
}

.mv-tooltip-link:hover,
.mv-tooltip-link:focus {
	text-decoration  : underline;
}

/* Trokutić (strelica prema dolje) */
.mv-tooltip-arrow {
	position         : absolute;
	bottom           : -9px;
	width            : 18px;
	height           : 10px;
	transform        : translateX(-50%);
	overflow         : hidden;
}

.mv-tooltip-arrow::after {
	content          : "";
	position         : absolute;
	width            : 13px;
	height           : 13px;
	background       : #F4F4F5;
	transform        : rotate(45deg);
	top              : -7px;
	left             : 2px;
	box-shadow       : 2px 2px 5px rgba(0,0,0,0.09);
}

/* Mobilni */
@media (max-width: 768px) {
	.mv-tooltip-bubble {
		max-width    : 240px;
		padding      : 12px;
	}
	.mv-tooltip-body {
		font-size    : 0.75rem;
	}
}