/* 
Theme Name: Bureau Spectacular
Author: Blue Jo
Version: 1.0
*/

/* for wordpress */
#wpadminbar {
    position: absolute;
    opacity: .75;
}

/* default configurations */

html {
    font-size: 68%;
    font-family: "neue-haas-grotesk-display", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-style: normal;

    /* for wordpress */
    --wp-admin--admin-bar--height: 0;
    margin-top: 0 !important;
}

body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, p, ul, li {
    font-weight: 500;
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

h1, p.small-text {
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: 600;
}

p {
    font-size: 4rem;
    margin-bottom: 5rem;
    font-weight: 600;
}

p.small-text {
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: 500;
}

.project {
    display: grid;
    grid-template-columns: 1fr 28rem 12rem;
    gap: 1.5rem;
    cursor: pointer;
}

.item-date {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 1.5rem;
    cursor: pointer;
}

.item-date p, .project p {
    display: inline;
    margin-bottom: 0;
    max-width: min-content;
}

.date p  {
    text-wrap: nowrap;
}

.item {
    grid-column: 1;
}

.date {
    grid-column: 2;
}

ul {
    list-style-type: none;
}

li p {
    margin-bottom: 0rem;
    text-indent: 1rem hanging;
}

video.full-bleed, img.full-bleed {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

@media  (min-width: 77rem) {
    video.full-bleed, img.full-bleed {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
} 

.grid-container.hidden {
    opacity: 0;
    /* transition: opacity 1s; */
}

.grid-container {
    opacity: 100;
    transition: opacity .5s;
}

.section {
    margin-bottom: 4rem;
}

/* links */

a:link, a:visited, .button, .project-filter {
    color: black;
    text-decoration: none;
    background-color: white;
}

a:link.project, a:link.project {
    background-color: rgba(255, 255, 255, 0);
}

a:hover, a:active, a:link.selected, a:visited.selected, .selected, .button.on-button, .button:hover, .project-filter:hover, .background-image p:hover, .project:hover p, .project.hover p, a.item-date:hover p  {
    background-color: black;
    color: cyan;
    cursor: pointer;
    /* mix-blend-mode: multiply; */
}

a.project:hover, a.project:active, a.item-date:hover {
    background: none;
    color: black;
}

.selected {
    pointer-events: none;
}

/* grid */

.grid-container {
    padding: 1.5rem;
    margin: auto;
    display: grid;
    width: calc(100vw - 3rem);
    max-width: 110rem;
    align-items: start;
    gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
}

/* header */

.site-title {
    grid-column: 1/7;
    grid-row:1;
}

.nav {
    grid-column: 7/13;
    grid-row:1;
    display: flex;
    justify-content: right;
}

.nav span, .header-link-span {
    display: inline;
    background-color: white;
}

.nav h1 {
    text-align: right;
}

.header {
    position: fixed;
    top: 0rem;
    /* background-color: white; */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    width: calc(100vw - 3rem);
    max-width: 110rem;
    margin: auto;
    left: 0;
    right: 0;
    transition: transform 0.4s;
    /* box-shadow: 0px .5rem 0px black; */
}

.scroll-down .header {
    transform: translate3d(0, -100%, 0);
}

.scroll-up .header {
    transform: none;
}

.section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column: 1/13;
    gap: 1.5rem;
}

/* section */

.section-left {
    grid-column: 1/7;
}

.section-right {
    grid-column: 7/13;
}

.section-full {
    grid-column: 1/13;
}

/* page title */

.section.page-title {
    margin-bottom: 6rem;
    grid-row: 1;
}

.header .section-right {
    justify-self: right;
}

.header .section-right p {
    text-align: right;
}

/* project */

.removed, .project.removed, .section.selected-projects.removed, .section.archive.removed {
    display: none;
}

/* image pop up */

div.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    pointer-events: none;
}

div.background-image img {
    object-fit: cover;
    position: fixed;
    pointer-events: none;
    opacity: 0;
}

div.background-image img.visible {
    opacity: 100;
}

div.background-image img.work-image {
    max-height: 90vh;
    max-width: 60vw;
    min-width: 40rem;
    justify-self: center;
    align-self: center;
}

/* misc */

.space {
    padding-left: 1rem;
}

.hidden {
    visibility: hidden;
}

/* media queries */

/* @media (min-width: 85rem) and (max-width: 100rem) {
    .project p, .item-date p {
        font-size: 4rem;
    }

    .project {
        grid-template-columns: 1fr 24rem 9rem;
    }
} */

@media (min-width: 60rem) {
    .project p, .item-date p {
        font-size: 3rem;
    }

    .project {
        grid-template-columns: 1fr 18rem 7rem;
    }
} 

@media  (min-width: 45rem) and (max-width: 60rem) {
    .project p, .item-date p {
        font-size: 2rem;
    }

    .project {
        grid-template-columns: 1fr 12rem 5rem;
    }

    p {
        font-size: 3rem;
        margin-bottom: 3rem;
    }

    .section {
        margin-bottom: 3rem;
    }
}

@media  (max-width: 45rem) {
    .project p, .item-date p {
        font-size: 1.5rem;
    }

    .project {
        grid-template-columns: 1fr 8rem 3rem;
    }

    p {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .section {
        margin-bottom: 2rem;
    }
}