@import "./custom/file-header.css";
/**
 * The line above injects the WordPress file header. It needs to be first,
 * before this comment.
 */

/**
 * This injects custom `@font-face` rules.
 */
@import "./custom/fonts.css";

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins, then adds custom base styles.
 */
@import "tailwindcss/base";
@import "./custom/base.css";

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins, then adds custom component classes.
 *
 * The `@import-glob` line imports all CSS files from the `components`
 * directory (except for `components.css`, which is imported on the following
 * line). This is meant to simplify the process of integrating styles from
 * JavaScript components or WordPress plugins.
 */
@import "tailwindcss/components";
@import-glob "./custom/components/**/!(components).css";
@import "./custom/components/components.css";

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins, then adds custom utility classes.
 */
@import "tailwindcss/utilities";
@import "./custom/utilities.css";


@import "./custom/asgaros.css";

:root {
    --wowp-gap: 1em;
    --color-deathknight: #C41E3A;
    --color-demonhunter: #A330C9;
    --color-druid: #DD7C0A;
    --color-evoker: #33937F;
    --color-hunter: #AAD372;
    --color-mage: #3FC7EB;
    --color-monk: #00FF98;
    --color-paladin: #F48CBA;
    --color-priest: #FFFFFF;
    --color-rogue: #FFF468;
    --color-shaman: #0070DD;
    --color-warlock: #8788EE;
    --color-warrior: #C69B6D;
    --color-deepblue: #000032;
    --color-alliance: #f7941e;
    --color-background: var(--color-deepblue);
    --color-glass: color-mix(in lch, transparent 75%, var(--color-background));
}

.p-auto {
    padding: var(--wowp-gap);
}

.gap-auto {
    gap: var(--wowp-gap);
}

body {
    background-color: unset;
    --body-bg: url('https://bnetcmsus-a.akamaihd.net/cms/blog_header/3i/3ITOIMA3P61U1699028715242.png');
    position: relative;
    z-index: -10;
    @apply min-h-screen;
}

.bg-glass {
    background-color: var(--color-glass);
    backdrop-filter: blur(10px);
}

.shadow {
    -webkit-box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.5);
}

body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background: var(--body-bg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    pointer-events: none;
}



.content-wrapper {
    position: relative;
    z-index: -1;
    margin-block: var(--wowp-gap);

}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--wowp-gap);

    @media screen(xl) {
        display: grid;
        grid-column-gap: var(--wowp-gap);
        grid-row-gap: var(--wowp-gap);
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
    }
}

article {
    margin-inline: var(--wowp-gap);

    @media screen(xl) {
        margin-inline: unset;
    }
}

.post-wrapper {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-column-gap: var(--wowp-gap);
    grid-row-gap: var(--wowp-gap);

}

.post-title {
    grid-area: 1 / 1 / 2 / 4;
    @apply text-center text-2xl py-2;
}

.post-content {
    grid-area: 3 / 1 / 4 / 4;

    padding-inline: var(--wowp-gap);
}

.post-category {
    grid-area: 2 / 1 / 3 / 4;

    span {
        @apply p-0;

        &:before {
            height: 1.5em;
        }

        &:after {
            height: 1.5em;
        }

        @media screen(xl) {
            padding: .75em 1.25em .75em .75em;

            &:before {
                height: 3em;
            }

            &:after {
                height: 3em;
            }
        }

    }

}

.post-author {
    grid-area: 4 / 3 / 5 / 4;
    @apply text-end;
    color: var(--author-class);
    padding-right: var(--wowp-gap);
    padding-bottom: var(--wowp-gap);

}

.post-day {
    grid-area: 4 / 1 / 5 / 2;

    padding-left: var(--wowp-gap);
    padding-bottom: var(--wowp-gap);
}

.post-month {
    grid-area: 4 / 2 / 5 / 3;
    padding-bottom: var(--wowp-gap);

}

.post-avatar {
    display: none;
}

@media screen(xl) {
    .post-wrapper {
        display: grid;
        grid-template-columns: 1fr 7fr;
        grid-template-rows: auto auto 1fr auto auto 1fr auto;
        grid-column-gap: var(--wowp-gap);
        grid-row-gap: 0px;
    }

    .post-title {
        grid-area: 1 / 2 / 2 / 5;
        @apply text-4xl text-left;
    }

    .post-content {
        grid-area: 2 / 2 / 8 / 5;
        @apply prose prose-wowpress;
        padding: unset;
        padding-right: var(--wowp-gap);
    }

    .post-day {
        grid-area: 1 / 1 / 2 / 2;
        @apply bg-shaman flex flex-row items-center justify-center text-4xl;
        padding: unset;

    }

    .post-month {
        @apply bg-slate-400 flex flex-row items-center justify-center text-xl;
        padding: unset;
        grid-area: 2 / 1 / 3 / 2;
    }

    .post-category {
        grid-area: 3 / 1 / 4 / 2;
        @apply bg-glass;
        margin-top: var(--wowp-gap);
    }

    .post-avatar {
        @apply flex flex-col justify-end items-center bg-glass;
        grid-area: 4 / 1 / 7 / 2;

        img {
            @apply rounded-md mb-4 outline shadow w-20;
            outline-color: var(--author-class);

        }

    }

    .post-author {
        grid-area: 7 / 1 / 8 / 2;
        @apply flex flex-row items-center justify-center;

        padding: unset;

        background-color: var(--author-class);
        color: black;
    }
}

.page-numbers {
    @apply btn btn-alliance;

    &.current {
        @apply btn-outline;
    }
}


.is-type-video {
    @apply w-full;

    @media screen(lg) {
        @apply w-1/2;
    }
}

.logo {
    mask-image: url(icons/logo_nk.png);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-mode: auto;
    background-color: var(--color-alliance);
    mask-size: contain;
    -webkit-mask-image: url(icons/logo_nk.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-mode: auto;
    -webkit-mask-size: contain;
}