/* =========================================
   SALMART DESKTOP UPGRADE STYLES
   (min-width: 768px) - Tablet/Small Desktop
   ========================================= */
@media (min-width: 768px) {
    
    /* --- 1. Global / Body Adjustments --- */
    body {
        /* Allow content to fill the screen */
        padding-top: 0; 
    }

    /* New Wrapper to manage all content below the fixed header */
    .desktop-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: calc(100vh - 70px); /* Account for fixed desktop header */
        margin-top: 70px; /* Push content down past the desktop header */
    }

    /* --- 2. Header & Navigation --- */
    
    /* Make the fixed header less aggressive on desktop */
    .head {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        border-bottom: 1px solid #eee;
        height: 60px;
        padding: 15px 0 !important;
    }
    
    /* Hide the mobile menu icon and profile picture */
    .menu-icon, .profile-pic {
        display: none !important;
    }

    /* Position the Search icon/link directly in the header */
    .head + div { /* Selects the div containing the search icon */
        position: fixed;
        right: 20px;
        top: 0;
        margin-left: unset !important;
        transform: none !important;
        z-index: 20;
    }

    /* Convert Mobile Bottom Nav (#navbar) to Desktop Horizontal Header */
    #navbar {
        display: flex; /* Make it visible */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        z-index: 10;
        padding: 0 20px;
        justify-content: flex-end; /* Push items to the right */
        align-items: center;
    }

    #navbar ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #navbar li {
        margin: 0 8px;
    }

    #navbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 10px;
        color: #65676b;
        transition: color 0.2s, background-color 0.2s;
        border-radius: 6px;
    }
    
    #navbar a span:last-child {
        display: none; /* Hide text label on top nav */
    }

    #navbar a i {
        font-size: 20px;
        margin-bottom: 3px;
    }

    #navbar a.active {
        color: var(--primary-color);
        border-bottom: 3px solid var(--primary-color);
        border-radius: 0;
        background-color: transparent;
    }
    
    /* Make the SALMART title part of the fixed header on the left */
    .head {
        position: fixed !important;
        left: 20px !important;
        top: 0 !important;
        transform: none !important;
        width: auto !important;
        z-index: 20;
        font-size: 22px !important;
    }

    /* Hide the mobile search bar placeholder div */
    .head + div {
        display: none;
    }


    /* --- 3. Main Layout Structure (3-Column) --- */
    
    .main-layout {
        /* Remove justify-content: center to allow left/right sidebars to pin */
        justify-content: space-between; 
        max-width: 1400px; /* Define max content width */
        width: 100%;
        padding: 20px 0; /* Increase vertical padding */
        gap: 20px; /* Increase gap for cleaner separation */
        margin: 0 auto;
    }

    /* Permanent Sidebars: Use absolute positioning relative to desktop-wrapper */
    .sidebar {
        display: block !important;
        width: 280px;
        height: calc(100vh - 90px) !important; /* Fixed height, allows content to scroll naturally */
        position: sticky !important; /* Use sticky positioning */
        top: 80px; /* Stick below the fixed header */
        margin-top: 0 !important; /* Reset mobile margin */
        padding: 20px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        background: #fff;
        overflow-y: auto; /* Allow content to scroll inside */
    }

    .sidebar.left {
        order: 1; /* Leftmost column */
        margin-left: 20px;
        min-width: 280px;
    }

    .sidebar.right {
        order: 3; /* Rightmost column */
        margin-right: 20px;
        min-width: 280px;
    }

    .feed {
        order: 2; /* Center column */
        flex-grow: 1;
        max-width: 650px;
        min-width: 450px;
        padding: 0; /* Remove mobile padding */
    }
    
    /* --- 4. Create Post & Category Filter --- */
    
    /* Move Create Ad buttons to the top of the center feed */
    .create-post-container {
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        text-align: left;
        margin-bottom: 20px;
    }

    .create-post-container > div:first-child {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .post-input {
        flex: 1;
        margin-top: 0 !important;
        height: 45px;
        max-width: none !important;
        font-size: 14px !important;
    }
    
    /* Position the Category Filter sticky at the top of the feed column */
    .category-filter {
        top: 80px !important; /* Stick below fixed header */
        z-index: 5;
        background: transparent; /* Integrate with feed background */
        border-bottom: none;
        padding: 0;
        margin-bottom: 20px;
        /* Ensure it only takes the width of the feed column */
        position: sticky !important; 
        width: 100%; 
        left: unset !important;
        right: unset !important;
    }
    
    .category-scroll-wrapper {
        background-color: white;
        border-radius: var(--border-radius);
        padding: 8px;
        box-shadow: var(--shadow);
        margin: 0;
        border: 1px solid #eee;
    }

    .category-scroll {
        /* Center the category buttons in the feed column */
        justify-content: center; 
    }
    
    /* --- 5. Component Refinements (for readability) --- */
    
    /* Improve spacing on the un-logged-in banner */
    #login-register-banner {
        padding: 30px !important;
    }

    /* Style the sidebar iframes for better integration */
    .sidebar iframe {
        border-radius: var(--border-radius);
        background-color: transparent;
    }
}


/* =========================================
   STANDARD DESKTOP ENHANCEMENTS 
   (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {
    .main-layout {
        max-width: 1600px;
    }

    .sidebar {
        width: 320px; /* Increase width for more content */
        min-width: 320px;
    }
    
    .feed {
        max-width: 750px; /* Increase feed width */
        min-width: 500px;
        padding: 0 10px;
    }
}


/* =========================================
   LARGE DESKTOP / WIDE SCREEN GRID 
   (min-width: 1280px)
   ========================================= */
@media (min-width: 1280px) {
    .main-layout {
        max-width: 1800px;
    }
    
    .sidebar {
        width: 350px;
        min-width: 350px;
    }

    .feed {
        max-width: 800px;
        /* Enable a 2-column masonry or grid for products/posts */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two-column grid */
        gap: 20px;
        padding-top: 10px;
    }
    
    /* Ensure existing posts are laid out in the 2-column grid */
    #posts-container > * { 
        width: 100%; /* Important for grid item sizing */
    }

    /* Ensure skeleton posts also respect the grid */
    .skeleton-post {
        width: 100%;
    }
    
    /* Reset the banner to span two columns */
    #login-register-banner {
        grid-column: span 2;
    }
    
    /* Ensure the Create Post container and Category filter span full width */
    .create-post-container, .category-filter {
        grid-column: span 2;
        width: 100%;
        margin-bottom: 25px; /* Increase spacing */
    }

    /* Center the category buttons */
    .category-scroll-wrapper {
        justify-content: center;
    }
}