/**
 * Modern Page Templates CSS
 * 
 * Styles for modern page templates (page.php, index.php, etc.)
 * 
 * @package WooFood Modern Theme
 */

/* ====================================
   PAGE TEMPLATE STYLES
   ==================================== */

/* Page Background Image */
.modern-main-content.has-page-background {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}



.modern-main-content.has-page-background > * {
    position: relative;
    z-index: 1;
}

.modern-main-content.has-page-background .modern-container,
.modern-main-content.has-page-background .modern-content-wrapper,
.modern-main-content.has-page-background .modern-content-fullwidth,
.modern-main-content.has-page-background .modern-content-no-container {
    position: relative;
    z-index: 1;
}

.modern-main-content.has-page-background .modern-content-wrapper {
    padding-top: 100px;
}

.modern-main-content.has-page-background .modern-page-content,
.modern-main-content.has-page-background .modern-single-content {
    background: none;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile adjustments for background image */
@media (max-width: 767px) {
    .modern-main-content.has-page-background {
        background-attachment: scroll;
    }
    
    .modern-main-content.has-page-background .modern-page-content {
        padding: 25px;
    }
}

.modern-featured-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.modern-page-content {
    background: var(--woofood-modern-light, #fff);
    padding: 20px;
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* Allow checkout blocks to break out of flex constraints */
.modern-page-content .wp-block-woocommerce-checkout {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.modern-page-body {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

/* Allow checkout blocks to use full width */
.modern-page-body .wp-block-woocommerce-checkout {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.modern-page-body p {
    margin-bottom: 20px;
}

/* Removed problematic CSS rules that were interfering with WooFood plugin */

.modern-page-body blockquote {
    border-left: 4px solid var(--woofood-modern-primary, #FFD700);
    padding: 20px 24px;
    margin: 24px 0;
    background: #f8fafc;
    border-radius: 8px;
    font-style: italic;
}

.modern-page-links {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.modern-sidebar-content {
    display: flex;
    gap:8px;
    flex-direction: column;
    position: sticky;
    top: 20px;
    padding:20px;
}

.modern-sidebar .widget {
    background: var(--woofood-modern-light, #fff);
}

.modern-sidebar .widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--woofood-modern-text, #333);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--woofood-modern-primary, #FFD700);
}

/* ====================================
   SINGLE TEMPLATE STYLES
   ==================================== */

.modern-single-content {
    background: var(--woofood-modern-light, #fff);
}

.modern-single-body {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
}

.modern-single-body p {
    margin-bottom: 20px;
}

.modern-single-body h2,
.modern-single-body h3,
.modern-single-body h4 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--woofood-modern-text, #333);
}

.modern-single-body ul,
.modern-single-body ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.modern-single-body li {
    margin-bottom: 8px;
}

.modern-single-body blockquote {
    border-left: 4px solid var(--woofood-modern-primary, #FFD700);
    padding: 20px 24px;
    margin: 24px 0;
    background: #f8fafc;
    border-radius: 8px;
    font-style: italic;
}

.modern-single-links {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.modern-post-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #6b7280;
    flex-wrap: wrap;
}

.modern-post-meta span {
    display: flex;
    align-items: center;
}

.modern-single-tags {
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.modern-tags-list {
    margin-top: 8px;
}

.modern-tags-list a {
    display: inline-block;
    padding: 4px 12px;
    background: #f3f4f6;
    color: var(--woofood-modern-text, #333);
    text-decoration: none;
    border-radius: 16px;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.modern-tags-list a:hover {
    background: var(--woofood-modern-primary, #FFD700);
    color: var(--woofood-modern-dark, #000);
}

.modern-post-navigation {
    background: var(--woofood-modern-light, #fff);
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 24px;
}

.modern-nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.modern-nav-previous,
.modern-nav-next {
    flex: 1;
}

.modern-nav-next {
    text-align: right;
}

.modern-nav-links a {
    display: block;
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ====================================
   WOOFOOD OVERRIDES - Prevent theme conflicts
   ==================================== */

/* Reset theme styles for WooFood accordion elements */
.woofood-accordion,
.woofood-accordion *,
.panel-group,
.panel-group * {
    /* Reset margins and padding that break accordion layout */
    margin: 0;
    padding: 0;
}

.has-page-background widget woofood-mini-cart-widget {
    background: none;
}

.has-page-background .modern-sidebar .widget {
    border-radius: 15px;
    /* border: 0px; */
}

.modern-page-body .woofood-accordion h2,
.modern-page-body .woofood-accordion h3,
.modern-page-body .woofood-accordion h4,
.modern-page-body .panel-title h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: inherit !important;
}

.modern-page-body .woofood-products,
.modern-page-body .woofood-products ul,
.modern-page-body .woofood-products ol {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.modern-page-body .woofood-product-loop,
.modern-page-body .woofood-products li {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* Ensure WooFood blocks maintain their styling */
.wp-block-woofood-accordion-menu .woofood-accordion,
.wp-block-woofood-side-menu .woofood-side-menu,
.wp-block-woofood-sticky-tabs .woofood-tabs-wrapper {
    /* Reset theme interference */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Allow WooFood templates to break out of container constraints */
.woofood-menu-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Ensure WooFood templates can use their own container logic */
.woofood-menu-container .woofood-tabs-nav,
.woofood-menu-container .woofood-tabs-content,
.woofood-menu-container .woofood-accordion-wrapper {
    max-width: 100%;
    width: 100%;
    background: white;
}

/* Allow WooFood templates to override theme flexbox constraints */
.woofood-menu-container * {
    box-sizing: border-box;
}

/* Mobile-specific fixes for WooFood templates */
@media (max-width: 768px) {
    .woofood-menu-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .woofood-tabs-nav-wrapper {
        position: sticky !important;
        top: 0 !important;
        z-index: 1001 !important;
    }
    
    .woofood-tabs-nav-inner {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .woofood-tabs-scroll-indicator {
        z-index: 1002 !important;
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .woofood-tabs-nav-inner {
        padding: 12px !important;
        gap: 4px !important;
    }
    
    .woofood-tab-button {
        padding: 10px 12px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .woofood-tabs-scroll-indicator {
        width: 32px !important;
        height: 32px !important;
    }
}

.wp-block-woofood-accordion-menu .panel-title h4,
.wp-block-woofood-side-menu h3,
.wp-block-woofood-sticky-tabs h3 {
    margin: 0 !important;
    color: inherit !important;
}

/* ====================================
   FULL WIDTH CONTAINER TEMPLATE
   ==================================== */

/* Remove padding from main content wrapper for fullwidth templates */
body.page-template-template-fullwidth-container .modern-main-content,
body.page-template-template-fullwidth-no-container .modern-main-content {
    padding: 0;
}

.modern-content-fullwidth {
    width: 100%;
}

.modern-content-area-fullwidth {
    width: 100%;
    max-width: 100%;
}

.modern-content-area-fullwidth .modern-page-content {
    background: transparent;
    padding: 0;
}

/* ====================================
   FULL WIDTH NO CONTAINER TEMPLATE
   ==================================== */

.modern-content-no-container {
    width: 100%;
    max-width: 100%;
}

.modern-content-area-no-container {
    width: 100%;
    max-width: 100%;
}

.modern-content-area-no-container .modern-page-content {
    background: transparent;
    padding: 0;
}

.modern-content-area-no-container .modern-page-header,
.modern-content-area-no-container .modern-page-body,
.modern-content-area-no-container .modern-page-comments {
    padding-left: 0;
    padding-right: 0;
}

.modern-content-area-no-container .modern-page-featured-image {
    padding-left: 0;
    padding-right: 0;
}

.modern-featured-img-full {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .modern-content-wrapper {
        flex-direction: column;
    }
    
    .modern-sidebar {
        margin-top: 40px;
    }
    
    .modern-post-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .modern-nav-links {
        flex-direction: column;
        gap: 16px;
    }
    
    .modern-nav-next {
        text-align: left;
    }
    
    .modern-nav-links a {
        max-width: 100%;
    }
    
    .modern-content-area-fullwidth .modern-page-content {
        padding: 20px;
    }
    
    .modern-content-area-no-container .modern-page-content {
        padding: 20px 0;
    }
    
    .modern-content-area-no-container .modern-page-header,
    .modern-content-area-no-container .modern-page-body,
    .modern-content-area-no-container .modern-page-comments {
        padding-left: 15px;
        padding-right: 15px;
    }
}