/*****************
 *    VARIABLES  *
 *****************/
body {
    background-color: var(--colorRightColumnBackground);
    color: var(--colorRightColumnText);
    font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
}
.left-column, .post li {
    background-color: var(--colorLeftColumnBackground);
}
.left-column, .left-column a, .sidebar-toggle a {
    color: var(--colorLeftColumnLinks);
}
.left-column .nav-list a:hover, .left-column .nav-list .active a {
    background-color: var(--colorLeftColumnHover);
}
.left-column .nav-list .active a{
    border-color: var(--colorBrand);
}
.sidebar-toggle{
    background-color: var(--colorLeftColumnBackground);    
}
@media (min-width: 1000px) {
    .sidebar-toggle{
        background-color: transparent;
    }
}
main {
    background-color: var(--colorRightColumnBackground);
    color: var(--colorRightColumnText);
}
main a {
    color: var(--colorRightColumnLinks);
}
footer {
    background-color: var(--colorFooterBackground);
    color: var(--colorFooterText);
    border-top-color: var(--colorLeftColumnHover);
}
footer a {
    color: var(--colorFooterLinks);
}
main #content-nav a{
    border-left-color: var(--colorLeftColumnHover);
    color: var(--colorRightColumnText);
}
.toolbar{
    border-top:1px solid;
    border-bottom:1px solid;
    border-color: var(--colorLeftColumnHover);
}
#content-nav a:hover,
#content-nav a.visible {
    background-color: var(--colorLeftColumnHover);
}
#content-nav a.visible {
    border-color: var(--colorBrand);
}
/* Custom hover styles */
.hover-effect {
    background-color: var(--colorBrand);
}
.toolbar-icon .hidden{
    display: none;
}


code,pre{
    font-size:0.9em;
    background-color: var(--colorLeftColumnHover);    
}
pre{
    border-left: .25rem solid;
    border-color: var(--colorBrand);
}

.notice1{
    border-color-left: var(--colorNotice1Border);
    background-color: var(--colorNotice1Background);
    color: var(--colorNotice1Text);
}
.notice2{
    border-color-left: var(--colorNotice2Border);
    background-color: var(--colorNotice2Background);
    color: var(--colorNotice2Text);
}
.notice3{
    border-color-left: var(--colorNotice3Border);
    background-color: var(--colorNotice3Background);
    color: var(--colorNotice3Text);
}
.notice4{
    box-shadow: 0 -100px 80px 0px var(--colorBrand);
}

/*****************  
 *   SIDEBAR  *
 *****************/
.left-column {
    width: 0; /* Default to collapsed */
    min-width: 0;
    transition: width 0.3s ease, min-width 0.3s ease;
    overflow-x: hidden;
    position:absolute;
}
.left-column-inner{
    min-width:300px;
}
.left-column.collapsed {
    width: 0; /* Ensures no unnecessary changes */
    min-width: 0;
}
.left-column.expanded {
    width: 20%;
    min-width:300px;
    z-index:999;
}
.expand-icon {
    display: block; /* Ensure expand icon is visible in mobile view */
    position:absolute;
}

@media (min-width: 1000px) {
    .left-column, .left-column.expanded{
        width:20%;
        min-width:300px;
        position:sticky;
    }
    .expand-icon{
        position:fixed;
        display:none;
        pointer-events: none;
    }
    .expand-icon.show{
        display: block;
        pointer-events: auto;
    }
    .hidden-l{
        visibility: hidden;
    }
}


