/**
 * MMX Page Builder - Custom CSS
 * 
 * Plaats hier je eigen CSS overrides.
 * Dit bestand wordt automatisch geladen als het bestaat.
 * 
 * Voorbeeld:
 * 
 * .navbar {
 *     background: #000 !important;
 * }
 * 
 * .btn-primary {
 *     background: linear-gradient(45deg, #ff6b6b, #ffa500) !important;
 * }
 */

/* Jouw custom CSS hier */

/* ============================================
   MMX HORIZONTALE NAVIGATIE - TRANSITIE SYSTEEM
   ============================================ */

/* Container setup */
.mmx-nav-horizontal main {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Basis pagina */
.mmx-page {
    position: relative;
    width: 100%;
    will-change: transform, opacity;
}

/* Tijdens transitie: beide pagina's naast elkaar */
.mmx-transitioning .mmx-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mmx-transitioning {
    min-height: 100vh;
}

/* === UITGAANDE PAGINA === */
.mmx-exit-to-left {
    animation: mmxSlideOutLeft 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.mmx-exit-to-right {
    animation: mmxSlideOutRight 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* === INKOMENDE PAGINA === */
.mmx-enter-from-right {
    transform: translateX(100%);
    opacity: 0;
}

.mmx-enter-from-left {
    transform: translateX(-100%);
    opacity: 0;
}

.mmx-page-active.mmx-page-incoming {
    animation: mmxSlideIn 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Specifieke richting voor inkomend */
.mmx-enter-from-right.mmx-page-incoming {
    animation: mmxSlideInFromRight 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.mmx-enter-from-left.mmx-page-incoming {
    animation: mmxSlideInFromLeft 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Correctie: de active class verwijdert de enter classes,
   dus we gebruiken de animatie op de incoming + active state */
.mmx-page-incoming.mmx-page-active:not(.mmx-enter-from-right):not(.mmx-enter-from-left) {
    transform: translateX(0);
    opacity: 1;
}

/* === KEYFRAMES === */
@keyframes mmxSlideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-40%);
        opacity: 0;
    }
}

@keyframes mmxSlideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(40%);
        opacity: 0;
    }
}

@keyframes mmxSlideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes mmxSlideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* === NAVBAR ACTIVE INDICATOR === */
.mmx-nav-horizontal .nav-menu a {
    position: relative;
}

.mmx-nav-horizontal .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--menu-active);
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    transform: translateX(-50%);
}

.mmx-nav-horizontal .nav-menu a.active::after,
.mmx-nav-horizontal .nav-menu a:hover::after {
    width: 80%;
}

/* === MOBIEL: HORIZONTALE NAV UITGESCHAKELD === */
@media (max-width: 767px) {
    .mmx-page {
        will-change: auto;
    }
    
    .mmx-transitioning .mmx-page {
        position: relative;
    }
    
    .mmx-exit-to-left,
    .mmx-exit-to-right,
    .mmx-enter-from-right,
    .mmx-enter-from-left,
    .mmx-page-active.mmx-page-incoming {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* === EDIT MODE: ALLES UITGESCHAKELD === */
.edit-mode .mmx-page {
    will-change: auto;
}

.edit-mode .mmx-exit-to-left,
.edit-mode .mmx-exit-to-right,
.edit-mode .mmx-enter-from-right,
.edit-mode .mmx-enter-from-left {
    animation: none;
    transform: none;
    opacity: 1;
}

/* ============================================
   MMX HERO — Grafisch, geen afbeelding
   ============================================ */
.mmx-hero {
    background: #0a0a0a;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 6rem 1rem 3rem;
}

.mmx-hero-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.mmx-hero-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(234,203,77,0.15), transparent);
}
.mmx-hero-line:nth-child(1) { right: 35%; animation: mmxLineFade 3s ease-in-out 1s infinite; }
.mmx-hero-line:nth-child(2) { right: 45%; animation: mmxLineFade 4s ease-in-out 1.5s infinite; }
.mmx-hero-line:nth-child(3) { right: 7%; animation: mmxLineFade 3.5s ease-in-out 2s infinite; }

@keyframes mmxLineFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.mmx-hero-text {
    position: relative;
    z-index: 3;
    padding: 0 7%;
    max-width: 60%;
}

.mmx-hero-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #eacb4d;
    margin-bottom: 1.25rem;
    opacity: 0;
    animation: mmxFadeUp 0.8s ease-out 0.8s forwards;
}

.mmx-hero-title {
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 0.95;
    color: #f7f6f2;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    opacity: 0;
    animation: mmxFadeUp 0.8s ease-out 1s forwards;
}
.mmx-hero-title span {
    display: block;
    color: #eacb4d;
    font-style: italic;
}

.mmx-hero-sub {
    font-size: 0.95rem;
    font-weight: 400;
    color: #888;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 0 2rem;
    opacity: 0;
    animation: mmxFadeUp 0.8s ease-out 1.2s forwards;
}

