/* ===========================================================================
   Lista za mlade — slog spletne strani.

   Barve so IZMERJENE iz gradiva 2022 (dizajn/2022), ne izbrane na oko:
   limetna #8cc641 in svetla #b8d98b (znak), rdeča #c3272f (»za mlade«),
   temno zelena #397638 (pasovi na plakatu in letaku), grafitna #4b4c4c
   (puščica in besedilo).

   ⛔ Limetna NI barva za besedilo. Kontrast na belem je 2,04 : 1 in na temno
   zeleni 2,69 : 1 — oboje daleč pod 4,5 : 1, ki jih zahteva WCAG AA. Na
   plakatu je to v redu, ker so črke velike in tiskane; na zaslonu ni.
   Limetna sme biti ploskev, črta, disk ali znak — nikoli besedilo.
   Besedilo nosijo: grafitna 8,62 · rdeča 5,75 · temno zelena 5,49 · belo na
   temno zeleni 5,49.

   Besedilna pisava je Source Sans 3 (bližnji sorodnik Myriad Pro iz tiskovin,
   isti oblikovalec). ⛔ Streže se z NAŠEGA strežnika (splet/pisave/) — nikoli z
   Googlovega: zunanji vir bi izdal vsak obisk, in prav to bi razveljavilo
   trditev, da stran ne prenaša ničesar tretjim. Prenese jo
   skripte/pisave_prenesi.sh. ⚠️ CSP mora imeti `font-src 'self'`, sicer
   brskalnik lastno pisavo zavrne in ostane sistemska.
   Pisanega napisa »Lista za mlade« ne posnemamo s spletno pisavo; to je znak
   in je slika.
   =========================================================================== */

:root{
  --limeta:#8cc641;
  --limeta-svetla:#b8d98b;
  --zelena:#397638;
  --zelena-temna:#2d5d2c;
  --rdeca:#c3272f;

  --papir:#ffffff;
  --ozadje:#f6f8f2;
  --crnilo:#3b3d3b;
  --pridusen:#656964;
  --rob:#e1e7d9;

  /* ⛔ Vnosno polje ima LASTNO obrobo in podlago, ne splošnega `--rob`.
     Splošni rob je dekorativna razmejitev ploskev in ima 1,26 : 1; za obris
     vnosnega polja WCAG 1.4.11 zahteva 3 : 1, ker je polje upravljalni
     element, ne okras. Dokler je bilo polje obrobljeno z `--rob`, ga pred
     klikom skoraj ni bilo videti — na telefonu v temni temi pa sploh ne. */
  --rob-polje:#82927a;        /* 3,09 : 1 na podlagi polja */
  --polje-ozadje:#f6f8f2;     /* vdolbina v beli kartici */

  /* Glavni gumb ima lastna žetona, ker se v temni temi OBRNE — glej opombo
     pri temni temi spodaj. */
  --gumb-ozadje:#2d5d2c;      /* 7,74 : 1 proti beli kartici */
  --gumb-ozadje-hover:#214b20;
  --gumb-tekst:#ffffff;       /* 7,74 : 1 na polnilu */

  --senca:0 1px 2px rgba(57,118,56,.06), 0 8px 24px rgba(57,118,56,.07);
}

@media (prefers-color-scheme: dark){
  :root{
    /* Kartica je svetlejša od strani in stran je temnejša od prejšnje — prej
       sta bili 1,11 : 1 narazen in ploskve so se zlivale v eno temno polje. */
    --ozadje:#121512;
    --papir:#242a23;
    --crnilo:#e6e9e4;
    --pridusen:#a2a8a0;
    --rob:#394138;
    --rob-polje:#6f7c6c;      /* 4,08 : 1 na podlagi polja */
    --polje-ozadje:#141813;   /* vdolbina v kartici */
    /* Na temnem je temno zelena preblizu ozadju, zato vlogo povezav in
       naslovov prevzame limetna — tam ima kontrast nad 7 : 1. */
    --zelena:#9ed452;
    --zelena-temna:#2d5d2c;
    --rdeca:#f0868a;

    /* ⛔ GLAVNI GUMB SE V TEMNI TEMI OBRNE: svetlo polnilo, temno besedilo.
       Temno zelen gumb #2d5d2c ima na temni kartici #242a23 samo 1,90 : 1,
       torej se skoraj zlije z njo — glavni poziv k dejanju je bil na telefonu
       ponoči komaj viden. WCAG 1.4.11 zahteva 3 : 1 za upravljalni element.

       Belo besedilo tu NI mogoče: polnilo bi moralo biti hkrati svetlejše od
       0,1646 (3 : 1 nad kartico) in temnejše od 0,1833 (4,5 : 1 pod belim) —
       okno je preozko za uporabno zeleno. Zato isto načelo kot pri povezavah
       zgoraj: svetlo polnilo in temno besedilo. */
    --gumb-ozadje:#5ea65c;        /* 4,95 : 1 proti kartici */
    --gumb-ozadje-hover:#6fbb6c;  /* 6,29 : 1 */
    --gumb-tekst:#0f1a0f;         /* 6,03 : 1 na polnilu */
    --senca:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ozadje);
  color:var(--crnilo);
  font:17px/1.65 "Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
}

