/* ==========================================================================
   PRIJAVA I PRAVNI DOKUMENT

   Dve porodice u jednom listu, jer su obe jednostrane: `/prijava/` nosi jednu
   sekciju, a politika privatnosti i uslovi nose drugu. Dva lista bila bi dva
   preuzimanja za po jednu stranu.

   FORMA NIJE IZGLED. Sav posao prijave radi dodatak `procoding-jezgro`; ovaj
   list zna samo kako polja izgledaju. Zato se ovde ne pojavljuje nijedno ime
   polja kao selektor koji bi nešto uslovljavao osim izgleda: kad bi CSS
   odlučivao šta se šalje, promena stila obarala bi prijem.

   ŠTA JE OTIŠLO SA STARIM DIZAJNOM
   Sitni ukrasi oko kartica, topla podloga stuba, pečat na potvrdi i Kodijev
   oblak sa replikom. Nijedno nema klasu u ovom listu. Kodi je alat za biranje kursa,
   a ne lice sajta; na strani na kojoj roditelj ostavlja ime deteta i broj
   telefona njegov glas bi rekao da je ovo igra.
   ========================================================================== */

/* ==========================================================================
   RASPORED PRIJAVE
   ========================================================================== */

.prijava__zaglavlje { margin-bottom: 40px; }
.prijava__zaglavlje h1 { margin-bottom: 14px; }
.prijava__zaglavlje .uvod { margin-bottom: 0; }

/* Objasnjenje zvezdice (tacka B, 27.08.2026): sitno i mirno, kao pomocni
   red, ne kao deo obecanja iz naslova i uvoda. */
.prijava__legenda {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--tekst-blagi);
}

/* Žuta oznaka na delu naslova, isto pravilo kao na kontaktu: traka ispod
   slova, ne podloga iza njih. Slovo se ne boji, pa naslov ostaje 10,97:1. */
.prijava h1 em {
	font-style: normal;
	background: linear-gradient(to top, var(--istaknuto) 0 .28em, transparent .28em);
}

.prijava__mreza {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (max-width: 980px) {
	.prijava__mreza { grid-template-columns: 1fr; gap: 24px; }
}

/* Stub prati čitanje dok forma teče. Ispod 980 px prati ga sav sadržaj, pa
   lepljivost gubi smisao i skida se. */
.prijava__stub { position: sticky; top: 96px; display: grid; gap: 20px; }

@media (max-width: 980px) {
	.prijava__stub { position: static; }
}

.prijava__posle .kartica__telo { padding: 24px 24px 26px; }
.prijava__posle h2 { font-size: 1.25rem; margin-bottom: 14px; }

/* Brojevi koraka se ispisuju iz CSS-a, pa se u sadržaju ne kucaju: dodat korak
   ne traži da se ostali prekucaju. */
.koraci {
	list-style: none;
	counter-reset: korak;
	margin: 0 0 20px;
	padding: 0;
}

.koraci li {
	counter-increment: korak;
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	align-items: start;
	margin-bottom: 12px;
	font-size: 16px;
	color: var(--tekst-blagi);
}

.koraci li::before {
	content: counter(korak);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--podloga-mirna);
	color: var(--akcenat-tamni);
	font: 800 15px/1 var(--font-naslov);
}

[data-tema="tamna"] .koraci li::before { background: var(--podloga); }

.prijava__ili {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--tekst-blagi);
}

.prijava__telefon svg { width: 20px; height: 20px; }

/* Žuta beleška je jedina puna topla površina na strani. Slovo je mornarsko u
   obe teme, 7,15:1 na svetloj i 6,06:1 na tamnoj. */
.prijava__kada {
	margin: 0;
	max-width: 46ch;
	padding: 20px 22px;
	border-radius: var(--radius-kartica);
	background: var(--istaknuto);
	color: var(--podloga-tamna);
	font-size: 16px;
}

/* ==========================================================================
   POTVRDA
   ========================================================================== */

.prijava-hvala__list { max-width: 660px; margin-inline: auto; }
.prijava-hvala__list .kartica__telo { padding: 36px 32px 38px; }

