<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Rhythm Blog
 */

?>
<!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">

		<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'rhythm-blog' ); ?></a>

		<div id="loader" class="loader-3">
			<div class="loader-container">
				<div id="preloader">
				</div>
			</div>
		</div><!-- #loader -->

		<header id="masthead" class="site-header">
			<div class="rhythm-blog-header">

				<div class="rhythm-blog-top-header">
					<div class="section-wrapper">
						<div class="top-header-container-wrapper">
							<span class="topbar-date"><?php echo esc_html( wp_date( 'l, M d, Y' ) ); ?></span>
							<div class="top-header-right">
									<div class="header-social-icon">
										<?php
										wp_nav_menu(
											array(
												'container'   => 'ul',
												'menu_class'  => 'social-links',
												'theme_location' => 'social',
												'link_before' => '<span class="screen-reader-text">',
												'link_after'  => '</span>',
											)
										);
										?>
									</div>
							</div>
						</div>
					</div>	
				</div>

				<div class="navigation-outer-wrapper">
					<?php if ( get_header_image() ) : ?>
						<div class="header-bg-image">
							<img src="<?php echo esc_url( get_header_image() ); ?>" alt="<?php esc_attr_e( 'Header Image', 'rhythm-blog' ); ?>">
						</div>
					<?php endif; ?>
					<div class="rhythm-blog-navigation">
						<div class="section-wrapper">
							<div class="navigation-wrapper">
								<div class="site-branding">
									<?php if ( has_custom_logo() ) { ?>
										<div class="site-logo" style="max-width: var(--logo-size-custom);">
											<?php the_custom_logo(); ?>
										</div>
									<?php } ?>
									<div class="site-identity">
										<?php
										if ( is_front_page() && is_home() ) :
											?>
										<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
											<?php
										else :
											?>
											<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
											<?php
										endif;
										$rhythm_blog_description = get_bloginfo( 'description', 'display' );
										if ( $rhythm_blog_description || is_customize_preview() ) :
											?>
											<p class="site-description"><?php echo $rhythm_blog_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
										<?php endif; ?>
									</div>	
								</div>
								<div class="rhythm-blog-navigation-container">
									<div class="nav-wrapper">
										<nav id="site-navigation" class="main-navigation">
											<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
												<span class="ham-icon"></span>
												<span class="ham-icon"></span>
												<span class="ham-icon"></span>
											</button>
											<div class="navigation-area">
												<?php
												if ( has_nav_menu( 'primary' ) ) {
													wp_nav_menu(
														array(
															'theme_location' => 'primary',
															'menu_id' => 'primary-menu',
														)
													);
												}
												?>
											</div>
										</nav><!-- #site-navigation -->
									</div>
								</div>
								<div class="navigation-right-part">
									<?php
									$args              = array(
										'posts_per_page' => 1,
										'post_type' => 'post',
										'ignore_sticky_posts' => true,
										'orderby' => 'rand',
									);
									$random_post_query = new WP_Query( $args );
									if ( $random_post_query->have_posts() ) {
										while ( $random_post_query->have_posts() ) :
											$random_post_query->the_post();
											?>
											<a href="<?php the_permalink(); ?>" class="random-post"><i class="fa-solid fa-shuffle" title="<?php esc_attr_e( 'View Random Post', 'rhythm-blog' ); ?>"></i></a>
											<?php
										endwhile;
										wp_reset_postdata();
									}
									?>
									<div class="rhythm-blog-header-search">
										<div class="header-search-wrap">
											<a href="#" class="search-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M958.484 910.161l-134.543-134.502c63.078-76.595 94.761-170.455 94.7-264.141 0.061-106.414-40.755-213.228-121.917-294.431-81.224-81.183-187.965-121.958-294.349-121.938-106.445-0.020-213.176 40.796-294.38 121.938-81.224 81.203-122.020 188.017-121.979 294.369-0.041 106.445 40.755 213.166 121.979 294.287 81.203 81.285 187.945 122.020 294.38 121.979 93.727 0.041 187.607-31.642 264.11-94.659l134.564 134.564 57.436-57.467zM265.452 748.348c-65.556-65.495-98.14-150.999-98.181-236.882 0.041-85.832 32.625-171.346 98.181-236.913 65.556-65.536 151.060-98.099 236.923-98.14 85.821 0.041 171.346 32.604 236.902 98.14 65.495 65.516 98.099 151.122 98.099 236.913 0 85.924-32.604 171.387-98.099 236.882-65.556 65.495-150.999 98.099-236.902 98.099-85.862 0-171.356-32.604-236.923-98.099z"></path></svg></a>
											<div class="header-search-form">
												<?php get_search_form(); ?>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>	
					</div>
				</div>
			</div>	
			<!-- end of navigation -->
		</header><!-- #masthead -->

		<?php
		if ( ! is_front_page() || is_home() ) {
			if ( is_front_page() ) {

				require get_template_directory() . '/sections/sections.php';
				rhythm_blog_homepage_sections();

			}
			?>
			<div class="rhythm-blog-main-wrapper">
				<div class="section-wrapper">
					<div class="rhythm-blog-container-wrapper">
					<?php } ?>
