/* For smaller, one-off styling needs that don't fit elsewhere */

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

::selection {
    background-color: black;
    color: white;
}

body {
    position: relative;
    &&::before {
        content: '';
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(0.75px) contrast(500);
        mix-blend-mode: darken;
        /* background-image: url('../img/noise.png');; */
    }
}

.entry-content {
    h1,
    h1 *,
    .has-x-large-font-size,
    .has-x-large-font-size * {
        padding: 0 3px 8px 3px;
        background-color: white;
        mix-blend-mode: darken;
        filter: saturate(0) blur(1px) contrast(100);
        background-image: url(../img/noise.png);
        background-size: 100px;
        background-repeat: repeat;
    }
    h2 {
        position: relative;
        padding: 5px 5px 0 5px;
        background-color: white;
        mix-blend-mode: darken;
        filter: blur(0.5px) contrast(100);
        background-image: url(../img/noise.png);
        background-size: 100px;
        background-repeat: repeat;
        &&.is-style-highlighted&&::after {
            content: attr(data-content);
            position: absolute;
            padding: 5px 5px 0 5px;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #F5FF65;
            mix-blend-mode: darken;
        }
    }
    h3 {
        background-color: white;
        mix-blend-mode: darken;
        filter: saturate(0) blur(0.85px) contrast(100);
        background-image: url(../img/noise.png);
        background-size: 100px;
        background-repeat: repeat;
    }
    p,
    time,
    li,
    ul,
    span.note p {
        background-image: url('../img/noise.png');
        background-size: 100px;
        filter: blur(0.35px) contrast(100);
        mix-blend-mode: darken;
        -webkit-text-stroke: 0.25px black;
    }
    .has-small-font-size,
    .has-small-font-size * {
        -webkit-text-stroke: 0;
    }
    .has-black-background-color.has-white-color {
        h2,
        h3,
        p,
        time,
        li,
        ul,
        span.note p {
            background-color: black;
            background-image: none;
            mix-blend-mode: lighten;
        }
        p,
        time,
        li,
        ul,
        span.note p {
            -webkit-text-stroke: 0.25px white;
        }
    }
}

footer p {
    background-image: url('../img/noise.png');
    background-size: 100px;
    filter: blur(0.5px) contrast(100);
    mix-blend-mode: darken;
    -webkit-text-stroke: 0.25px black;
}

html.is-safari .entry-content p,
html.is-safari .entry-content time,
html.is-safari .entry-content li,
html.is-safari .entry-content ul,
html.is-safari footer p
html.is-safari .entry-content span.note p {
    filter: blur(0px) contrast(100);
}

#serving-on {
    position: relative;
    > *::before {
        content: '';
        display: flex;
        width: 12px;
        height: 12px;
        border: 1px solid;
        border-radius: 50%;
        margin-bottom: var(--zero-point-five-spacer);
        margin-top: 1px;
    }
    > *.active::after {
        content: url('../icons/check.svg');
        position: absolute;
        top: -4px;
    }
}

span.note {
    position: absolute;
    right: var(--two-spacer);
    width: calc((100vw - 760px)/2 - var(--four-spacer)) !important;
    @media screen and (min-width: 1600px) {
        width: calc((1600px - 760px)/2 - var(--four-spacer)) !important;
    }
    transform: translateY(-20%) rotate(1deg);
    box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.40);
    z-index: 998;
    &&:hover {
        z-index: 999;
    }
    @media screen and (max-width: 1079px) {
        position: relative !important;
        right: auto !important;
        width: auto !important;
        transform: translateY(0) rotate(1deg) !important;
        top: 0 !important;
        margin-top: var(--global--spacing-vertical) !important;
    }
}

body.files .entry-content span.note {
    right: calc(-1 * var(--two-spacer));
}

hr {
    margin: 0; /* Leave as not !important so it only applies to non-Gutenberg hrs */
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
    border-color: var(--wp--preset--color--black) !important;
}

    @media screen and (min-width: 782px) {
    .vertical-divider {
        position: relative;
        &&::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 100%;
            background-color: var(--wp--preset--color--black);
        }
    }
}

body.page-template-page-case-file,
body.files {
    background: var(--wp--preset--color--grey);
}

