/*
 * Define the following variables in the site and include it with extra_css.  Those
 * CSS files will get prepended to this file:
 *
 * --background-1
 * --background-2
 * --header-background
 * --footer-background
 * --menu-background
 *
 * --link-primary
 * --link-secondary
 * --link-hover
 *
 * --font-primary
 * --font-secondary
 * --footer-font-primary
 * --footer-font-secondary
 * --button-font
 * --menu-font
 *
 */

/******************************************************* FONTS ********************************************************/
@font-face {
    font-family: "B612";
    src: url(/fonts/B612-Regular.ttf);
}
@font-face {
    font-family: "B612";
    src: url(/fonts/B612-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: "B612";
    src: url(/fonts/B612-Italic.ttf);
    font-style: italic;
}


@font-face {
    font-family: "tomorrow";
    src: url(/fonts/Tomorrow-Regular.ttf);
}

/*********************************************** BASE STYLE DEFINITIONS ***********************************************/
:root {
    --content-width: 1296px;
    --section-spacing: 66px;
    --subsection-border-radius: 32px;
    --subsection-padding: 36px;

    --font-size-regular: 24px;
    --font-size-small: 20px;
    --font-size-tiny: 16px;

    --menu-height: 75px;
    --menu-spacing: 36px;
    --menu-logo-height: 44px;
    --menu-icon-height: 30px;

    --accent-green: #4e8a42;
    --accent-orange: #ec8a3b;
    --accent-purple: #9e70c2;
    --accent-slate: #527a92;

    --link-icon-size: 40px;
}

@media (max-width: 1024px) {
    :root {
        --font-size-regular: 18px;
        --font-size-small: 16px;
        --font-size-tiny: 12px;
        --section-spacing: 32px;
        --subsection-padding: 20px;

    }
}

body {
    margin: 0 auto;
    font-family: "B612", "Arial", "Helvetica", sans-serif;
    font-size: var(--font-size-regular);
    max-width: var(--content-width);
    color: var(--font-primary);
    background: var(--background-1);
    overflow-x: hidden;
}

main { margin: 0 auto; width: 90%; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    font-family: "tomorrow", "Courier New", "Courier", monospace;
    font-weight: normal;
    color: var(--font-secondary);
    margin: 0;
}
h1 { font-size: 48px; margin-bottom: 42px; }
h2 { font-size: 36px; margin-bottom: 30px; }
h3 { font-size: 30px; margin-bottom: 18px; }
h4 { font-size: 24px; margin-bottom: 8px; }

@media (max-width: 1024px) {
    h1 { font-size: 32px; margin-bottom: 20px; }
    h2 { font-size: 26px; margin-bottom: 16px; }
    h3 { font-size: 20px; margin-bottom: 12px; }
    h4 { font-size: 18px; margin-bottom: 4px; }
}

main > h1, main > h2, main > h3, main > h4, main > h5, main > h6 { text-align: center; }
section > h1, section > h2, section > h3, section > h4, section > h5, section > h6 { text-align: center; }

a { color: var(--link-primary); text-decoration: none; }
a:hover { color: var(--link-hover); }

ul { margin: 0 0 24px 0; padding: 0; }
ul li { margin-bottom: 12px; margin-left: 1em; }
ol li { margin-bottom: 12px; }
@media (max-width: 1024px) {
    ul li { margin-bottom: 4px; }
    ol li { margin-bottom: 4px; }
}

header {  background: var(--header-background); }

section, footer {
    /* Make the background colors for these elements span the screen:
     * we set the width to the viewport width, and use "border-box" box
     * sizing to include the padding in the element's content box.  Then
     * we set the padding on either side to 50% of the viewport width minus
     * half of the desired content width.  We have to apply a negative margin
     * since the body uses margin: auto to center things
     */
    width: 100vw;
    box-sizing: border-box;
    padding: var(--section-spacing) calc(max(12px, 50vw - var(--content-width) / 2));
    margin-left: min(0px, var(--content-width) / 2 - 50vw);
}

section:nth-of-type(odd) { background: var(--background-2); }
section:nth-of-type(odd) .subsection { background: var(--background-1); }

.subsection {
    border-radius: var(--subsection-border-radius);
    padding: var(--subsection-padding);;
    background: var(--background-2);
    margin: 15px 0;
    overflow: auto;
}
/* will do funky things if nested in a section but we don't do that (right now) */
.subsection .subsection {
    background: var(--background-1);
}

.subsection:nth-child(4n+1) h3:not(.icon),
.subsection:nth-child(4n+1) .subsection h3:not(.icon)
    { color: var(--accent-slate); }
.subsection:nth-child(4n+2) h3:not(.icon),
.subsection:nth-child(4n+2) .subsection h3:not(.icon)
    { color: var(--accent-green); }
.subsection:nth-child(4n+3) h3:not(.icon),
.subsection:nth-child(4n+3) .subsection h3:not(.icon)
    { color: var(--accent-orange); }
.subsection:nth-child(4n+4) h3:not(.icon),
.subsection:nth-child(4n+4) .subsection h3:not(.icon)
    { color: var(--accent-purple); }

.subsection ul li { font-size: var(--font-size-small); }
.subsection img { width: 100%; border-radius: var(--subsection-border-radius); }

footer {
    display: flex;
    background: var(--footer-background);
    color: var(--footer-font-primary);
    font-size: var(--font-size-small);
    flex-wrap: wrap;
    gap: 40px;
    box-shadow: 0 50vh 0 50vh var(--footer-background);  /* make the footer extend to the bottom of the screen */
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: var(--footer-font-secondary); }
footer ul { list-style-type: none; }
footer ul li { margin-left: 0; margin-bottom: 8px; }
footer > div { flex: 1; }  /* clear: both used in the mobile view */

@media (max-width: 1024px) {
    footer > div { flex-basis: 25%; }
    footer > div:first-child {
        flex-shrink: 1;
        flex-basis: 100%;
    }
}
@media (min-width: 1024px) {
    footer > div:first-child { flex: 1.75; }
}

abbr {
    border-bottom: 1px dotted;
    text-decoration: none;
}

/******************************************************* LAYOUT *******************************************************/
.flex {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 36px auto 30px auto;
    gap: 30px;
}
.flex > div:has(.img) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex > div { margin: 0; flex: 1 }
.flex .img { max-width: 100%; }
.subsection .flex { width: 100%; }

@media (min-width: 1024px) {
    .flex.twocols > div {
        flex: 1 35%;
        max-width: 50%;
    }
}

@media (max-width: 1024px) {
    .flex > div { flex: 1 1 100%; }
}

/************************************************ NAVIGATION ELEMENTS *************************************************/
#menu {
    width: 95%;
    height: var(--menu-height);
    line-height: var(--menu-height);
    border-radius: calc(var(--menu-height) / 2);
    background: var(--menu-background);
    margin: var(--menu-spacing) auto;
}
#menu h2 { display: inline; vertical-align: middle; }
#menu a, #menu h2 { color: var(--menu-font); }
#menu a:hover { color: var(--link-hover); }

