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

body {
    background-color: var(--wp--preset--color--white);
}

.overflow-hidden {
    overflow: hidden;
}

.source-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.source-badge--substack {
    background: #FF6719;
    color: #fff;
}

.duotone {
    position: absolute;
    z-index: -999;
    top: 0;
    left: 0;
    height: 100dvh;
    margin-top: 0 !important;
    mix-blend-mode: normal;
    img {
        filter: brightness(1.125) grayscale(1);
        object-fit: cover;
        transition: opacity 0.2s ease;
        &&[src=""] {
            opacity: 0;
        }
    }
    &&::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--wp--preset--color--dark-blue);
        mix-blend-mode: multiply;
    }
    &&::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--wp--preset--color--black);
        mix-blend-mode: screen;
    }
}

hr {
    margin: 0;
    border-width: 1px 0 0 0 !important;
    border-style: dashed !important;
    color: inherit;
}

.aspect-ratio-1x1 {
    aspect-ratio: 1/1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media screen and (min-width: 782px) {
    .aspect-ratio-lg-1x1 {
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

.aspect-ratio-4x3 {
    aspect-ratio: 4/3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html {
    &&:has(body.logged-in) {
        margin-top: 0 !important;
    }
    #wpadminbar {
        opacity: 0.5;
        z-index: 999999999;
        &&:hover {
            opacity: 1;
        }
    }
}

/* Embed */
.subscribe-embed {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 99999;
    background-color: rgba(8, 93, 130, 0.5);
    padding: var(--one-point-five-spacer);
    @media screen and (min-width: 782px) {
        padding: 150px;
    }
    div {
        display: flex;
        width: 100%;
        height: 100%;
        margin: auto;
        border: 1px dashed;
        /* Match Substack embed — can change later */
        background-color: #f0f2f5;
        button {
            position: absolute;
            place-self: flex-start;
        }
        iframe {
            margin: auto;
        }
    }
}