/**
 * CSS Compatibility Layer for Migration
 * Maps old classes to new BEM classes
 * This ensures backward compatibility during the migration
 */

/* =================================
   HERO COMPATIBILITY MAPPINGS
   ================================= */

/* Service pages heroes */
.cybersecurity-hero-section,
.service-hero,
.diensten-hero,
.webhosting-hero {
    /* Inherit from new hero--service class */
}

/* Generic page heroes */
.page-hero,
.about-hero,
.contact-hero {
    /* Inherit from base hero class */
}

/* Map old hero buttons to new button system */
.hero-btn {
    /* Maps to base .btn */
}

.hero-btn-primary,
.cta-btn-primary,
.hero-cta-button {
    /* Maps to .btn--primary */
}

.hero-btn-secondary,
.cta-btn-secondary {
    /* Maps to .btn--secondary */
}

/* =================================
   BUTTON COMPATIBILITY MAPPINGS
   ================================= */

/* Service page buttons */
.service-btn,
.diensten-button,
.cybersecurity-cta {
    /* Maps to .btn--primary */
}

/* Contact buttons */
.contact-submit,
.form-submit-btn {
    /* Maps to .btn--primary */
}

/* Ghost/outline buttons */
.outline-btn,
.ghost-button {
    /* Maps to .btn--ghost */
}

/* =================================
   CARD COMPATIBILITY MAPPINGS
   ================================= */

/* Service cards */
.service-card,
.dienst-card,
.feature-box {
    /* Maps to .card--service */
}

/* Pricing cards */
.pricing-box,
.tarief-card,
.price-card {
    /* Maps to .card--pricing */
}

/* Testimonial cards */
.testimonial-box,
.review-card {
    /* Maps to .card--testimonial */
}

/* =================================
   FORM COMPATIBILITY MAPPINGS
   ================================= */

/* Contact form elements */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    /* Maps to .form-control */
}

.contact-form label {
    /* Maps to .form-label */
}

.contact-form .form-group,
.wpcf7 .form-row {
    /* Maps to .form-group */
}

/* =================================
   GRID COMPATIBILITY MAPPINGS
   ================================= */

/* Old grid classes */
.services-grid,
.diensten-grid {
    /* Maps to .grid--cols-3 */
}

.two-column-layout {
    /* Maps to .grid--cols-2 */
}

.four-column-grid {
    /* Maps to .grid--cols-4 */
}

/* =================================
   CONTAINER COMPATIBILITY
   ================================= */

/* Old container classes */
.page-container,
.content-container {
    /* Maps to .container */
}

.narrow-container {
    /* Maps to .container--sm */
}

.wide-container {
    /* Maps to .container--xl */
}

/* =================================
   TYPOGRAPHY COMPATIBILITY
   ================================= */

/* Old heading classes */
.page-title,
.section-title {
    /* Inherits from h1/h2 typography */
}

.subtitle,
.page-subtitle {
    /* Maps to .hero__subtitle */
}

/* =================================
   JAVASCRIPT BRIDGE
   ================================= */

/* These classes are dynamically mapped via JavaScript
   but we provide CSS fallbacks for critical styles */

.btn:not([class*="btn--"]) {
    /* Default button styles for unmigrated buttons */
    background: var(--color-primary, #0077BE);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero:not([class*="hero--"]) {
    /* Default hero styles for unmigrated heroes */
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(135deg, #0077BE 0%, #00BFFF 100%);
}

.card:not([class*="card--"]) {
    /* Default card styles for unmigrated cards */
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* =================================
   IMPORTANT OVERRIDES
   ================================= */

/* These ensure new styles take precedence during migration */
.new-system-active {
    /* Marker class added by JavaScript to indicate new system is active */
}

/* Specificity helpers for migration period only */
body.css-migration-active .btn--primary {
    background: var(--gradient-cta) !important;
}

body.css-migration-active .hero--service {
    background: var(--hero-gradient-service) !important;
}

/* =================================
   UTILITY CLASSES COMPATIBILITY
   ================================= */

/* Spacing utilities */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }
.pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* =================================
   MIGRATION TRACKING
   ================================= */

/* Visual indicators for development only */
.migration-debug {
    position: relative;
}

.migration-debug::after {
    content: "OLD CLASS";
    position: absolute;
    top: 0;
    right: 0;
    background: orange;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    z-index: 9999;
    display: none; /* Hidden by default */
}

body.show-migration-debug .migration-debug::after {
    display: block;
}

/* =================================
   END OF COMPATIBILITY LAYER
   =================================
   This file will be removed after migration
   ================================= */