/* Important stuff taken or adapted from bootstrap. */

/* Make the box model work properly. */
*,::after,::before { box-sizing:border-box }

/* Centers everything within the flex. */
.align-items-center {
    -ms-flex-align:center!important;
    align-items:center!important;
}

/* For now, just use a single container class. */
.container {
    width:100%;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
}
/* The "hamburger" width refers to what used to be the flex column used
 * to lay out a hamburger-icon menu for mobile specifically.
 * The current design has a column reserved on both sides, which will
 * work the same way on all layouts, containing a layout switcher (left)
 * and theme switcher (right).
 *
 * For now, sidebar is always full width (so main content appears underneath)
 * on narrow layouts, and 1/3 width (main content 2/3, side by side) otherwise.
 * */
:root {
    --sidebar-width: 100%;
    --main-width: 100%;
    --hamburger-width: calc(100% / 6);
    --banner-width: calc(100% - 2 * var(--hamburger-width));
}
@media (min-width:768px) {
    :root {
        --sidebar-width: 25%; /* calc(100% / 3); */
        --main-width: calc(100% - var(--sidebar-width));
    }
}
@media (min-width:576px) { /* sm */
    .container {max-width:540px};
}
@media (min-width:768px) { /* md */
    .container {max-width:720px};
}
@media (min-width:992px) { .container {max-width:960px} } /* lg */
@media (min-width:1200px) { .container {max-width:1140px} } /* xl */
.container {
    --hamburger-size: 0 0 var(--hamburger-width);
    --banner-size: 0 0 var(--banner-width);
    --sidebar-size: 0 0 var(--sidebar-width);
    --main-size: 0 0 var(--main-width);
}

/* the display:flex is important here for children. */
.row {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-15px
}

/* Adapted and greatly simplified to use only the column types we need. */
.column {
    position:relative;
    width:100%;
    padding-right:15px;
    padding-left:15px
}

.col-main {
    -ms-flex:var(--main-size);
    flex:var(--main-size);
    max-width:var(--main-width)
}

/* TODO re: sidebar scrolling, see:
 * https://stackoverflow.com/questions/21515042 */
.col-sidebar {
    -ms-flex:var(--sidebar-size);
    flex:var(--sidebar-size);
    max-width:var(--sidebar-width)
}

.col-banner {
    -ms-flex:var(--banner-size);
    flex:var(--banner-size);
    max-width:var(--banner-width);
    text-align: center;
}

.col-hamburger {
    -ms-flex:var(--hamburger-size);
    flex:var(--hamburger-size);
    max-width:var(--hamburger-width)
}

/* Light and dark mode. */
@media (prefers-color-scheme: light) {
    :root {
        --bg:#f8f9fa;
        --text:#000000; /* #343a40; */
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:#121416;
        --text:#e2e6ea; /* #cbd3da; */
    }
}

/* Colours derived from the background and text colour settings. */
:root {
    background-color:var(--bg);
    color:var(--text);
    /* Shading between the text colour and background colour. */
    --faded-1: color-mix(in srgb-linear, var(--text) 90%, var(--bg) 10%);
    --faded-2: color-mix(in srgb-linear, var(--text) 80%, var(--bg) 20%);
    --faded-3: color-mix(in srgb-linear, var(--text) 70%, var(--bg) 30%);
    --faded-4: color-mix(in srgb-linear, var(--text) 60%, var(--bg) 40%);
    --grey: color-mix(in srgb-linear, var(--text) 50%, var(--bg) 50%);
    --shaded-4: color-mix(in srgb-linear, var(--text) 40%, var(--bg) 60%);
    --shaded-3: color-mix(in srgb-linear, var(--text) 30%, var(--bg) 70%);
    --shaded-2: color-mix(in srgb-linear, var(--text) 20%, var(--bg) 80%);
    --shaded-1: color-mix(in srgb-linear, var(--text) 10%, var(--bg) 90%);
    /* Theme blue and green: nearly as light/dark as text, intense. */
    --green: oklch(from var(--faded-2) l 100% 135deg);
    --blue: oklch(from var(--faded-2) l 100% 255deg);
    /* background-ish colour for badges. Less intense. */
    --bggreen: oklch(from var(--shaded-2) l 50% 135deg);
    --bgblue: oklch(from var(--shaded-2) l 50% 255deg);
}

