/* POT: GLOBALNO/vmesnik/slogi/postavitve.css | VERZIJA: v001 15.10.2026
 * NAMEN: več postavitev prikaza + prijaznost (Damir: »več postavitev«, »stran ljudem prijazna«).
 * Izbira: Pomoč (Alt+H / gumb ?) → »Prikaz strani«; shrani se v brskalnik (vodic.js → atributi na <html>).
 *   data-postavitev = kompaktna | berilna | velika     --vodic-pisava = 0.9 … 1.4
 *   data-kontrast (visok kontrast)                      data-mirno (brez animacij) */

html{font-size:calc(100% * var(--vodic-pisava, 1))}

/* ---------- KOMPAKTNA: več vsebine na zaslonu ---------- */
html[data-postavitev="kompaktna"] .odsek,html[data-postavitev="kompaktna"] .hero{padding-top:1.2rem;padding-bottom:1.2rem}
html[data-postavitev="kompaktna"] .mreza{gap:.6rem}
html[data-postavitev="kompaktna"] .kartica{padding:.85rem}
html[data-postavitev="kompaktna"] .kartica p{margin:.3rem 0}
html[data-postavitev="kompaktna"] h1{font-size:clamp(1.6rem,4vw,2.4rem)}
html[data-postavitev="kompaktna"] .hero-orbita{transform:scale(.7)}

/* ---------- BERILNA: en stolpec, mirno, za branje ---------- */
html[data-postavitev="berilna"] main.glavna{max-width:780px;margin-inline:auto}
html[data-postavitev="berilna"] main.glavna .mreza,html[data-postavitev="berilna"] main.glavna [class*="kartice-"]{grid-template-columns:minmax(0,1fr)!important}
html[data-postavitev="berilna"] main.glavna p,html[data-postavitev="berilna"] main.glavna li{line-height:1.8;font-size:1.06em}
html[data-postavitev="berilna"] .hero-orbita,html[data-postavitev="berilna"] .tunel-globina{display:none}
html[data-postavitev="berilna"] .modul-branje{grid-template-columns:minmax(0,1fr)}
html[data-postavitev="berilna"] .modul-kazalo{position:static;max-height:none}

/* ---------- VELIKA: večji gumbi in črke (otroci, starejši, dotik) ---------- */
html[data-postavitev="velika"]{font-size:calc(118% * var(--vodic-pisava, 1))}
html[data-postavitev="velika"] .gumb,html[data-postavitev="velika"] button,html[data-postavitev="velika"] select,html[data-postavitev="velika"] input{min-height:3rem;font-size:1.05rem}
html[data-postavitev="velika"] .gumb{padding:.8rem 1.4rem}
html[data-postavitev="velika"] main a:not(.gumb):not(.kartica){text-decoration:underline;text-underline-offset:.2em}
html[data-postavitev="velika"] .kartica{padding:1.4rem}
html[data-postavitev="velika"] .vodic-gumb{width:3.4rem;height:3.4rem;font-size:1.5rem}

/* ---------- VISOK KONTRAST ---------- */
html[data-kontrast]{--besedilo:#000;--muted:#222;--rob:rgba(0,0,0,.6);--povrsina:#fff;--povrsina2:#fff;--ozadje:#fff;--ozadje2:#f2f2f2;--zlata:#6b3c00}
html[data-kontrast] body{background:#fff!important;color:#000}
html[data-kontrast] a{color:#0033aa}
html[data-kontrast] .gumb.primarni{background:#000!important;color:#fff!important}
html[data-kontrast] :focus-visible{outline:3px solid #0033aa!important;outline-offset:2px}
@media (prefers-color-scheme:dark){html[data-kontrast]{--besedilo:#fff;--muted:#eee;--rob:rgba(255,255,255,.7);--povrsina:#000;--povrsina2:#000;--ozadje:#000;--ozadje2:#111;--zlata:#ffd24d}
 html[data-kontrast] body{background:#000!important;color:#fff}html[data-kontrast] a{color:#8cc8ff}html[data-kontrast] .gumb.primarni{background:#fff!important;color:#000!important}}

/* ---------- BREZ ANIMACIJ ---------- */
html[data-mirno] *,html[data-mirno] *::before,html[data-mirno] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* ---------- PRIJAZNOST: splošno ---------- */
:focus-visible{outline:2px solid var(--zlata);outline-offset:2px}
.vodic-prikaz label{display:grid;gap:.25rem;margin:.4rem 0}
.vodic-prikaz .vodic-kljukica{display:flex;gap:.5rem;align-items:center}
.vodic-prikaz select,.vodic-prikaz input[type=range]{width:100%}
/* Tunel: druga postavitev »Hitri pregled« (vsi koraki na eni strani) */
.tunel.tunel-pregled{align-items:start;display:block;padding-top:5rem}
.tunel.tunel-pregled .tunel-korak{display:block!important;margin:0 auto 2.5rem;padding:1.4rem;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(10,8,30,.55);animation:none}
.tunel.tunel-pregled .tunel-korak h1{font-size:clamp(1.4rem,3.5vw,2rem)}
.tunel.tunel-pregled [data-tunel-naprej],.tunel.tunel-pregled [data-tunel-nazaj],.tunel.tunel-pregled .tunel-namig{display:none}
.tunel-postavitev{background:transparent;color:#b9b0d8;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.35rem .8rem;cursor:pointer;font-size:.85rem}