/* Shared site navigation (desktop bar + mobile menu).
   Colors are CSS variables with the homepage palette as default. A page can
   override them via data-* attributes on the nav.js <script> tag, or by
   defining the variables itself:
     --nav-logo   wordmark, menu numbers, hamburger/menu-link hover
     --nav-link   link and hamburger-bar color
     --nav-hover  link hover (and shadow of the scrolled bar by default)
     --nav-shadow offset shadow of the scrolled bar
     --nav-border border of the scrolled bar and mobile menu
     --nav-bg     scrolled bar and mobile menu background
   Extracted from the homepage style.css. Loaded automatically by nav.js. */

/* Homepage gets this from a global reset; other pages may not. */
#hp-nav,
#hp-nav *,
#hp-mobile-menu,
#hp-mobile-menu * {
    box-sizing: border-box;
}

#hp-nav {
    position: fixed ; top: 0 ; left: 0 ;
    width: 100% ; padding: 24px 48px ;
    display: flex ; justify-content: space-between ; align-items: center ;
    z-index: 999999 ; background: transparent ;
    box-shadow: none ; border: none ; visibility: visible ;
}
#hp-nav .logo-text { font-family: 'Reenie Beanie', cursive ; font-size: 34px ; font-weight: bold ; color: var(--nav-logo, #4755f5) ; line-height: 1 ; cursor: pointer ; text-decoration: none ; display: inline-block ; }
#hp-nav ul { display: flex ; gap: 48px ; list-style: none ; margin: 0 ; padding: 0 ; }
#hp-nav ul li { margin: 0 ; padding: 0 ; }
#hp-nav ul a { font-family: 'Reenie Beanie', cursive ; font-size: 28px ; text-decoration: none ; color: var(--nav-link, #0d0d0d) ; display: inline-block ; transition: transform 0.2s ease, color 0.2s ease ; }
#hp-nav ul a:hover { transform: scale(1.1) rotate(-3deg) ; color: var(--nav-hover, #ff59c7) ; }

/* HAMBURGER BUTTON — hidden on desktop */
#hp-hamburger {
    display: none ;
    flex-direction: column ;
    justify-content: center ;
    gap: 6px ;
    cursor: pointer ;
    background: none ;
    border: none ;
    padding: 6px ;
    border-radius: 8px ;
    z-index: 1000001 ;
}
#hp-hamburger span {
    display: block ;
    width: 26px ;
    height: 3px ;
    background: var(--nav-link, #0d0d0d) ;
    border-radius: 3px ;
    transition: background 0.2s ease ;
}
#hp-hamburger:hover span { background: var(--nav-logo, #4755f5) ; }

