/* ===================================================================
   LAYOUT/PAGE.CSS
   Page Layout and Transitions
   =================================================================== */

/* ===== PAGE LAYOUT ===== */

/* Body padding for fixed header */
body {
    padding-top: 130px;
}

/* ----- Page Wrapper ----- */
.page-wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ----- Main Content Area ----- */
.main {
    flex: 1;
    width: 100%;
    padding: 2rem 0 3rem;
    position: relative;
    background-color: #212529;
}

/* Main content wrapper for better centering */
.main-content {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 0;
}

/* Main content with page navigation */
.main-content.has-page-nav {
    max-width: 900px;
    padding: 2rem;
}

/* Section spacing */
.section {
    margin-bottom: 2rem;
}

.section-content {
    padding: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }
    
    .main {
        padding: 1.5rem 0 2rem;
    }
    
    .main-content {
        padding: 0 1rem;
    }
    
    .section-content {
        padding: 1rem 0;
    }
}

/* ----- Container ----- */
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* ----- Layout Helpers ----- */
#mods-grid {
    min-height: 300px;
    position: relative;
}

/* ===== PAGE TRANSITIONS ===== */

/* ----- Page Transition Base ----- */
body[data-plugin-page-transition] {
    transition: ease opacity 300ms;
}

/* ----- Active Page Transition ----- */
body.page-transition-active {
    opacity: 0 !important; /* Needs !important to override inline styles */
}