/* ═══════════════════════════════════════════════════════════════════
   PRAVNE STRANI — bralna postavitev

   Te strani nihče ne bere iz veselja. Bere jih, ker išče en odstavek:
   kaj se zgodi ob preklicu, komu gredo podatki, kdo odgovarja za storitev.
   Postavitev je zato narejena za iskanje, ne za pretok: kazalo na vrhu,
   naslovi razdelkov, ki se vidijo ob drsenju, in mera, ki oko pripelje
   nazaj na začetek vrstice brez izgube.

   Barve pridejo iz postavitev.css in se same premaknejo med temnim in
   svetlim načinom. Tu ni nobene vpisane barve.
   ═══════════════════════════════════════════════════════════════════ */

.pravno{
  max-width:760px;margin:0 auto;padding:56px 24px 96px;
}

/* Mera 66 ch: pri pravnem besedilu je vsaka vrstica svoja poved in
   predolga vrstica pomeni izgubljeno mesto ob vračanju. */
.pravno p,.pravno li{max-width:66ch}

.pravno h1{
  font-size:var(--t-3xl);line-height:1.1;margin-bottom:14px;
}
/* Datum uveljavitve stoji tik pod naslovom in je edino, kar bralec
   pogosto preveri pred vsebino. */
.pravno h1 + p{
  font-family:var(--num);font-size:var(--t-sm);color:var(--telo-2);
  border-left:1px solid var(--rob-k);padding-left:13px;margin-bottom:34px;
}
.pravno h1 + p strong{color:var(--slonovina);font-weight:600}

/* Razdelek se začne s tanko gravuro: več zraka nad naslovom kot pod njim,
   da naslov pripada temu, kar sledi. */
.pravno h2{
  font-size:var(--t-xl);line-height:1.25;
  margin:58px 0 16px;padding-top:26px;border-top:1px solid var(--gravura);
  scroll-margin-top:80px;
}
.pravno h3{
  font-size:var(--t-lg);line-height:1.3;margin:34px 0 10px;
  scroll-margin-top:80px;
}
.pravno p{margin-bottom:16px;line-height:1.7}
.pravno strong{color:var(--slonovina);font-weight:600}
.pravno a{color:var(--medenina);text-decoration:underline;text-underline-offset:3px}
.pravno a:hover{color:var(--slonovina)}

.pravno ul{list-style:none;margin:0 0 18px;padding:0}
.pravno ul li{
  position:relative;padding-left:22px;margin-bottom:10px;line-height:1.7;
}
/* Oznaka alineje je pika s signalom v malem — isti jezik kot znak. */
.pravno ul li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--medenina);
}

/* ── tabele ─────────────────────────────────────────────────────────
   Na namizju tabela, na telefonu kartice. Vodoravno drsenje pri treh
   stolpcih pravnega besedila ne pomaga: bralec ne ve, da je desno še
   kaj, stolpci pa se stisnejo v en znak na vrstico. Kartica pove isto
   in se bere navzdol, kot vse drugo na strani. */
.tabela-ovoj{margin:0 0 22px;overflow-x:auto}
.tabela-ovoj:focus-visible{outline:2px solid var(--medenina);outline-offset:3px}
.pravno table{
  width:100%;border-collapse:collapse;font-size:var(--t-sm);line-height:1.55;
}
.pravno th,.pravno td{
  text-align:left;vertical-align:top;padding:12px 14px;
  border-bottom:1px solid var(--gravura-2);
}
.pravno thead th{
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--telo-2);font-weight:400;
  border-bottom:1px solid var(--rob-k);
}
.pravno tbody th{color:var(--slonovina);font-weight:600}
.pravno tbody td{color:var(--telo)}
.pravno tbody tr:last-child th,.pravno tbody tr:last-child td{border-bottom:none}

@media(max-width:620px){
  .pravno thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pravno table,.pravno tbody,.pravno tr,.pravno th,.pravno td{display:block;width:100%}
  .pravno tbody tr{
    border:1px solid var(--gravura);border-radius:var(--r-kartica);
    background:var(--plosca);padding:14px 16px;margin-bottom:12px;
  }
  .pravno tbody th,.pravno tbody td{border-bottom:none;padding:0 0 8px}
  .pravno tbody tr :last-child{padding-bottom:0}
  /* oznaka stolpca pride pred vrednost, sicer kartica izgubi pomen */
  .pravno tbody td::before{
    content:attr(data-oznaka);display:block;
    font-family:var(--num);font-size:var(--t-micro);letter-spacing:.1em;
    text-transform:uppercase;color:var(--telo-2);margin-bottom:3px;
  }
}

/* ── kazalo ─────────────────────────────────────────────────────────── */
.pravno-kazalo{
  border:1px solid var(--gravura);border-radius:var(--r-kartica);
  background:var(--plosca);padding:20px 22px;margin:0 0 42px;
}
.pravno-kazalo h2{
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--telo-2);font-weight:400;
  margin:0 0 12px;padding:0;border:none;
}
.pravno-kazalo ol{list-style:none;margin:0;padding:0;
  columns:2;column-gap:26px}
.pravno-kazalo li{margin-bottom:2px;break-inside:avoid}
.pravno-kazalo a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--telo);text-decoration:none;font-size:var(--t-sm);
}
.pravno-kazalo a:hover{color:var(--medenina)}
@media(max-width:560px){.pravno-kazalo ol{columns:1}}

/* ── povezani dokumenti ─────────────────────────────────────────────── */
.pravno-druge{margin-top:64px;padding-top:28px;border-top:1px solid var(--gravura)}
.pravno-druge h2{
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--telo-2);font-weight:400;
  margin:0 0 14px;padding:0;border:none;
}
.pravno-druge ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pravno-druge li{padding:0}
.pravno-druge li::before{display:none}
.pravno-druge a{
  display:block;font-family:var(--display);font-weight:600;
  font-size:var(--t-base);color:var(--slonovina);text-decoration:none;
  border:1px solid var(--gravura);border-radius:var(--r-kartica);
  padding:15px 18px;transition:border-color .15s,color .15s;
}
.pravno-druge a:hover{border-color:var(--medenina-d);color:var(--medenina)}
.pravno-druge span{display:block;font-family:var(--body);font-weight:400;
  font-size:var(--t-sm);color:var(--telo-2);margin-top:3px}
@media(min-width:620px){.pravno-druge ul{grid-template-columns:1fr 1fr}}

.pravno .fdrobno,footer .fdrobno{
  font-size:var(--t-sm);color:var(--telo-2);margin-top:20px;
}