/* ============================================================================
   Universal Grid Layout System
   Used by all pages (except Django admin) for consistent sidebar + content.
   Single breakpoint: 1024px. Desktop (>=1024) shows all 3 columns.
   Mobile (<1024) shows single column with sidebar overlays.
   ============================================================================ */

/* Sidebar component styles — apply at all viewport widths */
.sidebar-branding {
    margin-bottom: var(--spacing-3);
}

.sidebar-brand-link {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    text-align: center;
}

.sidebar-brand-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.sidebar-action-button {
    display: block;
    width: 100%;
    text-align: center;
}

/* ========================================================================
   Desktop Layout (>=1024px): Fixed sidebars + scrollable content
   ======================================================================== */
@media (min-width: 1024px) {
    .site-grid-container {
        display: grid;
        grid-template-columns: var(--layout-sidebar-width) 1fr;
        grid-template-rows: auto 1fr; /* Row 1: navbar, Row 2: content (fill, footer inside) */
        width: 100%; /* Full width to align with fixed sidebars */
        margin: 0;
        height: 100vh; /* Constrain to viewport height */
        overflow: hidden; /* Prevent page-level scrolling */
    }

    /* Navbar - Grid Row 1, middle column only */
    .site-navbar {
        grid-row: 1;
        grid-column: 2; /* Only middle column, not under sidebars */
        position: sticky;
        top: 0;
        z-index: calc(var(--z-100) + 1); /* Above sidebars when sticky */
        background-color: var(--color-white);
        border-bottom: var(--border-width-1) solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    /* Main Sidebar - Spans all rows (1-2), Column 1 - Full viewport height */
    /* Component styles in /static/css/03-components/_main-sidebar.css */
    .main-sidebar {
        grid-row: 1 / 3; /* Span from row 1 to row 3 (both rows) */
        grid-column: 1;
        position: fixed;
        top: 0; /* Start at viewport top */
        left: 0;
        width: var(--layout-sidebar-width);
        height: 100vh; /* Full viewport height */
        display: flex;
        flex-direction: column;
        background-color: var(--color-gray-100);
        border-right: var(--border-width-1) solid var(--color-gray-200);
        z-index: var(--z-100);
        overflow: hidden;
    }

    /* Sidebar Fixed Header - Branding + Create Button */
    .sidebar-fixed-header {
        position: sticky;
        top: 0;
        flex-shrink: 0;
        padding: var(--spacing-4);
        background-color: var(--color-gray-100);
        border-bottom: var(--border-width-1) solid var(--color-gray-200);
        z-index: 1;
    }

    /* Sidebar Scrollable Content - Post List */
    .sidebar-scrollable-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--spacing-2);
    }

    /* Scrollbar styling inherited from global styles in _base.css */

    /* Main Content - Grid Row 2, Column 2 - Fills grid column, scrollbar at edge */
    .site-main-content {
        grid-row: 2;
        grid-column: 2;
        width: 100%;
        height: 100%; /* Fill available grid row height */
        min-width: 0;  /* Allow grid item to shrink below content's intrinsic width */
        overflow-y: auto; /* Vertical scrollbar when content exceeds height */
        overflow-x: hidden; /* Prevent horizontal scroll */
        background-color: var(--color-gray-100); /* Grey background extends to viewport bottom */
    }

    /* Content Wrapper - Centers content within scrollable container */
    .content-wrapper {
        max-width: var(--layout-content-width);
        width: 100%;
        margin: 0 auto;
        padding: var(--spacing-6);
        overflow-wrap: break-word;  /* Break long words to prevent overflow */
        word-wrap: break-word;      /* Legacy browser support */
        background-color: var(--color-white); /* White background for content area */
    }

    /* Footer - Inside scrollable content, appears at bottom after scrolling */
    .site-footer {
        width: 100%;
        margin-top: var(--spacing-8);
    }

    /* Center footer content */
    .site-footer .footer-content {
        max-width: var(--layout-content-width);
        margin: 0 auto;
        padding: var(--spacing-4);
    }

    /* ========================================================================
       Three-Column Grid Extension
       For pages that need both Recent Posts + contextual navigation
       ======================================================================== */

    .site-grid-container.three-column-layout {
        grid-template-columns: var(--layout-sidebar-width) 1fr var(--layout-right-sidebar-width);
        grid-template-rows: auto 1fr; /* Row 1: navbar, Row 2: content (fill, footer inside) */
        width: 100%; /* Full width to align with fixed sidebars */
        height: 100vh; /* Constrain to viewport height */
        overflow: hidden; /* Prevent page-level scrolling */
    }

    /* Right Sidebar - Spans all rows (1-2), Column 3 - Full viewport height */
    .site-right-sidebar {
        grid-row: 1 / 3; /* Span from row 1 to row 3 (both rows) */
        grid-column: 3;
        position: fixed;
        top: 0; /* Start at viewport top */
        right: 0;
        width: var(--layout-right-sidebar-width);
        height: 100vh; /* Full viewport height */
        display: flex;
        flex-direction: column;
        background-color: var(--color-gray-100);
        border-left: var(--border-width-1) solid var(--color-gray-200);
        z-index: var(--z-100);
        overflow: hidden;
    }

    /* Right Sidebar Fixed Header */
    .right-sidebar-fixed-header {
        position: sticky;
        top: 0;
        flex-shrink: 0;
        padding: var(--spacing-4);
        background-color: var(--color-gray-100);
        border-bottom: var(--border-width-1) solid var(--color-gray-200);
        z-index: 1;
    }

    /* Right Sidebar Scrollable Content */
    .right-sidebar-scrollable-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--spacing-4);
    }

    /* Scrollbar styling inherited from global styles in _base.css */

    /* Hide mobile-only elements on desktop */
    .mobile-sidebar-close,
    .mobile-sidebar-backdrop,
    .navbar-brand-mobile,
    .navbar-toggle {
        display: none !important;
    }
}

