/*
    Pandoc HTML output CSS stylesheet
    Based on Buttondown by Ryan Gray
    @see https://gist.github.com/ryangray/1882525
*/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap');

body {
    margin: auto;
    font-family: 'Lato', sans-serif;
    /* text-align: justify; */
}

@media screen {
    html {
        background-color: #eee;
    }
    body {
        margin: auto;
        /* needs 1px top & bottom padding to remove vertical space between html & body */
        padding: 1px 2em;
        font-size: 16px;
        max-width: 1000px;
        background-color: #f8f8f8;
        min-height: 100vh; /* stretch body to at least full viewport height */
    }
}


/* --- Print media defaults --- */

@media print {
    /* record document & header titles for inclusion on page edge */
    h1.title {
        string-set: document_title content();
    }
    h1 {
        string-set: section_title content();
    }

    /* default page settings */
    @page {
        size: A4 portrait;
        margin: 20mm 20mm;        
        font-family: 'Lato', sans-serif;
        font-size: 10px;
        orphans: 3;
        widows: 3;

        @top-left {
            content: string(document_title);
            text-decoration: underline;
        }
        @bottom-left {
            content: string(section_title);
        }
        @bottom-right {
            content: counter(page) " / " counter(pages);
            font-size: 8px;
        }
    }

    body {
        font-size: 12px;
        /* margin already set in @page rule - no additional margin  */
        margin: 0; 
    }

    /* ensure images don't overflow container width */
    img {
        max-width: 100%;
    }
    
    /* Include background images (e.g. hint icons) in print output
     * @see https://stackoverflow.com/a/21160150
     */
     .coding-principle,
     .note,
     .hint {
        -webkit-print-color-adjust: exact !important; /* webkit */
        color-adjust: exact !important; /* firefox */
    }

    /* TOC: page numbers after section title, simulate leaders() not supported by WeasyPrint */
    #TOC a {
        display: inline-block;
        width: 100%;
        border-bottom: 0.5px dotted;
    }
    #TOC a::after {
        position: absolute;
        right: 0;
        content: leader('.') target-counter(attr(href url), page);
    }
    /* Extra line-spacing for TOC */
    #TOC {
        line-height: 1.6em;
    }

    li,
    .no-page-break-inside {
        page-break-inside: avoid;
    }

    /* Try not to separate the <summary> from the body of <details> it introduces,
     * or <dt> from the <dd> that follows
     */
    summary,
    dt {
        page-break-after: avoid;
    }

    /* don't include <hr> elements at all */
    hr {
        display: none;
    }

    /* Limit height of tall images so they don't overflow the page length.
     * Bit of a kludge but works OK for A4 portrait
     */
    .tall-img {
        max-height: 250mm;
    }
}

#title-block-header h1,
.subtitle,
.author,
.date {
    text-align: center;
}

.title-image {
    max-width: 95%;
}

/* Put border after TOC to separate it from body. */
@media screen {
    div#TOC,
    nav#TOC {
        border-bottom: 1px solid #aaa;
        margin-bottom: 0.5em;
    }
}
/* For print output, page break before & after TOC */
@media print {
    div#TOC,
    nav#TOC {
        page-break-before: always;
        page-break-after: always;
    }    
}


/* ---- Headers and sections ---- */
h1, h2, h3, h4, h5, h6 {
    margin-top: +25px;
    text-align: left;
}
h6 {
    font-size: 13px;
    margin-bottom: 4px;
}

/* separate section numbers from section title */
.header-section-number::after {
    content: '.';
}

/* code terms in headers should match font size of header */
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    font-size: inherit;
}

/* Pandoc with --section-divs option */
/* Nested sections */
section section {
    margin-left: 1em; /* This will increasingly indent nested header sections */
}

@media print {
    section.level1 {
        page-break-after: always;
    }

    h1 {
        margin-top: 0; /* h1 is always at the top of the page so needs no top margin */
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid-page;
    }

    h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
        page-break-before: avoid;
    }
}


/* All links */

/* Keep links clean. On screen, they are coloured; in print, they do nothing anyway. */
a {
    text-decoration: none;
    white-space: pre-line; /* allow link text to break to keep within container width*/
}

@media screen {
    /* Decorate external links with an icon after the link text */
    a.extlink::after {
        content: "";
        display: inline-block;
        background: url('img/icon_external_link.svg') no-repeat top right;
        background-size: 1.1em;
        width: 1.1em;
        height: 1em;
    }

    /* On hover, we indicate a bit more that it is a link. */
    a[href]:hover {
        text-decoration: underline;
    }
}

