/* ═══════════════════════════════════════════════════════════════════
   Biroplast Solutions — pravni dokumenti (28. 9. 2026)
   Predpona razredov: "pd-"
   ───────────────────────────────────────────────────────────────────
   Uporabljajo jo tri strani: politika-zasebnosti.html, piskotki.html,
   pravno-obvestilo.html.

   NAČELO: berljivost je pomembnejša od učinka. Za dolgim pravnim
   besedilom NI animiranih plasti — globinski elementi so samo v heroju
   nad besedilom in v mirnem, ozkem pasu. Merilo je bralec, ki bo tu
   preživel deset minut, ne obiskovalec, ki drsi mimo.

   Širina branja je 820 px (brif: 760–900). Pri 16 px osnovne velikosti
   in pisavi Barlow to nanese ~78 znakov na vrstico, kar je zgornja meja
   udobnega branja — zato je besedilo v telesu omejeno še s `max-width`
   v `ch`, da tudi na velikih zaslonih vrstica ne postane predolga.

   Vse barve so iz tokens.css. Nobene nove.
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────────────── */
.pd-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  color:#fff;
  padding:calc(var(--sp-7) + 30px) 0 var(--sp-6);
}
.pd-hero .wrap{ position:relative; z-index:2; max-width:820px; }
.pd-hero h1{
  font-size:clamp(32px, 4.2vw, 48px);
  margin:4px 0 var(--sp-3); letter-spacing:-.02em;
}
.pd-hero .lead{ max-width:60ch; color:var(--muted-on-navy); }
.pd-hero-bp{
  width:560px; height:560px; right:-190px; bottom:-250px;
  opacity:.08; color:var(--lime); z-index:0;
}
.pd-hero .circuit-field{ z-index:0; }

/* Datum zadnje spremembe — majhen, a mora biti viden takoj, ker bralca
   pravnega dokumenta prvo zanima, ali gleda veljavno različico. */
.pd-datum{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--sp-3); padding:7px 14px;
  border:1px solid var(--line-on-navy); border-radius:999px;
  font-size:13px; color:var(--muted-on-navy);
}
.pd-datum svg{ width:14px; height:14px; }

/* ── telo dokumenta ───────────────────────────────────────────────── */
.pd-telo{ background:var(--surface); }
.pd-doc{ max-width:820px; margin:0 auto; }

.pd-doc h2{
  font-size:clamp(22px, 2vw, 27px); color:var(--ink);
  margin:var(--sp-6) 0 var(--sp-2);
  padding-top:var(--sp-3); border-top:2px solid var(--line);
  scroll-margin-top:110px;
}
.pd-doc h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.pd-doc h3{
  font-size:17px; color:var(--ink);
  margin:var(--sp-4) 0 6px; scroll-margin-top:110px;
}
.pd-doc p{
  color:var(--muted); font-size:15.5px; line-height:1.68;
  margin:0 0 12px; max-width:74ch;
}
.pd-doc ul, .pd-doc ol{ margin:10px 0 16px 22px; padding:0; max-width:74ch; }
.pd-doc li{ color:var(--muted); font-size:15.5px; line-height:1.62; padding:4px 0; }
.pd-doc li > strong{ color:var(--ink); }
.pd-doc a{
  color:var(--blue); text-decoration:underline; text-underline-offset:2px;
}
.pd-doc a:hover{ color:var(--navy); }
.pd-doc strong{ color:var(--ink); font-weight:600; }

/* ── kazalo ───────────────────────────────────────────────────────── */
.pd-kazalo{
  max-width:820px; margin:0 auto var(--sp-5);
  display:flex; gap:8px; flex-wrap:wrap;
}
.pd-kazalo a{
  font-family:var(--fh); font-weight:600; font-size:13.5px; color:var(--muted);
  border:1px solid var(--line); background:var(--surface);
  padding:8px 15px; border-radius:9px;
  transition:border-color var(--dur-fast) var(--ease-premium),
             color var(--dur-fast) var(--ease-premium);
}
.pd-kazalo a:hover{ border-color:var(--cyan); color:var(--blue); }

/* ── poudarjeni bloki ─────────────────────────────────────────────── */

