<script lang="ts" nonce="%sveltekit.nonce%">
 import '../app.scss';
 import { assets, base } from '$app/paths'
</script>

<div class="app w-100">
    <main>
        <div class="row mx-0 fixed-top">
        </div>
        <nav class="navbar navbar-expand-lg navbar-light shadow print-navbar mb-3">
            <div class="container-lg">
                <div class="d-flex w-100 align-items-center">
                    <div class="navbar-brand">
                        <a href="{base}">
                            <img src="{assets}/coturnix.svg" alt="Coturnix logo" style="width:40px" />
                        </a>
                    </div>
                </div>
            </div>
        </nav>
        <style>
         @media (prefers-color-scheme: light) {
             nav {
                 background-color: #f0f0f0 !important;
             }
         }
        </style>
        <div class="container-lg p-3 pb-5 print-container">
            <slot />
        </div>
    </main>

    <footer></footer>
</div>
<style lang="scss">
 @import '../variables.scss';

 .app {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }

 main {
     flex: 1;
     display: flex;
     flex-direction: column;
     width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
 }
 @media screen {
     footer {
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 8px;
         background-color: $primary;
     }
 }
 @media print {
     footer {
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 8px;
         background-color: $primary;
         position: fixed;
         bottom: 0;
         width: 100%;
     }
 }

 @media print {
     .print-navbar {
         position: fixed;
         top: 0;
         width: 100%;
         margin-bottom: 1cm;
         background: none !important;
         box-shadow: none !important;
     }
     .print-container {
         // margin-top: 1cm !important;
         // padding-top: 1cm !important;
     }
     @page {
         size: auto;
         margin: 25mm 10mm 25mm 10mm;
     }
 }
 @media screen {
     .print-navbar {
     }
     .print-container {
     }
 }
</style>