/*
 * 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: #2c2c2c;
    --background-2: #181818;
    --background-reversed: #fff;
    --header-background: var(--background-1);
    --footer-background: var(--background-reversed);
    --menu-background: var(--background-reversed);

    --link-primary: var(--accent-slate);
    --link-secondary: #6a6a6a;
    --link-hover: var(--accent-orange);

    --font-primary: #b8b8b8;
    --font-secondary: #fff;
    --footer-font-primary #6a6a6a;
    --footer-font-secondary: #000;
    --button-font: #fff;
    --menu-font: #000;

    --table-background-primary: #e9e9e9;
    --table-background-secondary: #b8b8b8;
    --table-font-primary: #2c2c2c;
    --table-font-secondary: #000;
    --table-font-heading: #000;

    --about-entry-height: 150px;
}

[data-theme="alternate"] {
    --background-1: #e9e9e9;
    --background-2: #fff;
    --background-reversed: #000;
    --header-background: var(--background-1);
    --footer-background: var(--background-reversed);
    --menu-background: var(--background-reversed);

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

    --table-background-primary: #fff;
    --table-background-secondary: #a5a5a5;
    --table-font-primary: #2c2c2c;
    --table-font-secondary: #000;
    --table-font-heading: #fff;
}

@media (max-width: 1024px) {
    :root {
        --about-entry-height: 150px;
    }
}

main { margin-bottom: var(--section-spacing); }

/*************************************************** HERO SECTION *****************************************************/
.hero ul {
    list-style: none;
    margin: 42px 0;
    padding: 0;
}
.hero ul li {
    color: var(--font-secondary);
}
@media (min-width: 1024px;) {
    .hero .left {
        flex: 0.65 !important;
    }
}

.hero img {
    position: relative;
    box-shadow: 0 0 8px 8px var(--accent-slate);
}
#hero1 {
    width: 90%;
    top: 10%;
    left: -15%;
    z-index: -1;
}
#hero2 {
    width: 100%;
    top: -10%;
}
@media (max-width: 1024px) {
    .hero img { display: none; }
}

/******************************************************* CLIENTS ******************************************************/
.clients { justify-content: center; gap: 24px; }
.client {
    /* position: relative needed so the popup appears in the right place */
    font-size: var(--font-size-small); position: relative;
}
.client .grid {
    display: grid;
    grid-template-columns: 100px 200px;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
}
.client img {
    width: 100px;
    height: 100px;
}

@media (max-width: 1024px) {
    .client { flex: 1; }
}

.testimonial {
    position: absolute;
    top: 12px;
    left: 108px;
    z-index: 1;
    background: var(--background-1);
    width: 500px;
    border-radius: 12px;
    font-size: var(--font-size-tiny);
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.2s ease-out;
    color: var(--font-color-primary);
}
.testimonial:hover { color: var(--font-color-primary); }
.testimonial.open {
    border: 2px solid var(--background-reversed);
    padding: 12px;
}

@media (max-width: 1024px) {
    .testimonial { width: 50vw; }
}

/*************************************************** ABOUT SECTION ****************************************************/
.about section > * { width: 90%; margin-left: auto; margin-right: auto; }

.about .subsection h2 { margin-bottom: 0; }
.about .subsection h3 {
    /* the nth-child rules seem to get evaluated last, even though this is
     * later in the cascade, hence the !important.  Since this is only used
     * in one place I think the !important is OK */
    color: var(--font-secondary) !important;
}
.about .subsection {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 36px auto;
    font-size: var(--font-size-small);
}
.about .avatar {
    float: left;
    background-color: var(--background-reversed);
    border-radius: var(--subsection-border-radius) 0 var(--subsection-border-radius) 0;

    /* hack to get the image to appear in the center */
    display: flex;
    align-items: center;
    max-height: var(--about-entry-height);
}
.about .avatar img {
    width: var(--about-entry-height);
    height: var(--about-entry-height);
    border-radius: var(--subsection-border-radius) 0 var(--subsection-border-radius) 0;
}
.about .title, .about .bio { margin: 24px; }
.about .bio { margin-top: 0; }

