/* 
 * Responsive Fixes for Portfolio/Gallery Layout with Sidebar
 * Addresses sidebar overlap issues ONLY on smaller screens
 * UPDATED: Adjust sidebar and content vertical positioning
 */

/* CRITICAL FIX: Remove excessive gap between titlebar and content */
.tm-titlebar-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Fix gap between breadcrumb and main content */
.breadcrumb-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
}

/* Reduce content wrapper top spacing */
#content-wrapper,
.site-content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix spacing for content area */
.site-content {
    padding-top: 15px !important;
}

.site-content-inner {
    padding-top: 0 !important;
}

/* Fix content area container spacing */
#primary.content-area {
    padding-top: 20px !important;
}

/* Fix the tab area spacing - REMOVE GAP BETWEEN TABS AND CONTENT */
.tm-sortable-list.portfolio-tabs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove any default margins from the article */
.post-portfolio.page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep normal spacing on desktop - NO CHANGES */
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep normal portfolio wrapper spacing on desktop */
.portfolio-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* SIDEBAR AND MAIN CONTENT POSITIONING ADJUSTMENTS */
/* Move sidebar up a bit */
.sidebar,
#secondary {
    margin-top: -20px !important;
    padding-top: 0 !important;
}

/* Move main content down a bit */
.site-main,
#main {
    margin-top: 30px !important;
    padding-top: 10px !important;
    position: relative;
    z-index: 2;
}

/* Adjust content area for better alignment */
.content-area {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Ensure sidebar starts higher than main content */
.content-area .sidebar {
    margin-top: -30px !important;
    flex-shrink: 0;
}

/* ONLY apply sidebar fixes on smaller screens where overlap occurs */
@media (max-width: 1199px) {
    /* Reset positioning for responsive layouts */
    .sidebar,
    #secondary {
        margin-top: 0 !important;
        padding-top: 25px !important;
    }
    
    .site-main,
    #main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure content doesn't get hidden behind sidebar */
    #primary {
        position: relative;
        z-index: 1;
    }
    
    /* Sidebar adjustments for tablet view - RESTORE ORIGINAL BORDER */
    .sidebar {
        position: relative;
        width: 100%;
        z-index: 2;
        margin-top: 40px !important;
        padding-top: 25px !important;
        border-top: 2px solid #eee !important; /* RESTORED ORIGINAL COLOR */
    }
    
    /* Portfolio/Gallery container adjustments */
    .portfolio-container,
    .gallery-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 15px;
        margin-bottom: 35px !important;
    }
    
    /* Tab navigation fixes */
    .tm-sortable-list,
    .portfolio-tabs,
    .gallery-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 25px !important;
        margin-top: 0 !important;
        position: relative;
        z-index: 3;
    }
    
    /* Ensure tab links are visible */
    .tm-sortable-list .tm-sortable-link,
    .portfolio-tabs a,
    .gallery-tabs a {
        display: inline-block;
        margin: 5px;
        padding: 8px 15px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        position: relative;
        z-index: 4;
    }
}