/* In print, a coloured link is useless, so un-style it. */
@media print {
    a {
        color: black;
        background: transparent;
    }

    /* However, links that go somewhere else, might be useful to the reader,
    so for http, https and mailto links, print the URL after what was the link 
    text in parens
    */
    a[href^="http://"]::after,
    a[href^="https://"]::after,
    a[href^="mailto:"]::after {
        content: " [" attr(href) "] ";
        font-size: 90%;
        opacity: 0.9;
        color: teal;
    }

    /* definitions */
    a[href^="#dfn"]::after {
        content: " (see definition on page " target-counter(attr(href url), page) ")";
    }

    /* internal links */
    a[href^="#"]::after {
        content: " (see page " target-counter(attr(href url), page) ")";
    }

    /* allow long link destinations to wrap */
    a[href]::after {
        word-wrap: break-word;
    }
}


/* ---- Images ---- */

/* Inline images centered vertically */
img {
    vertical-align: middle;
}

/* Sprite images float right */
.sprite{
    float: right;
    margin-left: 1em;
}

/* Pandoc figure-style image */
figure {
    margin-block-start: 20px;
    margin-block-start: 30px;
}

/* ---- Figure captions ---- */
figcaption {
    font-size: medium;
    font-weight: bold;
    margin: 15px auto 25px auto;
    /* margin-bottom: 25px; */
}


/* ---- Code blocks and spans ---- */

pre,
code {
    background-color: #f6efe7;
    /* Need the following to word wrap instead of scroll box */
    /* This will override the overflow:auto if present */
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word;
    font-size: 15px;
    font-family: 'Roboto Mono', monospace;
}

@media print {
    pre, code {
        font-size: 10px;
    }
}


/* Code blocks */
pre {
    /* Distinguish pre blocks from other text by more than the font with a background tint. */
    padding: 0.5em; /* Since we have a background color */
    border-radius: 5px; /* Softens it */
    /* Give it a some definition */
    border: 1px solid #aaa;
    /* Set it off left and right, seems to look a bit nicer when we have a background */
    margin-left:  0.5em;
    margin-right: 0.5em;
}

@media screen {
    pre {
        /* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
        white-space: pre;
        overflow: auto;
        /* Dotted looks better on screen and solid seems to print better. */
        border: 1px dotted #777;
    }
}

 /* Code spans in paragraphs and tight lists */
p > code,
li > code {
    /* Pad a little from adjacent text */
    padding-left:  2px;
    padding-right: 2px;
}
    
/* Code span in a loose list */
li > p code {
    /* We have room for some more background color above and below */
    padding: 2px;
}


/* ---- Footnotes ---- */

/* Pandoc, MultiMarkdown footnote links */
a.footnote,
a.footnoteRef {
    font-size: small; 
    vertical-align: text-top;
}

/* Don't display reverse footnotes at all in print since the arrow is only something to click on */
@media print {
    a[href^="#fnref"],
    a.reversefootnote {
        display: none;
    }
}



/* Tasks: ask the reader to do some coding */
.task_container {
    margin-top: 1.5em;
    border: thin solid #060;
    box-shadow: 3px 3px #666;
    margin-inline-start: 30px; /* give space to the right of the abs positioned icon & title text */
    position: relative; /* allow task_title to be positioned relative to the task_container */
}

/* two consecutive tasks: add vertical space */
.task_container + .task_container {
    margin-top: 3rem;
}

/* float the task title to the left margin of the body */
.task_container > .task_title {
    width: 64px;
    position: absolute;
    left: -62px;
    margin-right: 25px;
    color: #800;
    font-size: 75%;
    font-weight: bold;
    text-align: center;
}

/* For some reason print media needs more space to the right of the task_title */
@media print {
    .task_container {
        margin-inline-start: 35px;
    }

    /* Need this to place the task_title on the left margin of the page (in Webkit browsers' print preview) */
    .task_container > .task_title {
        margin-inline-start: 0;
    }    
}

.task_icon {
    width: 48px;
}

.task {
    margin: 10px 10px 20px 10px;

}

/* Coding principles, Notes, Hints, Tests */
.coding-principle,
.note,
.hint,
.test-code {
    padding-left: 38px;
    min-height: 35px;
}
.coding-principle {
    background: url('img/icon_finger-with-a-ribbon.svg') top left / 35px no-repeat;
}
.note {
    background: url('img/icon_notepad.svg') top left / 35px no-repeat;
}
.hint {
    background: url('img/icon_idea.svg') top left / 35px no-repeat;
}
.test-code {
    background: url('img/icon_debug.svg') top left / 32px no-repeat;
}