/* nevtralen blok s podatki (upravljavec, kontakt nadzornega organa) */
.pd-blok{
  background:var(--surface-alt); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-3) 0; max-width:820px;
}
.pd-blok p:last-child{ margin-bottom:0; }
.pd-blok--cyan{
  background:rgba(23,185,236,.06); border-color:rgba(23,185,236,.28);
}
.pd-blok--zelen{
  background:rgba(24,165,75,.06); border-color:rgba(24,165,75,.26);
}

/* opozorilo, da nekaj še čaka na potrditev (uporabljeno samo tam, kjer
   podatka iz projekta ni bilo mogoče ugotoviti — nikoli kot okras) */
.pd-opomba{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff7e6; border:1px solid #f0c869; border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0; max-width:820px;
}
.pd-opomba svg{ width:20px; height:20px; color:#b8860b; flex-shrink:0; margin-top:2px; }
.pd-opomba p{ color:#6b5000; font-size:14.5px; margin:0; max-width:none; }
.pd-opomba strong{ color:#7a5a00; }

/* ── tabela (seznam tehnologij na strani o piškotkih) ────────────── */
.pd-tabela-ovoj{
  max-width:820px; margin:var(--sp-3) 0 var(--sp-5);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.pd-tabela{
  width:100%; border-collapse:collapse; font-size:14.5px;
  min-width:520px;
  /* Brez določenih širin brskalnik stolpcem dodeli prostor po najdaljši
     besedi in stolpec "Namen" — edini z daljšim besedilom — se stisne v
     ozek stolpič, medtem ko "Trajanje" dobi preveč. Zato širine
     povemo sami; `table-layout:fixed` jih tudi upošteva. */
  table-layout:fixed;
}
.pd-tabela col.pd-s1{ width:26%; }   /* Ključ      */
.pd-tabela col.pd-s2{ width:46%; }   /* Namen      */
.pd-tabela col.pd-s3{ width:28%; }   /* Kategorija */
.pd-tabela code{
  font-size:13px; background:var(--surface-alt);
  padding:1px 5px; border-radius:4px; word-break:break-word;
}
.pd-tabela th, .pd-tabela td{
  text-align:left; vertical-align:top;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.pd-tabela thead th{
  font-family:var(--fh); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:var(--surface-alt);
  white-space:nowrap;
}
.pd-tabela tbody tr:last-child td{ border-bottom:none; }
.pd-tabela td{ color:var(--muted); line-height:1.55; }
/* Prvi stolpec je poudarjen, a se MORA lomiti: "YouTube (Google Ireland)"
   je predolg za eno vrstico in bi se z `nowrap` prelil čez sosednji
   stolpec (opaženo pri preverjanju 28. 9. 2026). */
.pd-tabela td:first-child{ color:var(--ink); font-weight:600; white-space:normal; }

.pd-znacka{
  display:inline-block; font-family:var(--fh); font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.pd-znacka--nujno{ color:var(--green); background:rgba(24,165,75,.11); }
.pd-znacka--izbirno{ color:var(--blue); background:rgba(4,123,193,.10); }

/* ── gumb za nastavitve sredi besedila ────────────────────────────── */
.pd-dejanje{ margin:var(--sp-3) 0 var(--sp-5); }

/* ── ozki zasloni ─────────────────────────────────────────────────── */
@media (max-width:760px){
  .pd-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-5); }
  .pd-doc h2{ margin-top:var(--sp-5); }
  .pd-doc p, .pd-doc li{ font-size:15px; }
  .pd-blok, .pd-opomba{ padding:var(--sp-3); }
}

/* ── tisk: pravni dokument mora biti uporaben tudi natisnjen ─────── */
@media print{
  .pd-hero{ background:none; color:#000; padding:0 0 12pt; }
  .pd-hero .lead, .pd-datum{ color:#333; }
  .pd-hero .circuit-field, .pd-hero-bp, .pd-kazalo, .pd-dejanje{ display:none !important; }
  .pd-doc p, .pd-doc li{ color:#000; font-size:10.5pt; }
  .pd-doc a{ color:#000; text-decoration:none; }
  .pd-doc a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#555; }
  .pd-tabela-ovoj{ overflow:visible; }
  .pd-tabela{ min-width:0; }
}


/* ═══════════════════════════════════════════════════════════════════
   DODANO 29. 9. 2026 — struktura "Pravne informacije"
   ═══════════════════════════════════════════════════════════════════ */

/* ── medsebojna navigacija pravnih dokumentov (brif t. 12) ──────────
   Namenoma tiha: majhna, brez ozadja, tik nad besedilom. Bralec naj
   lahko skoči na drug dokument, ne da bi se vračal na domačo stran,
   hkrati pa vrstica ne sme tekmovati z naslovom strani. */
.pd-medvez{
  max-width:820px; margin:0 auto var(--sp-4);
  display:flex; flex-wrap:wrap; gap:6px 18px;
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.pd-medvez a{
  color:var(--muted); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-premium);
}
.pd-medvez a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
/* Stran, na kateri bralec je: temnejša in poudarjena, brez povezave po
   videzu — `aria-current` pove isto bralniku zaslona. */
.pd-medvez a[aria-current="page"]{
  color:var(--ink); font-weight:600; cursor:default;
}
.pd-medvez a[aria-current="page"]:hover{ color:var(--ink); text-decoration:none; }

/* ── tri kartice na strani "Pravne informacije" ────────────────────
   Celotna kartica je povezava (tarča za dotik), zato tu ni ugnezdenih
   povezav — puščica je samo videz, ne svoj <a>. */
.pd-kartice{
  max-width:820px; margin:var(--sp-5) 0 var(--sp-6);
  display:grid; gap:14px;
}
/* Selektor je NAMENOMA `.pd-doc a.pd-kartica`, ne le `.pd-kartica`:
   splošno pravilo `.pd-doc a{text-decoration:underline}` ima
   specifičnost 0,1,1, sam razred pa 0,1,0 — zato bi ga splošno pravilo
   premagalo ne glede na vrstni red v datoteki in kartica bi ostala
   podčrtana. Ta napaka je bila vidna pri pregledu 29. 9. 2026: podčrtan
   je bil naslov in ves opis kartice.

   Podčrtaja tudi ni mogoče odstraniti na otrocih — `text-decoration` se
   riše na elementu, ki jo določi, in je potomci ne morejo preklicati.
   Zato mora pravilo veljati prav za <a>. */
.pd-doc a.pd-kartica,
.pd-kartica{
  display:block; padding:var(--sp-4);
  text-decoration:none;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-premium),
             box-shadow  var(--dur-fast) var(--ease-premium),
             transform   var(--dur-fast) var(--ease-premium);
}
.pd-doc a.pd-kartica:hover,
.pd-kartica:hover{
  border-color:var(--cyan); box-shadow:var(--sh-md); transform:translateY(-2px);
  text-decoration:none;
}
.pd-kartica h2{
  font-size:19px; color:var(--ink); margin:0 0 8px;
  padding:0; border:none;          /* prepiše splošni .pd-doc h2 */
}
.pd-kartica p{
  margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--muted);
  max-width:66ch;
}
.pd-kartica-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fh); font-weight:600; font-size:14.5px; color:var(--blue);
}
.pd-kartica-cta svg{
  width:15px; height:15px;
  transition:transform var(--dur-fast) var(--ease-premium);
}
.pd-kartica:hover .pd-kartica-cta{ text-decoration:underline; text-underline-offset:3px; }
.pd-kartica:hover .pd-kartica-cta svg{ transform:translateX(3px); }

/* ── posamična povezava sredi besedila (npr. "Politika zasebnosti →") */
.pd-vez{ margin:0 0 16px; }
.pd-vez a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fh); font-weight:600; font-size:15px;
  color:var(--blue); text-decoration:none;
}
.pd-vez a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pd-vez svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-premium); }
.pd-vez a:hover svg{ transform:translateX(3px); }

/* ── datum zadnje posodobitve na dnu dokumenta ─────────────────────
   Isti podatek je tudi v heroju; tu je zato, ker bralec pravnega
   besedila pogosto pride do konca in hoče vedeti, kdaj je bilo
   nazadnje spremenjeno, ne da bi se vračal na vrh. */
.pd-podpis{
  margin-top:var(--sp-6); padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  font-size:13.5px !important; color:var(--muted);
}

@media (max-width:760px){
  .pd-medvez{ gap:4px 14px; font-size:13px; }
  .pd-kartica{ padding:var(--sp-3); }
  .pd-kartica h2{ font-size:17.5px; }
}