/* javni_sajt/assets/sajt.css — javni sajt Pratioca (lokalna verzija).
   Čisto, mirno, čitljivo. Bez okvira, bez biblioteka, bez vanjskih fontova. */

:root {
  --tinta:        #1b2027;
  --tinta-blaga:  #4a5568;
  --pozadina:     #ffffff;
  --pozadina-2:   #f6f7f9;
  --linija:       #e3e6ea;
  --naglasak:     #1f5f8b;
  --naglasak-tam: #17475f;
  --sirina:       68ch;
  --omot:         1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:       #e8ecf1;
    --tinta-blaga: #a7b0bd;
    --pozadina:    #14181d;
    --pozadina-2:  #1b2027;
    --linija:      #2a313a;
    --naglasak:    #6fb3d9;
    --naglasak-tam:#9ccbe8;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.omot { width: 100%; max-width: var(--omot); margin: 0 auto; padding: 0 1.25rem; }

.preskoci {
  position: absolute; left: -9999px; top: 0;
  background: var(--naglasak); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.preskoci:focus { left: 0; }

/* ── zaglavlje ─────────────────────────────────────────────────────────── */
.zaglavlje { border-bottom: 1px solid var(--linija); background: var(--pozadina); }
.zaglavlje-red {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem;
}
.marka { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.marka-ime { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.marka-opis { color: var(--tinta-blaga); font-size: .875rem; }
.glavna-nav { display: flex; gap: 1.25rem; }
.glavna-nav a { color: var(--tinta-blaga); text-decoration: none; font-size: .95rem; }
.glavna-nav a:hover, .glavna-nav a:focus { color: var(--naglasak); text-decoration: underline; }

/* ── naslovna ──────────────────────────────────────────────────────────── */
.uvod { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--linija); }
.uvod h1 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.02em; }
.uvod p { max-width: var(--sirina); color: var(--tinta-blaga); font-size: 1.1rem; margin: 0 0 1rem; }

.odjeljak { padding: 2.5rem 0; }
.odjeljak h2 { font-size: 1.4rem; margin: 0 0 1.25rem; letter-spacing: -.01em; }

/* ── najava budućeg javnog PV-a ─────────────────────────────────────────────
   Isti jezik oblika kao `.razvoj` na članku (naglašena lijeva ivica, blaga
   pozadina), da se najava čita kao NAPOMENA sajta a ne kao još jedan članak.
   Namjerno bez dugmeta i bez ijednog elementa na koji se može kliknuti — PV
   još ne postoji, pa stranica ne smije ponuditi ništa što ne radi. */
.najava { padding-bottom: .5rem; }
.najava-okvir {
  max-width: var(--sirina);
  background: var(--pozadina-2);
  border: 1px solid var(--linija);
  border-left: 3px solid var(--naglasak);
  border-radius: 0 10px 10px 0;
  padding: 1.35rem 1.5rem 1.1rem;
}
.najava-oznaka {
  margin: 0 0 .45rem;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; font-weight: 700; color: var(--naglasak);
}
.najava-okvir h2 { font-size: 1.25rem; margin: 0 0 .85rem; letter-spacing: -.01em; line-height: 1.3; }
.najava-okvir p { margin: 0 0 .8rem; color: var(--tinta-blaga); line-height: 1.55; }
.najava-okvir p:last-child { margin-bottom: 0; }

/* ── lista članaka ─────────────────────────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kartica {
  border: 1px solid var(--linija); border-radius: 10px; background: var(--pozadina-2);
  padding: 1.25rem 1.35rem; transition: border-color .15s ease, transform .15s ease;
}
.kartica:hover { border-color: var(--naglasak); }
.kartica h3 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.35; }
.kartica h3 a { color: inherit; text-decoration: none; }
.kartica h3 a:hover, .kartica h3 a:focus { color: var(--naglasak); text-decoration: underline; }
.kartica p { margin: 0 0 .6rem; color: var(--tinta-blaga); font-size: .98rem; }
.meta { font-size: .85rem; color: var(--tinta-blaga); }

/* ── članak ────────────────────────────────────────────────────────────── */
.clanak { padding: 2.5rem 0 3rem; }
.clanak-glava { max-width: var(--sirina); margin-bottom: 2rem; }
.clanak-glava h1 { font-size: clamp(1.6rem, 3.8vw, 2.25rem); line-height: 1.25; margin: 0 0 .75rem; letter-spacing: -.02em; }
/* ── tijelo članka: kompaktnije, ali ne zbijeno ─────────────────────────────
   Razmak se smanjuje SAMO ovdje. Naslov i razmak od naslova do sadržaja
   ostaju netaknuti — mjereno da tamo izgleda dobro.
   Tijelo ima vlastiti `line-height` (1.55) jer globalnih 1.7 na dugom tekstu
   daje razvučen dojam. */
.clanak-tijelo { max-width: var(--sirina); line-height: 1.45; }
/* H2 se NE zbija zajedno s tijelom — razmak iznad naslova je ono što čitaocu
   pokazuje gdje počinje nova misao. Kad su odlomci gušći, taj razmak nosi
   još više posla, pa ostaje velik. */
.clanak-tijelo h2 { font-size: 1.3rem; margin: 34px 0 14px; letter-spacing: -.01em; line-height: 1.3; }
.clanak-tijelo p { margin: 0 0 8px; line-height: 1.45; }
.clanak-tijelo ul,
.clanak-tijelo ol { margin: 0 0 14px 22px; padding-left: 0; }
.clanak-tijelo li { margin-bottom: 4px; }
.clanak-tijelo strong { font-weight: 650; }

/* ── naglašeni kratki odlomci ───────────────────────────────────────────────
   Blago uvučeni prijelazi i ritmična nabrajanja. Spisak je u
   `_dijelovi/istaknuto.php` — bira se odlomak po odlomak, ne cijeli članak.
   ★ Namjerno DISKRETNO: ista veličina i debljina slova, bez pozadine, bez
     dodatnog vertikalnog razmaka. Uvlaka i tanka linija su jedini signal —
     nalog izričito traži da ovo ne postane blockquote. */
.clanak-tijelo p.istaknut {
  margin-left: 32px;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--naglasak) 38%, transparent);
}
/* Susjedni istaknuti odlomci čitaju se kao jedan blok, pa se linija
   ne prekida praznim procjepom između njih. */
