/* OHS CSS, modified from OSHWA microsite common CSS */

@import "./bulma.min.css";
@import "../fonts/bluunext/bluunext.css";
@import "../fonts/office-code-pro/office-code-pro.css";
@import "../fonts/jacquard-24/jacquard-24.css";

:root {
    --ohs-family-display: "BluuNext", Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
    --ohs-family-text: "Office Code Pro", "Nimbus Mono PS", "Courier New", monospace;
    --ohs-family-numeric-accent: "Jacquard 24", "BluuNext", Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;

    --ohs-color-primary: #615d59;
    --ohs-color-accent-pink: #f8dbff;
    --ohs-color-accent-yellow: #ebe446;
}

.is-family-text {
    font-family: var(--ohs-family-text);
}

.is-family-display {
    font-family: var(--ohs-family-display);
    font-weight: bold;
}

.is-family-numeric-accent {
    font-family: var(--ohs-family-numeric-accent);
}

/* Bulma customizations */

:root {
    --bulma-body-size: 18px;
    --bulma-family-primary: var(--ohs-family-text);
    --bulma-text: var(--ohs-color-primary);
    --bulma-text-strong: var(--ohs-color-primary);
}

.content h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ohs-family-display);
}

.content h2:not(:first-child) {
    margin-top: 4rem;
}

.navbar {
    font-family: var(--ohs-family-display);
    font-weight: bold;
}

.navbar-end {
    align-items: center;
}

.footer {
    --bulma-footer-background-color: transparent;
}

/* Navbar tweaks */

.navbar-brand .navbar-item img {
    --bulma-navbar-item-img-max-height: 12lh;
}

.navbar a.navbar-item.is-active {
    background-color: var(--ohs-color-accent-pink);
    color: var(--ohs-color-primary);
}

