/**
 * Content Layout system.
 *
 * Phase 4 keeps the current theme markup intact and layers the new layout
 * behaviour on top of the existing wrappers used by page/archive/single
 * templates.
 */

:root {
    --onward-sidebar-width: 20%;
    --onward-sidebar-gap: 30px;
}

/* Future template wrapper from the layout plan. */
.content-wrapper {
    display: flex;
    gap: var(--onward-sidebar-gap);
    width: 100%;
}

.content-wrapper .site-content,
.content-wrapper .sidebar-left,
.content-wrapper .sidebar-right,
body[class*="onward-layout-"] .site-main > .main-box,
body[class*="onward-layout-"] .site-main > .sidebar,
body[class*="onward-layout-"] .site-main .content-box > .post-content,
body[class*="onward-layout-"] .site-main .content-box > .sidebar {
    min-width: 0;
}

/* Existing wrappers: page/archive/search/index. */
body.onward-layout-right-sidebar #primary > .site-main.rightsidebar,
body.onward-layout-left-sidebar #primary > .site-main.leftsidebar,
body.onward-layout-both-sidebars #primary > .site-main.bothsidebar,
body.onward-layout-full-width #primary > .site-main.nosidebar,
body.onward-layout-full-width-100 #primary > .site-main.nosidebar,
body.onward-layout-canvas #primary > .site-main.nosidebar,
body.onward-layout-100-full-width #primary > .site-main.nosidebar {
    display: flex;
    gap: var(--onward-sidebar-gap);
    width: 100%;
    align-items: flex-start;
}

/*
 * .site-container (template markup) sits between .site-main and
 * .content-wrapper/.main-box/.sidebar with no width of its own. As the sole
 * flex child of .site-main above, it would default to a content-based
 * (shrink-to-fit) size instead of filling the row, collapsing the whole
 * sidebar layout. Giving it an explicit flex-basis fixes that without
 * altering any visual design.
 */
body.onward-layout-right-sidebar #primary > .site-main.rightsidebar > .site-container,
body.onward-layout-left-sidebar #primary > .site-main.leftsidebar > .site-container,
body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .site-container,
body.onward-layout-full-width #primary > .site-main.nosidebar > .site-container,
body.onward-layout-full-width-100 #primary > .site-main.nosidebar > .site-container,
body.onward-layout-canvas #primary > .site-main.nosidebar > .site-container,
body.onward-layout-100-full-width #primary > .site-main.nosidebar > .site-container {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}


/* Existing wrappers: single post/product content. */
body.single-post.onward-layout-right-sidebar .site-main .content-box.rightsidebar,
body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar,
body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar,
body.single-post.onward-layout-full-width .site-main .content-box.nosidebar,
body.single-post.onward-layout-full-width-100 .site-main .content-box.nosidebar,
body.single-post.onward-layout-canvas .site-main .content-box.nosidebar,
body.single-post.onward-layout-100-full-width .site-main .content-box.nosidebar,
body.single-product.onward-layout-right-sidebar .site-main .content-box.rightsidebar,
body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar,
body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar,
body.single-product.onward-layout-full-width .site-main .content-box.nosidebar,
body.single-product.onward-layout-full-width-100 .site-main .content-box.nosidebar,
body.single-product.onward-layout-canvas .site-main .content-box.nosidebar,
body.single-product.onward-layout-100-full-width .site-main .content-box.nosidebar {
    display: flex;
    gap: var(--onward-sidebar-gap);
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-items: flex-start;
}

/* Planned wrapper sizing. */
body.onward-layout-right-sidebar .content-wrapper .site-content,
body.onward-layout-right-sidebar .content-wrapper .sidebar-right,
body.onward-layout-left-sidebar .content-wrapper .site-content,
body.onward-layout-left-sidebar .content-wrapper .sidebar-left,
body.onward-layout-both-sidebars .content-wrapper .site-content,
body.onward-layout-both-sidebars .content-wrapper .sidebar-left,
body.onward-layout-both-sidebars .content-wrapper .sidebar-right,
body.onward-layout-full-width .content-wrapper .site-content {
    width: 100%;
}