/* POTVRDA SE CITA IZ SREDINE. Do 03.09.2026. je bila poravnata levo, kao i
   forma iznad nje, ali forma ima polja u stupcu pa joj leva ivica nesto znaci;
   potvrdi ostaju tri reda i sve tri su jednako kratke. */
.prijava-hvala__list .kartica__telo { align-items: center; text-align: center; }

/* Krug je `--podloga-mirna`, ista ona koju je nosila pilula pre njega, a
   kvacica je plava kao slovo. Nije zelena i nije crvena: te dve boje na formi
   znace ispravno i pogresno polje, a ovde nista nije provereno nego primljeno. */
.prijava-hvala__znak {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin-bottom: 20px;
	border-radius: 999px;
	background: var(--podloga-mirna);
	color: var(--akcenat-tamni);
}

.prijava-hvala__znak svg { width: 36px; height: 36px; }

/* Na tamnoj temi je kartica `--podloga-mirna`, pa bi krug u istoj boji nestao
   u njoj. `--podloga` je tamnija za tacno jedan stepen, koliko treba da se
   krug vidi kao krug. */
[data-tema="tamna"] .prijava-hvala__znak {
	background: var(--podloga);
	color: var(--akcenat-tamni);
}

.prijava-hvala h1,
.prijava-hvala h2 { margin-bottom: 14px; }

/* Fokus posle preusmerenja pada na naslov, pa mu treba vidljiv prsten; bez
   njega naslov dobije sistemski obris koji na nekim temama ne postoji. */
.prijava-hvala h1:focus-visible,
.prijava-hvala h2:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 4px;
}

.prijava-hvala__sitno {
	margin: 0;
	font-size: 15px;
	color: var(--tekst-blagi);
}

.prijava-hvala__sitno a { color: var(--tekst); font-weight: 600; }

/* OVDE JE STAJAO `.prijava-hvala__veze`, red sa dva dugmeta ispod potvrde.
   Pao je 03.09.2026. zajedno sa dugmadima; vidi `sekcije/prijava.php`. */

/* ==========================================================================
   FORMA

   Ista pravila stoje i u `kontakt.css`. To NIJE previd nego posledica podele
   listova: `prijava.css` se učitava samo na prijavi i pravnim stranama,
   `kontakt.css` samo na kontaktu, i nikad zajedno. Mesto na kome bi stajala
   jednom je `deljeno.css`, a on 26.08.2026. ima drugog vlasnika.
   ========================================================================== */

/* Kartice prijave nisu veze, pa ne smeju da se podižu pod mišem: pomeraj od
   2 px na nečemu što se ne klikne čita se kao kvar. Klasa je dvostruka da bi
   bila jača od `.kartica:hover` u `osnova.css`. `.kartica.forma` je u
   `deljeno.css`, jer forma stoji i na kontaktu. */
@media (hover: hover) {
	.kartica.prijava__posle:hover,
	.kartica.prijava-hvala__list:hover {
		transform: none;
		border-color: var(--crta);
	}
}

/* Padajući spisak, tačka C od 27.08.2026.

   RAZLOG PROMENE. Do sada je ovde pisalo da se sistemska strelica zadržava,
   jer bi `appearance: none` značio gubitak strelice u režimu visokog
   kontrasta. To je bio tačan razlog za STARO stanje (strelica prilepljena uz
   ivicu, van naše boje i poluprečnika), ali je i sam kvar koji je trebalo
   rešiti: Milica i Pavle vide select koji ne liči na ostatak sajta. Popravka
   nije `appearance: none` bez ičega, nego taj korak PLUS `forced-colors`,
   media upit koji postoji baš za ovaj slučaj: u režimu visokog kontrasta
   vraća sistemski izgled i strelicu, van njega crta naša.

      SPISAK KOJI SE CRTA SAM, 01.09.2026. Do danas je ovde pisalo da ga ne
   pravimo: skripta (`obnoviSpisak()`) čita i piše `select.options` direktno,
   pa bi sopstveni spisak bio druga struktura koju ta funkcija mora da
   sinhronizuje. Milica 31.08.2026: „drop down napraviti da bude u custom
   dizajnu sajta, ne default." Otvoren sistemski spisak je jedino mesto na
   sajtu koje crta operativni sistem, a stoji na strani sa koje se stiže
   prijava. Sinhronizacija je ispala jedan poziv na kraju te iste funkcije,
   pa je cena manja nego što je 27.08. procenjena. Stilovi `select`-a ispod
   ostaju: bez skripte se i dalje vidi on. */
