/* 3-Column Facebook-Style Layout - Shared CSS for all Cafe pages */
.cafe-three-column-layout {
    background: #f0f2f5; /* Facebook's background color */
    overflow: visible !important;
}

/* Full width container */
.cafe-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full width header - like Facebook */
.cafe-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: white !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Header inner container - full width */
.cafe-header > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure parent containers allow sticky positioning */
.cafe-three-column-layout,
.cafe-three-column-layout .max-w-7xl,
.cafe-three-column-wrapper {
    overflow: visible !important;
    height: auto !important;
    contain: none !important;
}

/* Three Column Wrapper - Centers middle column, full width */
.cafe-three-column-wrapper {
    display: grid !important;
    grid-template-columns: 250px 500px 280px !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Left Sidebar - touches left edge */
.cafe-three-column-wrapper > *:nth-child(1) {
    justify-self: start !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Middle Feed Column */
.cafe-three-column-wrapper > *:nth-child(2) {
    width: 500px !important;
    min-width: 500px !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
}

/* Right Sidebar - touches right edge */
.cafe-three-column-wrapper > *:nth-child(3) {
    justify-self: end !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Desktop: Adjust grid when sidebars are fixed */
@media (min-width: 1024px) {
    /* Change grid to single column centered layout since sidebars are fixed overlays */
    .cafe-three-column-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sidebars are fixed positioned - they're out of flow, so flex layout won't affect them */
    /* No constraints needed here - fixed positioning handles everything */
    
    /* Center the middle column with proper spacing from sidebars (Facebook-style) */
    .cafe-three-column-wrapper > *:nth-child(2),
    .cafe-feed-column {
        margin-left: 250px !important; /* Reduced from 344px */
        margin-right: 304px !important; /* 280px sidebar + 24px visible gap */
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
    }
    
    /* Cafe home page: Add 30px left margin to middle column */
    body.page-template-page-cafe .cafe-three-column-wrapper > *:nth-child(2),
    body.page-template-page-cafe .cafe-feed-column {
        margin-left: 280px !important; /* 250px + 30px */
    }
}

/* Sticky sidebars with scrollable inner content - Desktop */
@media (min-width: 1024px) {
    /* Break sidebars out of container to touch screen edges */
    .cafe-three-column-layout {
        position: relative !important;
    }
    
    .cafe-left-sidebar {
        position: fixed !important; /* Fixed to break out of container and touch edge */
        left: 0 !important; /* Touch left screen edge */
        top: 64px !important; /* Touch bottom of header (header is h-16 = 64px) */
        height: calc(100vh - 64px) !important; /* Full height minus header */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10 !important;
        width: 250px !important;
        margin: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 16px !important; /* Match header content left padding */
        padding-right: 0 !important;
        background: white !important;
        border-right: 1px solid #e4e6eb !important; /* Subtle grey right border */
        box-shadow: 2px 0 4px 0 rgba(0,0,0,0.04) !important; /* Shadow on right side */
        display: block !important; /* Override hidden class */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbars but keep scrolling */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
    }
    
    /* Override any hidden classes */
    .cafe-left-sidebar.hidden {
        display: block !important;
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .cafe-left-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    .cafe-right-sidebar {
        position: fixed !important; /* Fixed to break out of container and touch edge */
        right: 0 !important; /* Touch right screen edge */
        top: 64px !important; /* Touch bottom of header (header is h-16 = 64px) */
        height: calc(100vh - 64px) !important; /* Full height minus header */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10 !important;
        width: 280px !important;
        margin: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 0 !important;
        padding-right: 16px !important; /* Match header content right padding */
        background: white !important;
        border-left: 1px solid #e4e6eb !important; /* Subtle grey left border */
        box-shadow: -2px 0 4px 0 rgba(0,0,0,0.04) !important; /* Shadow on left side */
        display: block !important; /* Override hidden class */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbars but keep scrolling */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
    }
    
    /* Override any hidden classes */
    .cafe-right-sidebar.hidden {
        display: block !important;
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .cafe-right-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    /* Sidebars are fixed overlays - grid layout still works for centering middle column */
    
    /* Ensure all parent containers allow sticky */
    body, html,
    .cafe-container,
    .cafe-three-column-layout,
    .cafe-three-column-layout .max-w-7xl,
    .cafe-three-column-wrapper {
        overflow: visible !important;
        height: auto !important;
        contain: none !important;
    }
}

.cafe-three-column-layout .max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1023px) {
    .cafe-three-column-wrapper {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
    }
    
    .cafe-three-column-wrapper > *:nth-child(2),
    .cafe-feed-column {
        justify-self: center !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Middle Feed Column */
@media (min-width: 1024px) {
    .cafe-feed-column {
        max-width: 500px !important;
        width: 500px !important;
        min-width: 500px !important;
        flex: 0 0 500px !important;
    }
}

/* Sidebar backgrounds - white */
.cafe-left-sidebar,
.cafe-right-sidebar {
    background: white !important;
}

/* Sidebar inner content padding - align with header content (Facebook-style) */
@media (min-width: 1024px) {
    .cafe-left-sidebar {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 16px !important; /* Match header content left padding */
        padding-right: 0 !important;
    }
    
    .cafe-right-sidebar {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 0 !important;
        padding-right: 16px !important; /* Match header content right padding */
    }
}

/* Sidebar boxes - white background with 12px radius and news scroll shadow */
.cafe-left-sidebar .bg-white {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04) !important;
    border: none !important;
}

/* Right sidebar chatroom widget - no background (sidebar is already white) */
.cafe-right-sidebar > div:first-child,
.cafe-right-sidebar > div:nth-child(2) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Sidebar navigation items */
.cafe-left-sidebar nav a,
.cafe-right-sidebar nav a {
    border-radius: 12px !important;
}

/* Ensure rounded-lg elements in sidebars use 12px */
.cafe-left-sidebar .rounded-lg,
.cafe-right-sidebar .rounded-lg {
    border-radius: 12px !important;
}

/* Update shadow-sm in sidebars to use news scroll shadow */
.cafe-left-sidebar .shadow-sm,
.cafe-right-sidebar .shadow-sm {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04) !important;
    border-radius: 12px !important;
}

/* Apply 12px border radius to all sidebar elements with rounded corners */
.cafe-left-sidebar *[class*="rounded"],
.cafe-right-sidebar *[class*="rounded"] {
    border-radius: 12px !important;
}

/* Keep circular elements circular (avatars, etc) */
.cafe-left-sidebar .rounded-full,
.cafe-right-sidebar .rounded-full {
    border-radius: 9999px !important;
}

/* Mobile: Single column layout */
@media (max-width: 1023px) {
    /* Ensure body and html don't cause overflow */
    body.page-template-page-for-you {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .cafe-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure header doesn't cause overflow */
    .cafe-header {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .cafe-header > div {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
    
    .cafe-mobile-nav {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .cafe-left-sidebar {
        display: none !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .cafe-feed-column {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: auto !important;
        flex: 1 1 auto !important;
        margin: 0 12px !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure all child elements in feed column don't overflow */
    .cafe-feed-column > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent images and media from causing overflow */
    .cafe-feed-column img,
    .cafe-feed-column video,
    .cafe-feed-column iframe {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all post cards don't overflow */
    .cafe-feed-column .masonry-card,
    .cafe-feed-column .cafe-text-post,
    .cafe-feed-column .cafe-photo-post,
    .cafe-feed-column .cafe-question-post,
    .cafe-feed-column .cafe-article-card,
    .cafe-feed-column [class*="cafe-"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent any element from being wider than container (except inline elements) */
    .cafe-feed-column div,
    .cafe-feed-column section,
    .cafe-feed-column article,
    .cafe-feed-column aside,
    .cafe-feed-column main {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Allow text and inline elements to work normally */
    .cafe-feed-column span,
    .cafe-feed-column a,
    .cafe-feed-column strong,
    .cafe-feed-column em,
    .cafe-feed-column i,
    .cafe-feed-column b {
        max-width: none !important;
    }
    
    /* Ensure paragraphs wrap but don't overflow */
    .cafe-feed-column p {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    .cafe-right-sidebar {
        display: none !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .cafe-three-column-layout {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .cafe-three-column-layout .max-w-7xl {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .cafe-three-column-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        display: block !important;
    }
    
    .cafe-three-column-wrapper > *:nth-child(1),
    .cafe-three-column-wrapper > *:nth-child(3) {
        display: none !important;
    }
    
    .cafe-three-column-wrapper > *:nth-child(2),
    .cafe-feed-column {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-self: center !important;
        box-sizing: border-box !important;
    }
}