/* Floating pill navigation — logo left, menu button right, no bar behind.
   Header stays position: sticky so the pills remain visible while scrolling.
   Loaded last on every page so it wins over both the external sheets and the
   inline <style> used by the homepage. */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  height: auto !important;
  padding: 10px 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}
.site-header .nav,
.site-header .nav-container { pointer-events: none; }
.site-header .nav > *,
.site-header .nav-container > * { pointer-events: auto; }
.site-header::before,
.site-header::after { background: none !important; content: none !important; }

.wordmark,
.menu-button,
.desktop-nav {
  /* identical surface to the main-branch navbar, so the pills read the same */
  border-radius: 999px;
  /* hairline stroke, kept as light as it can be and still read */
  border: 1px solid rgba(243, 239, 228, .2);
  box-shadow: none;
  background: rgba(12, 13, 11, .84);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.wordmark {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  color: var(--rp-paper);
}

.menu-button {
  width: auto;
  min-width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f3efe4;
  font-family: inherit;
  display: none; /* hamburger is mobile only; .desktop-nav covers desktop */
}

.desktop-nav {
  padding: 4px;
  margin-left: auto;  /* group sits to the right, next to the wordmark pill */
  margin-right: 0;
}

@media (max-width: 980px) {
  .menu-button { display: inline-flex; }
}


/* Mobile menu grows out of the menu pill: pill radius and small scale at
   rest, expanding to a rounded panel anchored at the top right. The panel
   sits above all page content. */
.mobile-menu {
  inset: 62px 12px auto 12px !important;
  z-index: 60 !important;
  padding: 14px 14px 18px !important;
  border: 1px solid rgba(243, 239, 228, .2) !important;
  border-radius: 999px !important;
  background: rgba(12, 13, 11, .84) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
  transform-origin: top right;
  transform: scale(.18, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease,
    border-radius .34s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .34s;
}
.mobile-menu.is-open,
.mobile-menu.active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-radius: 20px !important;
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease,
    border-radius .34s cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}
/* Menu items: see the stagger block at the end of this file. */

/* No divider lines between nav items. Scoped to the anchors only so the
   pill outlines on the wordmark and menu button are left intact. */
.desktop-nav a,
.desktop-nav .nav-language,
.mobile-menu a {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* the EN/HR toggle keeps only its own rounded pill outline */
.desktop-nav .nav-language {
  border: 1px solid rgba(243, 239, 228, .2) !important;
}

/* One spacing value for the whole nav so the gap before the CTA matches
   the gap between every other item, on every page. */
.desktop-nav {
  gap: 4px !important;
  padding: 4px !important;
}
.desktop-nav .nav-cta {
  margin-left: 4px !important;
}

/* Mobile: keep the menu button at the base responsive size. The pill
   override widens it on desktop, so restore the tap target here without
   touching the pill outline. */
@media (max-width: 980px) {
  .menu-button {
    display: inline-flex;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
  }
}

/* Anchor landing precision for the Događanja / Events jump.
   The pill header is shorter than the old fixed bar, so the shared
   --header-height padding overshoots on desktop. Phones get extra
   breathing room so the section heading clears the header. */
#dogadanja,
#events {
  scroll-margin-top: 8px;
  scroll-padding-top: 8px;
}
@media (max-width: 760px) {
  #dogadanja,
  #events {
    scroll-margin-top: 84px;
    scroll-padding-top: 84px;
  }
}

/* A touch more leading on H1s so multi-line display type breathes. */
.hero h1,
.hero-intro h1,
.hero-intro h1.hero-title-question,
.section-title,
h1 {
  line-height: 1.02;
}
@media (max-width: 760px) {
  .hero h1,
  .hero-intro h1,
  .hero-intro h1.hero-title-question,
  .section-title,
  h1 {
    line-height: 1.06;
  }
}

/* Content width parity with the homepage.
   Sub-pages capped .main-content at 1200px and then inset .section a
   further 96px, landing at 1104px where the homepage renders 1232px at
   the same viewport. Both now use the same --page measure. */