/* Make page headings stay below the title bar when jumped to with a TOC
 * anchor, instead of being occluded underneath.
 * This way works properly; putting margin-top on the headings would
 * interfere with links above. Thanks mqp on ACN */
html { scroll-padding-top: 96px; }

/* make <a> match the bottom header stripe (blue)? */
/* bootstrap uses 007bff (0b56b3 on hover); old theme 00aefe */
a {color:var(--blue);text-decoration:underline;background-color:transparent}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}
.col-banner a { text-decoration: none; color:var(--text) }

/* Since there are blue links all over, visually balance with green <hr>s. */
hr { background:var(--green); border: none; width: 90%; height: 4px }

/* Enough space between lines to accommodate code boxes. */
p { line-height: 1.6; }

/* Nice boxes around inline code spans. */
code {
    display: inline-block;
    background-color: var(--shaded-2);
    /* Might try to reintroduce this…
    outline-style: solid;
    outline-width: thin;
    outline-color: var(--text); */
    /* allow for the box margin/padding not to bloat the height of the
     * containing line. */
    line-height: 1.0;
    border-radius: 0.25em;
    margin: 0 0.25em 0 0.25em;
    padding: 0.25em;
    /* Specifying this as `mono` seems to work around a glitch in Firefox
     * where it may or may not shrink the text. `monospace` does NOT work
     * for this purpose even though it does set a monospace font. */
    font-family: mono;
    /* For easier inspection. */
    font-size: inherit;
}


/* Don't use boxes for links with code styling; they're links to programs. */
a code {
    background: inherit;
    outline: inherit;
    border: inherit;
    margin: inherit;
    padding: inherit;
    text-decoration: inherit;
}

/* Make code boxes terminal-esque. */
pre, pre code {
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}

pre {
    border: 1px solid var(--shaded-2);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
}

pre.code {
    /* Some layouts might need to reduce the text size. */
    white-space: pre-wrap;
    max-width: 100%;
    /* Have to calculate this manually so that max-width can work. */
    width: calc(80ch + 1.5rem + 2px);
}

/* Use sans-serif, except for headings and where explicitly requested. */
:root { font-family: sans-serif }
.serif { font-family: serif }

/* Header styling. */
h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: bold;
    line-height: 1.2;
    font-family: serif
}
h1 {font-size:2.5rem}
h2 {font-size:2rem}
h3 {font-size:1.75rem}
h4 {font-size:1.5rem}
h5 {font-size:1.25rem}
h6 {font-size:1rem}
/* Set up <small> tags as always proportionate.
 * Currently, only used for subtitles in h1 and h2. */
small {font-size:75%}

/* Hide stuff that's for screen readers. */
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.sr-only-focusable:active,.sr-only-focusable:focus {
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    white-space:normal
}

img {
    max-width: 100%;
}

blockquote {
    margin-left: 2em;
    margin-right: 0.25em;
    border-left: 4px solid var(--green);
    padding: 0.25em;
    /* Use transparency so that nested blockquotes stack prettily. */
    background: rgba(from var(--text) r g b / 10%);
}

/* Indent subsequent levels less than the first. */
blockquote blockquote {margin-left:1em;}

/* Avoid space at the top and bottom of the blockquote panel, but allow
 * space between paragraphs without having to add it explicitly. */
blockquote :first-child {margin-top:0;}
blockquote :last-child {margin-bottom:0;}

/* for a <ul> of tags to show on a post, under the title.
 * Make sure to harmonize this with the 'badge' CSS used on the
 * "Tags and Series" page. */
.tags {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
    text-align: center;

}

