/* PAGE CONTENT PADDING - SEPARATE FROM SIDEBAR MARGIN */
/* This handles content padding without interfering with sidebar positioning */

/* Default page content padding for all pages except home */
#page-content {
    padding: 24px;
    box-sizing: border-box;
}

/* Home page specific - no padding for artistic background */
body[data-pathname="/"] #page-content,
body[data-pathname=""] #page-content {
    padding: 0;
}

/* Mobile adjustments - smaller padding */
@media (max-width: 768px) {
    #page-content {
        padding: 12px;
    }
    
    /* Home page still no padding on mobile */
    body[data-pathname="/"] #page-content,
    body[data-pathname=""] #page-content {
        padding: 0;
    }
}

/* Small mobile - even smaller padding */
@media (max-width: 480px) {
    #page-content {
        padding: 8px;
    }
    
    /* Home page still no padding on small mobile */
    body[data-pathname="/"] #page-content,
    body[data-pathname=""] #page-content {
        padding: 0;
    }
}

/* Ensure proper spacing from sidebar - this works with sidebar.css */
@media (min-width: 901px) {
    /* Desktop and tablet - content should not overlap sidebar */
    body.has-sidebar #page-content {
        /* Sidebar margin is handled by sidebar.css, this is just content padding */
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (max-width: 900px) {
    /* Mobile - no sidebar margin needed, just content padding */
    body.has-sidebar #page-content {
        padding: 12px;
    }
    
    body.has-sidebar[data-pathname="/"] #page-content,
    body.has-sidebar[data-pathname=""] #page-content {
        padding: 0;
    }
}