#menu .home { float: left;  }
#menu .home img {
    height: var(--menu-logo-height);
    margin: calc((var(--menu-height) - var(--menu-logo-height)) / 2) 24px;
    float: left;
}
#menu .home a:hover { color: var(--menu-font); }

#menu .links { float: right; }
#menu ul { list-style-type: none; }
#menu ul li { margin-left: 0; }

@media (min-width: 1024px) {
    /*
     * It's not 100% clear how all these different pieces are interacting, but
     * this is what I had to do to get the menu to look right.  The height of the
     * menu bar is set to the same as the line-height, which lets the vertical-align: middle
     * field work for the text (however, for some reason it seems not to be needed for the
     * ACRL text on the left).
     *
     * The logo image is manually positioned using margins; however, the github and the
     * light/dark icons couldn't use margins because that pushed the rest of the menu items
     * down, so I manually adjust their position slightly.  It's hacky but seems to look OK.
     */
    #menu ul li {
        display: inline-block;
        margin-right: 54px;
        vertical-align: middle;
    }
    #menu ul li:has(.icon) { margin-right: 24px; }
    #menu ul li .icon {
        position: relative;
        top: 4px;
        height: var(--menu-icon-height);
    }
}
@media (max-width: 1024px) {
    #menu .hamburger {
        display: inline-block;
        margin-right: 24px;
        vertical-align: middle;
    }
    #menu ul { line-height: normal; }

    .floating {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border-radius: 12px;
        padding: 0;
        box-shadow: 0 0 5px;
    }
    .floating.open { padding: 12px; }
    .floating li:has(.icon), .floating span:has(.icon) { display: inline; margin-right: 8px; }

    #mainmenu {
        position: absolute;
        background: var(--menu-background);
        width: 150px;
        right: 24px;
        top: 90px;
        z-index: 1;
    }
    #mainmenu.open { border: 2px solid var(--background-2); }
    #mainmenu .icon { transform: scale(0.75); }
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.buttons.center { justify-content: center; }

.buttons .secondary { background: var(--link-secondary); }
.buttons .icon {
    background: none;
    width: var(--link-icon-size);
    height: var(--link-icon-size);
    padding: 0;
    margin-left: auto;
}

