---
interface Props {
    title: string;
}

const { title } = Astro.props;
import "../styles/global.css";
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="description"
            content="Summit Painting and Handyman Services - Quality Craftsmanship in Colorado Springs"
        />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
        <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
        <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link
            href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
            rel="stylesheet"
        />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body
        class="antialiased bg-stone-50 text-stone-800 selection:bg-[#739072] selection:text-white"
    >
        <slot />
    </body>
</html>

<style is:global>
    body {
        font-family: "Plus Jakarta Sans", sans-serif;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
</style>