/* Case File styles */
#folder-wrapper {
    display: flex;
    flex-direction: column;
    #tab {
        margin-left: 30px;
        margin-bottom: -1px;
        path {
            fill: var(--wp--preset--color--manilla);
        }
        @media screen and (max-width: 1080px) {
            width: 250px;
            height: auto;
        }
    }
    #folder {
        width: 100%;
        background: var(--wp--preset--color--manilla);
        border-radius: var(--two-spacer) var(--two-spacer) 0 0;
    }
    @media screen and (max-width: 781px) {
        width: calc(100vw - var(--two-spacer)) !important;
        overflow: hidden;
        max-width: none !important;
        margin-right: 0 !important;
        #folder {
            border-radius: var(--two-spacer) 0 0 0 !important;
        }
    }
}
/* --> Folder wrapper as used for individual post backgrounds */
#folder-wrapper-alt {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 100svh;
    @media screen and (max-width: 781px) {
        max-width: 100% !important;
    }
    #tab {
        margin-left: 30px;
        @media screen and (max-width: 781px) {
            margin-left: 0;
        }
        margin-bottom: -1px;
        path {
            fill: var(--wp--preset--color--manilla);
        }
    }
    #folder {
        width: 100%;
        height: 100%;
        background: var(--wp--preset--color--manilla);
        border-radius: 20px 20px 0 0;
        @media screen and (max-width: 781px) {
            border-radius: 0;
        }
    }
    /* Special class to make mobile contents full-bleed */
    @media screen and (max-width: 781px) {
        position: absolute;
        + div.alignwide {
            max-width: 100% !important;
            .file-card {
                transform: none !important;
            }
        }   
    }
    svg#back-to-all-files {
        position: absolute;
        margin-left: 100px;
        @media screen and (max-width: 781px) {
            margin-left: 75px;
        }
        margin-top: 20px;
        z-index: 999;
    }
}
.drop-shadow {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

.file-card {
    position: relative;
    background-image: url('../img/file-background.png');
    background-size: cover;
    &&:not(.alt):hover {
        transform: rotate(2deg);
        &&::after {
            content: url('../img/open-stamp.png');
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.judge-container {
    container-type: inline-size;
    .img-wrapper {
        position: relative;
    }
    .card {
        width: 400px;
        img.illo {
            width: 80%;
            margin-top: 5px;
            mix-blend-mode: multiply;
        }
        @container (width < 450px) {
            width: 300px;
            img.illo {
                width: 70%;
                margin-top: 25px;
            }
        }
        aspect-ratio: 4/6;
        background-size: cover;
        height: fit-content !important;
        img {
            mix-blend-mode: darken;
            &&.illo {
                position: absolute;
                height: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            &&.quote {
                    transform: scale(1.65);
                    transform-origin: center left;
                    margin: 2px 0 3px -8px;
            }
        }
        &&::before {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    &&:nth-child(1) {
        .card {
            background-image: url('../img/card-background-1.png');
            @media screen and (min-width: 782px) {
                transform: rotate(0deg);
            }
            &&::before {
                content: url(../img/tape-1.png);
            }
            &&:hover {
                transform: rotate(2deg);
            }
        }
    }
    &&:nth-child(2) {
        .card {
            background-image: url('../img/card-background-2.png');
            @media screen and (min-width: 782px) {
                transform: rotate(-2.38deg) translate(5px, -10px);
            }
            &&::before {
                content: url(../img/tape-2.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(-4.38deg);
            }
        }
    }
    &&:nth-child(3) {
        .card {
            background-image: url('../img/card-background-1.png');
            @media screen and (min-width: 782px) {
                transform: rotate(0.88deg) translate(-10px, 5px);
            }
            &&::before {
                content: url(../img/tape-3.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(2.88deg);
            }
        }
    }
    &&:nth-child(4) {
        .card {
            background-image: url('../img/card-background-2.png');
            @media screen and (min-width: 782px) {
                transform: rotate(0.88deg) translate(-10px, -10px);
            }
            &&::before {
                content: url(../img/tape-4.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(-2.88deg);
            }
        }
    }
    &&:nth-child(5) {
        .card {
            background-image: url('../img/card-background-1.png');
            @media screen and (min-width: 782px) {
                transform: rotate(4.23deg) translate(10px, 5px);
            }
            &&::before {
                content: url(../img/tape-1.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(6.38deg);
            }
        }
    }
    &&:nth-child(6) {
        .card {
            background-image: url('../img/card-background-2.png');
            @media screen and (min-width: 782px) {
                transform: rotate(-2deg) translate(-5px, -5px);
            }
            &&::before {
                content: url(../img/tape-2.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(-4deg);
            }
        }
    }
    &&:nth-child(7) {
        .card {
            background-image: url('../img/card-background-1.png');
            @media screen and (min-width: 782px) {
                transform: rotate(0.88deg) translate(10px, 15px);
            }
            &&::before {
                content: url(../img/tape-3.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(2.88deg);
            }
        }
    }
    &&:nth-child(8) {
        .card {
            background-image: url('../img/card-background-2.png');
            @media screen and (min-width: 782px) {
                transform: rotate(0.88deg) translate(-15px, -10px);
            }
            &&::before {
                content: url(../img/tape-4.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(-2.88deg);
            }
        }
    }
    &&:nth-child(9) {
        .card {
            background-image: url('../img/card-background-1.png');
            @media screen and (min-width: 782px) {
                transform: rotate(-2.38deg) translate(-5px, -5px);
            }
            &&::before {
                content: url(../img/tape-1.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(0.38deg);
            }
        }
    }
    &&:nth-child(10) {
        .card {
            background-image: url('../img/card-background-2.png');
            @media screen and (min-width: 782px) {
                transform: rotate(-2deg) translate(0px, 10px);
            }
            &&::before {
                content: url(../img/tape-2.png);
                margin-top: 15px;
            }
            &&:hover {
                transform: rotate(-4deg);
            }
        }
    }
    /* '.alt' class for card when used on single 'Judge' posts */
    &&.alt {
        padding: 0 !important;
        position: fixed;
        width: 450px !important;
        height: fit-content;
        left: 0;
        top: 50%;
        transform: translate(-40%, -50%) rotate(1.5deg);
        z-index: 999;
        @media screen and (max-width: 1300px) {
            left: -5%;
        }
        @media screen and (max-width: 1200px) {
            left: -10%;
        }
        @media screen and (max-width: 1100px) {
            left: -15%;
        }
        @media screen and (max-width: 1000px) {
            left: 0%;
            position: relative;
            transform: rotate(1.5deg);
            margin-top: 100px;
        }
        @media screen and (max-width: 781px) {
            max-width: 90% !important;
            margin: auto !important;
            margin-top: var(--ten-spacer) !important;
        }
    }
}
/* Fly-out on hover when on single view */
body.single.judges .judge-container:hover {
    @media screen and (min-width: 1080px) {
        transform: translate(0%, -50%) rotate(-5deg);
    }
}
/* Not the cards in the 'related' section */
div.related .judge-container:hover {
    transform: none !important;
}

/* Move judge card away from footer when in view */
body.footer-in-view .judge-container {
    .card {
        transform-origin: top left;
        transform: translate(-25%, -10%) rotate(15deg) !important;
    }
}
body.footer-in-view div.related .judge-container {
    .card {
        transform: none !important;
    }
}

.box-shadow,
.is-style-box-shadow {
    box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.40);
}

/* Pad out bottom of right col. on homepage to account for file reveal */
@media screen and (min-width: 782px) {
    body.home .right-col {
        padding-bottom: 400px;
    }
}

#case-file-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    padding-top: 50px;
    margin: 0 !important;
    overflow: hidden;
    z-index: 999;
    .file-card {
        position: absolute;
        width: 200%;
        transform: translate(100px, 25px) rotate(3.5deg);
    }
    #read-the-case-file {
        position: absolute;
        z-index: 1;
        width: 200%;
        transform: translate(50px, 150px) rotate(-2deg);
    }
    @media screen and (min-width: 782px) {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 50%;
        height: 300px;
        padding-top: 100px;
        #read-the-case-file {
            transform: translate(20px, 80px);
        }
        &&:hover {
            .file-card {
                transform: translate(100px, -50px) rotate(3.5deg);
            }
            #read-the-case-file {
                transform: translate(20px, 70px);
            }
        }
    }
}

.d-grid.grid.meet-the-judges {
    @media screen and (min-width: 782px) {
        row-gap: 150px !important;
    }
}

/* Plain-text readability mode — toggled by .readable-toggle, persisted in localStorage as 'judges-readable' */
html.is-readable body::before {
    filter: none;
    mix-blend-mode: normal;
}
html.is-readable .entry-content h1,
html.is-readable .entry-content h1 *,
html.is-readable .entry-content .has-x-large-font-size,
html.is-readable .entry-content .has-x-large-font-size *,
html.is-readable .entry-content h2,
html.is-readable .entry-content h3 {
    background-image: none;
    background-color: transparent;
    filter: none;
    mix-blend-mode: normal;
}
html.is-readable .entry-content p,
html.is-readable .entry-content time,
html.is-readable .entry-content li,
html.is-readable .entry-content ul,
html.is-readable .entry-content span.note p,
html.is-readable footer p {
    background-image: none;
    filter: none;
    mix-blend-mode: normal;
    -webkit-text-stroke: 0;
}
html.is-readable .entry-content .has-black-background-color.has-white-color h2,
html.is-readable .entry-content .has-black-background-color.has-white-color h3,
html.is-readable .entry-content .has-black-background-color.has-white-color p,
html.is-readable .entry-content .has-black-background-color.has-white-color time,
html.is-readable .entry-content .has-black-background-color.has-white-color li,
html.is-readable .entry-content .has-black-background-color.has-white-color ul,
html.is-readable .entry-content .has-black-background-color.has-white-color span.note p {
    mix-blend-mode: normal;
    -webkit-text-stroke: 0;
}

/* Toggle button — fixed bottom-left on desktop, inline in the footer on mobile */
.readable-toggle {
    z-index: 1000;
    padding: 0.25rem 0.5rem;
    font-family: "Courier Prime", Courier, monospace;
    font-size: 14px;
    line-height: 1;
    color: black;
    background-color: white;
    border: none;
    cursor: pointer;
    width: fit-content;
}
@media screen and (min-width: 782px) {
    .readable-toggle {
        position: fixed;
        bottom: var(--two-spacer, 16px);
        left: var(--two-spacer, 16px);
    }
}
.readable-toggle:hover {
    background-color: #F5FF65;
}
.readable-toggle:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}
.readable-toggle[aria-pressed="true"] {
    background-color: black;
    color: white;
}
.readable-toggle[aria-pressed="true"]:hover {
    background-color: #333;
}