.polje__izbor {
	appearance: none;
	padding-right: 44px;
}

/* Strelica je nacrtana na OMOTAČU, ne na `select`-u: visina samog `select`-a
   zna i za padding i za red teksta iznad njega u nekim pregledačima, pa
   `top: 50%` na samom elementu ume da padne koji piksel niže od stvarne
   sredine kutije. Omotač je čist blok tačno visine polja. */
.polje__izbor-omot { position: relative; }

.polje__izbor-omot::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tekst-blagi);
	border-bottom: 2px solid var(--tekst-blagi);
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
}

/* Rezim visokog kontrasta: nasa strelica je linija u boji koju taj rezim ne
   crta, pa bi polje ostalo bez ijedne. Umesto toga se select vraca na
   sistemski izgled, koji taj rezim vec zna da nacrta. */
@media (forced-colors: active) {
	.polje__izbor { appearance: auto; padding-right: 16px; }
	.polje__izbor-omot::after { display: none; }
}

/* Zaključan spisak nije `disabled` spisak: isključeno polje ispada iz
   tabulatora, pa čitač ekrana ne pročita ni rečenicu šta prvo treba uraditi.
   Umesto toga spisak ostaje pravi spisak, samo mu je jedina stavka ta
   rečenica, a boja slova kaže da još nema šta da se bira. */
.polje__izbor[data-stanje="zakljucan"] { color: var(--tekst-blagi); }

/* ---------- Padajući spisak u izgledu sajta ----------
   Dugme + `role="listbox"`, sve iz `prijava.php`. Meri se prema polju iznad
   njega: ista visina (52 px), ista ivica, isti poluprečnik, jer u istoj
   koloni stoje jedno ispod drugog i svaka razlika se vidi kao greška.

   Sam `select` ostaje u dokumentu, skriven (`hidden`), i dalje se šalje. */
.izbornik { position: relative; }

/* Omotac vise ne crta strelicu kad je izbornik preuzeo posao: `select` je
   skriven, pa bi njegova strelica lebdela iznad naseg dugmeta. */
.polje__izbor-omot[data-izbornik="da"]::after { display: none; }

.izbornik__dugme {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 13px 44px 13px 16px;
	border: 1px solid var(--crta-jaka);
	border-radius: var(--radius-polje);
	background: var(--podloga-mirna);
	color: var(--tekst);
	font: 400 17px/1.4 var(--font-tekst);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease;
}

/* Strelica je na dugmetu, ne na omotaču kao kod `select`-a: dugme je čist
   blok tačno visine polja, pa `top: 50%` ovde pogađa sredinu. */
.izbornik__dugme::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tekst-blagi);
	border-bottom: 2px solid var(--tekst-blagi);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
	pointer-events: none;
}

.izbornik[data-otvoren="da"] .izbornik__dugme::after {
	transform: translateY(-30%) rotate(225deg);
}

/* Natpis se PRELAMA, ne seče. Zaključano stanje nosi celu rečenicu („Prvo
   izaberite za koga je kurs"), a ona na 320 px traži 222 px u polju od 168.
   Sa tri tačke bi se videlo „Prvo izaberite za...", dakle uputstvo bez onoga
   što treba uraditi. Dugme zato sme da bude visoko dva reda. */
.izbornik__natpis {
	display: block;
	min-width: 0;
}

/* Zaključano stanje govori sama prva stavka, boja slova samo prati. Isto
   pravilo koje `select` već ima. */
.izbornik[data-stanje="zakljucan"] .izbornik__natpis { color: var(--tekst-blagi); }

.izbornik__dugme:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
	border-color: var(--akcenat-tamni);
}

@media (hover: hover) {
	.izbornik__dugme:hover { border-color: var(--akcenat-tamni); }
}

.polje--greska .izbornik__dugme { border-color: var(--greska); }

/* Spisak stoji IZNAD ostatka forme, pa mu treba i podloga i sloj: kroz
   providnu bi se čitala dva teksta odjednom. Senke na ovom sajtu nema, granicu
   crta ivica. */