.clanak-tijelo p.istaknut + p.istaknut { margin-top: -8px; padding-top: 8px; }
/* Prvi element u tijelu ne nosi gornji razmak — da se ne poveća odstojanje
   od slike/naslova koje je već dobro. */
.clanak-tijelo > *:first-child { margin-top: 0; }

/* ── potpis ispod naslova ───────────────────────────────────────────────────
   Autor je malo izraženiji; datum i mjesto mirniji. Na uskom ekranu se
   prelama u dva reda umjesto da se stisne. */
.clanak-autor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
  margin: .85rem 0 0; line-height: 1.45;
}
.autor-ime  { font-size: .97rem; font-weight: 600; color: var(--tinta); }
.autor-meta { font-size: .86rem; color: var(--tinta-blaga); }

/* ── „O autoru" ────────────────────────────────────────────────────────────
   Tanka linija iznad + umjeren razmak. Namjerno bez pozadine i bez okvira —
   da ostane bilješka, a ne reklamni baner. */
.o-autoru {
  max-width: var(--sirina);
  margin: 2.25rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--linija);
}
.o-autoru p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tinta-blaga); }
.o-autoru strong { color: var(--tinta); font-weight: 650; }
.clanak-tijelo p.aktivan-odlomak {
  background: color-mix(in srgb, var(--naglasak) 14%, transparent);
  outline: 2px solid color-mix(in srgb, var(--naglasak) 45%, transparent);
  border-radius: 6px;
  /* Padding bez pomjeranja teksta: negativna margina vraća liniju na mjesto. */
  padding: .35rem .6rem; margin-left: -.6rem; margin-right: -.6rem;
  scroll-margin-top: 5rem;
}
/* Kad čitač naglas označi UVUČEN odlomak, uvlaka mora ostati — inače odlomak
   pri čitanju skoči ulijevo pa se vrati, što izgleda kao kvar. Zato se ovdje
   ponavlja i uvlaka i lijeva linija; pravilo stoji POSLIJE `.aktivan-odlomak`
   jer bi ga inače ono nadjačalo (ista specifičnost, kasnije pravilo pobjeđuje). */
