/* === OnlyBun custom styles ===================================== */

/* Page content fallback / WYSIWYG-safe rules
   Use an element with id="page-content" in Pages views to keep semantic sizes. */
#page-content h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    margin: 1.5rem 0 .75rem;
}

#page-content h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin: 1.25rem 0 .75rem;
}

#page-content h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin: 1rem 0 .5rem;
}

#page-content p {
    margin: .75rem 0;
}

#page-content ul, #page-content ol {
    margin: .75rem 0 .75rem 1.25rem;
}

#page-content code {
    background: #111827;
    padding: .15rem .35rem;
    border-radius: .25rem;
}

/* Cards, utilities */
.post-card {
    backdrop-filter: blur(8px);
    background-color: rgba(15,23,42,.7);
    color: #e5e7eb; /* light text to contrast dark background */
    padding: 1.25rem;
    border-radius: 0.75rem;
}

/* === CMS content isolation ===================================== */
/* Any WYSIWYG or CMS-managed content goes inside .cms-content.
   This keeps the global background/font, but removes OnlyBun/Tailwind styling. */
.cms-content,
.cms-content * {
    all: revert-layer; /* ignore current layer’s utilities */
}

.cms-content {
    color: #e5e7eb; /* keep readable light text */
    background-color: transparent; /* use global background */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.7;
}

    /* ensure media inside CMS body scales properly */
    .cms-content img {
        max-width: 100%;
        height: auto;
    }

    /* tables */
    .cms-content table {
        border-collapse: collapse;
        width: 100%;
    }

    .cms-content table,
    .cms-content th,
    .cms-content td {
        border: 1px solid #374151; /* gray-700 */
        padding: .5rem;
    }

    /* links */
    .cms-content a {
        color: #93c5fd; /* sky-300 */
        text-decoration: underline;
    }

    /* code */
    .cms-content pre,
    .cms-content code {
        background: #1e293b;
        color: #e2e8f0;
        border-radius: .25rem;
        padding: .25rem .4rem;
    }

/* === Gradient & utility styles ===================================== */
.gradient-text {
    background: linear-gradient(90deg,#6366f1,#8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.code-block {
    background-color: #1e293b;
}

/* === Vanta background layer ===================================== */
.vanta-bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .15;
}

/* === Snow overlay (v2 brighter) ================================= */
#snow, #snow::before, #snow::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5; /* above Vanta (-1), below sticky nav (z-50) */
    background-repeat: repeat;
    background-image: radial-gradient(3px 3px at 30px 40px, rgba(255,255,255,.95) 50%, transparent 51%), radial-gradient(2px 2px at 70px 20px, rgba(255,255,255,.85) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 110px 90px, rgba(255,255,255,.8) 50%, transparent 51%);
    animation: snow-fall 14s linear infinite;
    opacity: .6;
}

#snow {
    background-size: 160px 160px;
}

    #snow::before {
        content: "";
        background-size: 220px 220px;
        animation: snow-fall 20s linear infinite;
        animation-delay: -5s;
        opacity: .5;
    }

    #snow::after {
        content: "";
        background-size: 320px 320px;
        animation: snow-fall 32s linear infinite;
        animation-delay: -10s;
        opacity: .45;
    }

/* fall + slight drift */
@keyframes snow-fall {
    0% {
        transform: translate3d(0,-12%,0);
    }

    100% {
        transform: translate3d(-8%,100%,0);
    }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #snow, #snow::before, #snow::after {
        animation: none;
    }
}