@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@400;700;900&family=Asap:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Base Zine Variables */
:root {
    --zine-border-width: 4px;
    --zine-shadow-offset: 6px;
    --zine-shadow-color: #0C0C0C;
    --zine-border-color: #0C0C0C;
    
    /* Default Fonts */
    --zine-font-body: 'Asap', sans-serif;
    --zine-font-heading: 'Asap', sans-serif;
    
    /* Default theme variables (Overridden by TapeDeck/NowPlaying) */
    --mixtape-bg-color: #EAE0D6;
    --mixtape-text-color: #0C0C0C;
    --mixtape-accent-color: #F9B406;
}

/* Halftone Texture Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    background-image: radial-gradient(#0C0C0C 1px, transparent 1px);
    background-size: 4px 4px;
}

/* Typography */
body {
    font-family: var(--zine-font-body);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--zine-font-heading);
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 1px;
}

/* Fix removed to prevent conflict with builder's positioning engine */

/* Brutalist Buttons */
.mixtape-btn {
    display: inline-block;
    font-family: var(--zine-font-heading);
    background-color: var(--mixtape-accent-color);
    color: var(--zine-border-color);
    border: var(--zine-border-width) solid var(--zine-border-color);
    padding: 10px 24px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color);
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}

.mixtape-btn:active {
    transform: translate(3px, 3px);
    box-shadow: calc(var(--zine-shadow-offset) / 2) calc(var(--zine-shadow-offset) / 2) 0 var(--zine-shadow-color);
}


/* Colibri Theme Logo Fix: Prevent double logos when global typography/display overrides interfere with Colibri's flex layout */
/* 1. Hide alt logo everywhere by default */
.h-logo__alt-image {
    display: none !important;
}

/* 2. Hide main logo when sticky */
.h-navigation_sticky .h-logo__image {
    display: none !important;
}

/* 3. Show alt logo when sticky */
.h-navigation_sticky .h-logo__alt-image {
    display: inline-block !important;
}


@keyframes mixtape-pulse {
    0% { transform: rotate(-2deg) scale(1); box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color); }
    50% { transform: rotate(-2deg) scale(1.05); box-shadow: calc(var(--zine-shadow-offset) * 1.2) calc(var(--zine-shadow-offset) * 1.2) 0 var(--zine-shadow-color); }
    100% { transform: rotate(-2deg) scale(1); box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color); }
}

/* ------------------------------------
   Now Playing (Gig Poster Aesthetic) 
--------------------------------------- */
.mixtape-live-screen {
    background-color: var(--mixtape-bg-color);
    border: var(--zine-border-width) solid var(--zine-border-color);
    padding: 30px;
    margin: 40px auto;
    max-width: 600px;
    box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color);
    position: relative;
    /* Simulated taped edges or rough collage effect */
    transform: rotate(-1deg);
}

.mixtape-live-screen h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    background: var(--mixtape-text-color);
    color: var(--mixtape-bg-color);
    display: inline-block;
    padding: 5px 15px;
    transform: rotate(2deg);
}

.mixtape-live-screen .mixtape-btn {
    display: block;
    text-align: center;
    margin-bottom: 25px;
}

.mixtape-spotify-embed {
    border: var(--zine-border-width) solid var(--zine-border-color);
    background: #0C0C0C;
    box-shadow: 4px 4px 0 var(--zine-shadow-color);
}

/* QR Code Block */
.mixtape-live-qr {
    display: inline-block;
    border: var(--zine-border-width) solid var(--zine-border-color);
    padding: 15px;
    background: #EAE0D6;
    box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color);
    transform: rotate(2deg);
}

.mixtape-live-qr img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ------------------------------------
   Centerfold (Visual Arts Wall) 
