/* ============================================================================
   LumenSpark - landing/navigation.css
   Fiksni header (transparentan nad tamnim herojem -> zgusnut nakon scrolla),
   jezicni prekidac, mobilni sheet. Prefiks .lsw-nav / .lsw-mnav
   ============================================================================ */

.lsw-nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  height:var(--lsw-nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--motion-standard),border-color var(--motion-standard),
             backdrop-filter var(--motion-standard),height var(--motion-standard);
}
.lsw-nav-inner{
  width:100%;max-width:var(--lsw-maxw);margin-inline:auto;
  padding-inline:var(--lsw-gutter);
  display:flex;align-items:center;gap:24px;
}

/* Stanje: nad tamnim herojem */
.lsw-nav{color:var(--lsw-on-dark)}
/* Stanje: scrollano (svjetla ploha) */
.lsw-nav.is-stuck{
  height:54px;
  background:rgba(255,254,251,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--lsw-border);
  color:var(--lsw-text);
  box-shadow:0 10px 30px -22px rgba(20,20,19,.3);
}
/* Stanje: scrollano, ali aktivna sekcija je tamna */
.lsw-nav.is-stuck.is-over-dark{
  background:rgba(20,19,17,.78);
  border-bottom-color:var(--lsw-on-dark-border);
  color:var(--lsw-on-dark);
  box-shadow:0 10px 34px -24px rgba(0,0,0,.9);
}

/* --- Logotip ------------------------------------------------------------- */
.lsw-brandmark{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:19px;font-weight:700;letter-spacing:-.03em;
}
.lsw-brandmark svg{width:21px;height:21px;fill:currentColor}
/* Najvisa traka nosi akcent - mala brand nota, ista kao aktivna stavka u appu */
.lsw-brandmark svg rect:nth-of-type(3){fill:var(--lsw-accent);opacity:1}
.lsw-brandmark-name span{color:var(--lsw-accent)}
.lsw-nav .lsw-brandmark-bars rect{transition:opacity var(--motion-standard)}

/* --- Desktop nav --------------------------------------------------------- */
.lsw-nav-links{
  display:flex;align-items:center;gap:2px;margin-left:12px;
}
.lsw-nav-links a{
  position:relative;
  padding:8px 12px;border-radius:var(--lsw-r-sm);
  font-size:14px;font-weight:550;
  color:inherit;opacity:.74;
  transition:opacity var(--motion-fast),background var(--motion-fast);
}
.lsw-nav-links a:hover{opacity:1;background:rgba(140,130,120,.13)}
.lsw-nav-links a[aria-current="true"]{opacity:1;font-weight:650}
.lsw-nav-links a[aria-current="true"]::after{
  content:'';position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;border-radius:2px;background:var(--lsw-accent);
}

.lsw-nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto}

/* --- Jezicni prekidac ----------------------------------------------------
   Bez okvira i bez ispune: dva mono natpisa razdvojena tankom crtom.
   Aktivni je terracotta, neaktivni prigusen - manje buke uz CTA gumb.
   -------------------------------------------------------------------------- */