.buttons a, button {
    background: var(--link-primary);
    color: var(--button-font);
    border-radius: 100px;
    padding: 12px 24px;
}
.buttons a:last-child, .buttons .github { margin-right: 0; }
.buttons a:hover, button:hover { background: var(--link-hover); color: var(--button-font); }

button {
    border: 0;
    font-family: "B612";
    width: 100%;
    font-size: var(--font-size-normal);
}

/************************************************** ICONS AND MEDIA ***************************************************/
[data-theme="default"] #themeswitcher { content: url(/icons/d2l.svg); }
[data-theme="default"] nav .github { content: url(/icons/gh-menu-dark.svg); }
[data-theme="default"] .slack { content: url(/icons/slack-menu-dark.svg); }
[data-theme="default"] .hamburger { content: url(/icons/hamburger.svg); }
[data-theme="alternate"] #themeswitcher { content: url(/icons/l2d.svg); }
[data-theme="alternate"] nav .github { content: url(/icons/gh-menu-light.svg); }
[data-theme="alternate"] .slack { content: url(/icons/slack-menu-light.svg); }
[data-theme="alternate"] .hamburger { content: url(/icons/hamburger-light.svg); }

/* we have different github icons for nav versus in-page */
.buttons .github { content: url(/icons/gh-project.svg); }
.buttons a.github:hover { content: url(/icons/gh-project-hover.svg); }

.hamburger { display: none; }  /* only use hamburger menus on mobile */

.icon:before {
    vertical-align: middle;
    display: inline-block;
    margin-right: 8px;
    transform: scale(0.75);
}

footer .logo {
    float: left;
    height: 150px;
    margin-right: 18px;
}

@media (max-width: 1024px) {
    footer img.logo { height: 72px; padding-bottom: 20px; }
    .
}

.external:after {
    content: url(/icons/external.svg);
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    transform: scale(0.75);
}

.youtube-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 12px;
}

.youtube-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
:root {
    --background-1: #efeceb;
    --background-2: #fbfaf9;
    --header-background: var(--accent-slate);
    --footer-background: var(--background-2);
    --sidebar-background: var(--background-2);
    --menu-background: #efeceb;

    --link-primary: var(--accent-orange);
    --link-secondary: #1f5781;
    --link-hover: var(--accent-purple);

    --font-primary: #444;
    --font-secondary: #000;
    --footer-font-primary: #717171;
    --footer-font-secondary: #000;
    --button-font: #fff;
    --menu-font: #000;

    --sidebar-width: 250px;
    --sidebar-padding: 24px;
}

[data-theme="alternate"] {
    --background-1: #181818;
    --background-2: #2c2c2c;
    --footer-background: #fff;

    --font-primary: #b8b8b8;
    --font-secondary: #fff;
    --footer-font-primary #6a6a6a;
    --footer-font-secondary: #000;
    --button-font: #fff;
}
/**************************************************** OVERRIDES *******************************************************/
body { font-size: var(--font-size-small); line-height: 1.3; }
header, .hero {
    /* override the header padding to get the background color */
    width: 100vw;
    box-sizing: border-box;
    padding: var(--menu-spacing) calc(max(12px, 50vw - var(--content-width) / 2));
    margin-left: min(0px, var(--content-width) / 2 - 50vw);
}

#menu {
    margin: 0 auto;
    border-radius: 12px;
    font-size: var(--font-size-regular);
    position: relative; /* let us position the mascot relative to the menu */
}
#menu ul li {
    position: relative; /* menu items take priority over the mascot link */
    z-index: 1;
}

.buttons a { border-radius: 12px; }

main h2 { margin-top: 24px; }
main h3 { text-align: left; }

h2 + h3 { margin-top: -24px; }

/*************************************************** HERO SECTION *****************************************************/
.hero {
    color: #fff;
    background: var(--header-background);
    text-align: center;
}
.hero p { width: 90%; margin-left: auto; margin-right: auto; }

.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 { color: #fff; }

.mascot {
    position: absolute;
    top: 45px;
    right: 50px;
}
@media (max-width: 1024px) {
    .mascot { top: 120px; right: 10px; }
    .mascot img { width: 75px; }
}

/************************************************** DOCUMENTATION *****************************************************/
.docs { display: flex; width: 95%; margin: 0 auto; }
.docs main { flex: 1; padding: 24px; width: calc(90% - var(--sidebar-width) - 2 * var(--sidebar-padding)); }
.docs main h1, .docs main h2, .docs main h3, .docs main h4, .docs main h5, .docs main h6 {
    text-align: left;
    margin-top: 0;
}
.docs .flex { margin-left: 0; margin-right: 0; width: 100%; }

.docs ul li, .changelog ul li, .toc ul li { margin-bottom: 4px; }
.textwrap { margin-left: 20px; float: right; display: flex; flex-direction: column; align-items: center;}
.textwrap .img { max-width: 500px; }
@media (max-width: 1024px) {
    .textwrap { margin-left: 0px }
    .textwrap .img { max-width: 100%; }
}
.textwrap figcaption {
    font-size: var(--font-size-tiny);
    margin: 12px;
    font-family: "tomorrow", "Courier New", "Courier", monospace;
}

.toc { margin-top: 12px; }

/**************************************************** NAVIGATION ******************************************************/
#sidebar {
    background-color: var(--sidebar-background);
    flex: 0 0 var(--sidebar-width);
}
@media (min-width: 1024px) {
    #sidebar { padding: var(--sidebar-padding); }
    #sidebar .icon { margin-right: 24px; }
}

