/* 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;
}
.mobile-menu.is-open > a,
.mobile-menu.active > a {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .24s ease;
}
.mobile-menu.is-open > a:nth-child(1), .mobile-menu.active > a:nth-child(1) { transition-delay: .1s; }
.mobile-menu.is-open > a:nth-child(2), .mobile-menu.active > a:nth-child(2) { transition-delay: .13s; }
.mobile-menu.is-open > a:nth-child(3), .mobile-menu.active > a:nth-child(3) { transition-delay: .16s; }
.mobile-menu.is-open > a:nth-child(4), .mobile-menu.active > a:nth-child(4) { transition-delay: .19s; }
.mobile-menu.is-open > a:nth-child(5), .mobile-menu.active > a:nth-child(5) { transition-delay: .22s; }
.mobile-menu.is-open > a:nth-child(6), .mobile-menu.active > a:nth-child(6) { transition-delay: .25s; }
.mobile-menu.is-open > a, .mobile-menu.active > a { opacity: 1; transform: none; }

/* 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;
}