.clanak-tijelo p.istaknut.aktivan-odlomak {
  margin-left: calc(32px - .6rem);
  padding-left: calc(14px + .6rem);
  border-left: 2px solid color-mix(in srgb, var(--naglasak) 38%, transparent);
}

/* Hero ilustracija — ispod naslova (ne prekriva ga), bez deformacije.
   `aspect-ratio` + `height:auto` drže omjer i sprječavaju skok rasporeda
   dok se slika učitava (width/height su i u HTML-u). */
.clanak-slika {
  margin: 0 0 2rem;
  max-width: 900px;
}
.clanak-slika img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 991;
  border-radius: 10px;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.mjesto-za-tekst {
  border: 1px dashed var(--naglasak); border-radius: 10px;
  background: var(--pozadina-2); padding: 1.25rem 1.35rem; margin: 0 0 1.5rem;
}
.mjesto-oznaka {
  text-transform: uppercase; letter-spacing: .08em; font-size: .75rem;
  font-weight: 700; color: var(--naglasak); margin: 0 0 .75rem !important;
}
.mjesto-za-tekst p { margin: 0 0 .8rem; }
.mjesto-za-tekst p:last-child { margin-bottom: 0; }
.mjesto-uputa { font-size: .9rem; color: var(--tinta-blaga); }
.mjesto-za-tekst code {
  background: var(--pozadina); border: 1px solid var(--linija);
  border-radius: 4px; padding: .1rem .35rem; font-size: .88em;
}

.razvoj {
  max-width: var(--sirina); margin: 2.5rem 0 0; padding: 1rem 1.1rem;
  border-left: 3px solid var(--naglasak); background: var(--pozadina-2);
  border-radius: 0 8px 8px 0;
}
.razvoj p { margin: 0; color: var(--tinta-blaga); font-size: .95rem; }
/* Kad „O autoru" stoji iznad, dvije bilješke ne trebaju pun razmak između sebe. */
.o-autoru + .razvoj { margin-top: 1.25rem; }

/* ── „Pročitaj i ostale članke" ─────────────────────────────────────────────
   Diskretan blok: dio stranice, ne reklamni okvir. Bez pozadine i bez okvira,
   samo tanka gornja linija koja ga odvaja od kraja članka. */
.ostali-clanci {
  max-width: var(--sirina);
  margin: 2.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--linija);
}
.ostali-clanci h2 { font-size: 1.05rem; margin: 0 0 .9rem; letter-spacing: -.01em; }
.ostali-clanci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ostali-clanci a {
  color: var(--naglasak); text-decoration: none;
  font-weight: 600; font-size: 1rem; line-height: 1.35;
}
.ostali-clanci a:hover, .ostali-clanci a:focus { text-decoration: underline; }
.ostali-clanci .ostali-opis {
  display: block; margin-top: .2rem;
  color: var(--tinta-blaga); font-size: .92rem; line-height: 1.45;
}
/* Redoslijed na stranici je: članak → ostali članci → O autoru → napomena.
   Svaki od tih blokova nosi svoju gornju liniju, pa se razmaci između njih
   smanjuju da tri linije zaredom ne izgledaju kao tabela. */
.ostali-clanci + .o-autoru { margin-top: 1.5rem; }
.o-autoru + .razvoj { margin-top: 1.25rem; }

.povratak { max-width: var(--sirina); margin: 2rem 0 0; }
.povratak a { color: var(--naglasak); text-decoration: none; font-size: .95rem; }
.povratak a:hover, .povratak a:focus { text-decoration: underline; }

/* ── podnožje ──────────────────────────────────────────────────────────── */
.podnozje { border-top: 1px solid var(--linija); margin-top: 3rem; padding: 1.75rem 0; background: var(--pozadina-2); }
.podnozje .omot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.podnozje-red { margin: 0; color: var(--tinta-blaga); font-size: .92rem; }
.podnozje-nav { display: flex; gap: 1.1rem; }
.podnozje-nav a { color: var(--tinta-blaga); text-decoration: none; font-size: .92rem; }
.podnozje-nav a:hover, .podnozje-nav a:focus { color: var(--naglasak); text-decoration: underline; }