--------------------------------------- */
.mixtape-centerfold-wrap {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.mixtape-centerfold-title {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 10px;
}

.mixtape-centerfold-bio {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 40px auto;
    background: var(--mixtape-bg-color);
    border: var(--zine-border-width) dashed var(--zine-border-color);
    padding: 20px;
    box-shadow: var(--zine-shadow-offset) var(--zine-shadow-offset) 0 var(--zine-shadow-color);
}

.mixtape-centerfold-masonry {
    column-count: 3;
    column-gap: 30px;
}

/* Polaroid Styling */
.mixtape-centerfold-masonry .gallery-item {
    break-inside: avoid;
    margin-bottom: 40px;
    background: #EAE0D6;
    border: 2px solid #ddd;
    padding: 15px 15px 50px 15px; /* Polaroid bottom heavy padding */
    box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.mixtape-centerfold-masonry .gallery-item img {
    width: 100%;
    border: 1px solid #ccc;
    display: block;
    filter: grayscale(20%) contrast(1.1); /* Slight gritty look */
}

/* Asymmetrical Rotations */
.mixtape-centerfold-masonry .gallery-item:nth-child(even) {
    transform: rotate(3deg);
}

.mixtape-centerfold-masonry .gallery-item:nth-child(odd) {
    transform: rotate(-2deg);
}

.mixtape-centerfold-masonry .gallery-item:nth-child(3n) {
    transform: rotate(1deg);
}

.mixtape-centerfold-masonry .gallery-item:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
    position: relative;
    box-shadow: 12px 12px 0 rgba(0,0,0,0.25);
}

/* ------------------------------------
   Footer Navigation 
--------------------------------------- */
.footer-nav-links,
.applications-links {
    margin: 40px auto 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1200px !important;
    display: block !important; /* NOT flex, because Colibri outputs two sibling divs */
}

/* Ensure the colibri wrapper doesn't trap the centering */
.footer-nav-links .colibri-menu-container,
.applications-links .colibri-menu-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Force hide Colibri's hamburger menu for the footer */
.footer-nav-links .h-mobile-menu,
.applications-links .h-mobile-menu {
    display: none !important;
}

/* Force show the main menu at all screen sizes */
.footer-nav-links .h-main-menu,
.footer-nav-links ul,
.applications-links .h-main-menu,
.applications-links ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.footer-nav-links li,
.footer-nav-links .menu-item,
.applications-links li,
.applications-links .menu-item {
    flex: 0 1 auto !important;
    min-width: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    justify-content: center !important;
}

@media (max-width: 992px) {
    .footer-nav-links li,
    .footer-nav-links .menu-item,
    .applications-links li,
    .applications-links .menu-item {
        flex: 1 1 45% !important; /* 2 across on tablet */
    }
}

@media (max-width: 600px) {
    .footer-nav-links li,
    .footer-nav-links .menu-item,
    .applications-links li,
    .applications-links .menu-item {
        flex: 1 1 auto !important; /* 1 across on mobile */
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

.footer-nav-links li a,
.applications-links li a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--zine-font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    color: var(--mixtape-bg-color) !important;
    background-color: var(--mixtape-text-color) !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border: var(--zine-border-width) solid var(--zine-border-color) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 1px !important;
    box-shadow: 4px 4px 0 var(--mixtape-accent-color) !important;
}

.footer-nav-links li a:hover,
.applications-links li a:hover {
    color: var(--mixtape-text-color) !important;
    background-color: var(--mixtape-accent-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 6px 6px 0 var(--mixtape-text-color) !important;
}

.footer-nav-links ul, .footer-nav-links .h-menu,
.applications-links ul, .applications-links .h-menu {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-nav-links li,
.applications-links li {
    margin: 0;
    padding: 0;
}

/* ------------------------------------
   Responsive Media Queries 
--------------------------------------- */
@media (max-width: 900px) {
    .mixtape-centerfold-masonry {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    :root {
        --zine-border-width: 3px;
        --zine-shadow-offset: 4px;
    }
    .mixtape-live-screen {
        margin: 20px 10px;
        padding: 20px;
    }
    .mixtape-live-screen h2 {
        font-size: 2rem;
    }
    .mixtape-centerfold-title {
        font-size: 2.2rem;
    }
    .mixtape-centerfold-masonry {
        column-count: 1;
        column-gap: 0;
    }
    .mixtape-centerfold-masonry .gallery-item {
        margin-bottom: 30px;
        transform: rotate(0) !important; /* Flatten out on small screens for readability */
    }
    .mixtape-centerfold-masonry .gallery-item:hover {
        transform: scale(1.02) !important;
    }
}

/* ------------------------------------
   Dynamic Sun Tracking Effect
--------------------------------------- */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998; /* Just below halftone texture */
    opacity: var(--sun-opacity, 0);
    /* Soft, large radial gradient to act as ambient sunlight */
    background: radial-gradient(circle 800px at var(--sun-x, 50%) var(--sun-y, -20%), rgba(255, 245, 200, 0.25), transparent);
    mix-blend-mode: screen;
    transition: opacity 2s ease, background 2s ease;
}

/* ------------------------------------
   Dynamic Risograph Hero Effect
--------------------------------------- */
.mixtape-riso-enabled .mixtape-hero-riso {
    position: relative;
    background-color: var(--mixtape-text-color); /* Dark tone */
    display: block;
}

.mixtape-riso-enabled .mixtape-hero-riso::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--mixtape-accent-color); /* Light tone */
    mix-blend-mode: lighten;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1; /* Keep behind text */
}

.mixtape-riso-enabled .mixtape-hero-riso img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%) contrast(1.4);
    mix-blend-mode: multiply;
    transition: filter 0.4s ease, mix-blend-mode 0.4s ease;
    position: relative;
    z-index: 0; /* Keep at bottom */
}

/* Ensure all Colibri content layers (like text/buttons) sit above the Riso overlay */
.mixtape-riso-enabled .mixtape-hero-riso .h-column-container {
    position: relative;
    z-index: 10;
}

/* On hover, restore the true image */
.mixtape-riso-enabled .mixtape-hero-riso:hover::after {
    opacity: 0;
}

.mixtape-riso-enabled .mixtape-hero-riso:hover img {
    filter: grayscale(0%) contrast(1);
    mix-blend-mode: normal;
}