/* ========================================================================
   Mobile Layout (<1024px): Single column with sidebar overlays
   ======================================================================== */
@media (max-width: 1023px) {
    .site-grid-container,
    .site-grid-container.three-column-layout {
        display: flex;
        flex-direction: column;
        grid-template-rows: none; /* Disable grid rows on mobile */
    }

    .site-navbar {
        position: sticky; /* Maintain sticky on mobile */
        top: 0;
        z-index: calc(var(--z-100) + 1);
        background-color: var(--color-white);
        border-bottom: var(--border-width-1) solid var(--border-color);
        box-shadow: var(--shadow-sm);
        order: 1; /* First in flex order */
    }

    .site-main-content {
        order: 2; /* Second */
        width: 100%;
    }

    .content-wrapper {
        padding: var(--spacing-3);
    }

    /* Sidebars — off-screen by default, slide in via .mobile-open */
    .main-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: min(85vw, 350px);
        height: 100vh;
        z-index: var(--z-200);
        flex-direction: column;
        background-color: var(--color-gray-100);
        border-right: var(--border-width-1) solid var(--color-gray-200);
        overflow: hidden;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .main-sidebar.mobile-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-right-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(85vw, 350px);
        height: 100vh;
        z-index: var(--z-200);
        flex-direction: column;
        background-color: var(--color-gray-100);
        border-left: var(--border-width-1) solid var(--color-gray-200);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .site-right-sidebar.mobile-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
        .main-sidebar,
        .site-right-sidebar,
        .mobile-sidebar-backdrop {
            transition: none;
        }
    }

    /* Left sidebar: fixed header + scrollable middle + fixed footer */
    .main-sidebar.mobile-open .sidebar-fixed-header {
        flex-shrink: 0;
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: var(--border-width-1) solid var(--color-gray-200);
    }

    /* Reduce branding whitespace in mobile sidebar to match navbar height */
    .main-sidebar.mobile-open .sidebar-branding {
        margin-bottom: 0;
    }

    .main-sidebar.mobile-open .sidebar-scrollable-content {
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* crucial for flex scroll containment */
        padding: var(--spacing-3);
    }

    /* Right sidebar: keep simple static layout */
    .site-right-sidebar.mobile-open .right-sidebar-fixed-header {
        position: static;
    }

    .site-right-sidebar.mobile-open .right-sidebar-scrollable-content {
        overflow-y: visible;
        padding: var(--spacing-3);
    }

    /* Footer is inside .site-main-content, so no separate ordering needed */
}