/* MOBILE MENU PANEL — hidden by default, shown via JS + media query */
#hp-mobile-menu {
    display: none;
    position: fixed ;
    top: 14px ;
    right: 14px ;
    z-index: 1000000 ;
    background: var(--nav-bg, #ffffff) ;
    border-radius: 22px ;
    padding: 20px 30px 28px ;
    box-shadow: 0 4px 32px rgba(0,0,0,0.14), 6px 6px 0px var(--nav-logo, #4755f5) ;
    border: 2.5px solid var(--nav-border, #0d0d0d) ;
    min-width: 216px ;
    transform: scale(0.9) translateY(-14px) ;
    opacity: 0 ;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
    pointer-events: none ;
}
#hp-mobile-menu.hp-menu-open {
    opacity: 1 ;
    transform: scale(1) translateY(0) ;
    pointer-events: auto ;
}
#hp-mobile-menu-close {
    position: absolute ;
    top: 16px ;
    right: 18px ;
    background: none ;
    border: none ;
    font-size: 22px ;
    cursor: pointer ;
    color: var(--nav-link, #0d0d0d) ;
    line-height: 1 ;
    padding: 0 ;
    font-family: 'Montserrat', sans-serif ;
    font-weight: 900 ;
    transition: color 0.2s ease ;
}
#hp-mobile-menu-close:hover { color: var(--nav-hover, #ff59c7) ; }
#hp-mobile-menu nav ul {
    list-style: none ;
    margin: 36px 0 0 ;
    padding: 0 ;
    display: flex ;
    flex-direction: column ;
    gap: 0 ;
}
#hp-mobile-menu nav ul li {
    border-bottom: 1.5px solid rgba(0,0,0,0.08) ;
    margin: 0 ;
    padding: 0 ;
}
#hp-mobile-menu nav ul li:last-child { border-bottom: none ; }
#hp-mobile-menu nav ul li a {
    display: flex ;
    align-items: center ;
    gap: 12px ;
    padding: 12px 0 ;
    text-decoration: none ;
    color: var(--nav-link, #0d0d0d) ;
    font-family: 'Montserrat', sans-serif ;
    font-size: 18px ;
    font-weight: 900 ;
    text-transform: uppercase ;
    letter-spacing: -0.03em ;
    transition: color 0.2s ease, transform 0.2s ease ;
    min-height: 44px ;
}
#hp-mobile-menu nav ul li a:hover { color: var(--nav-logo, #4755f5) ; transform: translateX(4px) ; }
#hp-mobile-menu .menu-num {
    font-family: 'Montserrat', sans-serif ;
    font-size: 10px ;
    font-weight: 900 ;
    color: var(--nav-logo, #4755f5) ;
    letter-spacing: 0.5px ;
    flex-shrink: 0 ;
}


/* ── TABLET + MOBILE (≤ 900px) ── */
@media (max-width: 900px) {
    #hp-nav { padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)) ; flex-wrap: nowrap ; }
    #hp-nav ul { display: none ; }
    #hp-hamburger { display: flex ; }
    #hp-mobile-menu { display: block; }
}

