/* Veerny – stil sajta. Fontovi, boje i stanja animacija. Izgled samih sekcija je u GenerateBlocks blokovima. */
/* ===== Fontovi ===== */
@font-face {
	font-family: "Bevellier";
	src: url("../fonts/Bevellier-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-Variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

/* ===== Boje i fontovi (menjaj ovde – menja se svuda) ===== */
:root {
	/* Jedinica razmere: 1px na ekranu 1440×900; prati ekran (po širini i visini, koja god je manja),
	   od ×0.7 (mali laptopi) do ×1.333 (npr. 2560×1440); na još većim ekranima raspored se centrira.
	   Tekst ima donju granicu u rem, pa nikad ne postaje sitan i poštuje uvećanje fonta u pregledaču. */
	--u: clamp(0.7px, min(100vw / 1440, 100vh / 900), 1.3333px);
}
:root {
	--vr-yellow: #FFD863;
	--vr-blue: #85BCE6;
	--vr-blue-btn: #7DAFD8;
	--vr-blue-dark: #3D78A8;
	--vr-ink: #4E4947;
	--vr-hint: #695E4B; /* uputstva posetiocima – najsvetlija siva koja na žutoj ima kontrast 4,5 : 1 */
	--vr-purple-dark: #3F3273;
	--vr-purple-mid: #5E5091;
	--vr-purple: #796CB1;
	--vr-lilac: #D2AEE6;
	--vr-orange: #FFAA5B;
	--vr-red: #C2423B;
	--vr-green: #2E7D5B;
	--vr-lime: #9DC368;
	--vr-head: "Bevellier", "Arial Narrow", sans-serif;
	--vr-body: "Rubik", system-ui, sans-serif;
}

/* ===== Osnova stranice (šablon „Veerny platno“) ===== */
body.vr-canvas {
	background-color: var(--vr-yellow);
	color: var(--vr-ink);
	font-family: var(--vr-body);
	overflow-x: clip;
}
body.vr-canvas .site.grid-container,
body.vr-canvas .site-content,
body.vr-canvas .vr-main {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	background: transparent;
}
body.vr-canvas .vr-main { overflow-x: clip; }

body.vr-has-header:not(.vr-canvas) .site { padding-top: 140px; }

.vr-footer {
	background: var(--vr-blue);
	color: #2B2550; /* tamnoplava na svetloplavoj: kontrast 7:1 (bela je imala samo 2:1) */
	text-align: center;
	font: 500 max(1rem, calc(15 * var(--u, 1px)))/1.2 var(--vr-body);
	padding: 0 0 calc(32 * var(--u, 1px));
}
.vr-footer p { margin: 0; }
.vr-footer-links { display: flex; justify-content: center; gap: calc(28 * var(--u, 1px)); margin-bottom: calc(14 * var(--u, 1px)); }
.vr-footer-links a { color: #2B2550; text-decoration: underline; text-decoration-color: rgba(43,37,80,.45); text-underline-offset: calc(4 * var(--u, 1px)); transition: text-decoration-color .25s ease; }
.vr-footer-links a:hover, .vr-footer-links a:focus-visible { color: var(--vr-purple-dark); text-decoration-color: currentColor; }
.vr-footer-links a:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 3px; border-radius: 2px; }

/* ===== Zaglavlje: sakrij se pri skrolu nadole, vrati se pri skrolu nagore ===== */
[data-vr="header"] { transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
[data-vr="header"].is-hidden { transform: translateY(-190%); }
body.admin-bar [data-vr="header"] { margin-top: 32px; }

/* ===== Dekoracije ===== */
[data-vr="decor"] { will-change: transform; }
[data-vr="decor"] svg { overflow: visible; }

/* ===== Pre-animaciono stanje (samo kad JS radi) ===== */
.vr-js [data-vr="hero"] [data-vr="hl"],
.vr-js [data-vr="reveal"],
.vr-js [data-vr="reveal-group"] > * { visibility: hidden; }

/* ===== Citati koji se smenjuju ===== */
[data-vr="quotes"].is-ready { display: grid; }
[data-vr="quotes"].is-ready > [data-vr="quote"] { grid-area: 1 / 1; align-self: center; }
.vr-quotes-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: calc(18 * var(--u, 1px));
}
[data-vr="quotes"].is-ready { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
/* Tačkica je dugme od najmanje 44px visine (lako za prst); vidljivi deo je ::before, napredak ::after */
.vr-quotes-nav button {
	--dot: calc(10 * var(--u, 1px));
	--pill: calc(38 * var(--u, 1px));
	position: relative;
	width: calc(var(--dot) + 16px);
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.vr-quotes-nav button::before, .vr-quotes-nav button::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	height: var(--dot);
	margin-top: calc(var(--dot) / -2);
	border-radius: var(--dot);
}
.vr-quotes-nav button::before { right: 8px; background: rgba(121, 108, 177, .3); transition: background-color .3s ease; }
.vr-quotes-nav button:hover::before { background: rgba(121, 108, 177, .55); }
.vr-quotes-nav button[aria-selected="true"] { width: calc(var(--pill) + 16px); }
.vr-quotes-nav button[aria-selected="true"]::after {
	width: var(--pill);
	background: var(--vr-purple);
	/* puni se sleva nadesno, a ivice su od prvog trenutka zaobljene (seče se, ne skuplja) */
	clip-path: inset(0 calc(100% - var(--dot)) 0 0 round var(--dot));
	animation: vr-dot var(--vr-interval, 6500ms) linear forwards;
}
[data-vr="quotes"].is-paused + .vr-quotes-nav button[aria-selected="true"]::after { animation-play-state: paused; }
.vr-quotes-nav button:focus-visible { outline: none; }
.vr-quotes-nav button:focus-visible::before { outline: 3px solid var(--vr-purple-dark); outline-offset: 3px; }
@media (max-width: 1024px) {
	.vr-quotes-nav button { --dot: 14px; --pill: 44px; }
}
@keyframes vr-dot { from { clip-path: inset(0 calc(100% - var(--dot)) 0 0 round var(--dot)); } to { clip-path: inset(0 0 0 0 round var(--dot)); } }

/* ===== Špilovi kartica ===== */
[data-vr="deck"].is-ready { display: block; }
[data-vr="deck"].is-ready > [data-vr="card"] {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	backface-visibility: hidden;
}
[data-vr="deck"].is-ready > [data-vr="deck-end"] { position: absolute; inset: calc(12 * var(--u, 1px)); z-index: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; pointer-events: none; }
[data-vr="deck-end"] svg { width: auto; height: 100%; max-height: calc(540 * var(--u, 1px)); overflow: visible; }

/* ===== Bez/sa Veerny ===== */
.vr-js [data-vr="bubble"] { display: grid; align-items: center; }
.vr-js [data-vr="bubble"] > [data-vr="bubble-problem"],
.vr-js [data-vr="bubble"] > [data-vr="bubble-solution"] { grid-area: 1 / 1; }
.vr-js [data-vr="bubble-solution"] { visibility: hidden; opacity: 0; }
[data-vr="bubble"]:focus-visible { outline: calc(3 * var(--u, 1px)) solid var(--vr-purple-dark); outline-offset: calc(4 * var(--u, 1px)); }
[data-vr="blob"] svg { overflow: visible; }

/* ===== Video kartice ===== */
[data-vr="play"] svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
a:hover > [data-vr="play"] svg { transform: scale(1.12); }
a:hover [data-vr="arrow"] svg { transform: translateX(calc(5 * var(--u, 1px))); }
[data-vr="arrow"] svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }

/* ===== Dugmad: zenica (mrlja) ===== */
a[data-vr-pupil] { position: relative; isolation: isolate; }
.vr-iris-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; pointer-events: none; }
a[data-vr-pupil] .vr-lbl { position: relative; z-index: 2; }
.vr-iris { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.vr-iris i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
/* Mrlja je odmah pune veličine (prečnik = 2× dijagonala dugmeta) i raste od nule – nema pikselizacije od uvećavanja malog kruga */
.vr-iris .p { width: var(--vr-iris-d, 600px); height: var(--vr-iris-d, 600px); background: var(--vr-iris-color, var(--vr-purple-dark)); transition: transform .55s cubic-bezier(.5, 0, .75, 0); }
a[data-vr-pupil]:hover .vr-iris .p, a[data-vr-pupil]:focus-visible .vr-iris .p { transform: translate(-50%, -50%) scale(1); transition: transform 1.7s cubic-bezier(.22, 1, .36, 1); }
.vr-iris .h { width: calc(16 * var(--u, 1px)); height: calc(10 * var(--u, 1px)); background: rgba(255, 255, 255, .16); transition: transform .2s ease, left 1.4s cubic-bezier(.34, 1.7, .5, 1), top 1.4s cubic-bezier(.34, 1.7, .5, 1); }
a[data-vr-pupil]:hover .vr-iris .h, a[data-vr-pupil]:focus-visible .vr-iris .h { transform: translate(-50%, -50%) rotate(-25deg) scale(1); transition: transform .6s cubic-bezier(.22, 1, .36, 1) .8s, left 1.4s cubic-bezier(.34, 1.7, .5, 1), top 1.4s cubic-bezier(.34, 1.7, .5, 1); }

/* Ekrani na dodir: bez mrlje (nema kursora koji bi je vodio) – na dodir se dugme odmah oboji cele površine */
@media (hover: none) {
	.vr-iris-clip { display: none; }
	a[data-vr-pupil] { transition: background-color .15s ease, color .15s ease; }
	a[data-vr-pupil]:active { background-color: var(--vr-iris-color, var(--vr-purple-dark)) !important; }
	a.button-accent[data-vr-pupil]:active, a.vr-btn--accent[data-vr-pupil]:active, a.vr-btn--white[data-vr-pupil]:active { color: var(--vr-yellow) !important; }
	a.button-outline[data-vr-pupil]:active, a.vr-btn--secondary[data-vr-pupil]:active { color: var(--vr-purple-dark) !important; }
	/* „lepljivi“ hover posle dodira ne sme da ostavi svetlu slovu na svetloj podlozi */
	a.button-accent[data-vr-pupil]:hover:not(:active) { color: var(--vr-ink); }
	a.button-outline[data-vr-pupil]:hover:not(:active) { color: #fff; }
	a.vr-btn--accent[data-vr-pupil]:hover:not(:active) { color: var(--vr-ink); }
	a.vr-btn--white[data-vr-pupil]:hover:not(:active) { color: var(--vr-purple-dark); }
	a.vr-btn--secondary[data-vr-pupil]:hover:not(:active) { color: #fff; }
}

/* ===== Dugme „Zakažite demo“: oči izviruju iznad, potpuno iza dugmeta ===== */
a[data-vr-peek] { position: relative; overflow: visible; }
.vr-peek { position: absolute; right: 27%; bottom: 100%; width: calc(92 * var(--u, 1px)); height: calc(54 * var(--u, 1px)); overflow: hidden; pointer-events: none; }
.vr-peek svg { position: absolute; left: 0; top: calc(100% + calc(2 * var(--u, 1px))); width: calc(92 * var(--u, 1px)); height: calc(69 * var(--u, 1px)); display: block; overflow: visible; transition: transform .8s cubic-bezier(.3, 1.35, .5, 1); }
a[data-vr-peek]:hover .vr-peek svg, a[data-vr-peek]:focus-visible .vr-peek svg { transform: translateY(calc(-54 * var(--u, 1px))); }

/* ===== Video popup ===== */
.vr-video { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: calc(24 * var(--u, 1px)); }
.vr-video[hidden] { display: none; }
.vr-video__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(63, 50, 115, .86);
	-webkit-backdrop-filter: blur(calc(14 * var(--u, 1px)));
	backdrop-filter: blur(calc(14 * var(--u, 1px)));
	cursor: pointer;
}
.vr-video__box {
	position: relative;
	width: min(calc(980 * var(--u, 1px)), 88vw, calc((100vh - calc(120 * var(--u, 1px))) * 16 / 9));
	aspect-ratio: 16 / 9;
	border-radius: calc(22 * var(--u, 1px));
	background: #1d1638;
	box-shadow: 0 calc(40 * var(--u, 1px)) calc(90 * var(--u, 1px)) calc(-30 * var(--u, 1px)) rgba(0, 0, 0, .6);
}
.vr-video__frame { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.vr-video__frame iframe, .vr-video__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.vr-video__close {
	position: absolute;
	top: calc(-18 * var(--u, 1px));
	right: calc(-18 * var(--u, 1px));
	z-index: 2;
	width: calc(48 * var(--u, 1px));
	height: calc(48 * var(--u, 1px));
	border-radius: 50%;
	border: 0;
	padding: 0;
	display: grid;
	place-items: center;
	background: var(--vr-yellow);
	color: var(--vr-purple-dark);
	cursor: pointer;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.vr-video__close:hover { transform: rotate(90deg) scale(1.08); background: var(--vr-yellow); color: var(--vr-purple-dark); }
.vr-video__close:focus-visible { outline: calc(3 * var(--u, 1px)) solid #fff; outline-offset: calc(3 * var(--u, 1px)); }
.vr-video__preview { height: 100%; display: grid; place-content: center; gap: calc(8 * var(--u, 1px)); text-align: center; color: #fff; font: 500 calc(18 * var(--u, 1px))/1.4 var(--vr-body); padding: calc(24 * var(--u, 1px)); }
.vr-video__preview b { font: 700 calc(40 * var(--u, 1px))/1 var(--vr-head); color: var(--vr-yellow); }

/* ===== Manje kretanja za one koji su to tražili u sistemu ===== */
@media (prefers-reduced-motion: reduce) {
	.vr-iris i, .vr-peek svg { transition: none !important; }
	.vr-quotes-nav button[aria-selected="true"]::after { animation: none; clip-path: none; }
}

/* ===== Boja označenog teksta ===== */
::selection { background-color: #D2AEE6; }

/* ===== Logo u navigaciji: ista slika kao maska, pa može da promeni boju na hover ===== */
[data-vr-logo] {
	background-color: var(--vr-purple-dark);
	-webkit-mask: url("../img/veerny-logo.webp") center / contain no-repeat;
	mask: url("../img/veerny-logo.webp") center / contain no-repeat;
	transition: background-color .2s ease;
}
a:hover > [data-vr-logo], a:focus-visible > [data-vr-logo] { background-color: var(--vr-blue-dark); }
[data-vr-logo] img { opacity: 0; } /* slika ostaje za pristupačnost i kao rezerva ako CSS ne stigne */

/* ===== Prelom teksta i pomoćne klase (iz Medenica teme) ===== */
:is(h1, h2, h3, h4, h5, h6), .balance { text-wrap: balance; }
p, blockquote, li, .pretty { text-wrap: pretty; }
.line-limit-2, .line-limit-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-limit-2 { -webkit-line-clamp: 2; }
.line-limit-3 { -webkit-line-clamp: 3; }
.visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.transition { transition: all .25s ease-in-out; }
/* Cela kartica je link – u kartici sme da bude samo JEDAN link */
.stretch-link { position: relative; }
.stretch-link a::after { content: ""; position: absolute; inset: 0; }
.stretch-link a:focus-visible::after { outline: 2px solid; }
.stretch-link a:is(:hover, :focus) { outline: none; }

/* =====================================================================================
   TABLET I TELEFON (≤1024px) – raspored je u blokovima (GB kartice Tablet/Mobile),
   ovde su samo jedinica razmere, meni i stvari koje zavise od skripte.
   ===================================================================================== */
@media (max-width: 1024px) {
	:root { --u: 1px; }

	/* Meni: logo + hamburger; otvoren meni razvija belu karticu nadole */
	[data-vr="header"].is-open [data-vr="navlink"] { display: block; }
	[data-vr="header"].is-open [data-vr="nav"] { box-shadow: 0 24px 48px -24px rgba(63, 50, 115, .45); padding-bottom: 12px; }
	[data-vr="header"].is-open [data-vr="navlink"]:first-of-type { margin-top: 6px; }
	/* tri crtice: srednja je pozadina dugmeta, gornja i donja su ::before/::after; otvoren meni = X */
	[data-vr="burger"] { background: linear-gradient(var(--vr-purple-dark), var(--vr-purple-dark)) center / 22px 3px no-repeat !important; transition: background-size .25s ease; }
	[data-vr="burger"]::before, [data-vr="burger"]::after { content: ""; position: absolute; left: 11px; width: 22px; height: 3px; border-radius: 2px; background: var(--vr-purple-dark); transition: transform .35s ease, top .35s ease; }
	[data-vr="burger"]::before { top: 13px; }
	[data-vr="burger"]::after { top: 28px; }
	[data-vr="burger"][aria-expanded="true"] { background-size: 0 3px !important; }
	[data-vr="burger"][aria-expanded="true"]::before { top: 20.5px; transform: rotate(45deg); }
	[data-vr="burger"][aria-expanded="true"]::after { top: 20.5px; transform: rotate(-45deg); }
	[data-vr="burger"]:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 2px; }

	/* Hero naslov: veličine prate širinu ekrana (glavni red uvek u jednom redu) */
	[data-vr="hero"] h1 .vr-l1 { font-size: max(6.9vw, 1.75rem) !important; }
	[data-vr="hero"] h1 .vr-l2 { font-size: 17.6vw !important; margin-top: .06em !important; }
	[data-vr="hero"] h1 .vr-l3 { font-size: 8.6vw !important; margin-top: -.05em !important; }

	/* Koraci: „4 laka koraka“ */
	section:not([data-vr="hero"]) h2 .vr-l2 { font-size: clamp(64px, 17vw, 161px) !important; margin-top: -.18em !important; }

	/* Redovi koji se povlače prstom – bez trake za skrolovanje */
	[data-vr="bubbles"], [data-vr="reveal-group"] { -ms-overflow-style: none; }
	[data-vr="bubbles"]::-webkit-scrollbar, [data-vr="reveal-group"]::-webkit-scrollbar { display: none; }

	/* Dugmad u telu stranice: sva iste širine (jedno ispod drugog izgledaju kao par), nikad do ivica ekrana */
	main :is(.button-primary, .button-secondary, .button-accent, .button-outline, .vr-btn) { width: min(320px, 100%); box-sizing: border-box; text-wrap: balance; }

	/* Bez/sa: oblačić se otvara dodirom */
	[data-vr="bubble"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

	/* Špil kartica bez kačenja: kartica se hvata prstom */
	[data-vr="deck"] [data-vr="card"] { touch-action: pan-y; }
}