/*****************
 * NAVIGATION   *
 * ***************

/* Initially hide navigation to prevent flickering */
#navigation {
    opacity: 0;
    transition: opacity 0.2s ease;
}
/* Display navigation after processing */
#navigation.visible {
    opacity: 1;
}
/* Initially hide content without transition */
.folder ul {
    max-height: 0;
    transition: max-height 0.3s ease;
    overflow: hidden;
}
/* Apply smooth transition when opening */
.folder.open > ul {
    max-height: 1000px; /* Adjust to a large enough value */
    transition: max-height 0.3s ease;
}
/* Disable transition on initial load */
.no-transition ul {
    transition: none;
}
/* Base arrow style */
.folder-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}
/* Arrow icon pointing right */
.folder-toggle::after {
    content: '\203A'; /* Right arrow */
    font-size: 20px; /* Adjust as needed */
    display: inline-block;
    transform: rotate(0deg); /* Default right */
    transition: transform 0.2s ease;
}
/* Rotate arrow down when folder is open */
.folder.open > .folder-header > .folder-toggle::after {
    transform: rotate(90deg); /* Down arrow */
}
/*****************
 * CONTENT NAVI  *
 * ***************/

html {
    scroll-behavior: smooth;
}
#content-nav a {
    border-left: 2px solid;
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}
/* Indentation for different heading levels */
#content-nav a.indent-h2 { padding-left: 1.5rem; }
#content-nav a.indent-h3 { padding-left: 2rem; }
#content-nav a.indent-h4 { padding-left: 2.5rem; }
#content-nav a.indent-h5 { padding-left: 3rem; }
#content-nav a.indent-h6 { padding-left: 3.5rem; }

/* fix TOC */

.TOC .h1, .TOC .h2, .TOC .h3, .TOC .h4, .TOC .h5, .TOC .h6{
    height: auto;
} 

/************************************
*       TACHYONS ADDITIONS          *
************************************/

.sticky {
    position: sticky;
}
.vh100{
  height: calc(100vh - 2rem);
}


