<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" {{ACTIVE_NASLOVNICA}}>Začetna</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" {{ACTIVE_PONUDBA}}>Učenje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi na medkulturno posredovanje s podmenijem -->
            <div class="dropdown">
                <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" class="dropbtn" {{ACTIVE_VKLJUCEVANJE}}>Medkulturno povezovanje</a>
                <div class="dropdown-content">
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" class="dropdown-main-link">Pregled strani</a>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/#individualno">Načini posredovanja</a>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/#oblike">Vrste posredovanja</a>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/#sodelujem">S kom sodelujem</a>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/#potek">Potek sodelovanja in cena</a>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/#zakaj">Zakaj izbrati Prosberry</a>
                </div>
            </div>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" {{ACTIVE_DELAVNICE}}>Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <a href="/delavnice/" class="dropdown-main-link">Pregled delavnic</a>
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" {{ACTIVE_KDO_SEM}}>Kdo sem</a>
            <a href="/cene-in-reference/" {{ACTIVE_CENE}}>Cene in reference</a>
            <a href="/pogosta-vprasanja/" {{ACTIVE_FAQ}}>Vprašanja</a>
            <a href="/blog/" {{ACTIVE_BLOG}}>Blog</a>
            <a href="/kontakt/" {{ACTIVE_KONTAKT}}>Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
