@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --theme-text-font: 'Plus Jakarta Sans', sans-serif;

    --theme-header-text-color: #404040;
    --theme-header-background-color: #fff;
    --theme-header-logo-size: 30px;
    --theme-footer-text-color: #fff;
    --theme-footer-background-color: #404040; 
    --theme-text-color: #404040;
    --theme-primary-color: #0284C7;
    --K15t-link: #0284C7;
    --K15t-link-visited: #015a8a;
  --K15t-border-neutral: #ddd;
  --K15t-border-input: #ccc;
}

h1 {
    letter-spacing: -.025em; 
    font-weight: 900; 
    font-size: 2.25rem;
}

article h2 {
    font-weight: 700; 
    font-size: 1.875rem;
}

a { text-decoration: underline;}
a:hover { text-decoration-thickness: 3px;}

blockquote {
    margin-left: 0;
    background-color: #e4f2f8;
}

figcaption {
    font-weight: 600;
    color: #999;
}

/* CSS for the active page in the sidebar */
theme-navigator .tree-item-header > a[aria-current="page"]{ color: #fff; font-weight: 700;}
/* Make the expand/collapse icon (chevron) white when the adjacent link is the current page */
theme-navigator .tree-item-header > button.tree-action:has(+ a[aria-current="page"]) { color: #fff;}
theme-navigator .tree-item-header > button.tree-action:has(+ a[aria-current="page"]) svg {
    fill: currentColor;
    stroke: currentColor;
}
/* Make the dot icon white when its adjacent link is the current page */
theme-navigator .tree-item-header > svg.tree-icon:has(+ a[aria-current="page"]) { color: #fff;}
theme-navigator .tree-item-header > svg.tree-icon:has(+ a[aria-current="page"]) use {
    fill: currentColor;
    stroke: currentColor;
}

/* Active item in right-hand TOC */
nav.toc .toc-link[aria-current="true"] { color: #fff; font-weight: 700; }
nav.toc .toc-list-item > .toc-link[aria-current="true"] { color: #fff; font-weight: 700; }
nav.toc .toc-list-item:has(> .toc-link[aria-current="true"])::before { background-color: #fff;}