/* =========================================
   LAYOUT: Structure & Positioning
   ========================================= */

/* Fixed App-Like Architecture */
body {
    display: flex;
    flex-direction: column;
    
    /* FALLBACK for older browsers */
    height: 100vh;
    /* FIX: Dynamic Viewport Height for Mobile */
    height: 100dvh; 
    
    overflow: hidden; /* Keeps the "App-like" feel */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
}

/* Header - Fixed at Top */
header {
    width: 100%;
    /* CHANGED: Increased from 15px to 30px top/bottom */
    padding: 10px 40px; 
    z-index: 100;
    background-color: var(--bg-color); 
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; 
}

.header-inner {
    width: 100%;
    max-width: var(--max-width); 
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Main Content Area - THE SCROLLABLE PART */
#content-placeholder {
    flex-grow: 1;             /* Fill remaining space */
    overflow-y: auto;         /* Enable vertical scrolling here */
    overflow-x: hidden;
    width: 100%;
    
    /* PADDING: 10px from Header/Footer, 20px from sides */
    padding: 10px 20px;
    position: relative;
    
    /* Flex Setup - ALIGN TOP by default */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; /* Default: Start at top */
}

/* Generic Child Styling */
#content-placeholder > * {
    width: 100%; 
    max-width: 1200px; 
    margin: 0;
}

/* 
   THE FIX: Full Height Centering Wrapper
   Used by Home, Contact, and Admin Auth pages.
*/
.full-height-center {
    /* FIX: Use 100% of the parent container (which is content-placeholder) */
    width: 100%;
    min-height: 100%; 
    flex-grow: 1;
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical Center */
    align-items: center;     /* Horizontal Center */
}

/* Typewriter Specifics (Inner Formatting) */
#typewriter-text {
    width: 100%;
    max-width: 800px;
    text-align: center;
    display: block; /* Ensures text sentences flow naturally */
}

/* Ensure Admin Container takes full height so internal centering works */
#admin-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Wrapper for standard content pages (Projects, Policy) */
.content-container {
    width: 100%;
    max-width: 900px;
    animation: fadeIn 0.5s ease-out;
    text-align: center;
}

/* Footer - Fixed at Bottom */
footer {
    width: 100%;
    /* Extremely minimal padding */
    padding: 1px 40px;
    z-index: 100;
    background-color: var(--bg-color); 
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; 
    
    /* FIX: Safe area for iPhone X+ home bar */
    padding-bottom: calc(2px + env(safe-area-inset-bottom));
}

.footer-inner {
    width: 100%;
    max-width: var(--max-width); 
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensure no extra height is added by the container itself */
    line-height: 1; 
    min-height: 30px; /* Enforce a strict minimum visual balance */
}

.footer-right {
    display: flex;
    gap: 15px;
}

/* Scrollbar Styling */
#content-placeholder::-webkit-scrollbar { width: 8px; }
#content-placeholder::-webkit-scrollbar-track { background: var(--bg-color); }
#content-placeholder::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
#content-placeholder::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* RESPONSIVE TWEAKS */
@media (max-width: 768px) {
    /* Header: Stack Logo atop Nav */
    .header-inner { 
        flex-direction: column; 
        gap: 15px; 
    }
    
    /* Nav: Allow wrapping to prevent scroll, center items */
    .header-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 20px; /* Row gap 15px, Col gap 20px */
    }

    /* Footer: Force Row to keep items side-by-side */
    .footer-inner { 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        gap: 10px;
    }
    
    /* Compact Footer elements for mobile */
    .footer-right { gap: 12px; }
    .footer-right i { font-size: 1rem; }
    .footer-custom-icon { height: 1.2rem; }
    .copyright-text { font-size: 0.65rem; }

    /* Layout Spacing */
    header { padding: 15px; }
    
    /* Maintain the slim 5px padding from previous edit, but reduce side padding */
    footer { padding: 5px 15px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
    
    #content-placeholder { padding: 10px; } 
}