/* Barvni trak na vrhu — povzetek robnega motiva s plakatov in letaka, kjer se
   zelena in rdeča izmenjujeta ob robu lista.

   ⚠️ `position:fixed`, ne `sticky`: lepljiv element se ustavi ob robu svojega
   starša in ta je tu `body`, torej bi trak odplaval z vsebino. Fiksni ostane
   na vrhu okna ne glede na drsenje.
   ⚠️ Ker fiksni element zapusti tok, mora `body` dobiti enak zgornji odmik —
   sicer bi trak pokril prvih 6 px vsebine. */
body{padding-top:6px}
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height:6px;
  z-index:100;
  background:linear-gradient(90deg,
    var(--limeta) 0 38%, var(--zelena) 38% 62%, var(--rdeca) 62% 100%);
}

.ovoj{max-width:46rem;margin:0 auto;padding:0 1.25rem 4rem}

/* ---------------------------------------------------------------- glava */
header{text-align:left;padding:1.5rem 0 0}

/* Logotip brez fotografije in sence: pozitiv v svetli, negativ v temni temi. */
.naslovna{
  /* Določena širina starša prepreči krožni izračun odstotne širine slike. */
  width:18.5rem;
  max-width:100%;
  padding:.75rem;
  margin:0 0 1.25rem;
  background:transparent;
  line-height:0;
}
.znak{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

h1{
  font-size:clamp(1.65rem,5.5vw,2.3rem);
  line-height:1.15;
  margin:0 0 .75rem;
  letter-spacing:-.01em;
}

h2{font-size:1.25rem;line-height:1.3;margin:2.75rem 0 .85rem}
h2.prvi{margin-top:0}
h3{font-size:1.05rem;margin:1.75rem 0 .5rem}

p{margin:0 0 1rem}
a{color:var(--zelena)}
a:hover{text-decoration-thickness:2px}

.uvod{font-size:1.06rem}

/* ------------------------------------------------------------- gradniki */
/* Poudarjen blok: limetna kot PLOSKEV in črta, besedilo grafitno. */
.kljucno{
  border-left:4px solid var(--limeta);
  background:color-mix(in srgb, var(--limeta) 12%, transparent);
  border-radius:0 10px 10px 0;
  padding:1.1rem 1.25rem;
  margin:1.5rem 0;
}
.kljucno strong{color:var(--zelena)}
.kljucno > :last-child{margin-bottom:0}

.pozor{
  border-left:4px solid var(--rdeca);
  background:color-mix(in srgb, var(--rdeca) 8%, transparent);
  border-radius:0 10px 10px 0;
  padding:1.1rem 1.25rem;
  margin:1.5rem 0;
}
.pozor strong{color:var(--rdeca)}
.pozor > :last-child{margin-bottom:0}

.rok{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}

/* ---------------------------------------------------------------- koraki */
/* ⛔ Vsi selektorji so `>`, ne potomski. Korak 3 ima v sebi ugnezdeni seznam
   načinov vrnitve, in ta NISO koraki 4, 5 in 6 — so tri možnosti istega
   koraka. S potomskim `.koraki li` je vsaka dobila svojo številko, povrhu pa
   še zeleni disk čez besedilo: `.nacini li` prepiše `padding-left` s 3rem na
   1rem (enaka specifičnost, poznejše pravilo), disk pa ostane absolutno
   postavljen 2rem širok — torej pristane na napisu (»Po pošti:« → »pošti:«). */
.koraki{list-style:none;counter-reset:korak;padding:0;margin:0}
.koraki > li{
  counter-increment:korak;
  position:relative;
  padding-left:3rem;
  margin-bottom:1.35rem;
}
.koraki > li::before{
  content:counter(korak);
  position:absolute;
  left:0; top:.1rem;
  width:2rem; height:2rem;
  border-radius:50%;
  background:var(--zelena-temna);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.koraki > li:last-child{margin-bottom:0}

/* Načini vrnitve obrazca — podatki naj bodo TU, ne da jih kdo išče drugje. */
.nacini{list-style:none;padding:0;margin:.6rem 0 0}
.nacini > li{
  padding-left:1rem;
  border-left:2px solid var(--limeta);
  margin-bottom:.45rem;
  font-size:.97rem;
}
.nacini > li:last-child{margin-bottom:0}

/* ------------------------------------------------------------- zložljivo */
/* Zaprto stanje mora biti VIDNO zložljivo, sicer ga nihče ne odpre: puščica,
   kazalec in podčrtaj ob prehodu. */
.zlozljivo{
  background:var(--papir);
  border:1px solid var(--rob);
  border-radius:12px;
  padding:0 1.25rem;
  margin:2rem 0;
}
.zlozljivo summary{
  cursor:pointer;
  padding:1rem 0;
  list-style:none;
  position:relative;
  padding-right:2rem;
}
.zlozljivo summary::-webkit-details-marker{display:none}
.zlozljivo summary::after{
  content:"";
  position:absolute;
  right:.4rem; top:1.45rem;
  width:.5rem; height:.5rem;
  border-right:2px solid var(--zelena);
  border-bottom:2px solid var(--zelena);
  transform:rotate(45deg);
  transition:transform .15s;
}
.zlozljivo[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.zlozljivo summary:hover{color:var(--zelena)}
.zlozljivo summary:focus-visible{outline:2px solid var(--zelena);outline-offset:3px;border-radius:6px}
.zlozljivo > :last-child{margin-bottom:1.1rem}

/* ----------------------------------------------------------------- gumbi */
.gumb{
  display:inline-block;
  background:var(--gumb-ozadje);
  color:var(--gumb-tekst);
  text-decoration:none;
  font:inherit;
  font-weight:600;
  border:2px solid var(--gumb-ozadje);
  cursor:pointer;
  padding:.8rem 1.4rem;
  border-radius:10px;
  margin:.35rem .35rem .35rem 0;
}
.gumb:hover{
  background:var(--gumb-ozadje-hover);
  border-color:var(--gumb-ozadje-hover);
  color:var(--gumb-tekst);
}
.gumb:disabled{opacity:.55;cursor:default}
.gumb.drugotni{
  background:transparent;
  color:var(--zelena);
  border-color:var(--rob-polje);
}
.gumb.drugotni:hover{background:transparent;border-color:var(--zelena);color:var(--zelena)}
.gumb.velik{font-size:1.06rem;padding:.95rem 1.7rem}

/* ⛔ IZID OPOMNIKA IN DELJENJA — potrditev in zavrnitev se morata LOČITI.
   Ta pravila so bila prej vezana na `.pas` (temno zelen pas ob roku). Pas je
   ob prenovi 16. 9. 2026 odpadel, pravila pa so ostala — in ker jih ni več nič
   zadelo, sta obe sporočili postali navaden odstavek. Zavrnitev »za opomnik je
   prepozno« je bila videti natanko tako kot potrditev »opomnik je shranjen«,
   torej je imela nasproten pomen ob enakem videzu.
   Zdaj sta vezani na sam element in ne na okolico; čuva ju
   skripte/preizkusi/mrtev_slog.js. */
#opomnik-izid > *,
#deljenje-izid:not(:empty){
  padding:.85rem 1rem;
  border-radius:10px;
  border-left:4px solid var(--zelena);
  background:color-mix(in srgb, var(--zelena) 10%, transparent);
  font-size:.95rem;
}
#opomnik-izid strong{color:var(--zelena)}

/* Zavrnitev nosi pomen z barvo IN z besedilom (»prepozno«, telefonska
   številka) — barva sama ne sme biti edini razločevalec (WCAG 1.4.1). */
#opomnik-izid.opomnik-napaka > *{
  border-left-color:var(--rdeca);
  background:color-mix(in srgb, var(--rdeca) 8%, transparent);
}
#opomnik-izid.opomnik-napaka strong{color:var(--rdeca)}

/* --------------------------------------------------------------- obrazec */
.polje{margin-bottom:1.15rem}
.polje label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.97rem}
.polje .namig{display:block;color:var(--pridusen);font-size:.86rem;font-weight:400;margin-bottom:.35rem}
/* ⛔ Polje mora biti videti kot polje TUDI PRED KLIKOM. Obris nosi
   `--rob-polje` (3 : 1 po WCAG 1.4.11), ne dekorativni `--rob` (1,26 : 1), in
   podlaga je `--polje-ozadje` — torej vdolbina v kartici, ne ista ploskev.
   Barva sama ne zadošča: obrobo vidi tudi, kdor barv ne loči, ker je polje
   vdolbina z vidnim obrisom. Meri jo skripte/preizkusi/kontrast.js. */
