<template>
    <header class="site-header layout-grid-inner">
        <img class="logo" src="/images/output.gif" />

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

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

<script setup>
const props = defineProps({
    copy: Array,
    dl: Array,
})
</script>

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

    > * {
        pointer-events: all;
    }

    .logo {
        width: desktop-vw(93px);
        height: auto;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .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,
            a {
                margin: desktop-vw(6px) 0;
                @include p-small;
            }
        }
    }

    @include mobile() {
        padding: mobile-vw(27px) var(--layout-margin);

        .logo {
            width: mobile-vw(93px);
        }
        .info {
            border-radius: mobile-vw(10px);
            padding: mobile-vw(12px) mobile-vw(10px);
            grid-column: 2 / span 4;

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

                p,
                a {
                    margin: mobile-vw(6px) 0;
                }
            }
        }
    }
}
</style>
