/* ============================================================
   Alkemijana - Izbornik (prefiks nd-)
   ------------------------------------------------------------
   Gore NEMA trake: samo logo (lijevo) i minimalan ☰ (desno) na
   prozirnoj podlozi. Klik na ☰ spusti panel odozgo preko cijele
   širine - isti obrazac kao mobilni izbornik u verziji 1, samo sada
   na svim veličinama ekrana.

   VAŽNO: `#navLinks` i `.nav-links a` zadržavaju stara imena jer ih
   `showPage()` i `openPost()` u js/app.js traže po njima. Tipografija
   linkova ostaje u style.css; ovdje je samo raspored i sam panel.

   Logika: `toggleMenu()` / `closeMenu()` / `goHome()` u js/app.js.
   ============================================================ */

/* Traka mora biti IZNAD panela da logo i ☰ ostanu vidljivi i
   klikabilni dok je izbornik otvoren. */
#main-nav { z-index: 210; }

/* ---- Gumb ☰ (minimalan) ---- */

.nd-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--lavender);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.25s, transform 0.25s;
}

@media (hover: hover) {
  .nd-toggle:hover { transform: scale(1.08); }
}

.nd-icon {
  position: absolute;
  font-size: 1.55rem;
  line-height: 1;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.3, 0.9, 0.35, 1);
}

.nd-icon-close { font-size: 1.3rem; opacity: 0; transform: rotate(-90deg); }

.nd-toggle[aria-expanded="true"] .nd-icon-open  { opacity: 0; transform: rotate(90deg); }
.nd-toggle[aria-expanded="true"] .nd-icon-close { opacity: 1; transform: none; }

/* ---- Okvir oko logotipa koji se pojavi TEK pri scrollanju ----
   --nav-scroll (0-1) postavlja js/app.js iz pozicije scrolla. Početna
   se ne scrolla pa tamo ostaje 0 i logo je uvijek čist. */

.logo {
  position: relative;
  padding: 0.35rem 1.05rem;
  border-radius: 0;
  z-index: 0;
}

/* Meki ovoj koji se PRELIJEVA u pozadinu - bez obruba i bez oštrog ruba.
   Radijalni preljev iz boje pozadine prema prozirnom, uz `blur()` da rub
   bude potpuno mekan. Namjerno NIJE `border` + `border-radius` (to daje
   tvrdu pilulu) i NIJE `backdrop-filter` (taj uvijek ima oštar rez). */
.logo::before {
  content: '';
  position: absolute;
  inset: -0.9rem -2.2rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--bg-deep) 0%,
    var(--bg-deep) 38%,
    rgba(0, 0, 0, 0) 76%);
  filter: blur(7px);
  opacity: calc(var(--nav-scroll, 0) * 0.92);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ============================================================
   ALATNA TRAKA (sve stranice OSIM početne)
   ------------------------------------------------------------
   Početna je slide deck - gore ostaje samo logo + ☰ na prozirnoj
   podlozi. Ostale stranice scrollaju pa im sadržaj mora ići ISPOD
   trake s podlogom, kao u verziji 1.

   Klase postavlja syncNavBar() u js/app.js:
     html.nd-chrome  → traka ima podlogu, blur i obrub (sve širine)
     html.nd-bar-on  → linkovi su preseljeni u traku, ☰ je skriven
                       (samo ≥ NAV_BAR_MIN, jer 7 linkova + logo
                        ispod toga ne stane u jedan red)
   ============================================================ */

html.nd-chrome #main-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  pointer-events: auto;
  transition: top 0.3s, background-color 0.6s ease;
}

/* Meki ovoj oko logotipa treba samo prozirnoj traci - kad traka ima
   svoju podlogu, ovoj bi bio mrlja iza logotipa. */
html.nd-chrome .logo::before { opacity: 0; }

/* Traka je visoka ~102 px (logo + prekidač teme), a `.page` u style.css
   rezervira 6rem = 96 px - sadržaj bi zavirio ispod trake. */
html.nd-chrome .page { padding-top: 7.5rem; }

/* Posuda u koju se sele linkovi i prekidač teme. Na početnoj je prazna
   (širina 0) pa raspored `space-between` ostaje netaknut. */
.nd-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nd-bar:empty { flex: 0 0 auto; }

.nd-bar .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.5rem);
  margin: 0;
  padding: 0;
}

/* Linkovi su u traci → gumb ☰ i ladica nemaju svrhu (podnožje ladice
   ostaje prazno pa mu se skriva i obrub) */
