/* Stikalo »Klepet | Klasična stran« kot drsnik, ki ga je mogoče prijeti in povleči. Skupno za klasično stran in klepet.
   Brez skripte ostaneta navadni povezavi z obarvano izbrano stranjo (slogi v stran.css in klepet.css). */
.nacin { position: relative; --nacin-napis: #ffffff; --nacin-drsnik: #ffffff; --nacin-na-drsniku: var(--dz-indigo); }
.o2 .nacin { --nacin-napis: var(--color-text); --nacin-drsnik: var(--color-text); --nacin-na-drsniku: var(--color-canvas); }

/* Živo stikalo: ozadje izbrane strani prevzame drsnik, povezavi ostaneta za klik, tipkovnico in bralnike zaslona. */
html .nacin.nacin-ziv { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* Obe povezavi imata barvo neizbrane strani; barvo izbrane kaže odsev v drsniku, zato napis ne izgine, ko drsnik odpelje. */
html .nacin.nacin-ziv a, html .nacin.nacin-ziv a:hover, html .nacin.nacin-ziv a[aria-current="page"] { background: none; color: var(--nacin-napis); transition: none; -webkit-user-drag: none; cursor: pointer; }
html .nacin.nacin-ziv a[aria-current="page"] { cursor: grab; }
html .nacin.nacin-ziv.nacin-vlece, html .nacin.nacin-ziv.nacin-vlece a { cursor: grabbing; }
html .nacin.nacin-ziv a:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
html .nacin.nacin-ziv:has(a:focus-visible) { box-shadow: var(--focus-ring); }

/* Drsnik leži nad povezavama; v njem je odsev obeh napisov v barvi izbrane strani, zato se napis obarva točno tam,
   kjer ga drsnik prekrije. */
.nacin-drsnik { position: absolute; left: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: var(--radius-pill);
  background: var(--nacin-drsnik); clip-path: inset(0 round 999px); transition: clip-path 140ms var(--ease-out); will-change: transform, width; }
.nacin-odsev { position: absolute; inset: 0 auto 0 0; color: var(--nacin-na-drsniku); will-change: transform; }
.nacin-odsev span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.nacin-odsev span.fokus { text-decoration: underline; text-underline-offset: 3px; }
/* Ko držimo drsnik, se za spoznanje stisne (napis ostane na mestu). */
.nacin-drzi .nacin-drsnik { clip-path: inset(1.5px round 999px); }
/* Zdrs na izbrano stran po spustu ali kliku: brez odboja. */
.nacin-drsi .nacin-drsnik { transition: transform var(--nacin-cas, 240ms) var(--ease-out), width var(--nacin-cas, 240ms) var(--ease-out), clip-path 140ms var(--ease-out); }
.nacin-drsi .nacin-odsev { transition: transform var(--nacin-cas, 240ms) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .nacin-drsnik, .nacin-drsi .nacin-drsnik, .nacin-drsi .nacin-odsev { transition: none; } }