/************************************
*       STANDARD-ELEMENTS           *
************************************/
html{}
body{}
header{}
footer{}
nav{}
main{}
aside{}
article{}
article a, article a:link, article a:visited{ text-decoration: underline; }
/* article a:before{ content: '\203A'; margin-right: 5px; } */
abbr{}
blockquote{
  margin: 1.5em 1.5em;
  padding: 0.5em 0;
  quotes: "\201C""\201D""\2018""\2019";
  font-style: italic;
}
blockquote:before{
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
article pre, article code{
    font-family: monospace;
}
article pre{
    white-space: pre;
    padding: 0em;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
article code{
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 0 0.5em;
    word-break: break-word;
}
pre > code{
    font-size: 0.9em;
    padding: 1em;
    display: inline-block;
}
pre > code.language-pagebreak{
    display: none;
}
dl{}
dt{}
dd{}
img{}
article h1, article h2, article h3, article h4, article h5, article h6{
    line-height: 1.15em;
    font-weight: 700; 
    line-height: 1em; 
}
h1,h2,h3,h4,h5,h6{ word-wrap: break-word; hyphens: auto; }
article h1{ font-size: 2.2em; margin: 0 0 0.6em; z-index:1; }
article h2{ font-size: 1.6em; margin: 1.8em 0 0.6em; }
article h3{ font-size: 1.3em; margin: 1.6em 0 0.6em; }
article h4{ font-size: 1.1em; margin: 1.4em 0 0.6em; }
article h5{ font-size: 1em; margin: 1.2em 0 0.6em; }
article h6{ font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0.6em; }
article .h1, article .h2, article .h3, article .h4, article .h5, article .h6{
    height: auto; /* fix for tachyons */
}
hr{
    border: none;
    border-top: 1px solid;
}
ol{}
footer ul{ padding-left:1em; }
li{}
sup{}
/* Make table look good */
.tm-table{
    overflow-x: auto;
}
table{
    width: 100%;
    border-collapse: collapse;
    font-size: .8em;
}
thead{
    text-align: left;
}
tr{
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}
th,td{
    padding: .5em 1em;
}
main b, main strong{
    font-weight: 600;
}

/************************************
*       STANDARD SUGGESTIONS        *
************************************/

/* Make links and buttons smooth */
.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited{
    transition: none;
}
a, a:link, a:visited, a:focus, a:hover, a:active, button{
    transition: all .15s ease!important;
    transition-property: color, background-color, text-shadow, border;
}
article a:hover, article a:focus, article a:active,
footer a:hover, footer a:focus, footer a:active{ 
    text-decoration: none;
}

/* For definition list */
dt::after{
    content: ":";
}

/* Make images and image captions look good */
img, figure,figure img{
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}
figure, video, audio{
    display: table;
    margin: 2em auto;
    padding: 0;
}
figure.right, figure.left {
    width: auto;
    float: none;
    margin: auto auto;
}
figure img{
    display: block;
    margin: auto;
}
figcaption{
    display: table-caption;
    caption-side: bottom;
    font-size: 0.8em;
    margin-top: .5em;
    line-height: 1.2em;
}
.footnotes ol{
    font-size: .8em;
    line-height: 1em;
    margin: 0 0 0 0;
}

/************************************
*           TYPEMILL-ELEMENTS       *
************************************/

ul.TOC,.TOC ul{
    list-style: none;
}
.TOC{
    padding: 1em;
    border: 1px solid;
}
.TOC{
    border-color: lightgray;
}
.TOC li{
    position: relative;
}
.TOC li a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed;
    line-height: 1em;
    margin: .3em 0;
}
.TOC li a:hover,.TOC li a:focus,.TOC li a:active{
    border-bottom: 1px solid;
}
.TOC li a:after{
    content: '\203A'; 
    position: absolute;
    right: 5px;
    transition: all .2s;
}
.TOC li a:hover:after{
    right: 0px; 
}
.notice1 {
    margin: 1em 0;
    padding: 10px 1em;
    border-left: 4px solid;
}
.notice2 {
    margin: 1em 0;
    padding: 10px 1em;
    border-left: 4px solid;
}
.notice3{
    margin: 1em 0;
    padding: 10px 1em;
    border-left: 4px solid; 
}

/* used for pro content box */
.notice4{
  position: relative;
  text-align: center;
  padding: 1em;
  border: 1px solid;
}

/* Style the optional anchor-links for headlines */
a.tm-heading-anchor {
    display:  inline-block;
    margin-left:  -0.8em;
    width: 0.8em;
    font-weight: 300;
    opacity: 0;
    text-decoration: none;
    float: right;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    opacity: 1;
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
    opacity: .5;
    text-decoration: none;
}

/* style the typemill download-button for files */
a.tm-download{}
a.tm-download::before{
    content: "\2193";
    -webkit-mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
    mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: currentColor; 
    display: inline-block;
    margin-right: 5px;
    width:  24px;
    height: 24px;
    text-decoration: none;
    vertical-align: middle;
}
a.tm-download:hover::before{
    text-decoration: none;
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

/************************************
*       TACHYONS ADDITIONS          *
************************************/

/* Keeps Footer at the bottom */
.body-footer-bottom { /* add this class to the body-tag */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer-bottom { /* add this class to the footer-tag */
  margin-top: auto;
}
/* Nice set of system fonts, add this to the body-tag */
.sans-serif-tm { 
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 
}
.sans-serif-title{
    font-family: arial,"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;     
}
/* optimize text, add this to the body-tag */
.optimize-text{
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
.f-large{
    font-size: 4rem;
}
.h4-5{
    height: 12rem;  
}
.margin-bottom-1{
    margin-bottom: -1px;
}
.arrow-after:after{
    content: '\203A'; position: absolute; right:5px;
}
.arrow-after-transition:after{
    content: '\203A'; position: absolute; right:5px;
    transition: all .2s;
}
.arrow-after-transition:hover:after{
    right:0px;
}
.indent-l-1{ padding-left:1rem; }
.indent-l-2{ padding-left:2rem; }
.indent-l-3{ padding-left:3rem; }
.indent-l-4{ padding-left:4rem; }
.indent-l-5{ padding-left:4.5rem; }
.indent-l-6{ padding-left:5rem; }

.b--solid-hover:hover,.b--solid-hover:focus,.b--solid-hover:active{
    border-style: solid;
}
.flex-grow{
    flex-grow: 1;
}