html.nd-bar-on .nd-toggle { display: none; }
html.nd-bar-on .nd-foot   { display: none; }

/* Prekidač teme u traci: okrugli gumb s ikonom (kao u verziji 1),
   bez natpisa. U ladici ostaje široki gumb s natpisom. */
.nd-bar .nd-theme {
  width: 42px;
  height: 42px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.nd-bar .nd-theme .theme-toggle-icon { left: auto; }
.nd-bar .nd-theme-label { display: none; }

/* ---- Zatamnjenje iza panela ---- */

.nd-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(6, 8, 15, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
}

:root[data-theme="light"] .nd-overlay {
  background: rgba(46, 39, 82, 0.26);
}

.nd-overlay.nd-show { opacity: 1; }

/* `hidden` sam po sebi ne pobjeđuje `position:fixed`, pa eksplicitno */
.nd-overlay[hidden] { display: none; }

/* ---- Panel koji sklizne odozgo ---- */

.nd-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 5.6rem 2rem 2rem;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.35, 1), visibility 0.3s;
}

.nd-panel.nd-open {
  transform: none;
  visibility: visible;
}

/* ---- Popis linkova ---- */

/* Stavke su poravnate DESNO - u istoj okomici kao gumb ☰ iznad njih. */
.nd-panel {
  text-align: right;
}

.nd-panel .nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.nd-panel .nav-links a {
  display: inline-block;
  width: fit-content;
}

@media (hover: hover) {
  .nd-panel .nav-links a:hover { color: var(--lavender); }
}

/* ---- Prekidač teme ---- */

.nd-foot {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.nd-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}

@media (hover: hover) {
  .nd-theme:hover {
    border-color: var(--lavender);
    background: rgba(168, 144, 208, 0.08);
    color: var(--lavender);
  }
}

/* Ikone su apsolutne (mjesec i sunce se izmjenjuju na istom mjestu),
   pa im label mora ostaviti mjesta. */
.nd-theme .theme-toggle-icon {
  left: 1.1rem;
  color: var(--lavender);
}

.nd-theme-label { margin-left: 1.7rem; }

/* ---- Zaključavanje scrolla iza otvorenog izbornika ----
   --nd-sbw postavlja lockScrollForMenu() u js/app.js; kompenzira
   nestanak scrollbara da stranica ne poskoči udesno. */

html.nd-locked,
html.nd-locked body {
  overflow: hidden;
}

html.nd-locked body { padding-right: var(--nd-sbw, 0px); }
html.nd-locked #main-nav { padding-right: calc(3rem + var(--nd-sbw, 0px)); }

@media (max-width: 768px) {
  html.nd-locked #main-nav { padding-right: calc(1.5rem + var(--nd-sbw, 0px)); }
}

/* ---- Desktop: izbornik izlazi S DESNE STRANE ----
   Na mobitelu ostaje panel odozgo (obrazac iz verzije 1); na desktopu
   je ploča uz desni rub, tik ispod gumba ☰, pa miš ne putuje preko
   ekrana. Mijenja se samo geometrija i smjer klizanja - sve ostalo
   (pozadina, blur, brzina) je zajedničko. */

@media (min-width: 769px) {
  .nd-panel {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(340px, 42vw);
    padding: 6.2rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    border-bottom: none;
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 55px rgba(0, 0, 0, 0.3);
    transform: translateX(101%);
  }

  :root[data-theme="light"] .nd-panel {
    box-shadow: -20px 0 55px rgba(106, 78, 160, 0.14);
  }

  .nd-panel.nd-open { transform: none; }

  .nd-panel .nav-links { gap: 1.5rem; }

  /* prekidač teme na dno ploče */
  .nd-foot { margin-top: auto; }
}

/* ---- Mobitel ----
   Gornji padding mora biti VEĆI od visine trake (~102 px s logotipom i
   prekidačem teme), inače prva stavka izbornika završi ispod trake -
   panel klizne odozgo pa mu traka stoji preko vrha. */
@media (max-width: 768px) {
  .nd-panel { padding: 7.4rem 1.5rem 2rem; }
  .nd-panel .nav-links { gap: 1.2rem; }
}

/* ---- Pristupačnost ---- */

@media (prefers-reduced-motion: reduce) {
  .nd-panel,
  .nd-overlay,
  .nd-icon,
  .logo::before {
    transition-duration: 0.01ms !important;
  }
}