<script setup lang="ts">
/**
 * @file landing.vue
 * @description Layout for the landing page (public facing).
 * Applies a dark theme by default and includes the public header and footer.
 */
</script>

<template>
  <!-- Landing Layout Container: Forces Dark Theme -->
  <div class="landing-layout dark">
    <LandingHeader />
    
    <!-- Main Content Area: Grows to fill available space -->
    <main class="flex-grow">
      <slot />
    </main>
    
    <LandingFooter />
  </div>
</template>

<style>
/* 
  Layout Styling:
  - Flexbox column layout to stick footer to bottom.
  - Dark background base.
*/
.landing-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #0f172a; /* Slate 900 */
  color: #f1f5f9; /* Slate 100 */
}

.flex-grow {
  flex-grow: 1;
}
</style>