.polje input{
  width:100%;
  padding:.72rem .85rem;
  font:inherit;
  color:var(--crnilo);
  background:var(--polje-ozadje);
  border:1px solid var(--rob-polje);
  border-radius:9px;
  /* Tanka notranja senca na vrhu — polje bere kot vdolbina, ne kot ploščica. */
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
}
.polje input::placeholder{color:var(--pridusen);opacity:1}
.polje input:hover{border-color:var(--zelena)}
/* ⚠️ Ob fokusu obrobe NE skrivamo (prej `border-color:transparent`): polje je
   tedaj poskočilo za piko in obris je za hip izginil. Obris ostane, obroba se
   samo obarva. */
.polje input:focus{
  outline:2px solid var(--zelena);
  outline-offset:1px;
  border-color:var(--zelena);
  background:var(--papir);
}
.polje input.napaka{border-color:var(--rdeca);border-width:2px}
.polje .sporocilo{display:block;color:var(--rdeca);font-size:.86rem;margin-top:.3rem}
.par{display:flex;gap:.9rem}
.par .polje{flex:1;min-width:0}

#izid{margin-top:1.25rem}
#izid:empty{display:none}
.zasebnost{color:var(--pridusen);font-size:.9rem;margin-top:1rem}

/* ----------------------------------------------------------------- noga */
footer{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rob);
  color:var(--pridusen);
  font-size:.9rem;
}
footer a{color:inherit}