.main-content {
  max-width: none;
  width: var(--page);
  margin-inline: auto;
}
.main-content > .section {
  width: 100%;
  max-width: none;
}
/* the base sheet also caps .main-content itself at 1180px and insets
   the section again on narrow screens; both are overridden above. */
.main-content,
.main-content > .section {
  width: var(--page) !important;
  max-width: none !important;
}
@media (max-width: 760px) {
  .main-content,
  .main-content > .section { width: calc(100% - 28px) !important; }
}

/* Exact source of the remaining 48px.
   Traced chain at a 1280 viewport:
     main.main-content  1232px @24  padding 24/24  -> content box 1184
     section.section     1136px @72 margin  24/24  -> 1184 - 48
   The homepage has neither inset. Dropping both lets the section fill
   the full 1232px measure, matching the root exactly. */
.main-content { padding-inline: 0 !important; }
.main-content > .section {
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* "Add to home screen" lives in the mobile menu (replaces the homepage card). */
.mobile-menu-install {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #0c0d0b;
  background: #7ce5ff;
  font: 800 .82rem/1 "Plus Jakarta Sans", "RP Jakarta", system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
/* Download icon (tray + arrow), drawn in the text colour. */
.mobile-menu-install::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10.5 12 15l4.5-4.5M4.5 16.5v2.5a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10.5 12 15l4.5-4.5M4.5 16.5v2.5a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mobile-menu-install[hidden],
.mobile-menu-install-help[hidden],
.mobile-menu-install-help [hidden] { display: none; }
.mobile-menu-install-help {
  margin: 10px 4px 0;
  color: rgba(243, 239, 228, .8);
  font-size: .8rem;
  line-height: 1.5;
}
.mobile-menu-install-help strong { color: #f3efe4; }


/* ── Mobile menu motion, matched to wosh.productions ──────────────────────
   The panel grows out of the burger pill (scale + radius, above); the burger
   bars fold into an X; the items fade up one after another once the panel
   has started opening; the page behind stops scrolling. */
:root { --nav-ease: cubic-bezier(0.22, 1, 0.36, 1); }

.menu-button .menu-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 20px;
}
.menu-button .menu-bars span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--nav-ease), opacity 200ms var(--nav-ease);
}
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--nav-ease), transform 260ms var(--nav-ease);
}
.mobile-menu.is-open > *,
.mobile-menu.active > * { opacity: 1; transform: none; }
.mobile-menu.is-open > :nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open > :nth-child(2) { transition-delay: 150ms; }
.mobile-menu.is-open > :nth-child(3) { transition-delay: 180ms; }
.mobile-menu.is-open > :nth-child(4) { transition-delay: 210ms; }
.mobile-menu.is-open > :nth-child(5) { transition-delay: 240ms; }
.mobile-menu.is-open > :nth-child(6) { transition-delay: 270ms; }
.mobile-menu.is-open > :nth-child(7) { transition-delay: 300ms; }
.mobile-menu.is-open > :nth-child(n + 8) { transition-delay: 330ms; }

/* Scroll lock on <html> only. Locking <body> too turns it into its own
   scroll container, and the sticky header then jumps to the top of the
   document (out of view) when the menu is opened after scrolling. */
