/* BEGIN Pygments stuff */

/* make sure there are no borders */
table.highlighttable { border-collapse:collapse; }
table.highlighttable td, table.highlighttable tr { padding: 0; margin: 0; border: 0; }

/* undo Pygments stuff */
.highlighttable td.linenos pre { padding-right: 0; padding-left: 0; }

/* make it as wide as the container */
table.highlighttable { width: 100%; }
table.highlighttable td.linenos { width: .1%; }

/* adjust margins to make it look nice */
table.highlighttable td.linenos code {
    padding-left: .8rem;
    padding-right: .0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
table.highlighttable td.code code {
    padding-left: .7rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* the margin-bottom of the element above does not collapse
 * with the margin-top of the pre, because of the display property
 * of the table and the table-specific elements within it.
 * it's easiest to just remove the additional margin-top of the pre,
 * since we rely on the the margin of the element above anyway. */
.code-container:not(:first-child) pre { margin-top: 0; }

/* same kind of thing, but for hr */
.code-container + hr { margin-top: 0; }


/* HACK: should not hardcode the colors */

/* line numbers have the same color as the data-lang label, Spectre's .text-gray */
table.highlighttable td.linenos code { color: #bcc3ce; }

/* note: should be relatively kept in sync with the Pygments theme background */
.highlight { background: inherit; }


/* END Pygments stuff */



/* BEGIN Spectre improvements */

/* .table is missing the margin-bottom; use the same margin as <p> */
.table {
    margin-bottom: 1.2rem;
}

/* same for summary */
details summary {
    margin-bottom: 1.2rem;
}

/* same for lists */
ol, ul {
    margin-bottom: 1.2rem;
}

/* for some reason, <p> has margin-bottom 1.2rem, while <pre> has .8rem,
 * causing a <p> between two <pre>s to look like it belongs to the top <pre>;
 * we make the two margins equal. */
pre { margin-bottom: 1.2rem; }

/* fix <li> containing <p> resulting in a newline after the marker box */
ol, ul {
    list-style-position: outside;
    margin-left: 1.5rem;
}

details > summary { cursor: pointer; }

/* make hr look like Spectre's .divider */
hr {
    /* make everything look like a plain div */
    all: inherit;

    /* copied from .divider */
    display: block;
    position: relative;
    height: .05rem;
    border-top: .05rem solid #f1f3f5;

    /* bigger margin, like <p> */
    margin: 1.2rem 0;

    width: 100%;
}


/* set margins so that two paragraphs in the same blockquote
 * are the same distance apart as two paragraphs in different blockquotes;
 * we replace the padding with margin so margins can collapse;
 * the original vertical margin was .8rem, padding was .4rem */
blockquote {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    padding-top: 0;
    padding-bottom: 0;
}


/* undo the ul/ol 1.5rem margin if the item is a panel */
ul > li.panel, ol > li.panel {
    margin-left: -1.5rem;
}


/* less margin for lists in table cells */
.table td > ul {
    margin-top: 0;
    margin-bottom: .4rem;
    margin-left: .7rem;

}


.text-nowrap {
    white-space: nowrap;
}


/* END Spectre improvements */



/* BEGIN heading paragraph anchor */

/* stolen from the Read the Docs theme */

.headerlink, h2 .headerlink, h3 .headerlink, h4 .headerlink, h5 .headerlink, h6 .headerlink, dl dt .headerlink, p.caption .headerlink, table > caption .headerlink, .code-block-caption .headerlink {
    visibility: hidden;
}

h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink, dl dt:hover .headerlink, p.caption:hover .headerlink, table > caption:hover .headerlink, .code-block-caption:hover .headerlink {
    visibility: visible;
}

/* END heading paragraph anchor */



/* BEGIN fonts */

/* whatever GitHub uses */
/* note: Spectre has a similar rule, but the order of things is a bit differrent */
body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }
code, pre > code { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; }

/* otherwise we get the emoji version */
.footnotes a.footnote {
/*     font-family: initial !important; */
}

/* END fonts */



/* add some margin to the top */
.main {
    margin-top: 2rem;
}

.footnotes {
    margin-top: 2rem;
}

footer {
    margin-top: 2rem;
}


/* make the footer stick to the bottom when there's not enough content */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* fallback */
    /* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
    /* depends on --vh being set from javascript */
    min-height: calc(
        var(--vh, 1vh) * 100
        - 2rem /* .main margin-top */
    );
}
.content {
    flex: 1 0 auto;
}


/* inline panels should have the same margin as <p> */
.content .panel {
    margin-bottom: 1.2rem;
}

/* inline figures should have the same margin as <p> */
.content figure {
    margin-bottom: 1.2rem;
}


/* .code-label is a custom class applied to the outermost
 * <pre> parent that's a direct child of the column;
 * depending on where it comes from, it can be table.highlighttable,
 * div.highlight, or pre. We could use selectors like "pre:not(.highlight pre)",
 * but having an explicit class for this makes it cleaner. */

/* tested with a <div class="column col-sm-12 col-md-10 col-8"> parent */

/* no media */
/* reverse .col-8: 100 / 8 * 12 = 150 */
.code-container { width: 150%; }

@media (max-width: 840px) {
    /* .reverse .col-md-10: 100 / 10 * 12 = 120 */
    .code-container { width: 120%; }
}

@media (max-width: 600px) {
    /* reverse .col-sm-12 */
    .code-container { width: 100%; }
}


/* make code blocks scroll, instead of scrolling the whole page */
.code-container {
    display: block;
    overflow-x: auto;
}


.subscribe-form .form-input:not(:focus)::placeholder {
    color: #3b4351; /* $body-font-color */
    opacity: 1; /* Firefox fix */
}


/* BEGIN admonition */

/* $whatever-color taken from Spectre */

.admonition {
    /* similar to Spectre's .panel */
    border: .05rem solid #5755d9; /* $primary-color */
    border-radius: .1rem;
    background-color: #f1f1fc; /* $secondary-color == lighten($primary-color, 37.5%) */
    margin: 0 0 1rem 0;
    padding: 1.6rem .8rem 1rem .8rem;
    position: relative; /* required for the .admonition::before trick */
}
.admonition > :last-child {
    margin-bottom: 0;
}

/* similar to Spectre's .code::before */
.admonition .admonition-title {
    color: #807fe2; /* $link-color-light == lighten($primary-color, 10%) */
    font-size: .7rem;
    position: absolute;
    left: .4rem;
    top: .1rem;
}

/* .code tweaks */
.admonition .code-container:last-child .code { margin-bottom: 0; }
.admonition .code-container { width: 100%; }
.admonition pre code {
    background: inherit;
    padding-top: 0;
    padding-bottom: 0;
}
.admonition .code::before {
    /* data-lang can cover the code, so we just don't show it;
     * we can't use "top: -1rem" because ::before gets clipped by the parent
     * (we remoted the padding-top)
     */
    content: none;
}

/* details tweaks */
.admonition details > :last-child,
.admonition details:not([open]) summary {
    margin-bottom: 0;
}

/* box colors */

.admonition.note {
    /* using the defaults, because there's too many colors */
    /*border-color: #6ab0de;*/ /* read the docs theme admonition-title background */
    /*background-color: #e7f2fa;*/ /* lighten(#e7f2fa, 30%); */
}
.admonition.note .admonition-title {
    /*color: #6ab0de;*/
}

.admonition.hint, .admonition.important, .admonition.tip {
    border-color: #32b643; /* $success-color */
    background-color: #edfaef; /* lighten($success-color, 50%) */
}
.admonition.hint .admonition-title,
.admonition.important .admonition-title,
.admonition.tip .admonition-title {
    color: #32b643; /* $success-color */
}

.admonition.attention, .admonition.caution, .admonition.warning {
    border-color: #ffb700; /* $warning-color */
    background-color: #ffedbf; /* lighten($warning-color, 37.5%) */
}
.admonition.attention .admonition-title,
.admonition.caution .admonition-title,
.admonition.warning .admonition-title {
    color: #ffb700; /* $warning-color */
}

.admonition.danger, .admonition.error {
    border-color: #e85600; /* $error-color */
    background-color: #ffc8a8; /* lighten($error-color, 37.5%) */
}
.admonition.danger .admonition-title,
.admonition.error .admonition-title {
    color: #e85600; /* $error-color */
}

/* END admonition */


/* BEGIN logo */

/* logo */
.main header h1 { position: relative; }
.main header h1::before {
    /* content: "⊗̇ "; */
    content: url('/_static/xo-system.svg'); padding-right: .49em;
    position: absolute;
    left: -1.55em;
}
@media (max-width: 1200px) {
    .main header .heading-index::before { left: 0; top: -1.55em;  }
}

/* shadow */
.main header { position: relative; }
.main header::before {
    content: url('/_static/x-system.svg');
    position: absolute;
    z-index: -1;

    opacity: .06;
    /* #5755d9 $primary-color, obtained with https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(44%) sepia(79%) saturate(5973%) hue-rotate(233deg) brightness(90%) contrast(87%);

    top: -390px;
    left: -220px;
}

/* END logo */


/* make markdown rendering errors a pain to look at */
.content .error {
    background: red;
    color: yellow;
    border: .1rem solid black;
    border-radius: 0;
    margin: 0 0 1rem 0;
    padding: .8rem;
}


.article-list-title.popular::before {
    content: "⭐️ ";
}
.article-list-title.very-popular::before {
    content: "🚀 ";
}


/* BEGIN share icons */

.share-icons {
    white-space: nowrap;
}

.share-icon {
    height: 1em;
    vertical-align: middle;
    /* #3b4351 $body-font-color */
    filter: invert(22%) sepia(43%) saturate(273%) hue-rotate(179deg) brightness(91%) contrast(85%);
}
.text-gray .share-icon {
    /* #bcc3ce, Spectre's .text-gray */
    filter: invert(91%) sepia(12%) saturate(223%) hue-rotate(178deg) brightness(87%) contrast(86%);
}

.share-icon.color:hover,
.share-icon.color:active,
.share-icon.color:focus {
    opacity: 0.666;
}

.share-icon.twitter {
    content: url('/_static/twitter.svg');
}
.share-icon.twitter:hover,
.share-icon.twitter:active,
.share-icon.twitter:focus,
.share-icon.twitter.color {
    /* #1d9bf0 */
    filter: invert(54%) sepia(36%) saturate(1096%) hue-rotate(164deg) brightness(92%) contrast(106%);
}

.share-icon.hacker-news {
    content: url('/_static/hacker-news.svg');
}
.share-icon.hacker-news:hover,
.share-icon.hacker-news:active,
.share-icon.hacker-news:focus,
.share-icon.hacker-news.color {
    /* #ff6600 */
    filter: invert(51%) sepia(94%) saturate(4122%) hue-rotate(4deg) brightness(106%) contrast(103%);
}

.share-icon.reddit {
    content: url('/_static/reddit.svg');
}
.share-icon.reddit:hover,
.share-icon.reddit:active,
.share-icon.reddit:focus,
.share-icon.reddit.color {
    /* #ff4500 */
    filter: invert(32%) sepia(51%) saturate(3770%) hue-rotate(1deg) brightness(101%) contrast(107%);
}

.share-icon.pycoders {
    content: url('/_static/pycoders.svg');
}
.share-icon.pycoders:hover,
.share-icon.pycoders:active,
.share-icon.pycoders:focus,
.share-icon.pycoders.color {
    /* #3399cc */
    filter: invert(54%) sepia(100%) saturate(335%) hue-rotate(155deg) brightness(83%) contrast(92%);
}

.share-icon.linkedin {
    content: url('/_static/linkedin.svg');
}
.share-icon.linkedin:hover,
.share-icon.linkedin:active,
.share-icon.linkedin:focus,
.share-icon.linkedin.color {
    /* #0077b5 */
    filter: invert(32%) sepia(100%) saturate(4043%) hue-rotate(183deg) brightness(91%) contrast(101%);
}

.share-icon.bluesky {
    content: url('/_static/bluesky.svg');
}
.share-icon.bluesky:hover,
.share-icon.bluesky:active,
.share-icon.bluesky:focus,
.share-icon.bluesky.color {
    /* #1185fe */
    filter: invert(53%) sepia(45%) saturate(7361%) hue-rotate(196deg) brightness(98%) contrast(110%);
}

/* END share icons */



/* BEGIN link decorations */

a.internal {
    background-image: url('/_static/xo-system.svg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: 1.2em;
}

/* TODO: a.anchor, a.external */

/* END link decorations */