.lsw-lang{display:inline-flex;align-items:center;gap:1px}
.lsw-lang button{
  position:relative;
  background:none;border:none;cursor:pointer;
  font-family:var(--lsw-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;
  padding:8px 8px;border-radius:6px;color:inherit;
  min-height:32px;opacity:.42;
  transition:opacity var(--motion-fast),color var(--motion-fast);
}
.lsw-lang button:hover{opacity:.85}
.lsw-lang button+button::before{
  content:'';position:absolute;left:-1px;top:50%;
  width:1px;height:11px;margin-top:-5px;
  background:currentColor;opacity:.28;
}
.lsw-lang button[aria-pressed="true"]{opacity:1;color:var(--lsw-accent)}

.lsw-nav-signin{
  font-size:14px;font-weight:600;color:inherit;
  padding:8px 12px;border-radius:var(--lsw-r-sm);opacity:.82;
  min-height:40px;display:inline-flex;align-items:center;
}
.lsw-nav-signin:hover{opacity:1;background:rgba(140,130,120,.13)}

/* --- Mobilni prekidac ---------------------------------------------------- */
.lsw-nav-burger{
  display:none;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1px solid currentColor;border-radius:8px;
  cursor:pointer;opacity:.7;
}
.lsw-nav-burger:hover{opacity:1}
.lsw-nav-burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* --- Mobilni sheet ------------------------------------------------------- */
.lsw-mnav{
  position:fixed;inset:0;z-index:300;
  display:flex;
  flex-direction:column;
  background:var(--lsw-brand);
  color:var(--lsw-on-dark);
  padding:
    max(16px,env(safe-area-inset-top))
    max(var(--lsw-gutter),env(safe-area-inset-right))
    max(24px,env(safe-area-inset-bottom))
    max(var(--lsw-gutter),env(safe-area-inset-left));
  overflow-y:auto;
  /* Standardni full-screen slide-down. display se ne moze animirati; sheet je
     uvijek u layoutu, klizi izvan ekrana prema gore (translateY(-100%)) i gasi
     ga visibility. visibility:hidden mice sheet iz tab reda i a11y stabla jednako
     kao display:none (vidi close() u site.js); odgodjena je u zatvorenom da slide
     zavrsi prije skrivanja. translateY(-100%) je iznad gornjeg ruba pa ne stvara
     ni horizontalni ni donji scroll. */
  visibility:hidden;
  transform:translateY(-100%);
  pointer-events:none;
  will-change:transform;
  transition:
    transform 400ms var(--motion-ease),
    visibility 0s linear 400ms;
}
.lsw-mnav.is-open{
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition:
    transform 400ms var(--motion-ease),
    visibility 0s;
}
.lsw-mnav-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.lsw-mnav-close{
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(245,240,234,.07);border:1px solid var(--lsw-on-dark-border);
  border-radius:12px;cursor:pointer;
}
.lsw-mnav-close svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.lsw-mnav-links{display:flex;flex-direction:column;gap:0;margin-bottom:auto}
.lsw-mnav-links a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding:12px 4px;
  font-family:var(--lsw-font);font-weight:680;font-size:26px;line-height:1.1;
  letter-spacing:-.035em;
  border-bottom:1px solid var(--lsw-on-dark-border);
  /* Kaskadni ulaz dok panel klizi; delay se dodaje tek u .is-open (dolje). */
  opacity:0;
  transform:translateY(10px);
  transition:opacity 320ms var(--motion-ease),transform 320ms var(--motion-ease);
}
.lsw-mnav.is-open .lsw-mnav-links a{opacity:1;transform:none}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(1){transition-delay:.14s}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(2){transition-delay:.19s}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(3){transition-delay:.24s}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(4){transition-delay:.29s}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(5){transition-delay:.34s}
.lsw-mnav.is-open .lsw-mnav-links a:nth-child(n+6){transition-delay:.39s}
.lsw-mnav-links a span{
  font-family:var(--lsw-mono);font-size:11px;letter-spacing:.1em;
  color:var(--lsw-on-dark-4);
}
.lsw-mnav-foot{display:flex;flex-direction:column;gap:12px;padding-top:32px}
.lsw-mnav-foot .lsw-btn{width:100%}
.lsw-mnav-lang{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;margin-top:8px;
  border-top:1px solid var(--lsw-on-dark-border);
  font-family:var(--lsw-mono);font-size:11px;letter-spacing:.1em;
  color:var(--lsw-on-dark-4);text-transform:uppercase;
}

/* ==========================================================================
   RAIL POGLAVLJA
   Zamjenjuje CSS scroll-snap. Obrazloženje je u AUDIT.md 12.3: snap na
   stranici sa sekcijama razlicite visine ili ne radi (proximity) ili
   izbacuje korisnika iz visoke sekcije prije nego procita dno (mandatory).
   Rail daje namjeran skok na klik i tipkovnicu, a slobodan scroll ostaje.
   ========================================================================== */
.lsw-ch{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  z-index:120;display:none;
}
.lsw-ch ol{display:flex;flex-direction:column;gap:4px}
.lsw-ch-dot{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  gap:12px;padding:4px 0;background:none;border:none;cursor:pointer;
  min-height:24px;
}
.lsw-ch-label{
  font-family:var(--lsw-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--lsw-text-3);
  opacity:0;transform:translateX(8px);
  transition:opacity 180ms var(--motion-ease),transform 180ms var(--motion-ease);
  pointer-events:none;
}
.lsw-ch-mark{
  display:block;width:20px;height:2px;border-radius:2px;flex:none;
  background:var(--lsw-text-4);opacity:.36;
  transition:width 320ms var(--motion-ease),background 180ms,opacity 180ms;
}
.lsw-ch-dot:hover .lsw-ch-label,
.lsw-ch-dot:focus-visible .lsw-ch-label{opacity:1;transform:none}
.lsw-ch-dot:hover .lsw-ch-mark{opacity:.7;width:28px}
.lsw-ch-dot[aria-current="true"] .lsw-ch-mark{
  background:var(--lsw-accent);opacity:1;width:32px;
}
.lsw-ch-dot[aria-current="true"] .lsw-ch-label{opacity:1;transform:none;color:var(--lsw-text)}

/* Nad tamnim sekcijama rail se prebacuje na svijetlu tintu */
.lsw-ch.is-on-dark .lsw-ch-label{color:var(--lsw-on-dark-3)}
.lsw-ch.is-on-dark .lsw-ch-mark{background:var(--lsw-on-dark-2)}
.lsw-ch.is-on-dark .lsw-ch-dot[aria-current="true"] .lsw-ch-label{color:var(--lsw-on-dark)}
.lsw-ch.is-on-dark .lsw-ch-dot[aria-current="true"] .lsw-ch-mark{background:var(--lsw-accent)}

/* Samo na sirokim ekranima gdje ima mjesta uz sadrzaj */
@media (min-width:1280px){
  .lsw-ch[hidden]{display:block}
}
@media (prefers-reduced-motion:reduce){
  .lsw-ch-label,.lsw-ch-mark{transition:none}
  .lsw-mnav,.lsw-mnav-links a{transition:none}
  .lsw-mnav.is-open .lsw-mnav-links a{transition-delay:0s}
}