<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
	<head>
		<meta charset="<?php bloginfo('charset'); ?>">
		<title><?php wp_title(''); ?></title>

		<link href="//www.google-analytics.com" rel="dns-prefetch">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<?php wp_head(); ?>

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

		<script>
        conditionizr.config({
            assets: '<?php echo get_template_directory_uri(); ?>',
            tests: {}
        });
        </script>

	</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

		<div class="wrapper">

<div id="mobile_nav" uk-offcanvas="flip: true">
	<div class="uk-offcanvas-bar">
		<?php html5blank_nav(); ?>
	</div>
</div>

<!-- This is the modal -->
<div id="hours-modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body white-box">
        <h2 class="uk-modal-title uk-text-center">Hours of Operation</h2>
		<?= get_field('hours', 7);?>
        <p class="uk-text-right">
			<a class="uk-modal-close orange-btn" type="button">CLOSE</a>
		<p>
    </div>
</div>

			<div class="top-header uk-padding-small white" uk-scrollspy=" cls: uk-animation-fade; delay: 200">
				<div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
					<div class="uk-width-1-2 uk-width-1-3@l">
						<a class="white uk-flex uk-flex-middle" uk-toggle="target: #hours-modal"><i class="fa-solid fa-clock uk-margin-small-right yellow"></i> Our Hours <i class="fa-solid fa-chevron-right yellow uk-margin-small-left"></i></a>
					</div>
					<div class="uk-width-1-3 uk-visible@l">
						<div class="uk-child-width-auto uk-flex uk-flex-center uk-flex-middle" uk-grid>
							<div>
								<a class="white uk-flex uk-flex-middle " target="_BLANK" href="https://www.facebook.com/mawnpaws">Let's Socialize <i class="fa-brands fa-facebook uk-margin-small-left yellow"></i></a>
							</div>
							<div>
								<a class="white uk-flex uk-flex-middle uk-visible@xl" href="tel:807-633-2873">Call Us to Talk <h4 class="yellow uk-margin-small-left uk-margin-remove-vertical">807-633-2873</h4></a>
							</div>
						</div>
					</div>
					<div class="uk-width-1-2 uk-width-1-3@l">
						<a class="uk-flex uk-flex-middle uk-flex-right white uk-text-bold" target="_BLANK" href="https://www.google.com/maps/place/6534+Dawson+Rd,+Thunder+Bay,+Unorganized,+ON/@48.5335685,-89.5789393,17z/data=!3m1!4b1!4m5!3m4!1s0x4d58c675f2086877:0xa138dddf2959cfa3!8m2!3d48.5335685!4d-89.5789393?entry=ttu"><i class="fa-solid fa-location-arrow uk-margin-small-right yellow"></i> <span class="uk-visible@m">6534 DAWSON RD, KAMINISTIQUIA, ON</span><span class="uk-hidden@m">Location</span> <i class="fa-solid fa-chevron-right yellow uk-margin-small-left"></i></a>
					</div>
				</div>
			</div>
			<header class="header clear" role="banner">
				<div class="uk-padding-small">
					<div class="uk-flex uk-flex-middle" uk-grid>
						<div class="uk-width-1-2 uk-width-1-5@l">
							<a href="<?php echo home_url(); ?>">
								<img class="logo" src="<?php echo get_template_directory_uri(); ?>/images/mawn-pawz-logo.webp" alt="Logo">
							</a>

						</div>
						<div class="uk-visible@xl uk-width-3-5@xl">

							<nav class="nav uk-visible@l" role="navigation">
								<?php html5blank_nav(); ?>
							</nav>


						</div>
						<div class="uk-width-expand uk-width-1-5@xl"  uk-scrollspy=" cls: uk-animation-fade; delay: 1200">
							<div class=" uk-flex uk-flex-middle uk-flex-right ">

								<a class="uk-float-right  uk-hidden@xl menu_pointer" href="#mobile_nav" uk-toggle>
									<i class="far fa-bars fa-2x"></i>
								</a>

								<a href="<?php echo home_url(); ?>/book-now/" class="uk-margin-medium-left orange-btn uk-float-right uk-visible@m">BOOK NOW</a>

							</div>

						</div>
					</div>
				</div>
			</header>
