/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
    background-color: black;
}

body {
    padding: 0 var(--gutter) 4rem var(--gutter);
    display: flex;
    justify-content: center;
}

.wrapper {
    max-width: var(--max-width);
    width: 100%;
}

/* Header */
header {
    position: fixed;
    max-width: var(--max-width);
    width: calc(100% - 2 * var(--gutter));
    height: var(--header-height);
    top: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform 0.4s ease, height 0s 0.4s;

    .is-revealed &,
    .is-menu-open & {
        transform: none;
        transition: transform 0.4s ease, height 0.4s ease;
    }

    .is-menu-open & {
        height: var(--menu-height);
    }

    .header-inner {
        display: grid;
        grid-template-columns: repeat(var(--tg-columns, 4), 1fr);
        height: var(--header-height);
        flex-shrink: 0;

        .header-cell {
            padding: 0.45rem 0.7rem 0.5rem 0.7rem;
            display: flex;
            align-items: center;

            .h1 {
                line-height: 0;
            }

            @media (width < 77rem) {
                &:not(:first-child, :last-child) {
                    display: none;
                }

                &:last-child {
                    grid-column: -2;
                }
            }

            .menu-button {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                width: 100%;
                padding: 0.2rem 0;
                border: none;
                background: none;
                cursor: pointer;

                .line {
                    height: 0.15rem;
                    width: 100%;
                    align-self: flex-end;
                    background-color: black;
                    transition: width 0.4s ease, transform 0.4s ease, opacity 0.4s ease;

                    .is-menu-open & {
                        /*width: 2.1rem;*/

                        &:nth-child(1) {
                            transform: translateY(0.75rem) rotate(6deg);
                        }

                        &:nth-child(2) {
                            transform: scaleX(0);
                        }

                        &:nth-child(3) {
                            transform: translateY(-0.75rem) rotate(-6deg);
                        }
                    }
                }
            }
        }
    }

    .header-menu {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(var(--tg-columns, 4), 1fr);
        align-items: start;
        overflow-y: scroll;

        .is-menu-open & {
            visibility: visible;
        }

        .header-stories {
            grid-column: 1 / -2;

            a:hover {
                text-decoration: underline;
            }
        }

        .header-pages {
            padding: 0 0.7rem;

            .button {
                width: 100%;
            }
        }

        .header-stories, .header-pages {
            padding-top: 1rem;
        }

        ol {
            columns: calc(var(--tg-columns, 4) - 1);
            column-gap: 0;
            counter-reset: story;
        }

        li {
            display: flex;
            padding: 0.15rem 0.7rem;
            break-inside: avoid;
            counter-increment: story;

            &::before {
                content: counter(story) ".";
                flex: none;
                width: 2.75ch;
                font-variant-numeric: tabular-nums;
            }
        }
    }
}

nav {
    display: flex;
    flex-direction: column;

    .nav-item {
        padding: 1rem 0;
        border-top: var(--stroke-weight) solid var(--white);
        display: flex;
        justify-content: space-between;

        img {
            width: 0.9rem;
        }

        &:last-of-type {
            border-bottom: var(--stroke-weight) solid var(--white);
        }
    }
}

/* Buttons */
.button {
    display: flex;
    gap: 0.75rem;
    background-color: var(--dark-grey);
    color: var(--white);
    min-height: 2rem;
    align-items: center;
    padding: 0 0.75rem 0 0;
    width: fit-content;
    cursor: pointer;
    border: none;
    font: inherit;
    text-align: inherit;
    transition: gap 0.2s;

    &:hover,
    &[aria-pressed="true"] {
        background-color: var(--white);
        color: black;
    }

    .button-toggle {
        display: flex;
        position: relative;
        aspect-ratio: 1/1;
        height: 2rem;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        background-color: var(--white);

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: inherit;
            mix-blend-mode: overlay;
        }

        .button-icon {
            border-radius: 50%;
            height: 50%;
            aspect-ratio: 1/1;
            mix-blend-mode: overlay;
            background-color: black;

            &:has(img) {
                mix-blend-mode: difference;
            }

            img {
                height: 1rem;
                width: 1rem;
                object-fit: contain;
            }
        }
    }
}

.buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 0.15rem;
}

/* Tags */
.tag {
    background-color: black;
    min-height: 2rem;
    align-items: center;
    display: flex;
    padding: 0 0.75rem;
    position: relative;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    width: fit-content;

    &.white {
        background-color: white;
        color: black;
    }

    /*&::after {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    inset: 0;*/
    /*    background-color: currentColor;*/
    /*    mix-blend-mode: overlay;*/
    /*}*/
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Flex */
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    &.small-gap {
        gap: 0.5rem;
    }
}

/* Colour bar */
section.colour-bar {
    display: grid;
    grid-template-columns: repeat(var(--tg-columns, 4), 1fr);
    grid-auto-rows: 0;
    grid-template-rows: 100%;
    overflow: hidden;
    position: fixed;
    margin-bottom: 0;
    top: 0;
    z-index: 10;
    max-width: var(--max-width);
    width: calc(100% - 2 * var(--gutter));
    height: var(--header-height);
    transform: translateY(calc(0.5rem - 100%));
    /* As header: slide away at full height, then shrink */
    transition: transform 0.4s ease, height 0s 0.4s;

    .is-revealed &,
    .is-menu-open & {
        transform: none;
        transition: transform 0.4s ease, height 0.4s ease;
    }

    .is-menu-open & {
        height: var(--menu-height);
    }

    div {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: inherit;
            mix-blend-mode: overlay;
        }
    }
}

/* Lightbox: the original, unfiltered media (lightbox_controller.js) */
.lightbox {
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;

    /* Fade in and out; display and overlay switch discretely so the closing fade can finish */
    &, &::backdrop {
        opacity: 0;
        transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    }

    &[open], &[open]::backdrop {
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }

    &::backdrop {
        background-color: rgb(0 0 0 / 0.5);
        backdrop-filter: blur(20px);
    }

    img, video {
        display: block;
        width: min(90vw, 90vh * var(--aspect-ratio));
        aspect-ratio: var(--aspect-ratio);
        height: auto;
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
        scale: 0.95;
        transition: scale 0.3s ease;
    }

    &[open] :is(img, video) {
        scale: 1;

        @starting-style {
            scale: 0.95;
        }
    }

    .lightbox-close {
        position: absolute;
        top: -2.5rem;
        right: 0;
        border: none;
        background: none;
        color: var(--white);
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }
}