<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <?php get_template_part('template-parts/svg-sprite'); ?>

    <header class="kaz-header-wrapper">
        <!-- Masked background bar to create visual cutout without clipping inner logo -->
        <div class="kaz-header-bg-bar"></div>

        <!-- Non-masked content grid layer -->
        <div class="kaz-header-content-grid">
            <!-- Left: Logo -->
            <div class="kaz-logo-col">
                <a href="<?php echo esc_url(home_url('/')); ?>" class="kaz-logo-link">
                    <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/img/kaz-logo.svg'); ?>" alt="<?php bloginfo('name'); ?>" class="kaz-logo-img">
                </a>
            </div>

            <!-- Middle: Navigation (Fake Links) -->
            <nav class="kaz-nav-col">
                <ul class="kaz-nav-list">
                    <li><a href="#" class="kaz-nav-link active">Početna</a></li>
                    <li><a href="#proizvodi" class="kaz-nav-link">Proizvodi</a></li>
                    <li><a href="#o-nama" class="kaz-nav-link">O nama</a></li>
                    <li><a href="#kontakt" class="kaz-nav-link">Kontakt</a></li>
                </ul>
            </nav>

            <!-- Right: Info & CTA -->
            <div class="kaz-info-col">
                <div class="kaz-info-block">
                    <span class="kaz-info-label">Radno vreme</span>
                    <span class="kaz-info-value">Pon - Pet: 09:00 - 17:00</span>
                </div>
                <div class="kaz-info-divider"></div>
                <div class="kaz-info-block">
                    <span class="kaz-info-label">Telefon</span>
                    <a href="tel:+381111234567" class="kaz-info-value">+381 (11) 123-4567</a>
                </div>
                <!-- Nested Radius Wrapper for the CTA Button (Spoljni Radijus = 12px + Padding 4px = 16px) -->
                <div class="kaz-cta-wrapper">
                    <a href="#zakazi" class="tj-primary-btn">
                        <span class="btn_inner">
                            <span class="btn_icon"><span><i></i><i></i></span></span>
                            <span class="btn_text"><span>Zakaži konsultacije</span></span>
                        </span>
                    </a>
                </div>
            </div>

            <!-- Mobile Hamburger Button -->
            <button type="button" class="kaz-mobile-hamburger" id="kazMobileHamburger" aria-label="Open Navigation Menu">
                <?php echo kaz_get_icon('menu', 'mobile-toggle-icon'); ?>
            </button>
        </div>
    </header>

    <!-- Mobile Overlay Menu -->
    <div class="kaz-mobile-overlay" id="kazMobileOverlay">
        <div class="kaz-mobile-overlay-header">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="kaz-logo-link">
                <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/img/kaz-logo.svg'); ?>" alt="<?php bloginfo('name'); ?>" class="kaz-logo-img-mobile">
            </a>
            <button type="button" class="kaz-mobile-close" id="kazMobileClose" aria-label="Close Navigation Menu">
                &times;
            </button>
        </div>
        <nav class="kaz-mobile-nav">
            <ul class="kaz-mobile-nav-list">
                <li><a href="#" class="kaz-mobile-nav-link">Početna</a></li>
                <li><a href="#proizvodi" class="kaz-mobile-nav-link">Proizvodi</a></li>
                <li><a href="#o-nama" class="kaz-mobile-nav-link">O nama</a></li>
                <li><a href="#kontakt" class="kaz-mobile-nav-link">Kontakt</a></li>
            </ul>
        </nav>
        <div class="kaz-mobile-info">
            <div class="kaz-mobile-info-block">
                <span class="kaz-info-label">Radno vreme</span>
                <span class="kaz-info-value">Pon - Pet: 09:00 - 17:00</span>
            </div>
            <div class="kaz-mobile-info-block">
                <span class="kaz-info-label">Telefon</span>
                <a href="tel:+381111234567" class="kaz-info-value">+381 (11) 123-4567</a>
            </div>
            <div class="kaz-mobile-cta-wrapper">
                <a href="#zakazi" class="tj-primary-btn">
                    <span class="btn_inner">
                        <span class="btn_icon"><span><i></i><i></i></span></span>
                        <span class="btn_text"><span>Zakaži konsultacije</span></span>
                    </span>
                </a>
            </div>
        </div>
    </div>