<style type="text/css">

{if get_theme_mod('primary_color_type') == "custom"}
    .header__content, .nav__item.nav__item--dropdown:hover {
        background-color: {$primary_color} !important;
    }
    .nav__item.nav__item--dropdown ul {
        background-color: {$primary_color} !important;
        border-color: {$primary_color} !important;
    }
    .btn--primary, .btn.orderNow {
        box-shadow: 0 4px 14px -4px rgba(0,0,0,.2), 0 2px 25px -5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.05);
        background-color: {$primary_color} !important;
    }
{/if}

{if get_theme_mod('secondary_color_type') == "custom"}
    .btn--secondary {
        color: #fff !important;
        box-shadow: 0 4px 14px -4px rgba(0,0,0,.2), 0 2px 25px -5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.05);
        background-color: {$secondary_color} !important;
    }
{/if}

{if get_theme_mod('header_links_color_type') == "custom"}
    .nav a, .nav span {
        color: {$header_links_color} !important;
    }
{/if}
</style>

<header class="header">
    <div class="header__content">
        <div class="header__main">
            <div class="header__logo logo">
                <a class="logo__link" href="{bloginfo( 'url' )}">
                     {if get_theme_mod( 'logo_upload' )}
                        <img src="{esc_url(get_theme_mod('logo_upload'))}" alt="{bloginfo('name')} logo">
                    {else}
                        <span class="logo-title">{bloginfo('name')} </span>
                    {/if}
                </a>
            </div>
            <nav class="nav header__nav">
                <ul>
                    {if $header_services_links}
                        <li class="nav__item nav__item--dropdown">
                            <span>Our services</span>
                            <ul>
                                {foreach $header_services_links as $navItem}
                                    <li class="menu-item">
                                        <a href="{$navItem->url}" title="{$navItem->title}">{$navItem->title}</a>
                                    </li>
                                {/foreach}
                            </ul>
                        </li>
                    {/if}
                    
                    {foreach $header_main_nav as $navItem}
                        <li class="menu-item nav__item">
                            <a href="{$navItem->url}" title="{$navItem->title}">{$navItem->title}</a>
                        </li>
                    {/foreach}
                    
                    <li class="header__button header__button--orders">
                        <a href="{esc_url( home_url( '/dashboard/authorization' ) )}" class="btn btn--primary">
                            Manage your orders
                        </a>
                    </li>
                    <li class="header__button">
                        <a href="{esc_url( home_url( '/order' ) )}" class="btn btn--secondary">
                            Order now
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="mobile-nav">
                <a href="{esc_url( home_url( '/order' ) )}" class="btn btn--primary mobile-nav__order-btn">Order Now</a>
                <div class="hamburger s-visible hamburger--spin js-hamburger">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>