@media (max-width: 1024px) {
    .about .title { margin-bottom: 0; }
}

.about .icon { margin-left: 0; }

/******************************************************* TABLES *******************************************************/
table {
    margin: 0 auto var(--section-spacing) auto;
    table-layout: fixed;
    font-size: var(--font-size-small);
}
@media (min-width: 1024px) {
    table { width: 85%; }
}

table th { color: var(--table-font-heading); font-weight: normal; }
table:nth-of-type(4n+1) th { background: var(--accent-slate); }
table:nth-of-type(4n+2) th { background: var(--accent-green); }
table:nth-of-type(4n+3) th { background: var(--accent-orange); }
table:nth-of-type(4n+4) th { background: var(--accent-purple); }

table th, table td { padding: 12px 24px; }
@media (max-width: 1024px) {
    table th, table td { padding: 12px; }
}

table td {
    color: var(--table-font-primary);
    background: var(--table-background-primary);
}
table td:first-child {
    color: var(--table-font-secondary);
    background: var(--table-background-secondary);
}

/******************************************************** POSTS *******************************************************/
.posts h1 { display: inline-block; text-align: center; width: 100%; }
.posts .rss, .postmeta .rss {
    border-radius: 100px;
    float: right;
    position: absolute;
    height: var(--link-icon-size);
    width: var(--link-icon-size);
}
.posts .rss { right: 2.5%; }
.postmeta .rss { right: 5%; margin-top: -3px; }

.postmeta { padding: 12px 0; }
.postmeta .avatar {
    float: left;
    max-height: 50px; /* matches the RSS logo height */
    background-color: var(--background-reversed);
    border-radius: var(--subsection-border-radius);
    margin: -3px 12px 0 0;
}
.postmeta .timestamp { font-style: italic; }
.post hr { clear: both; margin: 0; }
.post article { width: 75%; margin: 0 auto; }
.post figure img { width: 100%; }
.post figure p { margin: 0; }
.post figcaption { font-size: var(--font-size-small); }

/******************************************************** FORM ********************************************************/
#contactform { max-width: 600px; margin: auto; }
#contactform input, #contactform textarea, #contactform select {
    width: 100%;
    margin-bottom: 20px;
}
#contactform input, #contactform select {
    height: 42px;
    border-radius: 75px;
    font-size: var(--font-size-normal);
    text-indent: 12px;
}
#contactform select {
    appearance: none;
    background-image: url(/icons/down-arrow.svg);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 97%;
}
#contactform textarea {
    height: 180px;
    border-radius: 24px;
    font-size: var(--font-size-normal);
    text-indent: 12px;
    padding-top: 12px;
}

/* hiding labels except for screen readers */
#contactform label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#vegetable { display: none; }

#result {
    display: none;
    text-align: center;
    margin: 20px 0;
    border: 1px black solid;
    color: black;
    border-radius: 12px;
}

.error, .success {
    padding: 5px;
    display: block;
}

.error { background: darkorange; }
.success { background: lightgreen; }

/************************************************** ICONS AND MEDIA ***************************************************/
.scale:before { content: url(/icons/scale.svg); }
.expertise:before { content: url(/icons/expertise.svg); }
.solutions:before { content: url(/icons/solutions.svg); }
.research:before { content: url(/icons/research.svg); }
.mastodon { content: url(/icons/mastodon.svg); }
.buttons a.mastodon:hover{ content: url(/icons/mastodon-hover.svg); }
.bluesky { background: #6a6a6a; content: url(/icons/bluesky.svg); }
.buttons a.bluesky:hover{ content: url(/icons/bluesky-hover.svg); }
.rss { content: url(/icons/rss.svg); }