/* Container queries for responsive layout */
/* Note: Breakpoint is set dynamically via CSS custom property in functions.php */
@container page (max-width: var(--wpo-breakpoint, 768px)) {
    .wpo-container {
        padding-left: min(var(--wpo-gutter-mobile), calc(var(--wpo-gutter-mobile-vw) * 1vw));
        padding-right: min(var(--wpo-gutter-mobile), calc(var(--wpo-gutter-mobile-vw) * 1vw));
    }
    
    .wpo-content:not(.wpo-container) {
        padding-left: min(var(--wpo-gutter-mobile), calc(var(--wpo-gutter-mobile-vw) * 1vw));
        padding-right: min(var(--wpo-gutter-mobile), calc(var(--wpo-gutter-mobile-vw) * 1vw));
    }

    .vc_row,
    .vc_row-fluid {
        display: flex;
        flex-wrap: wrap;
    }

    .wpb_column,
    .vc_column_container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
}

/* Mobile header navigation */
@container header (max-width: var(--wpo-breakpoint, 768px)) {
    .wpo-nav-details {
        margin-left: 0;
    }
    
    .wpo-nav-summary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    
    .wpo-nav {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 30;
        background: var(--wpo-bg);
        border: 1px solid var(--wpo-border);
        border-radius: 12px;
        box-shadow: var(--wpo-shadow);
        padding: 10px;
        min-width: min(320px, 92vw);
    }
    
    .wpo-nav-details:not([open]) .wpo-nav {
        display: none;
    }
    
    .wpo-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    
    .wpo-menu a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
    }
    
    .wpo-menu a:hover {
        text-decoration: none;
        background: var(--wpo-surface);
    }
    
    .wpo-menu li {
        position: static;
    }
    
    .wpo-menu .sub-menu {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 12px;
        min-width: auto;
    }
    
    .wpo-menu li.menu-item-has-children>a::after {
        content: "";
    }
    
    .wpo-menu .sub-menu a {
        padding: 8px 10px;
        font-weight: 650;
    }
}