/* POT: GLOBALNO/vmesnik/slogi/mobilno.css | VERZIJA: v003 2026-10-22
 * NAMEN: EN kraj za popravke mobilnega prikaza (najdeni s preverjanjem 375 px širine).
 * Pravilo: nobena vsebina ne sme biti širša od zaslona; široke tabele/kode se drsijo znotraj sebe.
 * SPREMEMBA 2026-10-22 (Damir: »izboljšaj videz in odzivnost«): dodan
 *   - tekoča tipografija (clamp) namesto fiksnih rem vrednosti,
 *   - dotik cilji najmanj 44 px,
 *   - lepljiva glava kompaktna in brez okvirja,
 *   - vodoravno drsenje vedno onemogočeno,
 *   - varen prostor ob spodnjem robu (iPhone/Android gumb domov).
 * SPREMEMBA 2026-10-22 (v003, pregled mobilnega prikaza): dodan
 *   - dotik cilji 44 px tudi za pod-navigacijo, filtre in majhne gumbe,
 *   - vsa besedilna polja na telefonu 16 px (iOS ne poveča zaslona ob dotiku),
 *   - lepljivi pasovi (iskalnik modulov, orodna vrstica) se ne skrivajo pod
 *     lepljivo glavo in pod-navigacijo,
 *   - 100vw zamenjan z 100% (100vw vsebuje širino drsnega traku),
 *   - en stolpec pri izbirniku tem na zelo ozkih zaslonih.
 * ŽETONI: --tocka-dotik, --glava-visina, --rob-glava in --pod-nav-visina
 *   živijo v spremenljivke.css (en izvor resnice). Tukaj se uporabljajo
 *   sFallbackom, da ta datoteka deluje tudi sama. */

/* Mrežni stolpci: 1fr ima minimum = najširša vsebina → na telefonu je stolpec postal 663 px. */
.modul-dokument{grid-template-columns:minmax(0,1fr)}
@media(max-width:960px){.modul-branje{grid-template-columns:minmax(0,1fr)}}
.modul-dokument>*,.modul-branje>*{min-width:0}

/* Široke tabele in koda: drsenje znotraj, ne cela stran. */
table.markdown-tabela,.gradivo-dokument table,.javni-dokument table,.modul-dokument table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre,code{max-width:100%}
pre{overflow-x:auto}

/* Mediji nikoli širši od starša. */
main img,main video,main iframe,main svg,main canvas{max-width:100%;height:auto}
main iframe{height:revert}

/* Dolge besede/povezave (e-pošta, URL, latinski izrazi) se lomijo. */
main{overflow-wrap:anywhere}
main code{overflow-wrap:anywhere;white-space:normal}

/* ------------------------------------------------------------------
 * 2026-10-22: VODORAVNO DRSENJE — nikoli. html je že clip, a posamezni
 * elementi (glava, pod-navigacija, tabela) so lahko širši od zaslona.
 * 100% namesto 100vw: 100vw vsebuje širino drsnega traku in ga preseže.
 * ------------------------------------------------------------------ */
html,body{max-width:100%;overflow-x:hidden}
.glava,.pod-navigacija,.glavna,.noga,.preskok{max-width:100%}
/* Vsi otroci glavne vsebine dobijo dovoljenje, da se skrčijo. */
.glavna>*{min-width:0}

/* ------------------------------------------------------------------
 * 2026-10-22: DOTIK CILJI — najmanj 44 px (WCAG 2.5.5), ne le gumbi.
 * ------------------------------------------------------------------ */
@media(max-width:760px){
  .gumb,.ikona-gumb,.meni-gumb,.tema-cip,.noga-gumb,
  .filter,.modul-filter,.avatar-meniu-gumb,
  .avatar-meni-gumb,.namesti-gumb,.tema-cip,
  .razisci-bliznjice-seznam a,.cips span{min-height:var(--tocka-dotik,44px)}
  .razisci-bliznjice-seznam a,.cips span{display:inline-flex;align-items:center}
  .tema-cip{padding:.6rem .7rem}
}

/* ------------------------------------------------------------------
 * 2026-10-22: LEPLJIVA GLAVA — kompaktna, brez odvečnega okvirja.
 * Glava je lepljiva (position:sticky), zato mora imeti svojo višino v
 * --glava-visina, sicer je preskok na sidro napačen.
 * ------------------------------------------------------------------ */
