<!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php echo esc_html( get_theme_mod( 'kindrex_hue_color' ) ); ?>">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div onclick="kindrex_topFunction()" id="TopBtn" title="Top of page?"><i class="fa-solid fa-chevron-up"></i></div>

<nav role="navigation" id="skip" aria-label="<?php echo esc_attr_x( 'Skip links', 'ARIA label', 'kindrex' ); ?>">

	<?php if ( is_active_sidebar( 'left-sidebar' ) ) : ?>

	<a class="tab-shortcut" id="shortcut-left-sidebar" href="#left"><?php is_active_sidebar( 'right-sidebar' ) ? esc_html_e( 'Skip to first sidebar', 'kindrex' ) : esc_html_e( 'Skip to sidebar', 'kindrex' ); ?></a>

	<?php endif; ?>

	<a class="tab-shortcut" id="shortcut-content" href="#blog-skip"><?php esc_html_e( 'Skip to Articles', 'kindrex' ); ?></a>

	<?php if ( is_active_sidebar( 'center-block' ) ) : ?>

		<a class="tab-shortcut" id="shortcut-center" href="#center-skip"><?php esc_html_e( 'Skip to Center Widget', 'kindrex' ); ?></a>

	<?php endif; ?>

</nav> <!-- /skip -->

<div id="site-wrapper" class="site-wrapper">

		<!-- ? HEADER SECTION STARTS -->
		<header>
			<div class="hd-body">
				<div class="hd-row1">
					<?php get_template_part( 'template-parts/header/navigation', 'desktop' ); ?>
				</div>
				<div class="hd-row2">
					<div class="hd-row2-inner1"></div>
				</div>
				<div class="hd-row3">
					<div class="hd-row3-inner1"></div>
					<div class="hd-row3-inner2"></div>
					<div class="hd-row3-inner3">
						<div class="datetime">
							<div id="kindrex-digital-clock">
								<span class="date-string"><?php esc_html_e( 'Date:', 'kindrex' ); ?></span>
								<span class="date-date"></span>
								<span class="time-string"><?php esc_html_e( 'Time:', 'kindrex' ); ?></span>
								<span class="time-time"></span>
							</div>
						</div>
						<div class="searchbox">
							<div class="dw-search">
								<?php get_search_form(); ?>
							</div>
						</div>
					</div>
				</div>
					<div class="hd-row4">
						<div class="socialcontainer">
							<div id="socialbar">
								<?php if ( get_theme_mod( 'kindrex_display_socialicons' ) !== '' ) { ?>
									<div class="socialicon-wrap">
										<?php if ( get_theme_mod( 'kindrex_facebook_url' ) !== '' ) { ?>
											<a href="<?php echo esc_url( get_theme_mod( 'kindrex_facebook_url', '' ) ); ?>"><div class="socialicon-fb"></div></a>
										<?php } ?>
										<?php if ( get_theme_mod( 'kindrex_gplus_url' ) !== '' ) { ?>
											<a href="<?php echo esc_url( get_theme_mod( 'kindrex_gplus_url', '' ) ); ?>"><div class="socialicon-gplus"></div></a>
										<?php } ?>
									</div>
								<?php } ?>
							</div>
						</div>
					</div>
				<div class="hd-row5">
					<div class="hd-row5-inner1"></div>
				</div>
				<div id="headerlogo">
					<a href="<?php echo esc_url( home_url() ); ?>">
						<?php
							$kindrex_custom_logo_id = get_theme_mod( 'custom_logo' );
							$kindrex_logo           = wp_get_attachment_image_src( $kindrex_custom_logo_id, 'full' );

						if ( has_custom_logo() ) {
								echo '<img src="' . esc_url( $kindrex_logo[0] ) . '" alt="' . esc_html( get_bloginfo( 'name' ) ) . '">';
						} else {
								echo '<div id="blog-name">' . esc_html( get_bloginfo( 'name' ) ) . '</div>';
								echo '<div id="blog-tagline">' . esc_html( get_bloginfo( 'description' ) ) . '</div>';
						}
						?>
					</a>
				</div>
			</div>
		</header>
		<!-- ! HEADER SECTION ENDS -->

		<div id="headerlogo2">
			<a href="<?php echo esc_url( home_url() ); ?>">
			<?php
			$kindrex_custom_logo_id = get_theme_mod( 'custom_logo' );
			$kindrex_logo           = wp_get_attachment_image_src( $kindrex_custom_logo_id, 'full' );

			if ( has_custom_logo() ) {
				echo '<img src="' . esc_url( $kindrex_logo[0] ) . '" alt="' . esc_html( get_bloginfo( 'name' ) ) . '">';
			} else {
				echo '<div id="blog-name2">' . esc_html( get_bloginfo( 'name' ) ) . '</div>';
				echo '<div id="blog-tagline2">' . esc_html( get_bloginfo( 'description' ) ) . '</div>';
			}
			?>
			</a>
		</div> <!-- /headerlogo -->

<div id="primarybg">

<?php get_template_part( 'template-parts/header/navigation', 'mobile' ); ?>

<div id="center-contain">

<!-- ? MAIN STARTS -->
<main id="main-container" class="main-container">

<?php
if ( is_active_sidebar( 'left-sidebar' ) ) :

	?>

<div id="widget-left" class="widget-column">

<!-- ? LEFT WIDGET AREA STARTS -->

	<?php if ( is_active_sidebar( 'left-sidebar' ) ) : ?>
		<!-- SB 1 -->
		<div class="widget-container">
			<div class="blk-body">
				<div class="blk-row1">
					<div class="blk-row1-inner"></div>
				</div>
				<div class="blk-content">
					<div class="blk-content-inner">
						<aside role="complementary" id="left" class="sidebar" aria-label="Left Sidebar">
							<ul>
							<?php dynamic_sidebar( 'left-sidebar' ); ?>
							</ul>
						</aside>
					</div>
				</div>
				<div class="blk-row3">
					<div class="blk-row3-inner"></div>
				</div>
			</div>
		</div>
		<!-- END SB 1 -->
	<?php endif; ?>

	</div> <!--- END WIDGET COLUMN --->

<?php endif; ?>

<div id="content">
