.article-layout-container{display:grid;grid-template-columns:1fr 300px;gap:3rem;max-width:var(--page-width);margin:0 auto;padding:0 2rem}.article-main-content{min-width:0}.article-sidebar{position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}.blog-navigation-sidebar{width:100%}.blog-navigation-container{border:1px solid rgba(var(--color-foreground),.1);border-radius:var(--border-radius);padding:1.5rem;background:rgba(var(--color-background),1);box-shadow:0 2px 8px rgba(var(--color-foreground),.05)}.blog-navigation__title{margin-bottom:1.5rem;font-size:1.8rem;font-weight:700;color:rgb(var(--color-foreground));border-bottom:1px solid rgba(var(--color-foreground),.1);padding-bottom:1rem}.ccmDateNav{font-family:var(--font-body-family);line-height:1.5}.ccmDateNav ul{list-style:none;margin:0;padding:0}.ccmDateNav .years{margin:0}.ccmDateNav .year{margin-bottom:1rem;border-bottom:1px solid rgba(var(--color-foreground),.05);padding-bottom:.5rem}.ccmDateNav .year:last-child{border-bottom:none;margin-bottom:0}.ccmDateNav .section.trigger{cursor:pointer;padding:.75rem 1rem;background:rgba(var(--color-foreground),.02);border-radius:var(--border-radius);transition:all .2s ease;-webkit-user-select:none;user-select:none;position:relative;font-weight:500;border:1px solid transparent}.ccmDateNav .section.trigger:active{transform:translateY(1px)}.ccmDateNav .section.trigger:hover{background:rgba(var(--color-foreground),.05)}.ccmDateNav .section.trigger:after{content:"\2212";position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.2em;transition:transform .2s ease}.ccmDateNav .section.trigger.closed:after{content:"+";transform:translateY(-50%) rotate(0)}.ccmDateNav .year>.section.trigger{font-size:1.2rem;font-weight:700;background:rgba(var(--color-foreground),.04);color:rgb(var(--color-foreground))}.ccmDateNav .months{padding-left:1.5rem;margin-top:.5rem}.ccmDateNav .month{margin-bottom:.5rem}.ccmDateNav .month>.section.trigger{font-size:1rem;background:rgba(var(--color-foreground),.02);color:rgba(var(--color-foreground),.8);margin-bottom:.25rem}.ccmDateNav .monthsPages{padding-left:1.5rem;margin-top:.25rem}.ccmDateNav .monthsPage{margin-bottom:.25rem;padding:0}.ccmDateNav .monthsPage a{display:block;padding:.5rem 1rem;color:rgba(var(--color-foreground),.7);text-decoration:none;border-radius:calc(var(--border-radius) / 2);transition:all .2s ease;font-size:.9rem;line-height:1.4}.ccmDateNav .monthsPage a:hover{color:rgb(var(--color-foreground));background:rgba(var(--color-foreground),.03);text-decoration:none}.ccmDateNav .monthsPage.selected a,.ccmDateNav .monthsPage a.current{background:rgb(var(--color-button));color:rgb(var(--color-button-text));font-weight:500}.ccmDateNav .monthsPage.selected a:hover,.ccmDateNav .monthsPage a.current:hover{background:rgba(var(--color-button),.9)}.ccmDateNav .collapsible{overflow:hidden;transition:max-height .3s ease,opacity .3s ease;max-height:2000px;opacity:1}.ccmDateNav .collapsible.closed{max-height:0!important;opacity:0!important;overflow:hidden!important}.ccmDateNav .collapsible[style*="display: none"]{display:none!important}.ccmDateNav .collapsible[style*="display: block"]{display:block!important}@media screen and (max-width: 990px){.article-layout-container{grid-template-columns:1fr;gap:2rem}.article-sidebar{position:static;max-height:none;order:-1}.blog-navigation-container{padding:1.5rem}}@media screen and (max-width: 750px){.article-layout-container{padding:0 1.5rem}.blog-navigation-container{margin:1rem 0;padding:1rem}.blog-navigation__title{font-size:1.6rem;margin-bottom:1rem}.ccmDateNav .months,.ccmDateNav .monthsPages{padding-left:1rem}.ccmDateNav .section.trigger{padding:.6rem .8rem;font-size:.95rem}.ccmDateNav .year>.section.trigger{font-size:1.1rem}}@media (prefers-color-scheme: dark){.blog-navigation-container{border-color:rgba(var(--color-foreground),.2)}.ccmDateNav .section.trigger{background:rgba(var(--color-foreground),.05)}.ccmDateNav .section.trigger:hover{background:rgba(var(--color-foreground),.1)}.ccmDateNav .year>.section.trigger{background:rgba(var(--color-foreground),.08)}}.ccmDateNav .trigger{position:relative}.ccmDateNav .section.trigger:focus{outline:2px solid rgb(var(--color-button));outline-offset:2px}.ccmDateNav .monthsPage a:focus{outline:2px solid rgb(var(--color-button));outline-offset:2px}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-blog-navigation.css.map */