@media(max-width:960px){
  :root{--glava-visina:56px;--rob-glava:76px;--pod-nav-visina:40px}
  .glava{gap:.5rem;padding:.5rem .8rem}
  .glava .znamka img{width:36px;height:36px}
  .pod-navigacija{padding:.4rem .8rem;gap:.25rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pod-navigacija::-webkit-scrollbar{display:none}
  .pod-navigacija-oznaka{display:none}
  .pod-navigacija a{flex:0 0 auto}
}
/* Pod-navigacija je pod lepljivo glavo: ob skoku na sidro mora biti vidna. */
@media(max-width:960px){
  .pod-navigacija{position:sticky;top:var(--glava-visina,56px);z-index:38}
}
/* v003: lepljivi pasovi pod glavo in pod-navigacijo se ne smejo skriti pod njima. */
@media(max-width:960px){
  .moduli-iskalnik{top:calc(var(--glava-visina,56px) + var(--pod-nav-visina,40px))}
  .moduli-orodna-vrstica{top:calc(var(--glava-visina,56px) + var(--pod-nav-visina,40px))}
}

/* ------------------------------------------------------------------
 * 2026-10-22: TIPOGRAFIJA — tekoča, brez skoka med širinami.
 * ------------------------------------------------------------------ */
@media(max-width:760px){
  .hero h1,.odsek h1,.dashboard-uvod h1,.otroski-hero h1,
  .napaka h1,.racun-uvod h1,.profil-hero h1{font-size:clamp(1.9rem,7.4vw,3rem);line-height:1.02;letter-spacing:-.03em}
  .odsek-glava h2,.modul-odsek h2,.knjiznica-odsek-glava h2,
  .meritve-glava h2{font-size:clamp(1.5rem,5.6vw,2.2rem)}
  .hero p,.dashboard-uvod p,.odsek-glava p{font-size:1rem}
  .kartica h3{font-size:1.02rem}
  .kartica{min-height:0;padding:1.15rem}
  .kartica-ikona{width:38px;font-size:1.15rem}
  .portal-kartica{min-height:0}
}

/* ------------------------------------------------------------------
 * 2026-10-22: VAREN PROSTOR — spodnji rob (gumb domov na telefonu) in
 * levi/desni rob (zasuk) za glavno vsebino, nogo in plošče.
 * ------------------------------------------------------------------ */
@supports(padding:max(0px)){
  .glavna{padding-left:max(1.1rem,env(safe-area-inset-left));padding-right:max(1.1rem,env(safe-area-inset-right))}
  .noga{padding-bottom:calc(2.4rem + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------
 * 2026-10-22: ODKRZANJE PRAZNINE — hero in odseki na telefonu.
 * ------------------------------------------------------------------ */
@media(max-width:760px){
  .hero{min-height:0;gap:2.2rem;padding:1rem 0 0}
  .hero-orbita{max-width:200px;margin-inline:auto}
  .odsek{padding:2.6rem 0}
  .odsek-glava{margin-bottom:1.2rem}
  .hero-statistika{gap:1.1rem;margin-top:1.5rem}
  .dejanja{gap:.6rem;margin-top:1.2rem}
  .dejanja .gumb{flex:1 1 100%}
  .mreza,.kartice-3,.kartice-4,.kartice-svetovi{gap:.75rem}
}

/* ------------------------------------------------------------------
 * 2026-10-22: POSEBNI VSEBinski VLOČKI na telefonu.
 * ------------------------------------------------------------------ */
@media(max-width:760px){
  .tema-izbira{grid-template-columns:1fr 1fr}
  .tema-cip{font-size:.78rem;padding:.5rem .45rem;text-align:center}
  .kpi-mreza{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hitre-poti{grid-template-columns:1fr}
  .nadzorna-zasnova{grid-template-columns:1fr}
  .avatar-meni{min-width:min(260px,calc(100vw - 2rem));max-height:min(70vh,520px);overflow-y:auto}
  .razisci-mreza{grid-template-columns:1fr}
  .ucinki-vsebina{max-height:min(52vh,420px);overflow-y:auto}
}

/* ------------------------------------------------------------------
 * 2026-10-22: POSEBNO — obrazci ne smejo skočiti ob fokusu, polja
 * ostanejo berljiva, brez prekrivanja s tipkovnico.
 * ------------------------------------------------------------------ */
@media(max-width:760px){
  .racun-obrazec input,.racun-obrazec select,.racun-obrazec textarea,
  .orodje-vrstica input,.orodje-polja input,.orodje-polja select,
  .zapis-passport-obrazec input,.zapis-passport-obrazec select,.zapis-passport-obrazec textarea,
  .passport-hitri-vnos input,.passport-hitri-vnos select,.passport-hitri-vnos textarea{
    font-size:16px!important;min-height:var(--tocka-dotik,44px)
  }
  .racun-obrazec label{font-size:.86rem}
}

/* ==================================================================
 * v003 (2026-10-22) — OSNOVNI MOBILNI POPRAVKI
 * ================================================================== */

/* 1) Besedilna polja: 16 px, da iOS ne poveča zaslona ob dotiku.
      Izključene so škatlice in gumbi (ne potrebujejo večje pisave). */
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]):not([type=file]),
  select,textarea{font-size:16px!important}
}

/* 2) Dotik cilji 44 px za majhne gumbe, ki so bili 32–36 px. */
@media(max-width:760px){
  .pod-navigacija a{min-height:var(--tocka-dotik,44px);display:inline-flex;align-items:center}
  .moduli-zemljevid-gumb{min-height:var(--tocka-dotik,44px)}
  .moduli-iskalnik input{min-height:var(--tocka-dotik,44px)}
  .moduli-orodna-vrstica input{min-height:var(--tocka-dotik,44px)}
  .prijava-cta{min-height:var(--tocka-dotik,44px);align-items:center}
  .noga-gumb,.deli-gumb,.ucinki-vrstica{min-height:var(--tocka-dotik,44px)}
  .avatar-meni-gumb{width:var(--tocka-dotik,44px);height:var(--tocka-dotik,44px)}
}

/* 3) Brez dvojnega povečevanja ob dotiku (300 ms zakasnitev) — tipkalnica. */
@media(max-width:760px){
  button,.gumb,.ikona-gumb,.meni-gumb,.tema-cip,.filter,.modul-filter{touch-action:manipulation}
}

/* 4) Zelo ozki zasloni (do 420 px): izbirnik tem v enem stolpcu,
      da imena tem ne gredo čez rob. */
@media(max-width:420px){
  .tema-izbira{grid-template-columns:1fr}
  .glava{gap:.35rem;padding:.5rem .6rem}
  .glava .znamka img{width:32px;height:32px}
}

/* 5) Lepljiva pod-navigacija ne sme prekriti vsebine ob skoku na sidro. */
@media(max-width:960px){
  html{scroll-padding-top:calc(var(--glava-visina,56px) + var(--pod-nav-visina,40px))}
}