/*
 * Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital@0;1&display=swap');

/*
 * Mailchimp 
 */
#mc_embed_signup {
    /* background: #fff; */
    clear: left;
    font: 14px 'Roboto', Helvetica, Arial, sans-serif;
    width: 100%;
}

.mc-article-embed {
    /*background-color: #282b2e; color:#a9b7c6; border: 1px #ddd solid; border-radius: 10px;*/
    padding: 20px; 
    border: 1px #888 solid; 
    border-radius: 10px;
    background-color: #fcf8e376; 
    /* color:#a9b7c6; */
}


/*
 * General visual improvements that match the old SVIO site
 */

.center {
    text-align: center;
}

table>thead {
    background-color: #fcf8e376;
}
/* table>tbody>tr:nth-of-type(even) {
    background-color: #f6f6f638;
} */

/* Add borders to all columns */
.md-typeset table tr th,
.md-typeset table tr td {
    border-right: 0.05rem solid var(--md-typeset-table-color); 
}

/* Then override above stule and remove the weird thick border to the right of last column */
.md-typeset table tr th:last-child,
.md-typeset table tr td:last-child {
    border-right: none; 
}

img {
    border-radius: 0.2rem;
}

/* 
  For hrefs in the article body add a underline.
  But it looks weird for Tags, so don't add the 
  decoration for md-tag
*/
article.md-content__inner.md-typeset a:not(.md-tag, .highlighttable a) {
    border-bottom: 2px solid #e1e1e1;
}

/* 
 * This is an optional caption style to mimic something I saw on
 * Crafting Interpreters. 
 */
.md-typeset .caption-text {
    font-size: 0.6rem;
    color: grey;
    font-family: 'Roboto Mono', monospace;
    text-align: right;
}

/* Stand-alone caption. Markdown doesn't have a native way to do captions */
.md-typeset figcaption {
    font-size: 0.6rem;
    /* color: grey; */
    color: var(--md-default-fg-color--light);
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    font-style: normal;
}

/* 
 * Creating class for h4 and h3. MkDocs does not have classes for
 * h3 and h4. So I can use this to use header styling for any
 * text. And not have that text show up in ToC
 */
.h4 {
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 1em 0;
}

.h3 {
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 1.6em 0 0.8em;
}

.svio-nav-title {
    font-family: 'Merriweather', var(--md-text-font-family);
    /* font-family: var(--md-code-font-family); */
}

/* Changing font and styling for all headers except h1 */
h2, h3, h4 {
    font-family: 'Merriweather', var(--md-text-font,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Used for sub-title text in index pages */
.font-color-light {
    color: var(--md-default-fg-color--light);
}

/* 
 * highlight.js override 
 */
/* Background color of a code snippet */
.md-typeset code.hljs {
	background-color: #282b2e;
    /*"Find it in the css of highlight.js theme you use"; */
}

/* Keywords colour */
.md-typeset pre, 
.md-typeset code.hljs {
	color: #a9b7c6; /*"Find it in the css of highlight.js theme you use";*/
}

/* Copy to clipboard colour */
.md-clipboard:before {
    color: rgb(255, 255, 255); 
}

/* Copy to clipboard colour for code.hover */
.codehilite:hover .md-clipboard:before,.md-typeset .highlight:hover .md-clipboard:before,pre:hover .md-clipboard:before {
    color: rgb(255, 255, 255);
}

/* scrollable code box like I have in original SVIO site */
.scroll-xl {
    max-height: 700px;
    overflow-y:scroll;
}

.scroll-lg {
    max-height: 600px;
    overflow-y:scroll;
}

.scroll-md {
    max-height: 500px;
    overflow-y:scroll;
}

pre {
    padding: 9.5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media screen and (min-width: 45em) {
    /* adjusting default width on inline admonition*/
    .md-typeset .inline {
        width: 20rem;
    }
    /* 
     * code box takes full width of screen, adding this class
     * cuts down its width and makes it more pleasing to the eye
     */
    .wd-med {
        width: 640px;
    }
}

.my-flex-center {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .mobile-hidden {
        display: none!important;
    }
}

@media screen and (min-width: 769px) {
    .desktop-hidden {
        display: none!important;
    }
}

/* 
 * Banner
 * Default styling wasn't good, so copying from mkdocs-material source
 * https://github.com/squidfunk/mkdocs-material/blob/master/src/overrides/assets/stylesheets/custom/layout/_banner.scss
 *
 * Convert SCSS to CSS using this link
 * https://jsonformatter.org/scss-to-css
 */
.md-banner {
    color: var(--md-footer-fg-color--lighter);
}
.md-banner strong {
    color: var(--md-footer-fg-color);
    white-space: nowrap;
}
.md-banner a {
    color: var(--md-footer-fg-color);
}
.md-banner a:focus, .md-banner a:hover {
    color: currentcolor;
}
.md-banner a:focus .twemoji, .md-banner a:hover .twemoji {
    background-color: var(--md-footer-fg-color);
    box-shadow: none;
}
/*
.md-banner .twemoji {
    display: inline-block;
    width: px2rem(24px);
    height: px2rem(24px);
    padding: px2rem(5px);
    vertical-align: bottom;
    border-radius: 100%;
    box-shadow: 0 0 0 px2rem(1px) currentcolor inset;
    transition: all 250ms;
}
*/
.md-banner .twemoji svg {
    display: block;
    max-height: initial;
}

/* Form Embed Code - Horizontal Super Slim
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#p_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#p_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#p_embed_signup input.name {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:150px; vertical-align:top;}
#p_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#p_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#p_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#p_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#p_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#p_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#p_embed_signup #mce-error-response {display:none;}
#p_embed_signup #mce-success-response {color:#529214; display:none;}
#p_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #p_embed_signup input.name {width:100%; margin-bottom:5px;}
    #p_embed_signup input.email {width:100%; margin-bottom:5px;}
    #p_embed_signup .clear {display: block; width: 100% }
    #p_embed_signup .button {width: 100%; margin:0; }
}