<!-- Top Navigation Bar -->
<header
    class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16 sm:h-20">
            <div class="flex items-center gap-2">
                <a class="text-primary" href="<?php echo esc_url(home_url('/')); ?>"
                    aria-label="<?php echo esc_attr(get_bloginfo('name')); ?>">
                    <img alt="Safly Logo" class="h-10 w-auto object-contain"
                        src="<?php echo safly_token_value('home', 'site_logo', 'IMG'); ?>" />
                </a>
            </div>
            <?php safly_render_header_menu('home'); ?>
            <button id="mobile-menu-toggle" class="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"
                type="button" aria-label="Menu" aria-expanded="false" aria-controls="mobile-menu">
                <span class="material-symbols-outlined">menu</span>
            </button>
        </div>
    </div>
</header>
<?php safly_render_mobile_menu('home'); ?>