.izbornik__spisak {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 288px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--crta-jaka);
	border-radius: var(--radius-polje);
	background: var(--podloga);
}

.izbornik__spisak[hidden] { display: none; }

.izbornik__stavka {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
}

/* Istaknuta stavka je ona na kojoj stoji tastatura, izabrana je ona koja je
   već upisana. Dve različite stvari, pa se i vide različito: podloga za prvu,
   debljina slova za drugu. */
.izbornik__stavka[data-istaknuta="da"] { background: var(--podloga-mirna); }
.izbornik__stavka[aria-selected="true"] { font-weight: 700; }

@media (hover: hover) {
	.izbornik__stavka:hover { background: var(--podloga-mirna); }
}

/* Režim visokog kontrasta briše naše podloge, pa istaknuta stavka ostaje bez
   ijednog znaka da je istaknuta. Umesto podloge je tada obris, koji taj režim
   crta. */
@media (forced-colors: active) {
	.izbornik__stavka[data-istaknuta="da"] {
		outline: 2px solid CanvasText;
		outline-offset: -2px;
	}
}

/* ---------- Obavezna polja (tačka B) ----------
   Zvezdica je ukras, ne poruka: `aria-hidden` je na njoj u markupu, a
   `required` na samom polju je ono što čitač ekrana stvarno najavi. Boja je
   akcenat kojim slovo sme da bude slovo (`--akcenat-tamni`), ne crvena:
   crvena na ovoj formi znači grešku, a obavezno polje samo po sebi nije. */
.polje__zvezda {
	color: var(--akcenat-tamni);
	font-weight: 700;
}

/* ---------- Polje se razlikuje od podloge (tačka C) ----------
   Kartica forme je uvek bela (`.kartica` u `osnova.css`), pa je polje iste
   boje bilo nevidljivo osim po liniji ivice od 1px. `--podloga-mirna` je već
   token za "korak tamnije od bele" (isti koji nosi mirna sekcija), ovde
   samo menja ulogu: pokazuje gde se piše. Tamna tema već razlikuje polje od
   kartice suprotnim smerom (`deljeno.css`), pa se ne dira. */
.polje__unos,
.polje__tekst,
.polje__izbor {
	background: var(--podloga-mirna);
}

/* ---------- Za koga je kurs ---------- */

.izbori {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 640px) {
	.izbori { grid-template-columns: 1fr; }
}

.izbor {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 14px;
	border: 2px solid var(--crta-jaka);
	border-radius: var(--radius-polje);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

/* Samo dugme radija ostaje vidljivo, ne skriva se iza kartice: sakriveno
   dugme traži da kartica sama nosi i stanje i fokus, a to je tri pravila više
   od kojih svako ume da otkaže u režimu visokog kontrasta. */
.izbor input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--akcenat-tamni);
}

.izbor input:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 3px;
}

.izbor:has(input:checked) {
	border-color: var(--akcenat-tamni);
	background: var(--podloga-mirna);
}

[data-tema="tamna"] .izbor:has(input:checked) { background: var(--podloga); }

@media (hover: hover) {
	.izbor:hover { border-color: var(--tekst-blagi); }
}

.polje--izbori .polje__greska { margin-top: 8px; }

/* ---------- Brojač razreda ----------

   OTVARANJE JE CSS, NE SKRIPTA (ADR-0016), pa polje radi i kad JavaScripta
   nema: `:has` čita označeno dugme iznad njega.

   VISINA SE MENJA PRELAZOM MREŽE, ne `display`-om. `display: none` je bio skok:
   polje i sve ispod njega pomerilo bi se 114 px u istom kadru. Takav prelaz
   traži jedan jedini red mreže, pa je sav sadržaj u omotaču `polje__telo`.

   `visibility` sklopljeno polje sklanja i sa tabulatora i iz čitača ekrana;
   bez nje bi ostalo dohvatljivo, a niko ga ne bi video.
   -------------------------------------------------------------------------- */
.polje--razred {
	display: grid;
	grid-template-rows: 0fr;
	margin-bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows .3s ease,
		margin-bottom .3s ease,
		opacity .18s ease,
		visibility .3s;
}

