<template>
    <header v-if="data" class="site-header layout-grid-inner">
        <img class="logo" src="/images/output_pixelated.gif" />

        <div class="info theme-red">
            <strapi-content class="copy" :content="data.header_copy" />

            <dl-row v-for="row in data.header_dl" :row="row" />
        </div>
    </header>
</template>

<script setup>
import { useStrapiGlobal } from '@/composables/useStrapi'

const { data } = await useStrapiGlobal()
</script>

<style lang="scss">
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    padding: desktop-vw(27px);
    align-items: flex-start;

    > * {
        pointer-events: all;
    }

    .logo {
        width: desktop-vw(93px);
        height: auto;
    }

    .info {
        background: var(--theme-bg);
        color: var(--theme-fg);
        border-radius: desktop-vw(10px);
        padding: desktop-vw(12px) desktop-vw(10px);
        grid-column: 2 / span 2;

        .copy {
            margin-bottom: desktop-vw(18px);

            strong {
                @include h6;
            }
            p {
                margin: desktop-vw(6px) 0;
                @include p-small;
            }
        }
    }
}
</style>
