/**
 * Shared horizontal layout tokens for Help Center & Blog pages.
 * Keeps shell width, side padding, and main/sidebar gaps consistent.
 */

:root {
    --page-shell-max: 1120px;
    --page-shell-padding-x: 56px;
    --page-shell-padding-top: 48px;
    --page-shell-padding-bottom: 80px;
    --page-prose-max: 720px;
    --page-sidebar-width: 260px;
    --page-main-sidebar-gap: 64px;
    --page-grid-column-gap: 64px;
    --page-grid-row-gap: 72px;
}

@media (max-width: 767px) {
    :root {
        --page-shell-padding-x: 24px;
        --page-shell-padding-top: 32px;
        --page-shell-padding-bottom: 60px;
        --page-grid-column-gap: 40px;
        --page-grid-row-gap: 40px;
        --page-main-sidebar-gap: 0;
    }
}

/* Blog pages: align Bootstrap containers with help shell */
.breadcrumb_area_three > .container,
.blog_area > .container,
.doc_blog_grid_area > .container,
.doc_blog_grid_area_two > .container,
.doc_blog_grid_area .blog_grid_inner > .container,
.doc_banner_area.search-banner-light > .container {
    max-width: var(--page-shell-max) !important;
    padding-left: var(--page-shell-padding-x) !important;
    padding-right: var(--page-shell-padding-x) !important;
}

.breadcrumb_area_three .breadcrumb_content,
.blog-single-main {
    max-width: var(--page-prose-max);
    margin-left: 0;
    margin-right: auto;
}

.breadcrumb_area_three .breadcrumb_content {
    text-align: left;
}

.breadcrumb_area_three .breadcrumb_content h1 {
    text-align: left;
}