<script setup lang="ts">
import type { BreadcrumbItemType } from '@/types';
import { onMounted } from 'vue';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

interface Props {
    breadcrumbs?: BreadcrumbItemType[];
}

withDefaults(defineProps<Props>(), {
    breadcrumbs: () => [],
});


</script>

<template>
    <Header />

            <transition name="fade" mode="out-in">
                <main :key="$page.url">
                    <slot />
                    <Footer />
                </main>
            </transition>
</template>
<style scoped>
/* fade transition */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease; /* change 0.5s to slower/faster */
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

</style>
<style>

:root {
    /* Colors */
    --primary: hsl(210, 100%, 50%);
    --primary-glow: hsl(210, 100%, 70%);
    --accent: hsl(30, 100%, 46%);
    --background: hsl(222, 84%, 5%);
    --foreground: hsl(210, 40%, 98%);
    --card: hsl(222, 84%, 8%);
    --card-foreground: hsl(210, 40%, 95%);
    --muted: hsl(217, 32%, 17%);
    --muted-foreground: hsl(215, 20%, 65%);
    --border: hsl(217, 32%, 17%);
    --destructive: hsl(0, 62%, 30%);
    --destructive-foreground: hsl(210, 40%, 98%);
    --secondary: hsl(217, 32%, 17%);
    --secondary-foreground: hsl(210, 40%, 98%);

    /* Gradients */
    --gradient-adventure: linear-gradient(
        135deg,
        hsl(210, 100%, 50%) 0%,
        white 49%,
        white 50%,
        hsl(30, 100%, 46%) 100%
    );
    --gradient-hero: linear-gradient(135deg, hsl(210 100% 15%), hsl(25 95% 25%));
    --gradient-accent: linear-gradient(135deg, hsl(30, 100%, 46%), hsl(210, 100%, 50%));

    /* Shadows */
    --shadow-intense: 0 25px 50px -12px hsl(210, 100%, 50% );
    --shadow-glow: 0 0 40px hsl(210, 100%, 70% );

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.glass {
    background-color: color-mix(in srgb, var(--card) 35%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
}


/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    scrollbar-width: none;
    -ms-overflow-style:none;
    scroll-behavior: smooth;
}

/* Temporary debug styles */
/* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-button {
    display: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

html{
    overflow:visible;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    overflow-x: hidden;
    display:flex;
    flex-direction: column;
    min-height: 100svh; /* ensure the page fills the viewport height */
}
html, body, #app {
    min-height: 100svh; /* fill viewport */
    display: flex;
    flex-direction: column;
}


/* Make main fill remaining space and arrange its children vertically */
main{
    display: flex;          /* added */
    flex-direction: column; /* keep */
    flex: 1;
}

main:not(:has(.no-gap)) {
    gap: 2em;
}

/* Push the Footer (last child in main) to the bottom if content is short */
main > :last-child {
    margin-top: auto;
}
</style>
