{# Header Creative #}
<header class="header-creative">
    <div class="container">
        {% set siteName = site.internalName|param(app.request.server.get('REQUEST_URI')) %}
        <div class="hc-wrapper">
            <a href="{{ path('home'|route(app.request.server.get('REQUEST_URI')), siteName) }}" class="logo-creative">
                {% if site.logo %}
                    <img src="{{ vich_uploader_asset(site, 'logoFile') }}" alt="{{ site.name }}" height="45"/>
                {% else %}
                    <img src="{{ asset('assets/img/logo_site_default.png') }}" alt="{{ site.name }}" height="45"/>
                {% endif %}
                {% if not site.nameInLogo %}
                    <span class="site-name-creative">{{ site.name }}</span>
                {% endif %}
            </a>
            <button class="header-btn-mobile" aria-label="Toggle navigation">
                <span class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </button>
            <nav><ul class="nav-list-creative">{% for p in site.pages|filter(v => v.displayMenuHeader)|sort((a, b) => a.menuHeaderOrder <=> b.menuHeaderOrder) %}
                {% set param = siteName|merge({'name':p.nameMenuUrl}) %}<li><a href="{{ path('page'|route(app.request.server.get('REQUEST_URI')), param) }}">{{ p.nameMenu }}</a></li>{% endfor %}</ul></nav>
        </div>
    </div>
</header>
<style>.header-creative{background:linear-gradient(135deg,{{ site.colorTheme }},#333);padding:1.5rem 0}.hc-wrapper{display:flex;justify-content:space-between;align-items:center;position:relative}.logo-creative{display:flex;align-items:center;gap:0.75rem;text-decoration:none}.site-name-creative{color:#fff;font-size:1.2rem;font-weight:600}.header-creative nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}.header-creative a{color:#fff;text-decoration:none;transition:transform 0.3s}.header-creative a:hover{transform:translateY(-2px)}.header-btn-mobile{display:none;background:transparent;border:none;cursor:pointer;padding:0.5rem;z-index:1001}.hamburger span{display:block;width:25px;height:3px;background:#fff;margin:5px 0;transition:all 0.3s ease}@media (max-width:991px){.header-btn-mobile{display:block}.nav-list-creative{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:linear-gradient(135deg,{{ site.colorTheme }},#333);padding:1rem;gap:0.5rem;box-shadow:0 4px 6px rgba(0,0,0,0.1)}.nav-list-creative.show{display:flex}.nav-list-creative li{width:100%;text-align:center;padding:0.5rem 0}}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileBtn = document.querySelector('.header-creative .header-btn-mobile');
    const navList = document.querySelector('.header-creative .nav-list-creative');
    if (mobileBtn && navList) {
        mobileBtn.addEventListener('click', function() {
            navList.classList.toggle('show');
        });
    }
});
</script>