/* =========================================================
   demo.css – zajedničko za sva 4 demo sajta
   (demo traka na vrhu, širina sadržaja, hamburger meni).

   Boje NISU ovdje. Svaki demo sajt u svom CSS fajlu postavi
   varijable, a ovaj fajl ih samo koristi:
     --banner-bg, --banner-text, --banner-link   (demo traka)
     --lang-idle, --lang-active, --lang-line     (BS / EN)
     --menu-bg, --menu-line, --menu-text         (hamburger meni)
   ========================================================= */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Demo traka ---------- */
.demo-banner {
  background: var(--banner-bg);
  color: var(--banner-text);
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.demo-banner-back,
.demo-banner-back:hover {
  color: var(--banner-link);
  font-weight: 600;
}

.demo-banner-back:hover {
  text-decoration: underline;
}

.demo-banner .lang-switch {
  gap: 8px;
  margin-left: 8px;
  padding-left: 20px;
  /* color-mix: boja teksta trake pomiješana s providnim = blijeda linija */
  border-left: 1px solid color-mix(in srgb, var(--banner-text) 35%, transparent);
}

.demo-banner .lang-switch button {
  padding: 3px 2px;
  font-size: 12px;
  font-weight: 600;
}

.demo-banner .lang-switch .sep {
  opacity: 0.5;
}

/* ---------- Hamburger meni (manji ekrani) ----------
   Isti princip kao na početnoj: menu.js dodaje klasu .is-open
   na <header class="nav">, a CSS prikaže ili sakrije meni.

   Selektori počinju s ".nav" da budu "jači" od pravila u CSS-u
   pojedinog demo sajta (taj fajl se učitava POSLIJE ovog). */
.menu-toggle {
  display: none;
}

@media (max-width: 820px) {
  .nav {
    position: relative;
  }

  /* Logo i hamburger uvijek u istom redu (bez prelamanja).
     .nav.container (dvije klase) je jače od .nav u CSS-u demo sajta. */
  .nav.container {
    flex-wrap: nowrap;
    column-gap: 16px;
  }

  .nav .logo {
    min-width: 0;   /* logo se smije suziti ako baš mora */
  }

  .nav .menu-toggle {
    flex-shrink: 0; /* hamburger se nikad ne sužava */
  }

  .nav .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--menu-line);
    border-radius: 6px;
    color: var(--menu-text);
    cursor: pointer;
  }

  .menu-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav.is-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .menu-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.is-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 28px;
    background: var(--menu-bg);
    border-top: 1px solid var(--menu-line);
    border-bottom: 1px solid var(--menu-line);
  }

  .nav.is-open .nav-links {
    display: flex;
  }

  .nav .nav-links > a:not(.nav-cta) {
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--menu-line);
  }

  .nav .nav-links .nav-cta {
    margin-top: 24px;
    padding: 16px 20px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle-bar { transition: none; }
}