/* ── plutajući čitač: KOMPAKTAN MENI ────────────────────────────────────────
   Jedan red: naslov „Čitanje teksta", pet malih ikonica, izbor brzine.
   ★ `flex-wrap: nowrap` je namjeran — prelamanje bi vratilo visoku traku
     koju nalog upravo ukida. Zato su i sve mjere fiksne i male, pa red
     stane i na najužem ekranu koji podržavamo. */
.citac {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  justify-content: center;
  background: var(--pozadina); border: 1px solid var(--linija);
  border-radius: 999px; padding: .3rem .5rem .3rem .9rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  max-width: calc(100vw - 1.5rem);
}
.citac-naslov {
  font-size: .82rem; font-weight: 600; color: var(--tinta-blaga);
  white-space: nowrap; letter-spacing: -.01em;
}
.citac-dugmad { display: flex; align-items: center; gap: .15rem; }
.citac button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; color: var(--tinta);
  border-radius: 50%; cursor: pointer;
}
.citac button svg { display: block; }
.citac button:hover:not(:disabled) { background: var(--pozadina-2); color: var(--naglasak); }
.citac button:focus-visible { outline: 2px solid var(--naglasak); outline-offset: 1px; }
.citac button:disabled { opacity: .3; cursor: default; }
/* Pokreni/Nastavi je jedina naglašena radnja — ostale su pomoćne. */
.citac button.glavno { background: var(--naglasak); color: #fff; }
.citac button.glavno:hover:not(:disabled) { background: var(--naglasak-tam); color: #fff; }
.citac button.glavno:disabled { background: var(--naglasak); color: #fff; }
.citac-brzina {
  font: inherit; font-size: .8rem; line-height: 1;
  padding: .34rem 1.35rem .34rem .5rem; cursor: pointer;
  border: 1px solid var(--linija); border-radius: 999px;
  background: var(--pozadina-2); color: var(--tinta);
  /* Vlastita strelica: ugrađen SVG, da izbor izgleda isto u svim
     preglednicima i da stane u nisku traku. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .45rem center;
  background-size: 10px;
}
.citac-poruka { font-size: .85rem; color: var(--tinta-blaga); padding: 0 .4rem; }

/* Telefon: čitač postaje traka preko cijele širine, dugmad se prelamaju. */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  /* Na uskom ekranu 32 px uvlake pojede previše reda, pa se tekst počne
     prelamati na dvije linije tamo gdje je stao u jednu. Uvlaka se smanjuje,
     signal ostaje isti. */
  .clanak-tijelo p.istaknut { margin-left: 14px; padding-left: 11px; }
  .clanak-tijelo p.istaknut.aktivan-odlomak {
    margin-left: calc(14px - .6rem); padding-left: calc(11px + .6rem);
  }
  .zaglavlje-red { padding-top: .75rem; padding-bottom: .75rem; }
  .glavna-nav { gap: 1rem; }
  .uvod { padding: 2.25rem 0 1.75rem; }
  /* Telefon: traka ostaje NISKA i u jednom redu. Naslov se sklanja jer bi
     pojeo prostor koji trebaju dodirne mete; `aria-label` trake i dalje nosi
     istu informaciju za čitač ekrana, pa se ništa ne gubi. */
  .citac {
    left: 0; right: 0; transform: none; bottom: 0; max-width: 100%;
    border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; gap: .25rem;
  }
  .citac-naslov { display: none; }
  /* Dodirna meta ostaje 44px (preporuka za prst), a traka svejedno niska. */
  .citac button { width: 44px; height: 44px; }
  .citac button svg { width: 20px; height: 20px; }
  .citac-brzina { font-size: .82rem; padding: .45rem 1.35rem .45rem .55rem; }
  /* Da plutajuća traka ne pokrije kraj teksta. Traka je niža nego prije,
     pa je i rezerva manja — ali s viškom, ne u dlaku. */
  .podnozje { margin-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}