<!DOCTYPE html>
<html <?php language_attributes(); ?> class="scroll-smooth">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
    <style>
        /* Custom Scrollbar & Styles */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #09090b; }
        ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #52525b; }
        .no-scroll { overflow: hidden; }
        .img-overlay { background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); }
        
        /* Menu Styling Fixes to ensure visibility */
        .menu-item a { 
            color: #a1a1aa; /* Zinc-400 */
            transition: color 0.3s ease; 
            text-decoration: none; 
            text-transform: uppercase; 
            letter-spacing: 0.05em; 
            font-size: 0.875rem; 
            font-weight: 500; 
        }
        .menu-item a:hover { color: #ffffff; }
        .current-menu-item a { color: #ffffff; }
    </style>
</head>
<body <?php body_class('bg-zinc-950 text-zinc-100 font-sans antialiased selection:bg-white selection:text-black'); ?>>

    <nav class="fixed w-full z-40 top-0 bg-zinc-950/80 backdrop-blur-md border-b border-white/5">
        <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
            
            <div class="font-serif text-2xl italic font-semibold tracking-wide">
                <a href="<?php echo home_url(); ?>" class="text-white hover:text-zinc-300 transition-colors">
                    Lumina.
                </a>
            </div>
            
            <div class="hidden md:flex space-x-8 items-center">
                <?php 
                if ( has_nav_menu( 'primary' ) ) {
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'container' => false,
                        'menu_class' => 'flex space-x-8 list-none m-0 p-0', // Added list-none to remove bullets
                        'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                    )); 
                } else {
                    // Fallback if no menu is assigned yet
                    echo '<a href="' . home_url() . '/wp-admin/nav-menus.php" class="text-xs text-red-400 uppercase tracking-widest border border-red-500 px-3 py-1 rounded">Assign Menu</a>';
                }
                ?>
            </div>

            <button id="menu-btn" class="md:hidden text-white focus:outline-none">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-zinc-900 border-b border-white/10 shadow-xl">
            <div class="flex flex-col p-6 space-y-4 text-center">
                <?php 
                if ( has_nav_menu( 'primary' ) ) {
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'container' => false,
                        'menu_class' => 'flex flex-col space-y-4 list-none m-0 p-0',
                    )); 
                }
                ?>
            </div>
        </div>
    </nav>