.polje--razred .polje__telo {
	overflow: hidden;
	min-height: 0;
}

.forma:has(input[name="za-koga"][value="osnovna"]:checked) .polje--razred {
	grid-template-rows: 1fr;
	margin-bottom: 22px;
	opacity: 1;
	visibility: visible;
}

/* Ko je tražio manje pokreta, dobija stari skok: prelaz bez trajanja je i
   dalje tačna promena stanja, samo bez animacije. */
@media (prefers-reduced-motion: reduce) {
	.polje--razred { transition: none; }
}

/* Spojeni u jednu celinu, tacka C od 27.08.2026: bez razmaka izmedju delova,
   kao jedno dugme sa tri dela. Ivica koja dodiruje polje se ne crta na
   dugmadima (`border-right`/`border-left: 0`), pa na svakom sastavu ostaje
   tacno JEDNA linija, ne dve zbijene. */
.brojac {
	display: flex;
	align-items: stretch;
	max-width: 220px;
}

.brojac__dugme {
	flex: 0 0 auto;
	width: 52px;
	min-height: 52px;
	border: 1px solid var(--crta-jaka);
	background: var(--podloga-mirna);
	color: var(--tekst);
	font: 700 22px/1 var(--font-tekst);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.brojac__dugme:first-child { border-radius: var(--radius-polje) 0 0 var(--radius-polje); border-right: 0; }
.brojac__dugme:last-child { border-radius: 0 var(--radius-polje) var(--radius-polje) 0; border-left: 0; }

@media (hover: hover) {
	.brojac__dugme:hover { border-color: var(--tekst); }
}

.brojac__dugme:focus-visible {
	outline: 3px solid var(--akcenat);
	/* Prsten ide UNUTRA: omotač `polje__telo` seče sve što iz njega izlazi, pa
	   bi prsten oko kutije bio odsečen tačno na ivici. */
	outline-offset: -3px;
}

.brojac__polje {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0;
	text-align: center;
	font-weight: 700;
}

/* Podrazumevani brojac se gasi, tacka C: nasa dugmad vec rade taj posao, pa
   bi dve strelice jedna pored druge (nasa i pregledaceva) govorile isto
   dvaput, i pregledaceva nije spojena sa poljem kao ostatak kontrole. */
.brojac__polje {
	-moz-appearance: textfield;
	appearance: textfield;
}

.brojac__polje::-webkit-outer-spin-button,
.brojac__polje::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.brojac__polje:focus-visible { outline-offset: -3px; }

/* ---------- Dno forme ---------- */

.forma__dno { margin-top: 4px; }

/* Ispod 640 px dugme uzima celu širinu, jer je tada palac jedini pokazivač.
   Iznad toga ostaje široko koliko i natpis, kao i na kontaktu: isti element ne
   sme da izgleda različito na dve strane istog sajta. */
@media (max-width: 640px) {
	.forma__slanje { display: flex; width: 100%; }
}

/* Rečenica o obradi i veza na politiku su ono što na prijavi zamenjuje
   obaveznu kvačicu (ADR-0011), pa nisu ukras i ne smeju da padnu ispod poda
   od 14 px. */
.forma__gdpr {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--crta);
	font-size: 14px;
	line-height: 1.55;
	color: var(--tekst-blagi);
}

/* Veza je plava i podvucena, ne crna i mirna. Do 30.08.2026. je stajala u
   boji teksta, pa se od okolne recenice razlikovala samo debljinom slova i
   nije se citala kao veza. `--akcenat-tamni` je jedina plava koja sme da bude
   slovo: 5,30:1 na beloj, 4,88:1 na mirnoj podlozi. */
/* `#sadrzaj` zbog Elementorovog reseta veza; v. `docs/NAUCENO.md`. */
#sadrzaj .forma__gdpr a {
	color: var(--akcenat-tamni);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness .15s ease;
}

@media (hover: hover) {
	/* Hover menja samo debljinu podvlake. `--akcenat` je na beloj 3,22:1, pa
	   bi veza pri prelazu misem pala ispod praga za sitno slovo. */
	#sadrzaj .forma__gdpr a:hover { text-decoration-thickness: 2px; }
}

