/* --- Global Styles & Variables --- */
:root {
    --white: #ffffff;
    --black: #000000;
    --yellow-bright: #ffe02c;
    --yellow-medium: #ffcf40;
    --yellow-light: #fff297;
    --grey-light: #e0e0e0;
    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: Arial, sans-serif;
    
    /* Folder variables */
    --folder-h: 120px;
    --folder-w: 50%; 
    --row-spacing: 2px;
    --corner-radius: 10px;
    
    /* TAB VARIABLES */
    --tab-height: 25px;
    
    /* LEFT TAB */
    --left-tab-width: 60px;
    --left-tab-offset: 40px; 
    
    /* RIGHT TAB (Smaller, darker, or just for visual layering) */
    --right-tab-width: 40px;
    --right-tab-offset: 30px; /* Offset from the right edge */
    --tab-overlap-color: rgba(0, 0, 0, 0.05); /* Subtle dark shade for layering */
}
body {
    background-color: var(--white);
    color: var(--black);
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    perspective: 1000px;
}

/* --- Layered Folder Navigation --- */
.navigation-stack {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 380px; 
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

/* Base Folder Style */
.nav-folder {
    display: block;
    position: relative; 
    height: var(--folder-h);
    width: var(--folder-w); 
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: var(--black);
    cursor: pointer;
    
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    transform: none; 
    
    border-bottom-left-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
}
/* --- The Left Tab Element (::before) --- */
.nav-folder::before {
    content: ''; 
    position: absolute;
    top: calc(-1 * var(--tab-height)); 
    left: var(--left-tab-offset);
    
    width: var(--left-tab-width);
    height: var(--tab-height);
    
    background-color: inherit; /* Inherits the yellow or grey color */
    
    border-top-left-radius: var(--corner-radius);
    border-top-right-radius: var(--corner-radius);
    
    z-index: 1; /* Below the text content, but visually part of the element */
    transition: inherit; 
}

/* --- The Right Tab Element (::after) --- */
.nav-folder::after {
    content: ''; 
    position: absolute;
    top: calc(-1 * var(--tab-height)); 
    right: var(--right-tab-offset);
    
    width: var(--right-tab-width);
    height: var(--tab-height);
    
    /* Create a subtle darker overlap color */
    background-color: var(--tab-overlap-color); 
    
    border-top-left-radius: var(--corner-radius);
    border-top-right-radius: var(--corner-radius);
    
    z-index: 1; 
    transition: inherit; 
}


/* --- Content Styling --- */
/* Ensure text stays above the tabs (z-index: 1) */
.label, .number {
    /* ... existing styles ... */
    z-index: 2; 
}


/* --- Click-to-Expand State (.is-open) --- */



/* 2. Hide tabs when folder is open */
.nav-folder.is-open::before,
.nav-folder.is-open::after {
    opacity: 0; 
    top: 0; 
}

/* Color Classes */
.nav-folder.yellow-bright { background-color: var(--yellow-bright); }
.nav-folder.yellow-medium { background-color: var(--yellow-medium); }
.nav-folder.yellow-light { background-color: var(--yellow-light); }
.nav-folder.grey { background-color: var(--grey-light); }

/* --- Positioning and Staggering --- */
.nav-folder[style*="--stagger-row: 1"] { margin-top: 0; }
.nav-folder[style*="--stagger-row: 2"] { margin-top: calc(-1 * var(--row-spacing)); }
.nav-folder[style*="--stagger-row: 3"] { margin-top: calc(-1 * var(--row-spacing)); }

/* Z-Index for Layering */
.nav-folder[style*="--stagger-col: 1"] { z-index: calc(10 - var(--stagger-row)); }
.nav-folder[style*="--stagger-col: 2"] { z-index: calc(5 - var(--stagger-row)); }


/* --- Content Styling --- */
.label, .number {
    display: block;
    position: absolute;
    transform: none; 
    z-index: 2; 
}
/* ... existing .label and .number styles ... */

/* --- Content Area Inside Folder --- */
.folder-content {
    transform: none; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
    color: var(--black); 
    font-family: var(--font-sans);
}
.folder-content button {
    padding: 10px 20px;
    background: var(--black);
    color: var(--white);
    border: none;
    cursor: pointer;
}

/* --- Hover Effect --- */
.nav-folder:hover {
    z-index: 99;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.nav-folder:hover[style*="--stagger-col: 1"] {
    transform: translateZ(100px) translateX(10px) scale(1.01);
}

.nav-folder:hover[style*="--stagger-col: 2"] {
    transform: translateZ(100px) translateX(-10px) scale(1.01);
}

/* --- Click-to-Expand State (.is-open) --- */

/* 1. OPEN STATE: Now covers full viewport again */
.nav-folder.is-open {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh; /* Reverts to full height */
    
    transform: none !important; 
    z-index: 1000; 
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    
    .number, .label { opacity: 0; transition: opacity 0.1s; }
}

/* 2. Content and tab visibility */
.nav-folder.is-open .folder-content {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s 0.3s;
}

.nav-folder.is-open::before {
    opacity: 0; 
    top: 0; 
}

.navigation-stack:has(.is-open) .nav-folder:not(.is-open) {
    transform: translateY(100vh); 
    opacity: 0;
    pointer-events: none; 
}