html {
    scroll-behavior: smooth;
}

.single-docs .l-sidebar {
    width: calc( 100% - ( var(--screen-x-spacing) * 2 ) );
    max-width: var(--container-wide-width);
    margin-inline: auto;
    padding-top: 0;
}

@media screen and (max-width: 1279.9px) {
    .single-docs .l-sidebar::before {
        display: block;
        content: "";
        max-width: var(--container-wide-width);
        border-bottom: 0.0625rem solid var(--ui-border-light-color);
        margin-bottom: var(--spacing-md);
    }
}

@media screen and (min-width: 1280px) {
    
    .single-docs .l-main {
        position: relative;
        display: flex;
        flex-flow: row-reverse nowrap;
        align-items: stretch;
        justify-content: center;
        column-gap: var(--spacing-lg);
        width: calc( 100% - ( var(--screen-x-spacing) * 2 ) );
        max-width: var(--container-wide-width);
        margin-inline: auto;
    }
    
    .single-docs .l-content {
        flex-grow: 1;
    }
    
    .single-docs .l-sidebar {
        flex-grow: 1;
        max-width: 20rem;
        padding-right: var(--spacing-sm);
        border-right: 1px solid var(--ui-border-light-color);
    }

    body:has(.l-header--medium) .l-sidebar > *:first-child {
        padding-top: calc( ( var(--spacing-xs) * 2 ) + var(--drawer-toggle-size) + var(--spacing-lg) );
    }
   
}


.p-post__footer__date {
    padding-left: 0;
}

.p-post__footer__date li {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 0.5em;
}



.p-post .wp-block-post-content code {
    padding: 0.125em 0.25em;
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: var(--color-primary);
    background-color: var(--color-default-fade);
}

.p-post .wp-block-post-content .wp-block-code code {
    padding: 0;
}


.p-post.p-post--blog .p-post__header::after {
    margin-top: var(--spacing-sm);
}

.p-post.p-post--blog .wp-block-post-content p[id*="fn"] {
    font-size: var(--font-size-sm);
}


.p-post.p-post--blog .wp-block-post-content > h2 {
    font-size: var(--font-size-2xl);
}

.p-post.p-post--blog .wp-block-post-content > * + h2 {
    margin-block-start: var(--spacing-lg);
    margin-block-end: var(--spacing-md);
}

.p-post.p-post--blog .wp-block-post-content > h3 {
    font-size: var(--font-size-xl);
}

.p-post.p-post--blog .wp-block-post-content > *:not(h2) + h3 {
    margin-block-start: var(--spacing-lg);
}

.p-post.p-post--blog .wp-block-post-content > h4 {
    font-size: var(--font-size-lg);
}

.p-post.p-post--blog .wp-block-post-content > *:not(h3) + h4 {
    margin-block-start: var(--spacing-lg);
}

.p-post.p-post--blog .wp-block-post-content hr {
    margin-block: var(--spacing-lg);
    border-color: var(--ui-border-light-color);
}

.p-docs-colorTable {
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
}

.p-docs-colorTable table {
    border-spacing: 0;
}

.p-docs-colorTable th,
.p-docs-colorTable td {
    padding: 3px;
    line-height: 1;
}

.p-docs-colorTable thead th {
    text-align: center;
    white-space: nowrap;
}

.p-docs-colorTable tbody th {
    text-align: right;
    white-space: nowrap;
}

.p-docs-colorTable tbody td {
    text-align: center;
}

.p-docs-colorTable__tip {
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

@media screen and (min-width: 768px) {
    .p-docs-colorTable th,
    .p-docs-colorTable td {
        padding: var(--spacing-xs);
    }
    .p-docs-colorTable__tip {
        width: 5rem;
        height: 5rem;
    }
}

@media screen and (min-width: 1921px) {

    .wpj-jtoc {
        position: fixed;
        top: calc( ( var(--spacing-sm) * 2 ) + var(--nav-height-md) + var(--spacing-lg) );
        right: 0;
        left: calc( 50dvw + 40rem + var(--spacing-md) );
        width: auto !important;
        margin: 0;
    }

    .wpj-jtoc--body {
        overflow-y: auto;
        max-height: calc( 100dvh - ( var(--spacing-sm) * 2 ) - var(--nav-height-md) - var(--spacing-lg) - var(--spacing-lg) );
    }

}