/**
 * Franco Shopfitters - Layout Styles
 * Ensures proper page structure and sticky footer
 * 
 * @package Franco_Shopfitters_Theme
 * @since 1.0.0
 */

/* ===========================
   Sticky Footer Solution
   =========================== */

/* Method 1: Flexbox Solution (Modern Browsers) */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#page,
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area should grow to fill space */
#content,
.site-content {
    flex: 1 0 auto;
    /* Ensure content has minimum height */
    min-height: 300px;
}

/* Content wrapper inside main content */
.content-wrapper {
    flex: 1;
    padding: 40px 0;
}

/* Footer should not grow */
.site-footer,
#colophon {
    flex-shrink: 0;
    margin-top: auto; /* Pushes footer to bottom */
}

/* ===========================
   Alternative Grid Solution
   =========================== */
@supports (display: grid) {
    body {
        display: block;
    }
    
    #page,
    .site {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100vh;
    }
    
    .site-header {
        grid-row: 1;
    }
    
    #content,
    .site-content {
        grid-row: 2;
    }
    
    .site-footer {
        grid-row: 3;
    }
}

/* ===========================
   Page Container Styles
   =========================== */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.content-area {
    width: 100%;
}

/* Ensure proper spacing for short content pages */
.page-content,
.entry-content {
    min-height: 400px;
}

/* Account/Dashboard pages specific */
.woocommerce-account .woocommerce,
.woocommerce-MyAccount-content {
    min-height: 500px;
}

/* Empty cart page */
.woocommerce-cart .woocommerce {
    min-height: 400px;
}

/* 404 and no results pages */
.error404 .site-content,
.no-results .site-content {
    min-height: 600px;
}

/* ===========================
   Responsive Adjustments
   =========================== */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 20px 0;
    }
    
    .page-content,
    .entry-content {
        min-height: 300px;
    }
    
    .woocommerce-account .woocommerce,
    .woocommerce-MyAccount-content {
        min-height: 400px;
    }
}


/* ===========================
   Admin Bar Adjustment
   =========================== */
.admin-bar #page {
    min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar #page {
        min-height: calc(100vh - 46px);
    }
}

/* ===========================
   Utility Classes
   =========================== */
.full-height {
    min-height: 100vh;
}

.half-height {
    min-height: 50vh;
}

.auto-height {
    min-height: auto;
}

/* Spacing utilities for short content */
.content-spacer {
    padding: 60px 0;
}

.content-spacer-large {
    padding: 100px 0;
}

/* ===========================
   Debug Helper (remove in production)
   =========================== */
/* Uncomment to visualize layout structure
#page {
    border: 2px solid red;
}

#content {
    border: 2px solid blue;
}

.site-footer {
    border: 2px solid green;
}
*/