/* ------------------------------------
   Zine Heading Utility Classes 
--------------------------------------- */
/* Base Heading Style */
.zine-heading {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100%;
    padding: 6px 16px !important;
    margin-bottom: 20px;
    border: var(--zine-border-width, 3px) solid var(--zine-border-color, #0C0C0C) !important;
    box-shadow: var(--zine-shadow-offset, 5px) var(--zine-shadow-offset, 5px) 0 var(--zine-shadow-color, #0C0C0C) !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

/* Dynamic Color Modifiers (Hooks into Theme Engine) */
.zine-bg-accent:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-accent h1, .zine-bg-accent h2, .zine-bg-accent h3 { background-color: var(--mixtape-accent-color) !important; color: var(--mixtape-bg-color) !important; }
.zine-bg-base:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-base h1, .zine-bg-base h2, .zine-bg-base h3 { background-color: var(--mixtape-bg-color) !important; color: var(--mixtape-text-color) !important; }
.zine-bg-dark:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-dark h1, .zine-bg-dark h2, .zine-bg-dark h3 { background-color: var(--mixtape-text-color) !important; color: var(--mixtape-bg-color) !important; }

/* Hardcoded Brand Color Modifiers (Ignores Theme Engine) */
.zine-bg-yellow:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-yellow h1, .zine-bg-yellow h2, .zine-bg-yellow h3 { background-color: #F9B406 !important; color: #0C0C0C !important; }
.zine-bg-red:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-red h1, .zine-bg-red h2, .zine-bg-red h3 { background-color: #E23D23 !important; color: #EAE0D6 !important; }
.zine-bg-teal:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-teal h1, .zine-bg-teal h2, .zine-bg-teal h3 { background-color: #02A3AF !important; color: #EAE0D6 !important; }
.zine-bg-black:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-black h1, .zine-bg-black h2, .zine-bg-black h3 { background-color: #0C0C0C !important; color: #EAE0D6 !important; }
.zine-bg-white:not(:has(h1, h2, h3, h4, h5, h6)), .zine-bg-white h1, .zine-bg-white h2, .zine-bg-white h3 { background-color: #EAE0D6 !important; color: #0C0C0C !important; }

/* Rotation Modifiers */
.zine-tilt-left { transform: rotate(-2deg) !important; }
.zine-tilt-right { transform: rotate(2deg) !important; }
.zine-tilt-slight-left { transform: rotate(-1deg) !important; }
.zine-tilt-slight-right { transform: rotate(1deg) !important; }
.zine-tilt-none { transform: rotate(0deg) !important; }

/* Responsive */
@media (max-width: 768px) {
    .zine-heading {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
        white-space: normal;
        word-wrap: break-word;
    }
}

/* ------------------------------------
   Zine Text Utility Classes (For Paragraphs/Inline Text)
--------------------------------------- */
/* Ransom Note Cutout Style for Text */
.zine-text-cutout,
.zine-text-cutout p,
.zine-text-cutout span,
.zine-text-cutout a {
    display: inline !important;
    background-color: var(--mixtape-text-color, #0C0C0C) !important;
    padding: 2px 8px !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-weight: bold !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5) !important;
    line-height: 1.8 !important;
}
html body .zine-text-cutout,
html body .zine-text-cutout p,
html body .zine-text-cutout span,
html body .zine-text-cutout a,
html body .zine-text-cutout p *,
html body .zine-text-cutout span *,
html body .zine-text-cutout a *,
html body .zine-text-cutout:hover,
html body .zine-text-cutout:hover p,
html body .zine-text-cutout:hover span,
html body .zine-text-cutout:hover a,
html body .zine-text-cutout:hover p *,
html body .zine-text-cutout:hover span *,
html body .zine-text-cutout:hover a *,
html body .zine-text-cutout:active,
html body .zine-text-cutout:active p,
html body .zine-text-cutout:active span,
html body .zine-text-cutout:active a,
html body .zine-text-cutout:active p *,
html body .zine-text-cutout:active span *,
html body .zine-text-cutout:active a * {
    color: #FFFFFF !important;
}
div.zine-text-cutout {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Gritty Highlighter Style for Text */
.zine-text-highlighter,
.zine-text-highlighter p,
.zine-text-highlighter span,
.zine-text-highlighter a {
    display: inline !important;
    background-image: linear-gradient(100deg, rgba(249, 180, 6, 0.9) 0%, rgba(249, 180, 6, 0.7) 100%) !important; /* Gulu Yellow */
    padding: 2px 6px !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-radius: 2px 4px 2px 4px / 255px 5px 225px 3px !important;
    font-weight: bold !important;
    line-height: 1.8 !important;
}
html body .zine-text-highlighter,
html body .zine-text-highlighter p,
html body .zine-text-highlighter span,
html body .zine-text-highlighter a,
html body .zine-text-highlighter p *,
html body .zine-text-highlighter span *,
html body .zine-text-highlighter a *,
html body .zine-text-highlighter:hover,
html body .zine-text-highlighter:hover p,
html body .zine-text-highlighter:hover span,
html body .zine-text-highlighter:hover a,
html body .zine-text-highlighter:hover p *,
html body .zine-text-highlighter:hover span *,
html body .zine-text-highlighter:hover a *,
html body .zine-text-highlighter:active,
html body .zine-text-highlighter:active p,
html body .zine-text-highlighter:active span,
html body .zine-text-highlighter:active a,
html body .zine-text-highlighter:active p *,
html body .zine-text-highlighter:active span *,
html body .zine-text-highlighter:active a * {
    color: #0C0C0C !important;
}
div.zine-text-highlighter {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Heavy Stroke / Outline Style for Text */
.zine-text-stroke,
.zine-text-stroke p,
.zine-text-stroke span,
.zine-text-stroke a {
    display: inline !important;
    font-weight: bold !important;
    text-shadow: 
        -1px -1px 0 var(--mixtape-text-color, #0C0C0C),  
         1px -1px 0 var(--mixtape-text-color, #0C0C0C),
        -1px  1px 0 var(--mixtape-text-color, #0C0C0C),
         1px  1px 0 var(--mixtape-text-color, #0C0C0C),
         3px  3px 0 var(--mixtape-text-color, #0C0C0C) !important;
    line-height: 1.8 !important;
}
html body .zine-text-stroke,
html body .zine-text-stroke p,
html body .zine-text-stroke span,
html body .zine-text-stroke a,
html body .zine-text-stroke p *,
html body .zine-text-stroke span *,
html body .zine-text-stroke a *,
html body .zine-text-stroke:hover,
html body .zine-text-stroke:hover p,
html body .zine-text-stroke:hover span,
html body .zine-text-stroke:hover a,
html body .zine-text-stroke:hover p *,
html body .zine-text-stroke:hover span *,
html body .zine-text-stroke:hover a *,
html body .zine-text-stroke:active,
html body .zine-text-stroke:active p,
html body .zine-text-stroke:active span,
html body .zine-text-stroke:active a,
html body .zine-text-stroke:active p *,
html body .zine-text-stroke:active span *,
html body .zine-text-stroke:active a * {
    color: var(--mixtape-bg-color, #EAE0D6) !important;
}
div.zine-text-stroke {
    display: block !important;
    text-shadow: none !important;
}

/* Zine Custom Dividers (Apply to any spacer div or empty element) */
.zine-divider {
    border: none !important;
    height: var(--zine-border-width, 4px) !important;
    background-color: var(--zine-border-color, #0C0C0C) !important;
    box-shadow: var(--zine-shadow-offset, 5px) var(--zine-shadow-offset, 5px) 0 var(--zine-shadow-color, #0C0C0C) !important;
    margin: 60px auto !important;
    width: 80% !important;
    max-width: 800px !important;
    transform: rotate(-1deg) !important;
    opacity: 1 !important;
    display: block !important;
    clear: both !important;
}

.zine-divider-tape {
    border: none !important;
    height: 40px !important;
    background-color: rgba(238, 232, 224, 0.85) !important; 
    background-image: none !important;
    box-shadow: none !important;
    margin: 60px auto !important;
    width: 200px !important;
    max-width: 80% !important;
    transform: rotate(-2deg) !important;
    position: relative !important;
    backdrop-filter: blur(2px) !important;
    display: block !important;
    clear: both !important;
    /* Ripped tape edges on left and right */
    clip-path: polygon(
        0% 0%, 100% 0%, 
        97% 10%, 100% 20%, 96% 30%, 100% 40%, 98% 50%, 100% 60%, 97% 70%, 100% 80%, 98% 90%, 100% 100%,
        0% 100%,
        3% 90%, 0% 80%, 4% 70%, 0% 60%, 2% 50%, 0% 40%, 3% 30%, 0% 20%, 2% 10%
    ) !important;
    /* Fallback filter for shadow since clip-path cuts off box-shadow */
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.15)) !important;
}

/* Hide internal lines or elements generated by page builders (like Colibri) */
.zine-divider > *, .zine-divider-tape > * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Eradicate builder pseudo-elements that might draw extra lines */
.zine-divider::before, .zine-divider::after,
.zine-divider-tape::before, .zine-divider-tape::after {
    display: none !important;
    content: none !important;
}

/* =========================================
   FAQ ZINE DIRECTORY
   ========================================= */
.faq-block {
    background: #fff;
    border: 3px solid #000;
    box-shadow: 10px 10px 0px #000;
    padding: 40px;
    margin: 40px auto 30px;
    width: 90%;
    max-width: 1200px;
    box-sizing: border-box;
    position: relative;
    transform: rotate(-0.5deg);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Space Mono', monospace; /* Typewriter feel */
}

.faq-block:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 12px 12px 0px #000;
}

/* The question looks like a cut-out piece of Dymo label maker tape */
.faq-block h3 {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 8px 15px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: 'Asap', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    transform: rotate(-1.5deg);
    position: relative;
}

/* Add a bit of randomness to the tape strips */
.faq-block h3:nth-of-type(even) {
    transform: rotate(1deg);
}

.faq-block h3:first-child {
    margin-top: 0;
}

/* The answer text */
.faq-block p, .faq-block div, .faq-block span, .faq-block ul, .faq-block ol, .faq-block li {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 30px;
    /* Subtle photocopy bleed effect */
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.1);
}

/* Ensure the last paragraph or list doesn't have huge margin at the bottom of the paper */
.faq-block p:last-child, .faq-block ul:last-child, .faq-block ol:last-child {
    margin-bottom: 0 !important;
}

.faq-block li {
    margin-bottom: 10px !important;
}

/* Links in FAQ text */
.faq-block a {
    color: #E23D23;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    font-weight: bold;
    text-shadow: none;
    transition: all 0.2s;
}

.faq-block a:hover {
    color: #fff;
    background-color: #E23D23;
    text-decoration: none;
}

/* =========================================
   PAPER CARD EFFECT
   ========================================= */
.zine-paper-card {
    background-image: url('../images/zine-paper-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #fdfbf7 !important; /* Warm paper off-white */
    box-shadow: 3px 5px 15px rgba(0,0,0,0.12), inset 0 0 20px rgba(0,0,0,0.02) !important;
    /* Irregular border-radius creates a hand-cut paper look instead of a perfect rectangle */
    border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px !important; 
    border: 1px solid rgba(0,0,0,0.08) !important;
    padding: 45px 40px !important;
    margin: 10px 0 20px 0 !important;
    position: relative;
    z-index: 1;
}

.zine-tape-corners,
.zine-tape-alt-corners,
.zine-tape-top-bottom,
.zine-tape-left-right,
.zine-tape-left,
.zine-tape-right,
.zine-tape-top,
.zine-tape-bottom,
.zine-tape-top-left,
.zine-tape-top-right,
.zine-tape-bottom-left,
.zine-tape-bottom-right {
    position: relative;
    overflow: visible !important;
}

/* Base Tape Effect (Realistic) */
.zine-tape-corners::before, .zine-tape-corners::after,
.zine-tape-alt-corners::before, .zine-tape-alt-corners::after,
.zine-tape-top-bottom::before, .zine-tape-top-bottom::after,
.zine-tape-left-right::before, .zine-tape-left-right::after,
.faq-block::before, .faq-block::after,
.zine-tape-left::after, .zine-tape-right::after,
.zine-tape-top::after, .zine-tape-bottom::after,
.zine-tape-top-left::after, .zine-tape-top-right::after,
.zine-tape-bottom-left::after, .zine-tape-bottom-right::after {
    content: '';
    position: absolute;
    background: linear-gradient(110deg, rgba(238, 232, 220, 0.5) 0%, rgba(250, 245, 235, 0.8) 30%, rgba(235, 225, 215, 0.4) 70%, rgba(245, 240, 230, 0.6) 100%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15), inset 0 0 2px rgba(0,0,0,0.05);
    backdrop-filter: blur(3px) sepia(20%);
    -webkit-backdrop-filter: blur(3px) sepia(20%);
    /* Irregular torn edges */
    border-radius: 2px 4px 2px 5px / 255px 3px 225px 3px;
    z-index: 10;
    pointer-events: none;
}

/* FAQ Block & zine-tape-corners (Top Right) */
.faq-block::before,
.zine-tape-corners::before,
.zine-tape-top-right::after {
    top: -8px;
    right: 10px;
    width: 60px;
    height: 25px;
    transform: rotate(5deg);
}

/* FAQ Block & zine-tape-corners (Bottom Left) */
.faq-block::after,
.zine-tape-corners::after,
.zine-tape-bottom-left::after {
    left: -10px;
    bottom: 25px;
    width: 25px;
    height: 70px;
    transform: rotate(-4deg);
}

/* Tape Top Left & Alt Corners (Top Left) */
.zine-tape-alt-corners::before,
.zine-tape-top-left::after {
    top: -8px;
    left: 10px;
    width: 60px;
    height: 25px;
    transform: rotate(-5deg);
}

/* Tape Bottom Right & Alt Corners (Bottom Right) */
.zine-tape-alt-corners::after,
.zine-tape-bottom-right::after {
    right: -10px;
    bottom: 25px;
    width: 25px;
    height: 70px;
    transform: rotate(4deg);
}

/* Tape Left & Left-Right Combo */
.zine-tape-left-right::before,
.zine-tape-left::after {
    left: -12px;
    top: 50%;
    width: 25px;
    height: 70px;
    transform: translateY(-50%) rotate(-2deg);
}

/* Tape Right & Left-Right Combo */
.zine-tape-left-right::after,
.zine-tape-right::after {
    right: -12px;
    top: 50%;
    width: 25px;
    height: 70px;
    transform: translateY(-50%) rotate(3deg);
}

/* Tape Top & Top-Bottom Combo */
.zine-tape-top-bottom::before,
.zine-tape-top::after {
    top: -12px;
    left: 50%;
    width: 70px;
    height: 25px;
    transform: translateX(-50%) rotate(-2deg);
}

/* Tape Bottom & Top-Bottom Combo */
.zine-tape-top-bottom::after,
.zine-tape-bottom::after {
    bottom: -12px;
    left: 50%;
    width: 70px;
    height: 25px;
    transform: translateX(-50%) rotate(2deg);
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    .faq-block {
        padding: 20px;
        margin: 20px auto;
        width: 100%;
        max-width: calc(100% - 20px);
        box-sizing: border-box;
    }
    .faq-block h3 {
        margin-top: 15px;
    }
    .faq-block::before,
    .zine-tape-corners::before {
        right: 10px;
        width: 40px;
    }
    .faq-block::after,
    .zine-tape-corners::after {
        left: -5px;
        bottom: 20px;
        height: 50px;
    }
}


/* ------------------------------------
   Immersive Weather Engine (Safe Tints)
--------------------------------------- */
/* These rules target the builder's built-in background overlay.
   Because it is a native builder element, it cannot cover text. */

body.mixtape-weather-rain .h-hero .overlay-image-layer {
    background-color: rgba(20, 40, 70, 0.6) !important;
    backdrop-filter: saturate(0.8);
    transition: all 2s ease;
}

body.mixtape-weather-snow .h-hero .overlay-image-layer {
    background-color: rgba(200, 220, 255, 0.3) !important;
    backdrop-filter: brightness(1.1);
    transition: all 2s ease;
}

body.mixtape-weather-clear .h-hero .overlay-image-layer {
    background-color: rgba(240, 140, 0, 0.25) !important;
    backdrop-filter: saturate(1.2);
    transition: all 2s ease;
}

body.mixtape-weather-clouds .h-hero .overlay-image-layer {
    background-color: rgba(50, 60, 70, 0.5) !important;
    backdrop-filter: grayscale(30%);
    transition: all 2s ease;
}

/* ==========================================================================
   COLIBRI BLOG OVERRIDES - ZINE AESTHETIC
   ========================================================================== */

/* The main post container */
.post.type-post {
    background-color: var(--mixtape-bg-color, #EAE0D6);
    border: var(--zine-border-width, 4px) solid var(--zine-border-color, #0C0C0C);
    box-shadow: var(--zine-shadow-offset, 6px) var(--zine-shadow-offset, 6px) 0 var(--zine-shadow-color, #0C0C0C);
    margin-bottom: 40px !important;
    padding: 20px;
    transition: transform 0.1s, box-shadow 0.1s;
}

/* Hover state for the whole card */
.post.type-post:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--zine-shadow-color, #0C0C0C);
}

/* Post Thumbnail */
.colibri-post-thumbnail img {
    border: var(--zine-border-width, 4px) solid var(--zine-border-color, #0C0C0C);
    width: 100%;
    height: auto;
    display: block;
}

/* Post Title */
.h-blog-title h4, .h-blog-title a {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--mixtape-text-color, #0C0C0C) !important;
    background: transparent !important;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    text-decoration: none !important;
}

.post.type-post:hover .h-blog-title h4,
.h-blog-title a:hover h4 {
    color: #000 !important;
    text-decoration: underline !important;
}

/* Category & Meta data */
.h-blog-categories a, .h-blog-meta, .h-blog-meta a {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--zine-border-color, #0C0C0C) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
}

.h-blog-categories a {
    background: #0C0C0C !important;
    color: #fff !important;
    padding: 4px 10px;
    display: inline-block;
    margin-bottom: 15px;
    border: 2px solid #000;
}

.h-blog-categories a:hover {
    background: var(--mixtape-accent-color, #E23D23) !important;
    border-color: var(--mixtape-accent-color, #E23D23);
    color: #000 !important;
}

.h-blog-meta a:hover {
    color: var(--mixtape-accent-color, #E23D23) !important;
    text-decoration: underline !important;
}

/* Excerpt */
.colibri-post-excerpt {
    font-family: var(--zine-font-body, 'Asap', sans-serif);
    color: var(--zine-border-color, #0C0C0C);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Read More Button */
.h-button__outer a.h-button {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    background-color: var(--mixtape-accent-color, #E23D23) !important;
    color: #000 !important;
    border: var(--zine-border-width, 4px) solid var(--zine-border-color, #0C0C0C) !important;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    box-shadow: 4px 4px 0 var(--zine-shadow-color, #0C0C0C) !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    display: inline-flex !important;
    align-items: center;
    border-radius: 0 !important;
    text-decoration: none !important;
}

.h-button__outer a.h-button:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 var(--zine-shadow-color, #0C0C0C) !important;
}

.h-button__icon svg {
    fill: #000 !important;
    margin-left: 10px;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   COLIBRI SINGLE POST OVERRIDES - ZINE AESTHETIC
   ========================================================================== */

/* Post Content Typography */
.colibri-post-content {
    font-family: var(--zine-font-body, 'Asap', sans-serif);
    color: var(--zine-border-color, #0C0C0C);
    line-height: 1.6;
    font-size: 1.15rem;
    margin-top: 40px;
    margin-bottom: 40px;
}

.colibri-post-content h1, 
.colibri-post-content h2, 
.colibri-post-content h3 {
    font-family: var(--zine-font-heading, 'Asap', sans-serif);
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Single Post Labels (Categories: / Tags:) */
.h-text p {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 !important;
    padding-right: 15px;
    letter-spacing: 1px;
}

/* Tag Buttons */
.h-blog-tags span, 
.h-blog-tags a, 
.colibri-post-tag {
    font-family: var(--zine-font-heading, 'Asap', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: #000 !important;
    padding: 4px 10px !important;
    display: inline-block !important;
    border: 2px solid #000 !important;
    text-decoration: none !important;
    margin-bottom: 10px;
}

.h-blog-tags a:hover, 
.colibri-post-tag:hover {
    background: var(--mixtape-accent-color, #E23D23) !important;
    color: #000 !important;
}
/* Dark Button Variation (Matches Menu Links) */
.mixtape-btn-dark {
    display: inline-block;
    font-family: var(--zine-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--mixtape-bg-color);
    background-color: var(--mixtape-text-color);
    text-decoration: none;
    padding: 10px 20px;
    border: var(--zine-border-width) solid var(--zine-border-color);
    transition: all 0.2s ease;
    letter-spacing: 1px;
    box-shadow: 4px 4px 0 var(--mixtape-accent-color);
    cursor: pointer;
}

.mixtape-btn-dark:hover {
    color: var(--mixtape-text-color);
    background-color: var(--mixtape-accent-color);
    transform: translateY(-3px);
    box-shadow: 6px 6px 0 var(--mixtape-text-color);
}

/* ------------------------------------
   Main Header Navigation (Zine Style)
--------------------------------------- */

/* Main Menu Container */
.colibri-menu-container > ul#menu-main-menu {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 0 !important;
}

/* Top-level Links */
.colibri-menu-container > ul#menu-main-menu > li {
    margin: 5px !important;
}

.colibri-menu-container > ul#menu-main-menu > li > a {
    font-family: var(--zine-font-heading) !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    color: var(--mixtape-text-color) !important;
    background: var(--mixtape-bg-color) !important;
    border: 3px solid var(--mixtape-text-color) !important;
    padding: 5px 12px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 2px 2px 0px var(--mixtape-accent-color) !important;
}

/* Ensure the header sits above the Riso overlay */
.h-section-global-header,
[data-colibri-component="header"],
[data-colibri-id="header"] {
    position: relative;
    z-index: 9999 !important;
}

/* Ensure icons inherit color and are visible by default */
.colibri-menu-container > ul#menu-main-menu > li > a svg,
.colibri-menu-container > ul#menu-main-menu > li > a i {
    color: var(--mixtape-text-color) !important;
    fill: var(--mixtape-text-color) !important;
    stroke: var(--mixtape-text-color) !important;
}

/* Zine Hover Effect for Top Links (Invert to Black) */
.colibri-menu-container > ul#menu-main-menu > li > a:hover,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-item > a,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-ancestor > a {
    background: var(--mixtape-text-color) !important;
    border: 3px solid var(--mixtape-text-color) !important;
    box-shadow: 4px 4px 0px var(--mixtape-accent-color) !important;
    transform: rotate(-2deg) scale(1.05) !important;
    color: var(--mixtape-bg-color) !important;
    z-index: 10;
}

/* Zine Hover Effect for Top Link Icons (Invert to Beige) */
.colibri-menu-container > ul#menu-main-menu > li > a:hover svg,
.colibri-menu-container > ul#menu-main-menu > li > a:hover i,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-item > a svg,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-item > a i,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-ancestor > a svg,
.colibri-menu-container > ul#menu-main-menu > li.current-menu-ancestor > a i {
    color: var(--mixtape-bg-color) !important;
    fill: var(--mixtape-bg-color) !important;
    stroke: var(--mixtape-bg-color) !important;
}

/* Sub-menu (Dropdowns) Zine Styling */
.colibri-menu-container ul#menu-main-menu ul.sub-menu {
    background: var(--mixtape-bg-color) !important;
    border: 4px solid var(--mixtape-text-color) !important;
    box-shadow: 8px 8px 0px var(--mixtape-accent-color) !important;
    padding: 10px !important;
    margin-top: 0 !important; /* Fixed gap issue so menu doesn't disappear */
    min-width: 220px !important;
    z-index: 9999 !important;
}

/* Prevent the last dropdown from getting cut off on the right edge */
.colibri-menu-container ul#menu-main-menu > li:last-child ul.sub-menu {
    right: 0 !important;
    left: auto !important;
}

/* Sub-menu Links */
.colibri-menu-container ul#menu-main-menu ul.sub-menu li {
    margin: 5px 0 !important;
    border-bottom: 2px dashed var(--mixtape-text-color) !important;
}

.colibri-menu-container ul#menu-main-menu ul.sub-menu li:last-child {
    border-bottom: none !important;
}

.colibri-menu-container ul#menu-main-menu ul.sub-menu li a {
    font-family: var(--zine-font-heading) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--mixtape-text-color) !important;
    text-transform: uppercase !important;
    padding: 8px 10px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.colibri-menu-container ul#menu-main-menu ul.sub-menu li a:hover,
.colibri-menu-container ul#menu-main-menu ul.sub-menu li.current-menu-item > a {
    color: var(--mixtape-bg-color) !important;
    background: var(--mixtape-text-color) !important;
    padding-left: 15px !important;
}

/* Zine Hamburger Menu */
.h-mobile-menu .h-hamburger-button {
    background: var(--mixtape-bg-color) !important;
    border: 3px solid var(--mixtape-text-color) !important;
    padding: 10px !important;
    box-shadow: 4px 4px 0px var(--mixtape-accent-color) !important;
    transform: rotate(2deg) !important;
    transition: all 0.2s ease !important;
    align-items: center !important;
    justify-content: center !important;
}

.h-mobile-menu .h-hamburger-button:hover {
    transform: rotate(-2deg) scale(1.1) !important;
    background: var(--mixtape-text-color) !important;
}

.h-mobile-menu .h-hamburger-button svg {
    fill: var(--mixtape-text-color) !important;
    width: 24px !important;
    height: 24px !important;
    transition: all 0.2s ease !important;
}

.h-mobile-menu .h-hamburger-button:hover svg {
    fill: var(--mixtape-accent-color) !important;
}

/* Mixtape Events / Bands Global Overrides */
.mixtape-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 0;
}
.mixtape-event-card {
    background: var(--mixtape-bg-color);
    border: var(--zine-border-width) solid var(--zine-border-color);
    box-shadow: 6px 6px 0 var(--zine-shadow-color);
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mixtape-event-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--zine-shadow-color);
}

/* Filter Bar */
.mixtape-filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.mixtape-filter-btn {
    background: transparent;
    border: 2px solid var(--zine-border-color);
    padding: 8px 16px;
    font-family: var(--zine-font-heading);
    font-weight: 700;
    cursor: pointer;
}
.mixtape-filter-btn.active {
    background: var(--mixtape-text-color);
    color: var(--mixtape-bg-color);
}


/* ------------------------------------
   Responsive Zine Stickers (Gutenberg & Colibri)
--------------------------------------- */
/* For Gutenberg block style */
.is-style-zine-sticker img,
.is-style-zine-sticker {
    mix-blend-mode: multiply !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    margin: -15px; /* Slight overlap for that pasted-on feel */
}

/* For Colibri or other page builders - apply this class to any Image element */
.mixtape-sticker {
    mix-blend-mode: multiply !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   HAND-DRAWN GRAPHICS DESIGN OVERRIDES
   Overrides the squared skewed design when enabled in admin
   ========================================================================== */
body.mixtape-style-handdrawn .zine-bg-accent,
body.mixtape-style-handdrawn .zine-bg-dark,
body.mixtape-style-handdrawn .zine-bg-base,
body.mixtape-style-handdrawn .zine-bg-black,
body.mixtape-style-handdrawn .zine-bg-white,
body.mixtape-style-handdrawn .zine-bg-yellow,
body.mixtape-style-handdrawn .zine-bg-red,
body.mixtape-style-handdrawn .zine-bg-teal,
body.mixtape-style-handdrawn .h-button,
body.mixtape-style-handdrawn .colibri-button,
body.mixtape-style-handdrawn .elementor-button,
body.mixtape-style-handdrawn .mixtape-btn,
body.mixtape-style-handdrawn button,
body.mixtape-style-handdrawn a.button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.mixtape-style-handdrawn .zine-bg-accent::after,
body.mixtape-style-handdrawn .zine-bg-dark::after,
body.mixtape-style-handdrawn .zine-bg-base::after,
body.mixtape-style-handdrawn .zine-bg-black::after,
body.mixtape-style-handdrawn .zine-bg-white::after,
body.mixtape-style-handdrawn .h-button::after,
body.mixtape-style-handdrawn .colibri-button::after {
    display: none !important;
}

/* ==========================================================================
   BUILDER COMPATIBILITY FIXES
   ========================================================================== */
/* Disable CSS transforms while inside the page builder. 
   Transforms (like rotate) create a new local coordinate system which breaks 
   the 'position: fixed/absolute' calculation for inline builder popups (like the URL editor). */
body.kubio .faq-block, body.colibri-builder .faq-block, body.customize-preview .faq-block, body.elementor-editor-active .faq-block, body.wp-customizer .faq-block,
body.kubio .faq-block:hover, body.colibri-builder .faq-block:hover, body.customize-preview .faq-block:hover, body.elementor-editor-active .faq-block:hover, body.wp-customizer .faq-block:hover,
body.kubio .faq-block h3, body.colibri-builder .faq-block h3, body.customize-preview .faq-block h3, body.elementor-editor-active .faq-block h3, body.wp-customizer .faq-block h3,
body.kubio .zine-ripped-section, body.colibri-builder .zine-ripped-section, body.customize-preview .zine-ripped-section, body.elementor-editor-active .zine-ripped-section, body.wp-customizer .zine-ripped-section,
body.kubio .zine-tape-corners, body.colibri-builder .zine-tape-corners, body.customize-preview .zine-tape-corners, body.elementor-editor-active .zine-tape-corners, body.wp-customizer .zine-tape-corners,
body.kubio .zine-tape-top-bottom, body.colibri-builder .zine-tape-top-bottom, body.customize-preview .zine-tape-top-bottom, body.elementor-editor-active .zine-tape-top-bottom, body.wp-customizer .zine-tape-top-bottom,
body.kubio .mixtape-live-screen, body.colibri-builder .mixtape-live-screen, body.customize-preview .mixtape-live-screen, body.elementor-editor-active .mixtape-live-screen, body.wp-customizer .mixtape-live-screen,
body.kubio .applications-card, body.colibri-builder .applications-card, body.customize-preview .applications-card, body.elementor-editor-active .applications-card, body.wp-customizer .applications-card,
body.kubio .zine-tilt-left, body.colibri-builder .zine-tilt-left, body.customize-preview .zine-tilt-left, body.elementor-editor-active .zine-tilt-left, body.wp-customizer .zine-tilt-left,
body.kubio .zine-tilt-right, body.colibri-builder .zine-tilt-right, body.customize-preview .zine-tilt-right, body.elementor-editor-active .zine-tilt-right, body.wp-customizer .zine-tilt-right,
body.kubio .zine-tilt-slight-left, body.colibri-builder .zine-tilt-slight-left, body.customize-preview .zine-tilt-slight-left, body.elementor-editor-active .zine-tilt-slight-left, body.wp-customizer .zine-tilt-slight-left,
body.kubio .zine-tilt-slight-right, body.colibri-builder .zine-tilt-slight-right, body.customize-preview .zine-tilt-slight-right, body.elementor-editor-active .zine-tilt-slight-right, body.wp-customizer .zine-tilt-slight-right {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}


/* Prevent pseudo-elements from crashing Colibri's inline Quill editor */
body.customize-preview .faq-block::before,
body.customize-preview .faq-block::after,
body.colibri-builder .faq-block::before,
body.colibri-builder .faq-block::after,
body.kubio .faq-block::before,
body.kubio .faq-block::after {
    display: none !important;
}