<template>
  <div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
    <LayoutAppHeader />

    <main class="flex-1 pb-mobile-nav md:pb-0">
      <slot />
    </main>

    <LayoutAppFooter class="hidden md:block" />

    <ClientOnly>
      <LayoutConsentBanner />
    </ClientOnly>

    <ClientOnly>
      <LayoutBottomBar />
    </ClientOnly>
  </div>
</template>

<style scoped>
.pb-mobile-nav {
  padding-bottom: calc(var(--bottom-bar-height, 64px) + 1rem);
}

@media (min-width: 768px) {
  .pb-mobile-nav {
    padding-bottom: 0;
  }
}
</style>
