/* Fonts */
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,600i|lacquer:400|noto-serif:300i);

/* Colors and fonts */
:root {
    --cream: rgb(245, 245, 242);
    --lightest-blue: rgb(231, 243, 255);
    --mid-blue: rgb(218, 236, 255);
    --dusk-blue: rgb(133, 159, 184);
    --dark-blue: rgb(53, 64, 81);
    --darkest-blue: rgb(15, 20, 27);
    --highlight: rgb(150, 14, 100);
    --gold: rgb(178, 142, 24);
    --display: "Lacquer", display;
    --serif: "FK Roman Standard", "Noto Serif", serif;
    --sans: "FK Grotesk Mono", 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
}

html {
    font-size: 16px;
}

.accordion {
    background-color: var(--dark-blue);
    color: var(--cream);
    padding: 1rem 2rem;

    & details {
        border-top: solid 1px var(--cream);
        padding: 1rem 0;

        &:last-of-type {
            border-bottom: solid 1px var(--cream);
        }

        summary {
            position: relative;
            cursor: pointer;
            transition: all 0.5s ease-in-out;

            &::marker {
                content: "";
            }

            &::after {
                content: "+";
                position: absolute;
                right: 0;

            }
        }

        &[open] summary::after {
            content: "\2014";

        }
    }

    .panel-content {
        margin-left: 1rem;
    }
}

.callout {
    background-color: var(--mid-blue);
    padding: 1.5rem clamp(1.563rem, 0.819rem + 3.716vw, 5rem);
    font-size: clamp(0.875rem, 0.497rem + 1.892vw, 2.625rem);
    font-family: var(--serif);

    border-image-slice:
        47 40 40 66;
    border-image-width:
        20px 20px 20px 20px;
    border-image-outset:
        10px 10px 10px 10px;
    border-image-repeat:
        stretch stretch;
    border-image-source:
        url("../img/callout.png");
}

.exhibit {
    background-color: var(--dark-blue);
    color: var(--lightest-blue);
    padding: 1.5rem clamp(1.563rem, 0.819rem + 3.716vw, 5rem);

    img {
        max-width: 100%;
    }

    a {
        text-transform: uppercase;
        color: var(--lightest-blue);
        border-bottom-color: var(--lightest-blue);
    }

    @media (width >=600px) {
        & {
            display: grid;
            grid-template-columns: fit-content(200px) 1fr;
            grid-template-rows: 1fr auto;
            grid-template-areas:
                "image content"
                "image content";
            grid-gap: 1rem;

            img {
                grid-area: image;
            }

            .content {
                grid-area: content;
            }
        }
    }
}

.gallery-block,
.lightbox-block {
    ul {
        list-style: none;
        padding-left: 0;
        display: grid;
        gap: 1rem;
        grid-template-columns: 1;

        @media screen and (min-width: 600px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    img {
        width: 100%;
        height: auto;
    }
}

hr.wp-block-separator {
    background-image: url("../img/chain.png");
    background-repeat: no-repeat;
    border-top-width: 0;
    height: 135px;
    background-position: 50% 50%;
}

.img-single {

    img {
        width: 100%;
        height: auto;
    }
}

.lightbox-block {
    button {
        position: absolute;
        top: 5px;
        border-width: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .thumbnail {
        position: relative;

        button {
            left: 5px;
            background-color: var(--dark-blue);
            color: var(--lightest-blue);
        }
    }

    [popover] {
        &::backdrop {
            background-color: var(--dark-blue);
        }

        border-width: 0;
        background-color: var(--dark-blue);
        color: var(--lightest-blue);
        padding: 0 1.5rem;
        a,
        a[href] {
            color: var(--lightest-blue);
            border-bottom-color: var(--lightest-blue);
        }

        button {
            right: 5px;
            background-color: var(--lightest-blue);
            color: var(--dark-blue);
            &:hover,
            &:active {
                background-color: var(--cream);
            }
        }
        nav {
            button {
                top: 50%;
                font-size: 0;
                color: transparent;
                background-repeat: no-repeat;
                width: 1.25rem;
                height: 1.25rem;
                &.prev {
                    background-image: url("../img/left.svg");
                    left: 0;
                    right: unset;
                }
                &.next {
                    background-image: url("../img/right.svg");
                    right: 0;
                }
            }
        }
    }
}

.media-block {
    background-color: var(--mid-blue);
    display: grid;
    min-height: 10rem;
    padding: 2rem;

    h3 {
        text-align: center;
    }

    audio {
        width: 100%;
        /* handle with js */
        display: none;
    }

    .audioplayer {
        display: block;
        margin-bottom: 2rem;

        .pButton {
            height: 3.75rem;
            width: 3.75rem;
            border: solid 2px var(--dark-blue);
            border-radius: 50%;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            background-position-y: 50%;
            background-color: transparent;
            float: left;
            outline: none;
            margin-right: 0.5rem;
            font-size: 0;
            position: relative;

            &:hover {
                cursor: pointer;
            }
        }

        .play {
            background-image: url("../img/play.png");
            background-position-x: 60%;

            &::before {
                content: "Play";
                position: absolute;
                top: 110%;
                left: 0;
                width: 100%;
                font-size: 1rem;
                font-style: italic;
            }
        }

        .pause {
            background-image: url("../img/pause.png");
            background-position-x: 50%;

            &::before {
                content: "Pause";
                position: absolute;
                top: 110%;
                left: 0;
                width: 100%;
                font-size: 1rem;
                font-style: italic;
            }
        }

        .timeline {
            width: calc(100% - (3.75rem + 0.5rem));
            height: 5px;
            margin-top: 30px;
            float: left;
            background-color: rgba(var(--dark-blue), 0);
            background-image: url("../img/audio.png");
            background-size: 100%;
            position: relative;

            &:after {
                content: "";
                height: 1.75rem;
                width: 3px;
                background-color: var(--dark-blue);
                position: absolute;
                right: 0;
                top: -13px;
            }
        }

        .playhead {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-top: -5px;
            background-color: rgba(0, 0, 0, 1);
        }

        .audiotime {
            float: right;
            font-style: italic;
        }
    }
    video {
        max-width: 100%;
    }
}

.slider-block {

    .slick-prev,
    .slick-next {
        top: 0.75rem;

        &:before {
            color: var(--dark-blue);
        }
    }

    .slick-prev {
        right: 2rem;
        left: unset;
    }

    .slick-next {
        right: 0;

    }
}

/* shared elements */
ul.metadata {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1;
    text-align: center;
    text-transform: uppercase;

    @media screen and (min-width: 600px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

p.credit,
p.caption {
    margin: 0;
}

.caption {
    font-family: var(--serif);
    font-size: 1.25rem;
}

.credit {
    font-size: 0.875rem;
}