/* ── SCROLLED STATE: solid bar once the page is scrolled ── */
#hp-nav {
    border-bottom: 2.5px solid transparent ;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease ;
}
#hp-nav.is-scrolled {
    background: color-mix(in srgb, var(--nav-bg, #ffffff) 94%, transparent) ;
    -webkit-backdrop-filter: blur(8px) ;
    backdrop-filter: blur(8px) ;
    border-bottom-color: var(--nav-border, #0d0d0d) ;
    box-shadow: 0 5px 0 var(--nav-shadow, var(--nav-hover, #ff59c7)) ;
}
@media (prefers-reduced-motion: reduce) {
    #hp-nav { transition: none ; }
}

/* ── SOLID MODE (data-solid on the script tag) ──
   Bar is opaque with its border from the very top; only the offset shadow
   still appears on scroll. The page is pushed down by the bar's height. */
#hp-nav.is-solid,
#hp-nav.is-solid.is-scrolled {
    background: var(--nav-bg, #ffffff) ;
    -webkit-backdrop-filter: none ;
    backdrop-filter: none ;
    border-bottom-color: var(--nav-border, #0d0d0d) ;
}
body.nav-padded { padding-top: var(--nav-height, 85px) ; }

/* ── "PÔLES" DROPDOWN (desktop bar) ──
   Opens on hover, keyboard focus, or click/tap. Colors follow the page's nav variables. */
#hp-nav .nav-has-menu { position: relative ; }
#hp-nav .nav-menu-toggle {
    font-family: 'Reenie Beanie', cursive ; font-size: 28px ; line-height: inherit ;
    color: var(--nav-link, #0d0d0d) ; background: none ; border: 0 ; padding: 0 ; margin: 0 ;
    cursor: pointer ; display: inline-block ; transition: color 0.2s ease ;
}
#hp-nav .nav-menu-toggle::after {
    content: '▾' ; font-family: sans-serif ; font-size: 14px ; margin-left: 6px ;
    display: inline-block ; transition: transform 0.2s ease ;
}
#hp-nav .nav-has-menu:hover .nav-menu-toggle,
#hp-nav .nav-has-menu:focus-within .nav-menu-toggle,
#hp-nav .nav-has-menu.is-open .nav-menu-toggle { color: var(--nav-hover, #ff59c7) ; }
#hp-nav .nav-has-menu:hover .nav-menu-toggle::after,
#hp-nav .nav-has-menu:focus-within .nav-menu-toggle::after,
#hp-nav .nav-has-menu.is-open .nav-menu-toggle::after { transform: rotate(180deg) ; }

/* the wrapper's top padding bridges the gap so the menu doesn't close while the pointer travels to it */
#hp-nav .nav-menu-wrap {
    position: absolute ; top: 100% ; left: 50% ; padding-top: 14px ; z-index: 5 ;
    transform: translateX(-50%) translateY(-6px) ;
    opacity: 0 ; visibility: hidden ; pointer-events: none ;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ;
}
#hp-nav .nav-has-menu:hover .nav-menu-wrap,
#hp-nav .nav-has-menu:focus-within .nav-menu-wrap,
#hp-nav .nav-has-menu.is-open .nav-menu-wrap {
    opacity: 1 ; visibility: visible ; pointer-events: auto ;
    transform: translateX(-50%) translateY(0) ;
}
#hp-nav ul.nav-menu {
    display: block ; gap: 0 ; list-style: none ; margin: 0 ; padding: 10px 8px ; min-width: 190px ;
    background: var(--nav-bg, #ffffff) ; border: 2.5px solid var(--nav-border, #0d0d0d) ; border-radius: 18px ;
    box-shadow: 5px 5px 0 var(--nav-shadow, var(--nav-hover, #ff59c7)) ;
}
#hp-nav ul.nav-menu li { margin: 0 ; padding: 0 ; }
#hp-nav ul.nav-menu a,
#hp-nav ul.nav-menu .is-soon {
    display: block ; padding: 6px 16px ; border-radius: 10px ; white-space: nowrap ; text-decoration: none ;
    font-family: 'Reenie Beanie', cursive ; font-size: 28px ; line-height: 1.15 ; color: var(--nav-link, #0d0d0d) ;
}
#hp-nav ul.nav-menu a:hover {
    transform: none ; color: var(--nav-hover, #ff59c7) ;
    background: color-mix(in srgb, var(--nav-hover, #ff59c7) 12%, transparent) ;
}
#hp-nav ul.nav-menu .is-soon { opacity: 0.45 ; cursor: default ; }
#hp-nav ul.nav-menu small, #hp-mobile-menu .is-soon small {
    font-family: 'Montserrat', sans-serif ; font-size: 9px ; letter-spacing: 1px ; text-transform: uppercase ; margin-left: 6px ;
}

/* ── "PÔLES" in the mobile menu: label with its poles listed underneath ── */
#hp-mobile-menu .menu-label {
    display: flex ; align-items: center ; gap: 12px ; padding: 12px 0 4px ;
    font-family: 'Montserrat', sans-serif ; font-size: 18px ; font-weight: 900 ;
    text-transform: uppercase ; letter-spacing: -0.03em ; color: var(--nav-link, #0d0d0d) ;
}
#hp-mobile-menu nav ul.menu-sub {
    list-style: none ; margin: 0 0 10px 6px ; padding: 0 0 0 14px ; display: flex ; flex-direction: column ;
    border-left: 2px solid var(--nav-logo, #4755f5) ;
}
#hp-mobile-menu nav ul.menu-sub li { border-bottom: none ; }
#hp-mobile-menu nav ul.menu-sub li a,
#hp-mobile-menu nav ul.menu-sub li .is-soon {
    display: block ; min-height: 0 ; padding: 5px 0 ; gap: 0 ;
    font-family: 'Montserrat', sans-serif ; font-size: 14px ; font-weight: 900 ; letter-spacing: 0 ;
    text-transform: uppercase ; text-decoration: none ; color: var(--nav-link, #0d0d0d) ;
}
#hp-mobile-menu nav ul.menu-sub li .is-soon { opacity: 0.4 ; }
#hp-mobile-menu nav ul.menu-sub li a:hover { color: var(--nav-logo, #4755f5) ; transform: translateX(4px) ; }