/**
 * MNABB Theme - Custom Additional Styles
 *
 * @package MNABB_Theme
 */

/* =============================================
   ELEMENTOR PAGE OVERRIDES
   ============================================= */
.elementor-page .mn-site-content > .mn-container {
    max-width: 100%;
    padding: 0;
}

.elementor-page .mn-content-sidebar {
    gap: 0;
}

/* =============================================
   PRELOADER (Optional)
   ============================================= */
.mn-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mn-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mn-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.mn-preloader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--mn-gray-200);
    border-top-color: var(--mn-primary);
    border-radius: 50%;
    animation: mnSpin 0.8s linear infinite;
}

@keyframes mnSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes mnFadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mn-post-card {
    animation: mnFadeInUp 0.6s ease forwards;
    opacity: 0;
}

.mn-posts-grid .mn-post-card:nth-child(1) { animation-delay: 0.05s; }
.mn-posts-grid .mn-post-card:nth-child(2) { animation-delay: 0.1s; }
.mn-posts-grid .mn-post-card:nth-child(3) { animation-delay: 0.15s; }
.mn-posts-grid .mn-post-card:nth-child(4) { animation-delay: 0.2s; }
.mn-posts-grid .mn-post-card:nth-child(5) { animation-delay: 0.25s; }
.mn-posts-grid .mn-post-card:nth-child(6) { animation-delay: 0.3s; }

/* =============================================
   INDUSTRIAL DESIGN ELEMENTS
   ============================================= */

/* Diagonal section divider */
.mn-diagonal-top {
    position: relative;
}

.mn-diagonal-top::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: inherit;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Section accent line */
.mn-section-accent {
    display: inline-block;
    width: 50px;
    height: 4px;
    background: var(--mn-primary);
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Industrial pattern background */
.mn-pattern-bg {
    background-image:
        linear-gradient(30deg, var(--mn-gray-100) 12%, transparent 12.5%, transparent 87%, var(--mn-gray-100) 87.5%, var(--mn-gray-100)),
        linear-gradient(150deg, var(--mn-gray-100) 12%, transparent 12.5%, transparent 87%, var(--mn-gray-100) 87.5%, var(--mn-gray-100)),
        linear-gradient(30deg, var(--mn-gray-100) 12%, transparent 12.5%, transparent 87%, var(--mn-gray-100) 87.5%, var(--mn-gray-100)),
        linear-gradient(150deg, var(--mn-gray-100) 12%, transparent 12.5%, transparent 87%, var(--mn-gray-100) 87.5%, var(--mn-gray-100)),
        linear-gradient(60deg, rgba(0,0,0,0.02) 25%, transparent 25.5%, transparent 75%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02)),
        linear-gradient(60deg, rgba(0,0,0,0.02) 25%, transparent 25.5%, transparent 75%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02));
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}