header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px;
  background: #fff;
  color: var(--pd);
  border-bottom: 1px solid #dcebf4;
  box-shadow: 0 2px 12px rgba(20, 88, 122, .10);
}

a.logo {
  color: inherit;
  text-decoration: none
}

.logo img {
  display: block;
  height: 40px;
  width: auto
}

#auth {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0
}

#auth button {
  padding: 7px 12px;
  font-size: .85rem;
  background: none !important;
}

header .alt {
  color: #fff
}

.alt-link {
  color: var(--pd);
  text-decoration: none;
  margin-right: 10px;
  font-size: .9rem;
  opacity: .9
}

.alt-link:hover {
  opacity: 1;
  text-decoration: underline
}

a.nav-avatar {
  display: inline-flex;
  text-decoration: none
}

.nav-avatar .avatar {
  width: 38px;
  height: 38px;
  margin: 0;
  border: 2px solid var(--pd)
}

.nav-avatar .avatar-initial {
  background: var(--p);
  color: #fff;
  font-size: 1.15rem
}

@media (min-width: 768px) {
  header {
    padding: 12px 24px
  }

  #auth button {
    padding: 9px 16px;
    font-size: 1rem
  }
}

.hdr-link {
  margin: 0 auto 0 1rem;
  padding: 8px 8px;
  border-radius: 999px;
  color: var(--pd);
  font-weight: 600;
  text-decoration: none;
}

.hdr-link:hover {
  background: #eaf5fb;
  color: var(--pd);
}

.hdr-link:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 2px;
}

.hdr-link:not(:last-of-type) {
  margin-right: 0;
}

button#theme-toggle,
button.header-icon {
  padding: 8px 8px !important;
}

/* ---- hamburger meni (telefon/tablet) ---- */
header .menu-toggle {
  display: none;
  margin-left: auto;
}

.nav-menu {
  position: fixed;
  inset: auto;
  top: 64px;
  right: 8px;
  margin: 0;
  min-width: 230px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
  background: var(--card);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* display samo kad je otvoren (inače bi pregazio sakrivanje popover-a) */
.nav-menu:popover-open {
  display: flex;
}

/* ===== Hamburger meni: animacije ===== */

/* 1) pritisak pri kliku */
.menu-toggle {
  transition: transform .15s ease, box-shadow .15s ease;
}

.menu-toggle:active {
  transform: scale(.88);
}

/* 2) ikonica: hamburger -> X (zamena slike + blagi okret) */
.menu-toggle .ico {
  transition: transform .25s ease;
}

body:has(#nav-menu:popover-open) .menu-toggle .ico {
  /* !important jer je --icon zadat inline u HTML-u */
  --icon: url(/img/icons/ui/close.svg) !important;
  transform: rotate(90deg);
}

/* 3) otvaranje samog menija: spusti se i izbledi */
.nav-menu {
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease,
    overlay .2s ease allow-discrete, display .2s ease allow-discrete;
}

.nav-menu:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .nav-menu:popover-open {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
}

/* ljudi sa smanjenim pokretom: bez animacija */
@media (prefers-reduced-motion: reduce) {

  .menu-toggle,
  .menu-toggle .ico,
  .nav-menu {
    transition: none;
  }

  .menu-toggle:active {
    transform: none;
  }
}

.nav-menu .menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  border-radius: 10px;
}

.nav-menu .menu-link:hover {
  background: var(--bubble);
  filter: none;
}

.nav-menu .ico {
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.nav-menu .avatar {
  width: 26px;
  height: 26px;
  margin: 0;
}

.nav-menu hr {
  width: calc(100% - 12px);
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid var(--bd);
}

/* radio svira: nota uz stavku, bez prstena kao na dugmetu u zaglavlju */
.nav-menu .menu-link.radio-on {
  box-shadow: none;
}

.nav-menu .menu-link.radio-on .menu-label::after {
  content: ' ♪';
}

@media (min-width: 768px) {
  .nav-menu {
    top: 70px;
    right: 24px;
  }
}

/* telefon/tablet: samo logo + hamburger */
@media (max-width: 991px) {

  header.has-menu .hdr-link,
  header.has-menu #theme-toggle,
  header.has-menu .hdr-desktop,
  header.has-menu #auth {
    display: none !important;
  }

  header.has-menu button.menu-toggle {
    display: inline-flex;
  }
}

/* desktop: hamburger i meni ne postoje */
@media (min-width: 992px) {
  .nav-menu {
    display: none !important;
  }
}