/* Shared fullscreen mobile navigation — applied uniformly to all pages. */
@media (min-width: 801px) {
  .site-head .mobile-menu-toggle { display: none !important; }

  /* Desktop navigation: restore deliberate horizontal spacing after the CSS cleanup.
     Keep the links on one row and push the complete group to the right edge. */
  .site-head > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }

  .site-head .site-nav,
  .site-head .nav,
  .bio-header .bio-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(10px, 1vw, 18px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    margin-left: auto !important;
    padding: 4px 0 !important;
  }

  .site-head .site-nav > a,
  .site-head .nav > a,
  .bio-header .bio-nav > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    color: #EEEBD8 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
  }

  .site-head .site-nav > a:hover,
  .site-head .site-nav > a:focus-visible,
  .site-head .nav > a:hover,
  .site-head .nav > a:focus-visible,
  .bio-header .bio-nav > a:hover,
  .bio-header .bio-nav > a:focus-visible {
    color: #0E2619 !important;
    background: #F4DC3C !important;
  }
}

@media (max-width: 800px) {
  /* Canonical mobile header: identical on the homepage and every subpage. */
  .site-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    margin-bottom: 0 !important;
    padding: 10px 14px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    background: #0E2619 !important;
    color: #EEEBD8 !important;
    border-bottom: 1px solid #2E4C39 !important;
    backdrop-filter: none !important;
  }

  .site-head > div {
    position: relative !important;
    width: 100% !important;
    max-width: 1360px !important;
    min-height: 33px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .site-head > div > a[href="#top"],
  .site-head .wordmark,
  .site-head .logo {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    color: #F4DC3C !important;
    background: #0E2619 !important;
    font-family: 'Big Shoulders Display', sans-serif !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

@media (max-width: 800px) {
  .site-head .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin-left: auto !important;
    padding: 0 12px !important;
    color: #F4DC3C !important;
    background: #0E2619 !important;
    border: 2px solid #EEEBD8 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #F4DC3C !important;
    font: 600 12px "IBM Plex Mono", monospace !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  body:not(.nav-open) .site-head .site-nav,
  body:not(.nav-open) .site-head .nav,
  body:not(.nav-open) .site-head .bio-nav {
    display: none !important;
  }
  html.menu-open,
  body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.nav-open .site-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 6000 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.nav-open .site-head::before,
  body.nav-open .site-head::after,
  body.nav-open .site-head .wordmark,
  body.nav-open .site-head .logo,
  body.nav-open .site-head > div > a[href="#top"] {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
  }

  body.nav-open .site-head .site-nav,
  body.nav-open .site-head .nav,
  body.nav-open .site-head .bio-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6001 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: max(76px, calc(env(safe-area-inset-top) + 66px)) clamp(26px, 8vw, 64px) max(28px, calc(env(safe-area-inset-bottom) + 24px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #0E2619 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* No decorative logo/tagline, panel frame, or page-specific pseudo elements. */
  body.nav-open .site-head .site-nav::before,
  body.nav-open .site-head .site-nav::after,
  body.nav-open .site-head .nav::before,
  body.nav-open .site-head .nav::after,
  body.nav-open .site-head .bio-nav::before,
  body.nav-open .site-head .bio-nav::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.nav-open .site-head .site-nav a,
  body.nav-open .site-head .nav a,
  body.nav-open .site-head .bio-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: clamp(58px, 9.4dvh, 82px) !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    color: #EEEBD8 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(238, 235, 216, .24) !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font: 900 clamp(34px, 8.4vw, 54px)/.9 "Big Shoulders Display", Impact, sans-serif !important;
    letter-spacing: -.015em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    transition: color .16s ease, padding-left .16s ease !important;
  }

  body.nav-open .site-head .site-nav a:last-child,
  body.nav-open .site-head .nav a:last-child,
  body.nav-open .site-head .bio-nav a:last-child {
    border-bottom: 0 !important;
  }

  body.nav-open .site-head .site-nav a:hover,
  body.nav-open .site-head .site-nav a:focus-visible,
  body.nav-open .site-head .nav a:hover,
  body.nav-open .site-head .nav a:focus-visible,
  body.nav-open .site-head .bio-nav a:hover,
  body.nav-open .site-head .bio-nav a:focus-visible {
    color: #F4DC3C !important;
    background: transparent !important;
    padding-left: 10px !important;
    outline: 0 !important;
  }

  body.nav-open .site-head .mobile-menu-toggle {
    position: fixed !important;
    top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
    right: max(16px, calc(env(safe-area-inset-right) + 16px)) !important;
    z-index: 6002 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    color: #0E2619 !important;
    background: #F4DC3C !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 600 12px "IBM Plex Mono", monospace !important;
    text-transform: uppercase !important;
  }

  body.nav-open .booking-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* The floating booking CTA must never sit above the Lily game. */
  body.lily-game-open .booking-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Unified flat button treatment: mobile menu toggle + the bio-page show CTA. */
@media (max-width: 800px) {
  .site-head .mobile-menu-toggle,
  body.subpage-page .site-head .mobile-menu-toggle,
  body.nav-open .site-head .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    color: #0E2619 !important;
    background: #F4DC3C !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    font: 700 12px "IBM Plex Mono", monospace !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    transition: background-color .15s ease, color .15s ease !important;
  }

  .site-head .mobile-menu-toggle:hover,
  .site-head .mobile-menu-toggle:focus-visible,
  body.subpage-page .site-head .mobile-menu-toggle:hover,
  body.subpage-page .site-head .mobile-menu-toggle:focus-visible {
    color: #0E2619 !important;
    background: #EEEBD8 !important;
    box-shadow: none !important;
  }

  body.nav-open .site-head .mobile-menu-toggle {
    position: fixed !important;
    top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
    right: max(16px, calc(env(safe-area-inset-right) + 16px)) !important;
    z-index: 6002 !important;
  }
}

/* Match "Pogledaj nastupe" to the site's regular flat CTA buttons. */
.bio-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  color: #0E2619 !important;
  background: #F4DC3C !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 700 12px "IBM Plex Mono", monospace !important;
  letter-spacing: .025em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.bio-cta a:hover,
.bio-cta a:focus-visible {
  color: #F4DC3C !important;
  background: #0E2619 !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  .bio-cta a { min-height: 46px !important; padding: 0 18px !important; }
}
}

/* FINAL DESKTOP NAV SPACING (2026-11-02)
   Identical link spacing over the hero and in the solid bar, so the links don't shift
   when the navbar switches state. Only the background changes. */
@media (min-width: 801px) {
  body:not(.subpage-page) .site-head .site-nav,
  body.nav-solid:not(.subpage-page) .site-head .site-nav,
  body:not(.nav-solid):not(.subpage-page) .site-head .site-nav {
    gap: clamp(10px, 1vw, 16px) !important;
    padding: 5px 10px !important;
  }
}

/* SUBPAGE NAV MATCHES HOMEPAGE (2026-11-02)
   On desktop, Nastupi / O meni / show pages use exactly the same navbar as the homepage's solid state:
   same bar height and bottom line, same link size, padding, letter-spacing and gaps. */
@media (min-width: 801px) {
  body.subpage-page .site-head {
    min-height: 72px !important;
    padding: 16px 32px !important;
    background: #0E2619 !important;
    border-bottom: 1px solid #2E4C39 !important;
    box-sizing: border-box !important;
  }
  body.subpage-page .site-head .head-row { align-items: center !important; }
  body.subpage-page .site-head .nav {
    gap: clamp(10px, 1vw, 16px) !important;
    padding: 5px 10px !important;
    background: transparent !important;
  }
  body.subpage-page .site-head .nav > a {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    padding: 8px 4px !important;
  }
}
@media (min-width: 801px) {
  body.subpage-page .site-head .nav > a:hover,
  body.subpage-page .site-head .nav > a:focus-visible {
    background: #F4DC3C !important;
    color: #0E2619 !important;
    font-weight: 800 !important;
  }
}

/* Mobile-only safety layer: guarantee a solid forest-green fullscreen menu backdrop.
   Kept isolated to the open mobile state so desktop navigation remains untouched. */
@media (max-width: 800px) {
  html.menu-open,
  body.nav-open {
    background-color: #0E2619 !important;
  }

  body.nav-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 5999 !important;
    display: block !important;
    background: #0E2619 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.nav-open .site-head .site-nav,
  body.nav-open .site-head .nav,
  body.nav-open .site-head .bio-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6001 !important;
    background: #0E2619 !important;
    background-color: #0E2619 !important;
    background-image: none !important;
    opacity: 1 !important;
    isolation: isolate !important;
  }

  body.nav-open .site-head {
    z-index: 6000 !important;
  }
}