@media (max-width: 991px) {
    /* MOBILE: Apply spacing only to prevent overlap */
    .site-content {
        padding-top: 10px !important;
    }
    
    #primary.content-area {
        padding-top: 15px !important;
    }
    
    /* Force sidebar to stack below content on mobile */
    .content-area {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important;
        display: block; /* Override flex on mobile */
    }
    
    .sidebar {
        float: none !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 50px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 25px !important;
        border-top: 2px solid #eee !important; /* RESTORED ORIGINAL COLOR */
    }
    
    /* Container layout fixes */
    .container,
    .site-content-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Portfolio grid responsive adjustments */
    .gallery-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 0 40px 0 !important;
        width: 100% !important;
    }
    
    .gallery-item {
        flex: unset !important;
        max-width: unset !important;
        padding: 0 !important;
    }
    
    .gallery-item-content {
        height: 200px !important;
    }
    
    /* Navigation improvements */
    .tm-sortable-list {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        margin-bottom: 30px !important;
        margin-top: 0 !important;
    }
    
    .tm-sortable-list .tm-sortable-link {
        margin: 5px 10px 5px 0;
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    /* Mobile-specific fixes */
    body {
        overflow-x: hidden;
    }
    
    /* Minimal spacing on small mobile */
    .site-content {
        padding-top: 5px !important;
    }
    
    #primary.content-area {
        padding-top: 10px !important;
    }
    
    .tm-titlebar-wrapper {
        margin-bottom: 0 !important;
    }
    
    /* Sidebar spacing to prevent overlap */
    .sidebar {
        margin-top: 60px !important;
        padding-top: 30px !important;
        border-top: 2px solid #eee !important; /* RESTORED ORIGINAL COLOR */
    }
    
    /* Single column layout for portfolio */
    .gallery-container {
        grid-template-columns: 1fr !important;
        margin-bottom: 50px !important;
    }
    
    .gallery-item-content {
        height: 250px !important;
    }
    
    /* Mobile navigation improvements */
    .tm-sortable-list {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 25px !important;
        margin-top: 0 !important;
    }
    
    .tm-sortable-list .tm-sortable-link {
        margin: 5px 0;
        text-align: center;
        width: 100%;
    }
    
    .tm-sortable-list .tm-sortable-link a {
        display: block;
        text-align: center;
        padding: 12px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }
    
    .tm-sortable-list .tm-sortable-link a.selected {
        background: #cda274;
        color: white;
        border-color: #cda274;
    }
    
    /* Fix for mobile menu overlap */
    .mega-menu-toggle {
        z-index: 9999 !important;
    }
    
    /* Content padding adjustments */
    #primary,
    .content-area {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .entry-content {
        margin-bottom: 50px !important;
    }
}

@media (max-width: 575px) {
    /* Extra small screens */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .sidebar {
        margin-top: 70px !important;
        padding-top: 35px !important;
    }
    
    .gallery-container {
        padding: 0 5px;
        margin-bottom: 60px !important;
    }
    
    /* Ensure images don't overflow */
    .gallery-item img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    /* Tab navigation for very small screens */
    .tm-sortable-list .tm-sortable-link {
        padding: 10px;
        font-size: 14px;
    }
}

/* Specific fixes for sidebar widget overlap */
.sidebar .widget {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* Ensure main content is never hidden */
.site-main,
#main {
    position: relative;
    z-index: 2;
}

/* Fix for sticky elements on mobile */
@media (max-width: 991px) {
    .is_stuck,
    .sticky-header,
    .fixed-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
    }
}

/* Portfolio/Gallery specific responsive fixes */
.themetechmount-portfoliobox-wrapper,
.portfolio-wrapper {
    position: relative;
    z-index: 1;
}

/* Flexbox fallback for older browsers */
.gallery-container.no-grid {
    display: flex !important;
    flex-wrap: wrap !important;
}

@media (max-width: 991px) {
    .gallery-container.no-grid .gallery-item {
        flex: 0 0 calc(50% - 10px) !important;
        margin: 5px !important;
    }
}

@media (max-width: 575px) {
    .gallery-container.no-grid .gallery-item {
        flex: 0 0 calc(100% - 10px) !important;
        margin: 5px !important;
    }
}

/* Additional z-index management */
.tm-titlebar-wrapper {
    z-index: 5;
}

.site-header {
    z-index: 10;
}

.mega-menu-wrap {
    z-index: 11;
}

/* Ensure proper stacking order */
.content-wrapper {
    position: relative;
    z-index: 1;
}

/* Fix for overlapping elements */
@media (max-width: 1199px) {
    .elementor-section {
        position: relative;
        z-index: 1;
    }
    
    .sidebar-overlay {
        display: none;
    }
}

/* Utility classes for manual fixes if needed */
.mobile-stack {
    display: flex;
    flex-direction: column;
}

.mobile-hide {
    display: none !important;
}

@media (min-width: 768px) {
    .mobile-hide {
        display: block !important;
    }
}

/* Print styles to prevent layout issues */
@media print {
    .sidebar,
    .mega-menu-wrap,
    .tm-sortable-list {
        display: none !important;
    }
    
    .content-area {
        width: 100% !important;
        float: none !important;
    }
}