@media (max-width: 980px) {
  html.menu-open { overflow: hidden; }
  html.menu-open body { overflow-x: clip; }
  .mobile-menu { overscroll-behavior: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu > *,
  .menu-button .menu-bars span { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .mobile-menu > * { transform: none; }
}

/* The base styles toggle the panel with display:none ↔ grid, which skips
   every transition. Keep it rendered on mobile (hidden by opacity, scale and
   visibility above, so it is neither visible, clickable nor focusable while
   closed) and remove it entirely on desktop. */
@media (max-width: 980px) {
  .mobile-menu,
  .mobile-menu[aria-hidden="true"],
  .mobile-menu[aria-hidden="false"] { display: grid !important; }
}
@media (min-width: 981px) {
  .mobile-menu { display: none !important; }
}

/* HR | EN switch (tools/render_discovery.py). Desktop: its own pill right
   after the nav group, always visible. Mobile: inside the burger menu only. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(243, 239, 228, .2);
  background: rgba(12, 13, 11, .84);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.lang-switch a {
  min-width: 40px;
  min-height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #9da296;
  font: 800 .74rem/1 "Plus Jakarta Sans", "RP Jakarta", system-ui, sans-serif;
  letter-spacing: .06em;
  text-decoration: none;
}
.lang-switch a:hover { color: #f3efe4; background: rgba(255, 255, 255, .08); }
.lang-switch a[aria-current] { color: #0c0d0b; background: #7ce5ff; }
.lang-switch a:focus-visible { outline: 2px solid #7ce5ff; outline-offset: 2px; }
/* sit 10px from the nav group; .desktop-nav's auto margin keeps both right */
@media (min-width: 981px) {
  .site-header .nav { column-gap: 10px; }
}
@media (max-width: 980px) {
  .site-header .nav > .lang-switch { display: none; }
}

/* In the menu: a "Jezik" row under the links, label left, switch right. */
.mobile-menu .lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(243, 239, 228, .12);
}
.mobile-menu .lang-row > span {
  color: #9da296;
  font: 700 .78rem/1 "Plus Jakarta Sans", "RP Jakarta", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mobile-menu .lang-switch a {
  min-width: 52px;
  min-height: 40px;
  border: 0 !important;
}

/* Seasonal shortcut, first in the homepage filter row (render_discovery
   SEASONAL_LINKS), so it is the first thing on screen on a phone. */
.filter-bar .seasonal-link {
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: 999px;
  color: #0c0d0b;
  background: #ff8a3d;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.filter-bar .seasonal-link:hover { background: #ffa463; }
.filter-bar .seasonal-link:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }

/* Each season its own colours; orange stays Halloween's. */
.filter-bar .seasonal-link.season-martinje {            /* young wine, the glass sways gently */
  gap: 8px;
  color: #fbeee0;
  background: #7a1f3d;
}
.filter-bar .seasonal-link .season-icon.season-glass { width: 14px; height: 17.5px; margin-top: 2px; }  /* viewBox cropped to the glass */
.filter-bar .seasonal-link .season-glass .wine { transform-box: view-box; transform-origin: 12px 9px; animation: season-sway 2.6s ease-in-out infinite; }
@keyframes season-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.filter-bar .seasonal-link.season-martinje:hover { background: #93264a; }
.filter-bar .seasonal-link.season-advent {              /* fir green, holly berries glowing in turn */
  gap: 8px;
  color: #fff;
  background: #1d6b43;
}
.filter-bar .seasonal-link.season-advent:hover { background: #237a4c; }
.filter-bar .seasonal-link .season-icon { width: 19px; height: 17px; flex: none; }
.filter-bar .seasonal-link .berry { animation: season-berry 2.4s ease-in-out infinite; }
.filter-bar .seasonal-link .berry:nth-of-type(2) { animation-delay: .8s; }
.filter-bar .seasonal-link .berry:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes season-berry { 50% { filter: drop-shadow(0 0 3px #ff4a5f) brightness(1.25); } }
.filter-bar .seasonal-link.season-nye {                 /* midnight sky, gold text, fireworks */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #f6dd8f;
  background-color: #141a33;
  background-image:
    radial-gradient(circle at 14% 30%, rgba(255, 255, 255, .55) .8px, transparent 1.2px),
    radial-gradient(circle at 46% 74%, rgba(255, 255, 255, .4) .8px, transparent 1.2px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, .5) .8px, transparent 1.2px),
    radial-gradient(circle at 92% 70%, rgba(255, 255, 255, .35) .8px, transparent 1.2px);
  box-shadow: inset 0 0 0 1.5px rgba(246, 221, 143, .45);
  --c1: #ffd23f; --c2: #ff4fa3; --c3: #3fd0ff;
}
.filter-bar .seasonal-link.season-nye:hover { background-color: #1c2446; }
/* One burst = 8 sparks on a ring that grows and fades; two bursts take turns at four spots. */
.filter-bar .seasonal-link.season-nye::before,
.filter-bar .seasonal-link.season-nye::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 23px 13px, var(--c1) 1.4px, transparent 1.9px), radial-gradient(circle at 20px 20px, var(--c2) 1.4px, transparent 1.9px),
    radial-gradient(circle at 13px 23px, var(--c1) 1.4px, transparent 1.9px), radial-gradient(circle at 6px 20px, var(--c2) 1.4px, transparent 1.9px),
    radial-gradient(circle at 3px 13px, var(--c1) 1.4px, transparent 1.9px), radial-gradient(circle at 6px 6px, var(--c2) 1.4px, transparent 1.9px),
    radial-gradient(circle at 13px 3px, var(--c1) 1.4px, transparent 1.9px), radial-gradient(circle at 20px 6px, var(--c2) 1.4px, transparent 1.9px),
    radial-gradient(circle at 13px 13px, var(--c3) 2px, transparent 3px);
}
.filter-bar .seasonal-link.season-nye::before { animation: season-burst-a 3.6s ease-out infinite; }
.filter-bar .seasonal-link.season-nye::after { --c1: #3fd0ff; --c2: #7dff8a; --c3: #ffd23f; animation: season-burst-b 3.6s ease-out infinite; }
@keyframes season-burst-a {
  0% { left: 8%; top: 3px; transform: scale(.15); opacity: 0; } 4% { opacity: 1; } 30% { transform: scale(1.25); opacity: 0; }
  50% { left: 62%; top: 8px; transform: scale(.15); opacity: 0; } 54% { opacity: 1; } 80% { transform: scale(1.25); opacity: 0; }
  100% { left: 62%; top: 8px; opacity: 0; }
}
@keyframes season-burst-b {
  0%, 24% { left: 38%; top: 12px; transform: scale(.15); opacity: 0; } 28% { opacity: 1; } 54% { transform: scale(1.3); opacity: 0; }
  74% { left: 84%; top: 2px; transform: scale(.15); opacity: 0; } 78% { opacity: 1; } 100% { left: 84%; top: 2px; transform: scale(1.3); opacity: 0; }
}
.filter-bar .seasonal-link.season-carnival {            /* confetti falling: strips and dots */
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 3px rgba(36, 26, 61, .9);
  background-color: #241a3d;
  background-image:
    linear-gradient(#ff4fa3, #ff4fa3), linear-gradient(#ffd23f, #ffd23f), linear-gradient(#3fd0ff, #3fd0ff),
    linear-gradient(#7dff8a, #7dff8a), linear-gradient(#ff8a3d, #ff8a3d), linear-gradient(#c77dff, #c77dff),
    radial-gradient(circle, #fff 1.5px, transparent 2px), radial-gradient(circle, #ffd23f 1.5px, transparent 2px);
  background-size: 3px 7px, 6px 3px, 3px 6px, 6px 3px, 3px 7px, 6px 3px, 6px 40px, 6px 40px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
  animation: season-confetti 3.2s linear infinite;
}
.filter-bar .seasonal-link.season-carnival:hover { background-color: #2f2250; }
@keyframes season-confetti {
  from { background-position: 9% -10px, 25% -24px, 41% -6px, 60% -30px, 77% -14px, 92% -20px, 33% 0, 70% 20px; }
  to { background-position: 12% 48px, 22% 46px, 44% 50px, 57% 44px, 80% 48px, 89% 46px, 33% 80px, 70% 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-bar .seasonal-link.season-carnival, .filter-bar .seasonal-link .berry,
  .filter-bar .seasonal-link .season-glass .wine,
  .filter-bar .seasonal-link.season-nye::before, .filter-bar .seasonal-link.season-nye::after { animation: none; }
}