#sidebar a { color: var(--font-secondary); }
#sidebar a:hover { color: var(--link-hover); }
#sidebar .selected { color: var(--accent-green); }
#sidebar ul { list-style-type: none; }
#sidebar ul a { display: block; width: 100% }
#sidebar ul a img { float: right; margin: 8px 0; }
#sidebar > ul > li {
    border-top: 1px #9a9a9a solid;
    padding: 12px 0;
    margin: 0;
}
#sidebar > ul > li:last-child {
    border-bottom: 1px #9a9a9a solid;
}
#sidebar .downarrow:before {
    float: right
}
#sidebar ul li ul {
    margin: 0;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
}
#sidebar ul li ul li { margin-left: 12px; }
#sidebar ul li ul li:first-child { margin-top: 12px; }
#sidebar ul li ul li a { color: var(--font-primary); }

.docs .prev-page { float: left; }
.docs .next-page { float: right; }

@media (max-width: 1024px) {
    .sidebar-hamburger {
        content: url(/icons/hamburger.svg);
        padding: 8px;
        border-radius: 100px;
        background: var(--accent-slate);
        position: fixed;
        bottom: 30px;
        right: 30px;
        box-shadow: 0 0 20px 5px var(--accent-slate);
        opacity: 90%;
    }

    #sidebar {
        background: var(--background-2);
        position: fixed;
        width: 50%;
        right: 30px;
        bottom: 80px;
    }
    #sidebar.open { border: 2px solid var(--background-1); }
}

/****************************************************** SEARCH ********************************************************/
#mkdocs-search-query {
    background: url('/icons/search.svg') no-repeat scroll calc(100% - 10px) 10px, linear-gradient(to right, #fff, #fff);
    background-size: 18px;
    border: 2px solid var(--background-1);
    border-radius: 48px;
    height: 36px;
    width: 100%;
    font-size: var(--font-size-small);
    text-indent: 12px;
    margin-bottom: 18px;
}

/*************************************************** ADMONITIONS ******************************************************/
.admonition {
    border: 2px solid;
    border-radius: 20px;
    padding: 20px;
    margin: 12px 0;
}
.admonition p { margin: 12px 0; }
.admonition p:last-child { margin-bottom: 0; }
p.admonition-title { margin-top: 0; font-size: 24px; }

.admonition.note .admonition-title:before,
.admonition.tip .admonition-title:before,
.admonition.warning .admonition-title:before
{
    vertical-align: middle;
    margin-right: 12px;
    transform: scale(0.75);
    display: inline-block;
}

.admonition.note {
    border-color: var(--accent-slate);
    background: #e4ecf0;
}
.admonition.note .admonition-title { color: var(--accent-slate); }
[data-theme="alternate"] .admonition.note { background: #143f55; }

.admonition.tip{
    border-color: var(--accent-green);
    background: #e6f0e4;
}
.admonition.tip .admonition-title { color: var(--accent-green); }

.admonition.warning{
    border-color: #b75d20;
    background: #f0e9e4;
}
.admonition.warning .admonition-title { color: #b75d20; }
[data-theme="alternate"] .admonition.warning { background: #432612; }

/************************************************** ICONS AND MEDIA ***************************************************/
[data-theme="default"] #sidebar .downarrow:before { content: url('/icons/down-arrow.svg'); }
[data-theme="alternate"] #sidebar .downarrow:before { content: url('/icons/down-arrow-light.svg'); }

.admonition.note .admonition-title:before { content: url('/icons/note.svg'); }
.admonition.tip .admonition-title:before { content: url('/icons/tip.svg'); }
.admonition.warning .admonition-title:before { content: url('/icons/warning.svg'); }

[data-theme="default"] #architecture { content: url('/img/architecture.svg'); }
[data-theme="alternate"] #architecture { content: url('/img/architecture-white.svg'); }
[data-theme="alternate"] .hamburger { content: url(/icons/hamburger.svg); }

@media (max-width: 1024px) {
    .icon { width: 24px; }
}