<?php
/**
 * The template for displaying the header
 *
 * Contains the opening of the #content div and all content up to the main content.
 *
 * @package WordPress
 * @subpackage EasyChic
 * @since EasyChic 1.0
 */

?>

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

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<?php wp_body_open(); ?>
	<div id="page" class="site">
		<header id="header" class="site-header" role="banner">
			<div class="container">
				<div class="header-wrap">
					<div class="site-branding">
						<?php
						if ( has_custom_logo() ) {
							the_custom_logo();
						} else {
							?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"
								rel="home"><?php bloginfo( 'name' ); ?></a></p>
							<?php
							$description = get_bloginfo( 'description', 'display' );
							if ( $description || is_customize_preview() ) :
								?>
						<p class="site-description"><?php echo esc_html( $description ); ?></p>
						<?php endif; ?>
						<?php } ?>
					</div><!-- .site-branding -->

					<nav id="site-navigation" class="main-navigation" role="navigation">
						<?php
						wp_nav_menu(
							array(
								'menu'           => 'header-nav',
								'menu_class'     => 'pc_menu',
								'menu_id'        => 'pc-menu',
								'container'      => 'ul',
								'theme_location' => 'primary',
							)
						);

						?>
						<?php easychic_header_cta_button(); ?>
						<button data-collapse-toggle="sp_menu_modal" type="button" class="menu_open_button"
							aria-controls="sp_menu_modal" aria-expanded="false" id="menu_open">
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<span class="sr-only"><?php esc_html_e( 'Open Menu', 'easychic' ); ?></span>
						</button>
					</nav><!-- #site-navigation -->
				</div>
				<div class="sp_menu_modal" id="sp_menu_modal" aria-hidden="true" inert>
					<div class="modal_content" role="dialog"
						aria-label="<?php esc_attr_e( 'Mobile Menu', 'easychic' ); ?>">
						<!-- first focusable element -->
						<div tabindex="0" class="focus-trap-start"></div>

						<?php
						wp_nav_menu(
							array(
								'menu'           => 'header-nav',
								'menu_class'     => 'sp_menu',
								'menu_id'        => 'sp-menu',
								'container'      => 'ul',
								'theme_location' => 'primary',
							)
						);
						?>
						<button data-collapse-toggle="sp_menu_modal" type="button" class="menu_close_button"
							id="menu_close" aria-controls="sp_menu_modal" aria-expanded="false">
							<span><?php esc_html_e( 'Close Menu', 'easychic' ); ?></span>
						</button>
						<!-- last focusable element -->
						<div tabindex="0" class="focus-trap-end"></div>
					</div>

				</div><!-- #sp-menu modal -->
			</div>
		</header><!-- #header -->