body.onward-layout-right-sidebar .content-wrapper .site-content {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.onward-layout-right-sidebar .content-wrapper .sidebar-right {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
}

body.onward-layout-left-sidebar .content-wrapper .sidebar-left {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
}

body.onward-layout-left-sidebar .content-wrapper .site-content {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.onward-layout-both-sidebars .content-wrapper .sidebar-left,
body.onward-layout-both-sidebars .content-wrapper .sidebar-right {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
}

body.onward-layout-both-sidebars .content-wrapper .site-content {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
}

body.onward-layout-full-width .content-wrapper .site-content {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Current page/archive/search/index wrappers. */
body.onward-layout-right-sidebar #primary > .site-main.rightsidebar > .main-box {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.onward-layout-right-sidebar #primary > .site-main.rightsidebar > .sidebar {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.onward-layout-left-sidebar #primary > .site-main.leftsidebar > .sidebar:first-child {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.onward-layout-left-sidebar #primary > .site-main.leftsidebar > .main-box {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .sidebar:first-child,
body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .sidebar:last-child {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .main-box {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
}

body.onward-layout-full-width #primary > .site-main.nosidebar > .main-box {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Current single wrappers. */
body.single-post.onward-layout-right-sidebar .site-main .content-box.rightsidebar > .post-content,
body.single-product.onward-layout-right-sidebar .site-main .content-box.rightsidebar > .post-content {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.single-post.onward-layout-right-sidebar .site-main .content-box.rightsidebar > .sidebar:last-child,
body.single-product.onward-layout-right-sidebar .site-main .content-box.rightsidebar > .sidebar:last-child {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .sidebar:first-child,
body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .sidebar:first-child {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.2);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .post-content,
body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .post-content {
    flex: 0 0 calc((100% - var(--onward-sidebar-gap)) * 0.8);
    max-width: calc((100% - var(--onward-sidebar-gap)) * 0.8);
}

body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:first-child,
body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:last-child,
body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:first-child,
body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:last-child {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.2);
    width: var(--onward-sidebar-width);
}

body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .post-content,
body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .post-content {
    flex: 0 0 calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
    max-width: calc((100% - (var(--onward-sidebar-gap) * 2)) * 0.6);
}

body.single-post.onward-layout-full-width .site-main .content-box.nosidebar > .post-content,
body.single-product.onward-layout-full-width .site-main .content-box.nosidebar > .post-content {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Keep the container width from dynamic.php for every layout except edge-to-edge modes. */
body.onward-layout-right-sidebar .site-main,
body.onward-layout-left-sidebar .site-main,
body.onward-layout-both-sidebars .site-main,
body.onward-layout-full-width .site-main {
    width: 100%;
}

/* Edge-to-edge layouts. */
body.onward-layout-full-width-100 .site-main,
body.onward-layout-100-full-width .site-main,
body.onward-layout-canvas .site-main {
    max-width: 100% !important;
    width: 100%;
}

body.onward-layout-full-width-100 .site-main .main-box,
body.onward-layout-full-width-100 .site-main .content-box,
body.onward-layout-full-width-100 .site-main .post-content,
body.onward-layout-100-full-width .site-main .main-box,
body.onward-layout-100-full-width .site-main .content-box,
body.onward-layout-100-full-width .site-main .post-content,
body.onward-layout-canvas .site-main .main-box,
body.onward-layout-canvas .site-main .content-box,
body.onward-layout-canvas .site-main .post-content {
    width: 100%;
    max-width: 100%;
}

body.onward-layout-canvas .site-main {
    margin: 0 !important;
}

@media (max-width: 760px) {
    .content-wrapper,
    body.onward-layout-right-sidebar #primary > .site-main.rightsidebar,
    body.onward-layout-left-sidebar #primary > .site-main.leftsidebar,
    body.onward-layout-both-sidebars #primary > .site-main.bothsidebar,
    body.onward-layout-full-width #primary > .site-main.nosidebar,
    body.single-post.onward-layout-right-sidebar .site-main .content-box.rightsidebar,
    body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar,
    body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar,
    body.single-post.onward-layout-full-width .site-main .content-box.nosidebar,
    body.single-product.onward-layout-right-sidebar .site-main .content-box.rightsidebar,
    body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar,
    body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar,
    body.single-product.onward-layout-full-width .site-main .content-box.nosidebar {
        flex-direction: column;
    }

    .content-wrapper .site-content,
    .content-wrapper .sidebar-left,
    .content-wrapper .sidebar-right,
    body[class*="onward-layout-"] .site-main > .main-box,
    body[class*="onward-layout-"] .site-main > .sidebar,
    body[class*="onward-layout-"] .site-main .content-box > .post-content,
    body[class*="onward-layout-"] .site-main .content-box > .sidebar {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .content-wrapper .site-content {
        order: 1;
    }

    .content-wrapper .sidebar-left {
        order: 2;
    }

    .content-wrapper .sidebar-right {
        order: 3;
    }

    body.onward-layout-left-sidebar #primary > .site-main.leftsidebar > .main-box,
    body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .main-box,
    body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .post-content,
    body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .post-content,
    body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .post-content,
    body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .post-content {
        order: 1;
    }

    body.onward-layout-left-sidebar #primary > .site-main.leftsidebar > .sidebar:first-child,
    body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .sidebar:first-child,
    body.single-post.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .sidebar:first-child,
    body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:first-child,
    body.single-product.onward-layout-left-sidebar .site-main .content-box.leftsidebar > .sidebar:first-child,
    body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:first-child {
        order: 2;
    }

    body.onward-layout-both-sidebars #primary > .site-main.bothsidebar > .sidebar:last-child,
    body.single-post.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:last-child,
    body.single-product.onward-layout-both-sidebars .site-main .content-box.bothsidebar > .sidebar:last-child {
        order: 3;
    }
}