/**
 * Layout styles for Pursue Life Outdoors theme
 * Contains grid system, containers, and structural layout styles
 */

/* Container System */
.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    box-sizing: border-box;
}

.container {
    max-width: var(--container-xl);
}

@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-xl);
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-xxl);
    }
}

/* Override container padding for mobile to prevent double-padding */
@media (max-width: 576px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* But maintain padding for top-level containers without parent padding */
    main > .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--spacing-md) * -1);
    margin-left: calc(var(--spacing-md) * -1);
    width: 100%;
    box-sizing: border-box;
}

[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    box-sizing: border-box;
}

/* Responsive column classes */
/* xs to md screens have full width columns */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* Large screens (lg and up) */
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    
    /* Fix for content-area to not interfere with sidebar positioning */
    .content-area {
        box-sizing: border-box;
        padding: 0 var(--spacing-md);
    }
    
    /* Make sure columns are properly aligned */
    .row > .col-lg-8,
    .row > .col-lg-4 {
        float: none;
    }
}

/* Site Structure */
.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;
    padding: var(--spacing-xl) 0;
}

.site-main {
    position: relative;
    width: 100%;
}

/* Content Area */
.content-area {
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Post/Page Headers & Content */
.entry-header,
.entry-content,
.entry-footer {
    width: 100%;
    max-width: 100%;
}

/* WordPress Core Content Elements - proper spacing for WP output */
.single-post-content,
.page-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Post content wrapper - consistent spacing */
.post-content-wrapper {
    box-sizing: border-box;
    width: 100%;
}

/* Additional content containment */
.entry-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Single Post & Page Content Specific */
.single-post .content-area,
.page .content-area,
.woocommerce-page .content-area {
    padding: 0 var(--spacing-md);
}

/* Ensure content doesn't touch browser edges on small screens */
@media (max-width: 576px) {
    .content-area {
        padding: 0 var(--spacing-md);
    }
}

/* Sidebar */
.widget-area {
    margin-top: var(--spacing-lg);
}

@media (min-width: 992px) {
    .widget-area {
        margin-top: 0;
    }

    /* Content with Sidebar Layout */
    .content-sidebar .content-area {
        width: 70%;
        float: left;
    }

    .content-sidebar .widget-area {
        width: 30%;
        float: right;
        padding-left: var(--spacing-lg);
    }

    .sidebar-content .content-area {
        width: 70%;
        float: right;
    }

    .sidebar-content .widget-area {
        width: 30%;
        float: left;
        padding-right: var(--spacing-lg);
    }
}

/* Page Layout */
.page-content {
    margin-bottom: var(--spacing-lg);
}

.page-featured-image {
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.page-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Archive Layout */
.archive-posts {
    margin-top: var(--spacing-lg);
}

/* Clear Floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Grid Gap Utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }

/* Margin Utilities */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

/* Padding Utilities */
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

/* Responsive Display Utilities */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* Single post layout */
.single-post {
    margin-bottom: 3rem;
}

/* Featured image styles for posts and pages */
.post-featured-image,
.page-featured-image {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.post-featured-image img {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
}

.single-post .post-thumbnail {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.single-post .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Search results layout */
.search-result-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.search-item-inner {
    display: flex;
    gap: 20px;
}

.search-thumbnail {
    flex: 0 0 100px;
}

.search-content {
    flex: 1;
}

@media (max-width: 576px) {
    .search-item-inner {
        flex-direction: column;
    }
    
    .search-thumbnail {
        flex: 0 0 auto;
        margin-bottom: 1rem;
    }
}

/* 404 page layout */
.error-404 {
    padding: 3rem 0;
    text-align: center;
}

.error-image {
    max-width: 400px;
    margin: 0 auto 2rem;
}

.error-actions {
    margin-top: 2rem;
}

.error-help {
    margin-top: 4rem;
}

.error-help-section {
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* WooCommerce layout adjustments */
.woocommerce-page .site-main {
    margin-bottom: 0;
}

.product-main {
    margin-bottom: 3rem;
}

.shop-sidebar {
    padding-top: 2rem;
}

@media (min-width: 992px) {
    .shop-sidebar {
        padding-top: 0;
        padding-right: 2rem;
    }
}

/* Comments layout */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-list ol {
    list-style: none;
    margin-left: 2rem;
}

.comment-body {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.comment-meta {
    margin-bottom: 1rem;
}

.comment-metadata {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #6c757d;
}

.comment-content {
    margin-bottom: 1rem;
}

.comment-respond {
    margin-top: 2rem;
}

/* Ensure row.sidebar-layout properly contains columns */
@media (min-width: 992px) {
    .row.sidebar-layout {
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
    }
    
    .row.sidebar-layout > [class*="col-"] {
        flex-shrink: 0;
    }
    
    /* Reset container padding specifically for page and post templates */
    .single-post-content,
    .page-content {
        padding: 0;
    }
    
    /* For desktop, padding is handled by post-content-wrapper */
    .post-content-wrapper {
        padding-left: var(--content-padding-desktop);
        padding-right: var(--content-padding-desktop);
    }
}

/* Mobile viewport fixes */
@media (max-width: 991px) {
    /* Ensure content stays within boundaries */
    .col-lg-8.content-area {
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }
}