/* Layout Styles */

* { box-sizing: border-box; }

html, body { height: 100%; }

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background: var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.app-shell {
    min-height: 100vh;
    width: 100%;
    position: relative;
    background: var(--bg);
}

section.home {
    min-height: 100vh;
    margin-left: 250px;
    width: calc(100% - 250px);
    transition: all 0.3s ease;
    position: relative;
}

body.sidebar-close section.home {
    margin-left: 88px;
    width: calc(100% - 88px);
}

/* Page Specific Overrides to prevent black gaps */
.home-page, .about-page, .terms-page {
    width: 100%;
    margin: 0;
}

body.sidebar-close .container {
    max-width: calc(1400px - 162px);
}

body.sidebar-mobile-open section.home {
    margin-left: 0;
    width: 100%;
}

body.sidebar-mobile-open .container {
    max-width: 1400px;
}

@media (max-width: 860px) {
    section.home {
        margin-left: 0;
        width: 100%;
    }
    body.sidebar-close section.home {
        margin-left: 0;
        width: 100%;
    }
    .container {
        max-width: 1400px;
    }
}

.site-main { 
    padding: 22px 24px 48px; 
}

.site-main--auth {
    padding: 0;
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 90;
}

.sidebar.is-mobile-open ~ .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Responsive Overrides */
@media (max-width: 860px) {
    .sidebar-overlay {
        z-index: 999;
    }
    
    .site-main {
        padding: 0;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .site-main {
        padding: 0;
    }
    
    .container {
        padding: 0;
    }
}