/* vertical space between consecutive <details> elements */
/* Note: to target only closed <details> elements use details:not([open]) */
details + details {
    margin-top: 15px;
}

/* vertical space between consecutive hints, principles, code blocks */
.hint + .hint,
.hint + .my-code_container,
.my-code_container + .my-code_container,
.my-code_container + .test-code {
    margin-top: 15px;
}

/* vertical space between test blocks and following paragraphs */
.test-code + p {
    margin-top: 2em;
}

/* vertical space between definitions in definition lists */
dt ~ dt {
    margin-top: 15px;
}

/* animate details opening
    taken from https://stackoverflow.com/a/38215801
    summary ~ *  means: all silbings of <summary>
        i.e. everything in <details> but not <summary> itself
*/
details[open] summary ~ * {
    animation: sweep .5s ease-in-out;
}
/* transition from transparent to fully opaque, slide 10px to right */
@keyframes sweep {
    0%    {opacity: 0; margin-left: -10px}
    100%  {opacity: 1; margin-left: 0px}
}

/* Challenges */
/* Add challenge icons to all .challenge elements except <section>:
 * pandoc marks both the header and the enclosing section with class challenge,
 * and we don't want two icons.
*/
:not(section).challenge {
    background: url('img/icon_summit.svg') top left / 35px no-repeat;
    padding-left: 38px;
    /* margin-left: 5px; small amount of left margin for icon */
    min-height: 40px; /* ensure bottom of icon shows */

}

/* My code sections */
details.my-code {
    background: #f4f4f4;
    box-shadow: 3px 3px #eee;
}
.my-code summary {
    font-size: 100%;
    color: green;
    font-weight: 700;
    padding-left: 3px;
}
.my-code_blocks {
    margin: 5px 10px;
}


/* Definitions */
.definitions dt {
    font-weight: 900;
    color: sienna;
}

/* autogenerated Scratch code blocks */

/* scale down autogenerated images & limit width */
img.blocks {
    max-width: 100%;
}

/* hide aria-labelledby explanations */
.hidden {
    display: none;
}


/* tables */
table {
    border-collapse: collapse;
    border: 1px solid#888;
    margin: 5px 0;
}
table td,
table th {
    padding: 3px;
    border: 1px solid #888;
}
table th {
    background-color: lavender;
}
table tr:nth-child(even) {
    background-color: #f2f2f2;
}
table caption {
    caption-side: bottom;
    font-weight: bold;
    text-align: left;
    margin-top: 0.5em;
}
table ul {
    margin: 0 auto 0 auto;
    padding-left: 2em;
}

.hanging-indent {
    display: inline-block;
    padding-left: 1em;
    text-indent: -1em;
}

.table-difficulty td {
    padding: 0.5em 1em;
}

/* Make wide tables scroll horizontally if they're too wide for the viewport*/
.table-events {
    overflow: auto;
}

/* List of new features */
.feature-list li {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.feature-list > ul > li > ul {
    margin-bottom: 1.5em;
}


/* Acknowledgements */
.acknowledgements {
    line-height: 2em;
}
.acknowledgements ul {
    list-style-type: none;
}
.acknowledgements .icon {
    width: 35px;
    padding: 5px 0;
}

/* License */
.license {
    text-align: center;
    margin: 3em auto 1em auto;
}

/* Changelog: top level list inside <dd> not indented */
.changelog dd > ul,
.changelog dd > ol
{
    padding-left: 0;
    margin-top: 0.2em;
}

/*
 * Overrides for narrow screen (mobile) devices
 */
@media only screen and (max-device-width: 768px) {
    /* remove most of body margin */
    body {
        margin: 0.5em;
    }

    /* limit image width: user can pinch zoom for more detail */
    /* todo: should this be the default? And link to full size image file? Would it work well for print output? */
    img {
        max-width: 100%;
    }

    /* Remove left indentation: it wastes valuable screen space */

    /* Nested sections */
    div div,
    section section {
        margin-left: inherit;
    }

    .coding-principle,
    .note {
        margin: auto 0 auto auto;
    }

    .task_container {
        margin-inline-start: 0;
    }

    /* Task icon: place icon inside the box (its normal flow) */
    .task_container > .task_title {
        position: static;
    }

    /* remove 40px left & right margins on figures */
    figure {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

}