/* ==========================================================================
   PRAVNI DOKUMENT

   Jedina strana koju neko čita od početka do kraja, dvadesetak minuta. Zato
   nema kartice: obris oko trideset ekrana teksta ne odvaja ništa, samo prati
   čitaoca niz stranu kao dve linije koje nikad ne prestaju.
   ========================================================================== */

.dokument__traka { max-width: 820px; }

.dokument__firma {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tekst-blagi);
}

.dokument h1 { margin-bottom: 20px; }

/* Naša rečenica, ne deo pravnog teksta. Crta sa strane nosi tu razliku, pa se
   vidi bez čitanja. */
.dokument__napomena {
	margin: 0 0 24px;
	max-width: var(--mera);
	padding: 12px 0 12px 18px;
	border-left: 4px solid var(--istaknuto);
	font-size: 16px;
	color: var(--tekst-blagi);
}

.dokument__pdf { margin: 0 0 32px; max-width: none; }
.dokument__pdf svg { width: 20px; height: 20px; }

.dokument__sadrzaj {
	margin-bottom: 40px;
	padding: 24px 26px;
	border: 1px solid var(--crta);
	border-radius: var(--radius-kartica);
	background: var(--podloga-mirna);
}

[data-tema="tamna"] .dokument__sadrzaj { background: var(--podloga-mirna); }

.dokument__sadrzaj h2 { font-size: 1.0625rem; margin-bottom: 12px; }

/* MREZA, NE `columns`. Sa `columns: 2` je Chrome presekao osmu stavku po
   sredini: tekst je ostao u levom stupcu, a broj prešao u desni, uprkos
   `break-inside: avoid`. Mreža deli stavke, ne redove, pa se to ne može desiti.

   Broj se ispisuje iz brojača, ne iz `::marker`: element mreže gubi marker u
   delu pregledača, a spisak bez brojeva ne poklapa se sa naslovima u tekstu,
   koji brojeve nose. */
