<script>
	import { page } from '$app/stores';
	import { fade } from 'svelte/transition';
	import NavBar from '../components/NavBar.svelte';
	import Footer from '../components/Footer.svelte';
	import '../app.css';
</script>

<svelte:head>
	<meta
		name="description"
		content="Misty Mountains Therapy provides high quality therapy services for Rexburg and the surrounding area."
	/>
	<meta property="og:site_name" content="Misty Mountains Therapy" />
	<meta property="og:title" content="Misty Mountains Therapy" />
	<meta
		property="og:description"
		content="High quality therapy services for Rexburg and the surrounding area."
	/>
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://mistymountainstherapy.com/" />
	<meta property="og:image" content="https://mistymountainstherapy.com/logo.png" />
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:title" content="Misty Mountains Therapy" />
	<meta
		name="twitter:description"
		content="High quality therapy services for Rexburg and the surrounding area."
	/>
</svelte:head>

<a class="skip-link" href="#main">Skip to content</a>
<NavBar />
<main id="main" class="page" tabindex="-1">
	{#key $page.url.pathname}
		<div class="container" in:fade={{ duration: 150, delay: 50 }}>
			<slot />
		</div>
	{/key}
</main>
<Footer />