.mmx-hero-btn {
    display: inline-block;
    background: #eacb4d;
    color: #1a1a1a;
    padding: 0.9rem 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    animation: mmxFadeUp 0.8s ease-out 1.4s forwards;
}
.mmx-hero-btn:hover {
    background: #d4b45a;
    color: #1a1a1a;
    transform: translateY(-2px);
}

@keyframes mmxFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Balken in hero */
.mmx-hero-balk-top {
    position: absolute;
    right: 8%;
    top: 0;
    width: 14%;
    height: 55%;
    z-index: 2;
    opacity: 0;
    transform: translateY(-100%);
    animation: mmxHeroBar1 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
.mmx-hero-balk-bot {
    position: absolute;
    right: calc(8% + 14%);
    bottom: 0;
    width: 14%;
    height: 55%;
    z-index: 2;
    transform: scale(-1, -1) translateY(-100%);
    opacity: 0;
    animation: mmxHeroBar2 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes mmxHeroBar1 {
    to { transform: translateY(0); opacity: 1; }
}
@keyframes mmxHeroBar2 {
    to { transform: scale(-1, -1) translateY(0); opacity: 1; }
}

.mmx-hero-balk-top svg, .mmx-hero-balk-bot svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mmx-hero-logo {
    position: absolute;
    bottom: 2rem;
    left: 7%;
    opacity: 0.06;
    width: 180px;
    z-index: 1;
}

/* Mobiel */
@media (max-width: 767px) {
    .mmx-hero { min-height: 80vh; padding: 5rem 1.5rem 3rem; }
    .mmx-hero-text { max-width: 100%; padding: 0; }
    .mmx-hero-balk-top { width: 20%; right: 4%; }
    .mmx-hero-balk-bot { width: 20%; right: calc(4% + 20%); }
    .mmx-hero-logo { width: 120px; }
}

/* ============================================
   MMX SECTIE — Balk-animatie secties
   ============================================ */
.mmx-sect {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
    padding: 4rem 0;
}

/* Thema's */
.mmx-sect-light { background: #f7f6f2; }
.mmx-sect-dark { background: #1a1a1a; }
.mmx-sect-gold { background: #eacb4d; }

/* Achtergrondtekst */
.mmx-sect-bg-text {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    font-size: clamp(4rem, 9vw, 7.5rem);
    font-weight: 900;
    font-style: italic;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.85;
    pointer-events: none;
    z-index: 1;
}
.mmx-sect-light .mmx-sect-bg-text { color: rgba(0,0,0,0.04); right: -2%; }
.mmx-sect-dark .mmx-sect-bg-text { color: rgba(255,255,255,0.03); }
.mmx-sect-gold .mmx-sect-bg-text { color: rgba(0,0,0,0.06); }

/* Layout: tekst links */
.mmx-sect-text-left .mmx-sect-bg-text { right: -2%; }
.mmx-sect-text-left .mmx-sect-content { padding: 0 0 0 8%; width: 55%; }

/* Layout: tekst rechts */
.mmx-sect-text-right .mmx-sect-bg-text { left: -2%; }
.mmx-sect-text-right .mmx-sect-content { padding: 0 8% 0 0; width: 55%; margin-left: auto; text-align: right; }

/* Content styling */
.mmx-sect-content {
    position: relative;
    z-index: 3;
}
.mmx-sect-content h2 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
.mmx-sect-light .mmx-sect-content h2 { color: #1a1a1a; }
.mmx-sect-dark .mmx-sect-content h2 { color: #f7f6f2; }
.mmx-sect-gold .mmx-sect-content h2 { color: #1a1a1a; }

.mmx-sect-prose { font-size: 0.9rem; line-height: 1.7; }
.mmx-sect-prose p { margin: 0 0 0.75rem; }
.mmx-sect-light .mmx-sect-prose { color: #555; }
.mmx-sect-dark .mmx-sect-prose { color: #999; }
.mmx-sect-gold .mmx-sect-prose { color: rgba(0,0,0,0.6); }

.mmx-sect-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.mmx-sect-prose li { margin-bottom: 0.4rem; }
.mmx-sect-dark .mmx-sect-prose strong { color: #f7f6f2; }

/* Knoppen */
.mmx-sect-btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 1rem;
    transition: all 0.3s ease;
}
.mmx-sect-btn-light { background: #1a1a1a; color: #f7f6f2; }
.mmx-sect-btn-light:hover { background: #333; color: #f7f6f2; transform: translateY(-2px); }
.mmx-sect-btn-dark { background: #eacb4d; color: #1a1a1a; }
.mmx-sect-btn-dark:hover { background: #d4b45a; color: #1a1a1a; transform: translateY(-2px); }
.mmx-sect-btn-gold { background: #1a1a1a; color: #eacb4d; }
.mmx-sect-btn-gold:hover { background: #000; color: #eacb4d; transform: translateY(-2px); }

/* ── BALKEN ── */
.mmx-bars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.mmx-bar-top, .mmx-bar-bot {
    position: absolute;
    width: 14%;
    height: 50%;
}
.mmx-bar-top svg, .mmx-bar-bot svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Balk positie: tekst links → balken rechts */
.mmx-sect-text-left .mmx-bar-top { top: 0; right: 22%; }
.mmx-sect-text-left .mmx-bar-bot { bottom: 0; right: 36%; transform: scale(-1, -1); }

/* Balk positie: tekst rechts → balken links */
.mmx-sect-text-right .mmx-bar-top { top: 0; left: 22%; transform: scaleX(-1); }
.mmx-sect-text-right .mmx-bar-bot { bottom: 0; left: 36%; transform: scaleY(-1); }

/* Animatie: initieel verborgen */
.mmx-bars-horizontal .mmx-bar-top,
.mmx-bars-horizontal .mmx-bar-bot,
.mmx-bars-vertical .mmx-bar-top,
.mmx-bars-vertical .mmx-bar-bot {
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Horizontale animatie: van links/rechts */
.mmx-sect-text-left .mmx-bars-horizontal .mmx-bar-top { transform: translateX(120%); }
.mmx-sect-text-left .mmx-bars-horizontal .mmx-bar-bot { transform: scale(-1, -1) translateX(120%); }
.mmx-sect-text-right .mmx-bars-horizontal .mmx-bar-top { transform: scaleX(-1) translateX(120%); }
.mmx-sect-text-right .mmx-bars-horizontal .mmx-bar-bot { transform: scaleY(-1) translateX(-120%); }

/* Verticale animatie: van boven/onder */
.mmx-sect-text-left .mmx-bars-vertical .mmx-bar-top { transform: translateY(-120%); }
.mmx-sect-text-left .mmx-bars-vertical .mmx-bar-bot { transform: scale(-1, -1) translateY(-120%); }
.mmx-sect-text-right .mmx-bars-vertical .mmx-bar-top { transform: scaleX(-1) translateY(-120%); }
.mmx-sect-text-right .mmx-bars-vertical .mmx-bar-bot { transform: scaleY(-1) translateY(120%); }

/* Geanimeerd = zichtbaar op eindpositie */
.mmx-sect.mmx-animated .mmx-bar-top,
.mmx-sect.mmx-animated .mmx-bar-bot {
    opacity: 1;
}
.mmx-sect-text-left.mmx-animated .mmx-bars-horizontal .mmx-bar-top,
.mmx-sect-text-left.mmx-animated .mmx-bars-vertical .mmx-bar-top { transform: translateX(0) translateY(0); }
.mmx-sect-text-left.mmx-animated .mmx-bars-horizontal .mmx-bar-bot,
.mmx-sect-text-left.mmx-animated .mmx-bars-vertical .mmx-bar-bot { transform: scale(-1, -1) translateX(0) translateY(0); }
.mmx-sect-text-right.mmx-animated .mmx-bars-horizontal .mmx-bar-top,
.mmx-sect-text-right.mmx-animated .mmx-bars-vertical .mmx-bar-top { transform: scaleX(-1) translateX(0) translateY(0); }
.mmx-sect-text-right.mmx-animated .mmx-bars-horizontal .mmx-bar-bot,
.mmx-sect-text-right.mmx-animated .mmx-bars-vertical .mmx-bar-bot { transform: scaleY(-1) translateX(0) translateY(0); }

/* Content fade-in */
.mmx-sect .mmx-sect-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.mmx-sect.mmx-animated .mmx-sect-content {
    opacity: 1;
    transform: translateY(0);
}

/* Mobiel: vereenvoudigd */
@media (max-width: 767px) {
    .mmx-sect { min-height: auto; padding: 3rem 0; }
    .mmx-sect-text-left .mmx-sect-content,
    .mmx-sect-text-right .mmx-sect-content {
        width: 100%;
        padding: 0 1.5rem;
        text-align: left;
        margin-left: 0;
    }
    .mmx-bar-top, .mmx-bar-bot { width: 20%; }
    .mmx-sect-text-left .mmx-bar-top { right: 4%; }
    .mmx-sect-text-left .mmx-bar-bot { right: 24%; }
    .mmx-sect-text-right .mmx-bar-top { left: 4%; }
    .mmx-sect-text-right .mmx-bar-bot { left: 24%; }
    .mmx-sect-bg-text { font-size: 3rem; }
    .mmx-sect .mmx-sect-content { opacity: 1; transform: none; }
    .mmx-sect .mmx-bar-top, .mmx-sect .mmx-bar-bot { opacity: 0.6; }
    .mmx-sect.mmx-animated .mmx-bar-top, .mmx-sect.mmx-animated .mmx-bar-bot { opacity: 0.6; }
}