@media screen and (max-width: 1023px) {
    .navbar-brand .navbar-item img {
        --bulma-navbar-item-img-max-height: 6lh;
    }

    .navbar-menu {
        position: absolute;
        width: 100%;
        margin-block-start: 1rem;
        contain: paint;
        padding-block: 0;
        border: 0.1rem solid black;
        border-radius: var(--bulma-radius);
        display: block;
        opacity: 0;
        transform-origin: top center;
        transform: scaleY(0);
        transition-property: opacity, transform;
        transition-duration: 0.2s;
    }

    .navbar-menu.is-active {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Special OHS-specific fun stuff */

/* Highlights and such */

main strong {
    font-weight: normal;
    background-color: var(--ohs-color-accent-yellow);
    outline: 0.15em solid var(--ohs-color-accent-yellow);
}
main em {
    background-color: var(--ohs-color-accent-pink);
}
main a {
    --bulma-link-text: var(--ohs-color-primary);
    --bg: var(--ohs-color-accent-pink);
    background-color: var(--bg);
    outline: 0.15em solid var(--bg);
}

/* Navbar brand */

.navbar-brand {
    align-items: center;
}

.navbar-brand .navbar-item {
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
}

.navbar-brand .navbar-item .is-numbers {
    font-family: var(--ohs-family-numeric-accent);
    font-weight: normal;
    font-size: 200%;
    line-height: 0;
}

/* Home page layouts with lil illustrations */

.lil-guy {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 2rem;
    align-items: center;
    margin-block: 2rem;
}

.lil-guy > img {
    max-width: 30%;
    max-height: 10rem;
    flex-shrink: 1;
}

.lil-guy figure:not([class]) {
    display: grid;
    place-content: center center;
    max-width: 30%;
    height: 12rem;
    aspect-ratio: 1/1;
    margin: 0;

    &:not(:last-child) {
        margin: 0;
    }

    img {
        display: block;
        width: 100%;
        height: inherit;
        max-width: 100%;
        max-height: 100%;
        object-fit: scale-down;
    }
}

.lil-guy {
    .big-quote {
        width: 100%;
        flex: 1;
    }
}

.lil-guy.is-right {
    flex-direction: row-reverse;
}

@media screen and (max-width: 1023px) {
    .lil-guy {
        flex-direction: column;
    }

    .lil-guy.is-right {
        flex-direction: column;
    }

    .lil-guy img {
        max-width: 50%;
    }
}

/* Home page big quote */

.big-quote {
    padding: 3rem;
    background-color: var(--ohs-color-accent-pink);
    border: 3px solid var(--ohs-color-primary);

    .button {
        border-radius: 0;
    }

    strong {
        font-family: var(--ohs-family-display);
        font-weight: var(--bulma-weight-extrabold);
        background: transparent;
        outline: none;
    }
}

@media screen and (max-width: 1023px) {
    .big-quote {
        padding: 1.5rem;
        max-width: calc(100% - 1rem);
    }
}

.home .big-quote {
    margin-block: 5rem;
}

/* Home page / speaker layouts for people */

.cool-person {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 3rem;
    align-items: start;
    margin-block: 2rem;
}

.cool-person img {
    margin-top: 1.5rem;
    max-width: 15rem;
    max-height: 10rem;
    flex-shrink: 1;
    background-color: var(--ohs-color-primary);
}

.cool-person ul.details {
    list-style: none;
    margin-inline: 0;
    margin-block: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.2rem;
}

.cool-person ul.details li {
    margin: 0;
    padding: 0;
}

.cool-person ul.details li a {
    --bg: var(--ohs-color-accent-yellow);
}

.cool-person ul.details li + li {
}

.cool-person ul.details li + li::before {
    content: "·";
    margin-right: 1rem;
}

@media screen and (max-width: 1023px) {
    .cool-person {
        flex-direction: column;
    }

    .cool-person img {
        max-width: 75%;
        max-height: unset;
        margin-inline: auto;
    }

    .cool-person ul.details {
        flex-direction: column;
    }

    .cool-person ul.details li + li::before {
        content: none;
        margin-right: 0;
    }
}

/* Shadow magic */

.has-outlined-shadow,
.has-yellow-outlined-shadow {
    --shadow-color: var(--ohs-color-accent-pink);
    --shadow-outline-color: var(--ohs-color-primary);
    --shadow-offset: 18px;
    --shadow-border: 3px;
    --shadow-border-max: calc(var(--shadow-offset) + var(--shadow-border));
    --shadow-border-min: calc(var(--shadow-offset) - var(--shadow-border));
    --main-shadow: var(--shadow-offset) calc(var(--shadow-offset) * -1) 0 var(--shadow-color);
    --outline-shadow-1: var(--shadow-border-max) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
    --outline-shadow-2: var(--shadow-border-min) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
    --outline-shadow-3: var(--shadow-border-max) calc(var(--shadow-border-min) * -1) 0 var(--shadow-outline-color);
    box-shadow: var(--main-shadow), var(--outline-shadow-1), var(--outline-shadow-2), var(--outline-shadow-3);
}

.has-yellow-outlined-shadow {
    --shadow-color: var(--ohs-color-accent-yellow);
}

/* Footer magic */

.footer {
    margin-block-start: 6rem;
    margin-inline: auto;
    padding: 3rem 1.5rem 3rem;
    max-width: min(800px, 80%);
    font-size: 0.9rem;
    background-color: var(--ohs-color-primary);
    color: white;
}

.footer a {
    --bulma-link-text: var(--ohs-color-accent-yellow);
}

.footer img {
    margin-block: auto 2rem;
    max-width: 12rem;
}

@media screen and (max-width: 1023px) {
    .footer {
        padding: 1.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* Let's make blockquotes fancy */

.content blockquote,
.content blockquote:not(:last-child) {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: var(--ohs-color-accent-pink);
    border: 3px solid var(--ohs-color-primary);

    --shadow-color: var(--ohs-color-accent-yellow);
    --shadow-outline-color: var(--ohs-color-primary);
    --shadow-offset: 18px;
    --shadow-border: 3px;
    --shadow-border-max: calc(var(--shadow-offset) + var(--shadow-border));
    --shadow-border-min: calc(var(--shadow-offset) - var(--shadow-border));
    --main-shadow: var(--shadow-offset) calc(var(--shadow-offset) * -1) 0 var(--shadow-color);
    --outline-shadow-1: var(--shadow-border-max) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
    --outline-shadow-2: var(--shadow-border-min) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
    --outline-shadow-3: var(--shadow-border-max) calc(var(--shadow-border-min) * -1) 0 var(--shadow-outline-color);
    box-shadow: var(--main-shadow), var(--outline-shadow-1), var(--outline-shadow-2), var(--outline-shadow-3);
}

.content blockquote.is-quiet {
    box-shadow: none;
    font-size: 0.9em;
    padding: 1.5rem;
    background-color: var(--ohs-color-primary);
    color: white;
}

@media screen and (max-width: 1023px) {
    .content blockquote,
    .content blockquote:not(:last-child) {
        padding: 1.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* Schedule pages (talks, workshops, etc.) */

.schedule {
    .schedule-event {
        --title-line-height: 1.2;

        .event-time {
            display: grid;
            place-content: start center;
            gap: 0.1em;
            text-align: center;
            line-height: var(--title-line-height);

            a {
                color: var(--fg);
                background-color: transparent;
                outline: none;
            }

            .event-start-time {
                font-family: var(--ohs-family-display);
                font-size: var(--bulma-size-3);
                font-weight: var(--bulma-weight-extrabold);
                line-height: var(--title-line-height);
            }

            .event-end-time {
            }

            .event-location {
                color: var(--ohs-color-primary);
                background-color: var(--ohs-color-accent-yellow);
            }
        }

        .event-title {
            font-family: var(--ohs-family-display);
            font-size: var(--bulma-size-3);
            font-weight: var(--bulma-weight-extrabold);
            line-height: var(--title-line-height);
        }

        a.event-title {
            color: var(--fg);
            outline: none;
            background-color: transparent;
            text-decoration: underline;
            text-decoration-color: var(--ohs-color-accent-pink);
            text-decoration-thickness: 0.1em;
        }

        .event-presenter {
            font-size: var(--bulma-size-5);
        }
    }

    .is-plenary,
    .is-break {
        background-color: var(--bg);
        color: var(--fg);
        --bulma-text: var(--fg);
    }

    .is-plenary {
        --bg: var(--ohs-color-accent-pink);
        --fg: var(var(--ohs-color-primary));
    }

    .is-break {
        --bg: var(--ohs-color-primary);
        --fg: white;
    }
}

/* Event detail page (talks, workshops, etc.) */

.event {
    .event-title {
        font-family: var(--ohs-family-display);
        font-size: var(--bulma-size-3);
        font-weight: var(--bulma-weight-extrabold);
        line-height: var(--title-line-height);
        text-decoration: underline;
        text-decoration-color: var(--ohs-color-accent-pink);
        text-decoration-thickness: 0.1em;
    }

    .event-presenter {
        font-size: var(--bulma-size-5);
    }

    .event-time {
        display: flex;
        align-items: center;
        line-height: var(--title-line-height);

        .event-time-span {
            flex: 1;
            font-family: var(--ohs-family-display);
            font-size: var(--bulma-size-5);
            font-weight: var(--bulma-weight-extrabold);
        }
    }
}

/* Posters (tables) */


.poster {
    --title-line-height: 1.2;

    .poster-title {
        font-family: var(--ohs-family-display);
        font-size: var(--bulma-size-3);
        font-weight: var(--bulma-weight-extrabold);
        line-height: var(--title-line-height);
    }

    a.poster-title {
        color: var(--fg);
        outline: none;
        background-color: transparent;
        text-decoration: underline;
        text-decoration-color: var(--ohs-color-accent-pink);
        text-decoration-thickness: 0.1em;
    }

    .poster-presenter {
        font-size: var(--bulma-size-5);
    }
}


/* Panels */

.schedule.panels {
    .event-panelist-left {
        display: flex;
        justify-content: right;
    }
    figure {
        width: 50%;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .event-panelist-name {
        font-family: var(--ohs-family-display);
        font-size: var(--bulma-size-3);
        font-weight: var(--bulma-weight-extrabold);
        line-height: var(--title-line-height);
    }
}


/* Sponsors */

.sponsors {
    display: block;
    width: 100%;
    max-width: min(600px, 80%);
    margin-inline: auto;

    h2 {
        display: none;
    }

    img.hr {
        display: block;
        margin-inline: auto;
        margin-block: 6rem;
        max-width: 50%;
    }

    h3 {
        text-align: center;
        margin-block-start: 3rem;
    }

    ul {
        display: grid;
        margin-block: 0;
        margin-inline: 0;
        padding-inline: 0;
        padding-block: 0;
        align-items: start;
        justify-content: center;
        gap: 4rem 5rem;
        list-style: none;
        margin-block-start: 2rem;
        grid-template-columns: 0.5fr;

        &.two-columns {
            grid-template-columns: repeat(4, 1fr);

            li {
                grid-column: span 2;
            }
            li:nth-last-child(1):nth-child(odd) {
                grid-column: 2 / span 2;
            }
        }

        &.three-columns {
            grid-template-columns: repeat(6, 1fr);

            li {
                grid-column: span 2;
            }
            li:last-child:nth-child(3n - 1) {
                grid-column-end: -2;
            }
            li:nth-last-child(2):nth-child(3n + 1) {
                grid-column-end: 4;
            }
            li:last-child:nth-child(3n - 2) {
                grid-column-end: 5;
            }
        }

        &.four-columns {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 2.5rem;
        }

        li {
            margin: 0;
            display: grid;
            align-items: center;
            justify-content: center;
            align-content: center;
            align-self: center;
            width: 100%;
            aspect-ratio: 2/1;
            list-style: none;

            a  {
                display: block;
                width: 100%;
                height: 100%;
                aspect-ratio: 2/1;
                background-color: transparent;
                outline: none;
                text-align: center;
                color: var(--ohs-color-primary);
                text-shadow: 4px 4px 0 var(--ohs-color-accent-pink);
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}


@media screen and (max-width: 1023px) {
    .sponsors {
        ul {
            &.three-columns, &.four-columns {
                grid-template-columns: repeat(4, 1fr);
                gap: 2.5rem;

                li {
                    grid-column: span 2;
                }
            }
        }
    }
}