<!DOCTYPE html>
<html lang="<?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 wp_body_open(); ?>


    <!-- Skip Link -->
    <a class="skip-link screen-reader-text" href="#primary">
    <?php esc_html_e( 'Skip to content', 'mohi' ); ?>
    </a>
    
    <!--========== Header Section ==========-->

    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top z-3">
        <div class="container py-lg-2">
            
            <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                $mohi_logo = get_theme_mod( 'custom_logo' );
                $logo = wp_get_attachment_image_src( $mohi_logo, 'full' );

                if ( has_custom_logo() ) {
                    echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
                } else {
                    echo '<h1>' . esc_html( get_bloginfo( 'name' ) ) . '</h1>';
                }
                ?>
            </a>


            <button id="searchToggle"
        class="btn d-lg-none ms-auto me-3"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#searchCollapse"
        aria-expanded="false"
        aria-controls="searchCollapse"
        aria-label="<?php esc_attr_e( 'Toggle search', 'mohi' ); ?>">

        <!-- Search Icon -->
        <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>

        <!-- Close Icon -->
        <svg class="icon-close d-none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
        </svg>

        </button>

            <button id="menuToggle"
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasNav"
                    aria-controls="offcanvasNav"
                    aria-label="<?php esc_attr_e( 'Toggle navigation', 'mohi' ); ?>">
                <span class="navbar-toggler-icon"></span>
            </button>


            <div class="menu-content d-flex">
                <div class="collapse navbar-collapse" id="navbarScroll">

                
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'primary-menu',
                            'container'      => false,
                            'menu_class'     => 'navbar-nav ms-auto me-lg-4 my-2 my-lg-0',
                            'fallback_cb'    => 'mohi_menu_fallback',
                            'depth'          => 5,
                            'walker'         => new Bootstrap_Navwalker(),
                        ));
                        ?> 
                    <?php get_search_form(); ?>
                
                </div>
            </div>
        </div>

        <div class="collapse d-lg-none w-100" id="searchCollapse">
            <div class="container py-2" id="searchCollapseInner">
                <?php get_search_form(); ?>

            </div>
        </div>
    </nav>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
        <div class="offcanvas-header text-white">
            
            <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                $mohi_logo = get_theme_mod( 'custom_logo' );
                $logo = wp_get_attachment_image_src( $mohi_logo, 'full' );

                if ( has_custom_logo() ) {
                    echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
                } else {
                    echo '<h1>' . esc_html( get_bloginfo( 'name' ) ) . '</h1>';
                }
                ?>
            </a>
            <button type="button" class="btn-close text-reset btn-close-black" data-bs-dismiss="offcanvas" aria-label="<?php esc_attr_e( 'Close', 'mohi' ); ?>"></button>
        </div>
        <hr>
        <div class="offcanvas-body">
            

             <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary-menu',
                        'container'      => false,
                        'menu_class'     => 'navbar-nav justify-content-end flex-grow-1 ps-3',
                        'fallback_cb'    => false,
                        'walker'         => new Bootstrap_Navwalker(),
                    ));
                    ?>  

        </div>
    </div>