.tags > li {
    display: inline-block;
}
.tags > li a {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    background-color: #868e96;
}

.tags > li a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #6c757d;
}

.metadata p:before, .postlist .listdate:after {
    content: " — ";
}

.metadata p:first-of-type:before {
    content: "";
}

.metadata p {
    display: inline;
}

.entry-content {
    margin-top: 1em;
}

/* for alignment with Bootstrap's .entry-content styling */
.entry-summary {
    margin-top: 1em;
}

/* Custom page footer */
#footer {
    padding-top: 19px;
    color: var(--faded-4);
    border-top: 4px solid var(--green);
}

/* Pagination widgets. */
ul.pager {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    padding-left: 0;
    margin: 0.5rem 0;
}

.page-link {
    color:var(--text);
    text-decoration:none;
}

.page-link.disabled {
    background-color:var(--shaded-2);
    color:var(--faded-2);
    pointer-events:none;
    cursor:auto;
}

ul.pager li.previous {
    margin-right: auto;
    display: inline;
}

ul.pager li.next {
    margin-left: auto;
    display: inline;
}

ul.pager li a {
    display: inline;
    position: relative;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    border: 1px solid var(--grey);
    border-radius: .25rem;
}

.byline a:not(:last-child):after {
    content: ",";
}

.blog-header {
    /* the old line-height:0 was weird and demanding hacks elsewhere. */
    margin-top: 1em;
    border-top: 4px solid var(--green); /* old #02b983; */
    border-bottom: 4px solid var(--blue); /* old #00aefe; */
}

#header {
    /* Stick it in place at the top. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: var(--bg);
}

.blog-header-logo {
    font-size: 3rem;
    font-family: serif;
    font-weight: 900;
    /* normalize height allowance.
     * For me in Firefox, the 3rem serif text has a height of 67px. */
    align-content: center;
    display: inline-block;
    height: 72px;
}

/* A hack to space out the main content so it doesn't start out stuck
 * underneath the floating title bar. */
.blog-header-spacer {
    /* logo height + header border + margin. */
    height: 96px;
}

.small, small {
  font-size: 0.75em;
}

.sidebar-heading {
  font-size: 1.5rem;
}

.sidebar-standalone {
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
}

/* Blog posts */
article {
  margin-bottom: 1.25rem;
}
article:last-child {
  margin-bottom: 0;
}
.entry-title {
  margin-bottom: .25rem;
  font-size: 2rem; /* changed from 2.5. These will be h2 entries */
}
article .metadata {
  margin-top: 1.25rem;
  color: #999;
}

/* Make space around Giscus comments. */
.giscus {margin-top:1em;margin-bottom:1em;}

div.giscus {border: 1px solid --var(text);}

/* Tag badges. */

/* Badge style. */
.badge {
    color:var(--faded-2);
    display:inline-block;
    padding:.25em .4em;
    font-size:75%;
    font-weight:700;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius:.25em;
    outline:0.25em solid var(--shaded-2);
    text-decoration:none;
    margin-top:0.5em;
    margin-bottom:0.5em;
}

.badge-tag {
    background-color:var(--bggreen);
    outline-color:color-mix(in srgb-linear, var(--bg) 50%, var(--bggreen) 50%);
}
a.badge-tag:focus,a.badge-tag:hover {
    color:var(--text);
    outline-color:var(--green);
}

.badge-category {
    background-color:var(--bgblue);
    outline-color:color-mix(in srgb-linear, var(--bg) 50%, var(--bgblue) 50%);
}
a.badge-category:focus,a.badge-category:hover {
    color:var(--text);
    outline-color:var(--blue);
}

/* Make badges appear side by side. */
.list-inline { padding-left: 0; list-style: none }
.list-inline-item { display: inline-block }
.list-inline-item:not(:last-child) { margin-right: .5rem }

/* Sidebar links separated by pipes. */
.pipe-list { padding-left: 0; list-style: none }
.pipe-list li { display: inline-block }
.pipe-list li:not(:last-child)::after { content: " | " }