.drobno{color:var(--pridusen);font-size:.9rem}

@media (max-width:520px){
  body{font-size:16px}
  .ovoj{padding-bottom:3rem}
  .par{display:block}
  .koraki > li{padding-left:2.6rem}   /* `>`, sicer zajame tudi `.nacini li` */
  header{padding-top:1rem}
  .naslovna{width:16.5rem}
}


/* Priprava obrazca: obe poti skupaj, navodila tudi brez odpiranja polj. */
[hidden]{display:none!important}
h3.prvi{margin-top:0}
.potek{margin:0;padding:.85rem 0;border-bottom:1px solid var(--rob)}
.potek strong{color:var(--zelena-temna)}
.priprava{background:var(--papir);border:1px solid var(--rob);border-radius:12px;padding:1.5rem;margin:1.25rem 0 2rem}
.izbiri{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.izbiri .gumb{width:100%;margin:0 0 .45rem;padding:.8rem .6rem;text-align:center}
.izbiri p{margin:0;line-height:1.4}

/* Tretja pot (brez tiskalnika). Namenoma NI `.drobno`: je enakovredna možnost,
   ne opomba pod črto. Nima gumba, ker ni česa klikniti — zato stoji pod obema
   gumboma in ne kot tretji stolpec v mreži, kjer bi bila prazna škatla. */
.tretja-pot{
  margin:1rem 0 0;
  padding:.85rem 1rem;
  border-left:4px solid var(--limeta);
  background:color-mix(in srgb, var(--limeta) 10%, transparent);
  border-radius:0 10px 10px 0;
  font-size:.97rem;
}
.tretja-pot strong{color:var(--zelena)}
#spletni-obrazec{border-top:1px solid var(--rob);margin-top:1.5rem;padding-top:1.5rem}
#obrazec-naslov{margin-top:0;scroll-margin-top:1rem}
#spletni-obrazec .zasebnost{margin:0 0 1.5rem}
.navodila h2{margin-top:0}
.koraki > li > p{margin:.25rem 0 .5rem}
.rok-pojasnilo{margin:1rem 0 0}
.orodja{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.orodja .gumb{margin:0;font-size:.95rem;padding:.65rem .85rem}
#deljenje-izid:empty,#opomnik-izid:empty{display:none}
#deljenje-izid{margin-top:.75rem}
#opomnik-izid > *{margin-top:1rem}
.zlozljivo{margin:1rem 0;background:transparent}
#rocno-kopiranje{margin-top:1rem}
.preskok{position:absolute;top:-100px;left:1rem;background:var(--papir);padding:.75rem;z-index:101}
.preskok:focus{top:10px}
.gumb:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--zelena);outline-offset:3px}
footer{margin-top:2rem}
@media(prefers-color-scheme:dark){.potek strong{color:var(--zelena)}}
@media(max-width:520px){
  .priprava{padding:1.1rem;margin-top:1rem}
  .izbiri{grid-template-columns:1fr;gap:.8rem}
  .izbiri .gumb{padding:.75rem .6rem}
  .izbiri p{font-size:.85rem}
  .orodja{flex-direction:column;align-items:stretch}
}