*,
::after,
::before {
  box-sizing:border-box
}

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

.wp-block-spacer {
    @media screen and (max-width: 991px) {
        font-size: 5px;
    }
}

ul {
    padding-left: 1.5em;
}

nav.main-menu {
    margin-block-start: 0;
    ul.wp-block-navigation__container {
        width: 100%;
        > li.wp-block-navigation-item {
            flex-grow: 1;
            flex-shrink: 0;
            > a.wp-block-navigation-item__content {
                background-color: var(--wp--preset--color--custom-color-primary);
                color: #fff;
                padding: .5em .7em;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                &:hover {
                    background-color: var(--wp--preset--color--custom-color-secondary);
                }
            }
        }
        li.home-btn {
            flex-grow: 0;
            > a.wp-block-navigation-item__content {
                padding: 0;
                background-color: transparent;
                color: var(--wp--preset--color--custom-color-text);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-home' viewBox='0 0 32 32'%3E%3Cpath fill='%236d758d' d='M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z'%3E%3C/path%3E%3C/svg%3E");
                background-size: 20px;
                background-repeat: no-repeat;
                background-position: center;
                &:hover {
                    background-color: transparent;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-home' viewBox='0 0 32 32'%3E%3Cpath fill='%23115e67' d='M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z'%3E%3C/path%3E%3C/svg%3E");
                }
                span {
                    visibility: hidden;
                }
            }
        }
    }
    button.wp-block-navigation__responsive-container-open {
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        box-shadow: inset 0 0 10px rgba(0,0,0,.05);
        background-color: rgba(255,255,255,.5);
        border-radius: 2px;
        z-index: 99999;
    }
}

.issues-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 6rem);
    > * {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-decoration: none;
        font-size: var(--wp--preset--font-size--s);
        .status {
            position: absolute;
            top: 0;
            right: -1em;
            /* background-color: var(--wp--preset--color--custom-color-primary); */
            /* color: #fff; */
            /* font-size: 80%; */
            /* padding: .3em 1em; */
            transform: rotate(15deg);
            border: 1px solid #fff;
            /* &.sold-out {
                background-color: #8a2848;
            }
            &.available {
                background-color: var(--wp--preset--color--custom-color-secondary);
            } */
        }
        img {
            border: 1px solid var(--wp--preset--color--custom-color-secondary);
            height: 100%;
            object-fit: cover;
        }
        span:not(.status) {
            display: block;
            text-align: center;
        }
        &:hover {
            img {
                border-color: var(--wp--preset--color--custom-color-primary);
            }
            span:not(.status) {
                color: var(--wp--preset--color--custom-color-primary);
            }
        }
        &::before {
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: -1.5vw;
            left: 0;
            background-color: rgba(0,0,0,.1);
        }
        &:not(:nth-child(4n)) {
            &::after {
                content: '';
                height: 100%;
                width: 1px;
                position: absolute;
                top: 0;
                right: -1.5vw;
                background-color: rgba(0,0,0,.1);
            }
        }

    }
    @media (max-width: 600px) {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 400px;
        margin: 0 auto;
        > * {
            &::after,
            &::before {
                display: none;
            }
        }

    }
}

.issues-wrap,
.issue-content,
.latest-issue {
    .status {
        background-color: var(--wp--preset--color--custom-color-primary);
        padding: .3em 1em;
        color: #fff;
        font-size: 80%;
        &.sold-out {
            background-color: #8a2848;
        }
        &.available {
            background-color: var(--wp--preset--color--custom-color-secondary);
        }
    }
}

.issue-content {
    display: grid;
    grid-template-columns: 1fr 67%;
    gap: clamp(1.5rem, 2vw, 4rem);
    .issue-content-col > img {
        border: 1px solid var(--wp--preset--color--custom-color-secondary);
    }
    h1 {
        margin-top: 0;
        font-size: var(--wp--preset--font-size--l);
        font-weight: 400;
    }
    .issue-pdf {
        display: flex;
        flex-direction: column;
        gap: 1em;
        align-items: start;
    }
    h2 {
        margin-top: 2em;
        font-family: var(--wp--preset--font-family--ub-paris);
        color: var(--wp--preset--color--custom-color-secondary);
        font-size: var(--wp--preset--font-size--m);
        text-transform: uppercase;
        font-weight: 400;
    }
    @media (max-width: 991px) {
        grid-template-columns: 1fr;
        h1 {
            margin-top: 1em;
        }
    }
}

.latest-issue {
    a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-decoration: none;
        font-size: var(--wp--preset--font-size--s);
        img {
            border: 1px solid var(--wp--preset--color--custom-color-secondary);
        }
        .status {
            position: absolute;
            top: 0;
            right: -1em;
            transform: rotate(15deg);
            border: 1px solid #fff;
        }
        &:hover {
            img {
                border-color: var(--wp--preset--color--custom-color-primary);
            }
            span:not(.status) {
                color: var(--wp--preset--color--custom-color-primary);
            }
        }
    }  
}