.dokument__spisak {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 36px;
	counter-reset: odeljak;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

@media (max-width: 640px) {
	.dokument__spisak { grid-template-columns: 1fr; }
}

.dokument__spisak li { counter-increment: odeljak; margin: 0; }

/* Broj je svoj stubac, ne slog ispred teksta. Razmak iza tacke u `content` je
   HTML razmak i skuplja se u nista, pa je 02.09.2026. u spisku pisalo
   „1.O nama"; a naslov od dva reda je broj ostavljao da visi sam u prvom.
   Ovako broj drzi svoju sirinu i drugi red se poravna pod prvim. */
.dokument__spisak a::before {
	content: counter(odeljak) ".";
	flex: 0 0 auto;
	color: var(--tekst-blagi);
}

/* `min-width` je dodirna meta, ne razmak. Kapija je na 320, 393 i 768 px našla
   metu 43x44: naslov „UVOD" je kratak, pa je veza bila uža od praga od 44 px
   iako je visoku meru već dobila iz `osnova.css`. Prag drži širinu, a ne
   vodoravna ispuna, koja bi vezu gurnula van stupca. */
/* Resetka od dva stupca, ne `inline-flex`: naslov od dva reda je u flex redu
   spustao broj na poslednji red, pa je „9." visilo ispod „7.". U resetki broj
   ostaje u prvom redu, a drugi red naslova se poravna pod prvim. */
.dokument__spisak a {
	display: grid;
	grid-template-columns: auto 1fr;
	/* `start`, ne `baseline`: naslov od dva reda je anoniman element resetke,
	   pa mu pregledac ne racuna prvu osnovnu liniju kao broju, i „9." je
	   ostajalo izmedju dva reda. Oba su isti slog, pa poravnanje po vrhu daje
	   isti rezultat kao poravnanje po prvoj liniji. */
	align-items: start;
	/* Sadrzaj u sredini visoke mete, a broj i dalje uz prvi red naslova:
	   `align-content` pomera CEO red resetke, `align-items` poravnava dva polja
	   unutar njega. */
	align-content: center;
	gap: .4em;
	min-width: 44px;
	/* VISINA METE STOJI OVDE od 02.09.2026. Do tada je dolazila iz
	   `#sadrzaj :is(p, li) > a:only-child:not([class])` u `osnova.css`, dakle
	   iz pravila koje vazi samo za vezu BEZ klase. Kad je veza dobila klasu
	   `dokument__veza` (da bi broj prestao da bude centriran tudjim pravilom),
	   ta visina je otisla sa njom i meta je pala na 325x34. Merilo je javilo
	   101 nalaz na `/politika-zastite-privatnosti/`. */
	min-height: 44px;
	padding-block: 4px;
	color: var(--tekst);
}

@media (hover: hover) {
	.dokument__spisak a:hover { color: var(--akcenat-tamni); }
}

/* Telo dokumenta. Dužinu reda drži `--mera`; naslovi je namerno probijaju, jer
   se po njima traži mesto u tekstu, a ne čitaju u nizu.

   BROJAC ODELJAKA, tačka E od 27.08.2026. Isti brojač kao u `.dokument__spisak`
   gore (druga brojačka celina, pa se ne mešaju), ali ovde ide na sam naslov u
   telu: ko skroluje kroz dokument dvadesetak minuta vidi isti broj koji je
   video u spisku na vrhu, umesto da ga tamo pamti napamet. */
.dokument__telo {
	font-size: 17px;
	counter-reset: odeljak;
}

.dokument__telo p { max-width: var(--mera); }

.dokument__telo h2 {
	margin-top: 44px;
	margin-bottom: 14px;
	font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
	counter-increment: odeljak;
	/* Sidro se skače iz spiska na vrhu, a zaglavlje je lepljivo, pa bi naslov
	   završio ispod njega. */
	scroll-margin-top: var(--sidro-odmak);
}

.dokument__telo h2::before {
	/* Tvrd razmak, ne obican: razmak na kraju `content`-a se skuplja u nista,
	   pa je naslov glasio „1.O nama". */
	content: counter(odeljak) ". ";
	color: var(--tekst-blagi);
}

.dokument__telo h3 { margin-top: 28px; }

.dokument__telo ul,
.dokument__telo ol {
	max-width: var(--mera);
	padding-left: 1.3em;
	margin-bottom: 1em;
}

/* Spisak koji izgleda kao spisak, tačka E. Tekst se ne ispravlja
   (`sekcije/dokument.php`), a svaka stavka u ovom dokumentu je već pisana sa
   sopstvenim obeležjem u samom tekstu („a)", „b)", „•", „-"), zavisno od
   odeljka. Podrazumevana tačka pregledača je zato UVEK udvostručenje
   („• a) ..."), nikad jedino obeležje; gasi se samo za `ul`, jer eventualan
   budući `ol` bez sopstvenog slova treba svoj redni broj. */
.dokument__telo ul { list-style: none; }

.dokument__telo li { margin-bottom: 8px; }
.dokument__telo a { color: var(--akcenat-tamni); }

[data-tema="tamna"] .dokument__telo a { color: var(--akcenat-tamni); }

/* ==========================================================================
   TAMNA TEMA

   Sve ostalo ide kroz tokene. Ostaju slučajevi u kojima token sam ne zna
   dovoljno: polje unutar kartice mora da bude tamnije OD kartice, a kartica je
   na tamnoj temi već `--podloga-mirna`.
   ========================================================================== */

/* Samo dugme brojača: ostala tri selektora su ista i na kontaktu, pa stoje u
   `deljeno.css`. Brojač razreda postoji jedino ovde. */
[data-tema="tamna"] .brojac__dugme {
	background: var(--podloga);
	border-color: var(--crta-jaka);
}

/* BROJ TELEFONA BEZ OKVIRA, 01.09.2026. Milica: „obrisati border oko broja
   telefona". Do tada je nosio `.dugme--sporedno`, dakle obris od 2 px, pa je
   izgledao kao drugo dugme uz „Pošaljite prijavu" i takmičio se sa njim.
   Sada je veza koja se čita kao broj: krupnija, podvučena tek pod mišem. */
.prijava__telefon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 700 1.15rem/1 var(--font-naslov);
	color: var(--akcenat-tamni);
	text-decoration: none;
}
@media (hover: hover) {
	.prijava__telefon:hover { text-decoration: underline; }
}