/**
 * MEPO SVG Dark Mode Ondersteuning
 * Voor optimale compatibiliteit met iOS en alle browsers
 */

/* Container voor MEPO SVG */
.mepo-container {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.mepo-svg {
    max-width: 300px;
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

/* Default light mode kleuren */
.mepo-blue {
    fill: #0C609B;
    transition: fill 0.3s ease;
}

.mepo-red {
    fill: #BD332F;
    transition: fill 0.3s ease;
}

/* Dark mode kleuren via body class (meest betrouwbaar) */
.dark-mode .mepo-blue {
    fill: #4AB8ED;
}

.dark-mode .mepo-red {
    fill: #FF706B;
}

/* Fallback voor pure CSS dark mode (zonder JavaScript) */
@media (prefers-color-scheme: dark) {
    .mepo-blue {
        fill: #4AB8ED;
    }
    
    .mepo-red {
        fill: #FF706B;
    }
}

/* Override CSS als JS actief is - priority systeem */
.js-dark-detection .mepo-blue {
    fill: #0C609B;
}

.js-dark-detection .mepo-red {
    fill: #BD332F;
}

.js-dark-detection.dark-mode .mepo-blue {
    fill: #4AB8ED;
}

.js-dark-detection.dark-mode .mepo-red {
    fill: #FF706B;
}

/* Responsive aanpassingen */
@media screen and (max-width: 768px) {
    .mepo-svg {
        max-width: 250px;
    }
}

@media screen and (max-width: 480px) {
    .mepo-svg {
        max-width: 200px;
    }
    
    .mepo-container {
        padding: 15px 0;
    }
}